Add next branch to use latest react-admin 3.0.0.beta

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "ra-data-firestore-client",
-  "version": "0.1.12",
+  "version": "0.2.1",
   "description": "Firestore Data Provider for react-admin",
-  "main": "build/index.js",
+  "main": "src/lib/index.js",
   "jsnext:main": "es/index.js",
   "module": "es/index.js",
   "directories": {
@@ -27,7 +27,8 @@
     "demo": "node scripts/start.js",
     "init": "npm run build && npm link && npm link ra-data-firestore-client",
     "reset": "rm -rf node_modules && rm -rf package-lock.json && npm install && npm run init",
-    "start": "concurrently --kill-others \"npm run build:watch\" \"npm run app-start\""
+    "start": "concurrently --kill-others \"npm run build:watch\" \"npm run demo\"",
+    "dev":"react-scripts start"
   },
   "author": "Rafal Zawadzki <[email protected]> (http://rafalzawadzki.com/)",
   "license": "ISC",
@@ -93,9 +94,9 @@
   "dependencies": {
     "firebase": "^6.6.1",
     "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "react-admin": "^2.9.6",
-    "react-dom": "^16.9.0",
+    "react": "^16.10.2",
+    "react-admin": "3.0.0-beta.0",
+    "react-dom": "^16.10.2",
     "sort-by": "^1.2.0"
   }
 }

src/demo/App.js

@@ -1,20 +1,27 @@
 import React from 'react';
 import { Admin, Resource } from 'react-admin';
-import { RestProvider, AuthProvider, base64Uploader } from '../lib';
+import {
+  RestProvider,
+  AuthProvider,
+  // base64Uploader,
+  storageUploader
+} from '../lib';
 
-import { PostList, PostEdit, PostCreate } from './Posts';
-import { UserList, UserEdit, UserCreate } from './Users';
+import { ArticleList, ArticleEdit, ArticleCreate } from './Articles';
 
 const firebaseConfig = {
-  apiKey: 'AIzaSyASpb1daoPZdpzY_-d1mkzgO-sxoBw6i9o',
-  authDomain: 'react-admin-firestore-client.firebaseapp.com',
-  databaseURL: 'https://react-admin-firestore-client.firebaseio.com',
-  projectId: 'react-admin-firestore-client',
-  storageBucket: '',
-  messagingSenderId: '796768771332'
+  apiKey: 'AIzaSyAF0MOEZ6GppP620lBcJNJt5yJL8YuaPBE',
+  authDomain: 'react-admin-firebase-ed1c2.firebaseapp.com',
+  databaseURL: 'https://react-admin-firebase-ed1c2.firebaseio.com',
+  projectId: 'react-admin-firebase-ed1c2',
+  storageBucket: 'react-admin-firebase-ed1c2.appspot.com',
+  messagingSenderId: '1025840448802',
+  appId: '1:1025840448802:web:d210968b17200f77ce117b',
+  measurementId: 'G-LEHM5781PT',
+  storagePath: 'image'
 };
 
-const trackedResources = [{ name: 'posts', isPublic: true }, { name: 'users', isPublic: true }];
+const trackedResources = [{ name: 'articles', isPublic: true }, { name: 'users', isPublic: true }];
 
 const authConfig = {
   userProfilePath: '/users/',
@@ -23,11 +30,11 @@ const authConfig = {
 
 // to run this demo locally, please feel free to disable authProvider to bypass login page
 
-const dataProvider = base64Uploader(RestProvider(firebaseConfig, { trackedResources }));
+const dataProvider = storageUploader(RestProvider(firebaseConfig, { trackedResources }));
 const App = () => (
   <Admin dataProvider={dataProvider} authProvider={AuthProvider(authConfig)}>
-    <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} />
-    <Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} />
+    <Resource name="articles" list={ArticleList} edit={ArticleEdit} create={ArticleCreate} />
   </Admin>
 );
+
 export default App;

src/demo/Users.js → src/demo/Articles.js

@@ -12,42 +12,35 @@ import {
   ImageField
 } from 'react-admin';
 
-export const UserList = props => (
-  <List title="All users" {...props}>
+export const ArticleList = props => (
+  <List {...props}>
     <Datagrid>
       <TextField source="id" />
-      <TextField source="name" />
-      <TextField source="username" />
-      <TextField source="email" />
+      <TextField source="title" />
       <EditButton />
     </Datagrid>
   </List>
 );
 
-export const UserCreate = props => (
-  <Create {...props}>
+export const ArticleEdit = props => (
+  <Edit {...props}>
     <SimpleForm>
-      <TextInput source="id" />
-      <TextInput source="name" />
-      <TextInput source="username" />
-      <TextInput source="email" />
+      <TextInput disabled source="id" />
+      <TextInput source="title" />
       <ImageInput source="image" label="Related Image" accept="image/*" multiple>
         <ImageField source="src" title="title" />
       </ImageInput>
     </SimpleForm>
-  </Create>
+  </Edit>
 );
 
-export const UserEdit = props => (
-  <Edit {...props}>
+export const ArticleCreate = props => (
+  <Create {...props}>
     <SimpleForm>
-      <TextInput source="id" />
-      <TextInput source="name" />
-      <TextInput source="username" />
-      <TextInput source="email" />
-      <ImageInput source="image" label="Related Image" accept="image/*" multiple>
+      <TextInput source="title" />
+      <ImageInput source="thumbnail" label="Thumbnail" accept="image/*" multiple={false}>
         <ImageField source="src" title="title" />
       </ImageInput>
     </SimpleForm>
-  </Edit>
+  </Create>
 );

src/lib/Base64Uploader.js

@@ -8,7 +8,7 @@ const convertFileToBase64 = file =>
   });
 
 const addUploadFeature = requestHandler => (type, resource, params) => {
-  if (type === 'UPDATE') {
+  if (type === 'UPDATE' || type === 'CREATE') {
     if (params.data.image && params.data.image.length) {
       const formerPictures = params.data.image.filter(p => !(p.rawFile instanceof File));
       const newPictures = params.data.image.filter(p => p.rawFile instanceof File);

src/lib/RestProvider.js

@@ -34,6 +34,9 @@ const RestProvider = (firebaseConfig = {}, options = {}) => {
     firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
   }
 
+  // const storage = firebase.storage();
+  // const storageRoot = storage.ref();
+
   /* Functions */
   const upload = options.upload || Methods.upload;
   const save = options.save || Methods.save;

src/lib/StorageUploader.js

@@ -0,0 +1,38 @@
+const uploadFileToStorage = file =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file.rawFile);
+
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+  });
+
+const storageUploadFeature = requestHandler => (type, resource, params) => {
+  if (type === 'UPDATE' || type === 'CREATE') {
+    if (params.data.image && params.data.image.length) {
+      const formerPictures = params.data.image.filter(p => !(p.rawFile instanceof File));
+      const newPictures = params.data.image.filter(p => p.rawFile instanceof File);
+
+      return Promise.all(newPictures.map(uploadFileToStorage))
+        .then(base64Pictures =>
+          base64Pictures.map(image64 => ({
+            src: image64,
+            title: `${params.data.title}`
+          }))
+        )
+        .then(transformedNewPictures =>
+          requestHandler(type, resource, {
+            ...params,
+            data: {
+              ...params.data,
+              image: [...transformedNewPictures, ...formerPictures]
+            }
+          })
+        );
+    }
+  }
+  // for other request types and reources, fall back to the defautl request handler
+  return requestHandler(type, resource, params);
+};
+
+export default storageUploadFeature;

src/lib/index.js

@@ -2,5 +2,6 @@ import RestProvider from './RestProvider';
 import AuthProvider from './AuthProvider';
 import * as RAFirebaseMethods from './methods';
 import base64Uploader from './Base64Uploader';
+import storageUploader from './StorageUploader';
 
-export { RestProvider, AuthProvider, RAFirebaseMethods, base64Uploader };
+export { RestProvider, AuthProvider, RAFirebaseMethods, base64Uploader, storageUploader };

src/lib/methods.js

@@ -3,7 +3,7 @@ import 'firebase/firestore';
 import 'firebase/storage';
 import sortBy from 'sort-by';
 import { CREATE } from 'react-admin';
-
+/*
 const convertFileToBase64 = file =>
   new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -40,7 +40,7 @@ const addUploadFeature = requestHandler => (type, resource, params) => {
   // for other request types and reources, fall back to the defautl request handler
   return requestHandler(type, resource, params);
 };
-
+*/
 const getImageSize = file => {
   return new Promise(resolve => {
     const img = document.createElement('img');
@@ -266,7 +266,9 @@ export default {
   getOne,
   getList,
   getMany,
-  getManyReference,
-  addUploadFeature,
-  convertFileToBase64
+  getManyReference
+  // addUploadFeature,
+  // convertFileToBase64,
+  // storageUploadFeature,
+  // uploadFileToStorage
 };