react-admin 3.0 upgrade

package.json

@@ -2,13 +2,14 @@
   "name": "react-admin-firebase",
   "description": "A firebase data provider for the React Admin framework",
   "version": "0.9.0",
+  "peerDependencies": {
+    "react": "^16.x",
+    "react-admin": "^3.x",
+    "react-dom": "^16.x"
+  },
   "dependencies": {
     "firebase": "6.1.x",
     "path-browserify": "^1.0.0",
-    "ra-realtime": "^2.8.x",
-    "react": "^16.x",
-    "react-admin": "^2.9.x",
-    "react-dom": "^16.x",
     "rxjs": "^6.5.x"
   },
   "devDependencies": {

src-demo/package.json

@@ -5,17 +5,18 @@
   "dependencies": {
     "ra-input-rich-text": "^2.3.0",
     "react": "^16.5.1",
+    "react-admin": "^3.0.2",
     "react-admin-firebase": "../",
     "react-dom": "^16.5.1",
+    "react-firebaseui": "^4.0.0",
     "react-scripts": "1.1.5",
-    "redux-saga": "^0.16.0",
     "source-map-loader": "^0.2.4"
   },
   "homepage": "https://benwinding.github.io/react-admin-firebase/",
   "devDependencies": {
-    "gh-pages": "^2.0.1",
     "concurrently": "4.1.1",
-    "cpx": "1.5.0"
+    "cpx": "1.5.0",
+    "gh-pages": "^2.0.1"
   },
   "scripts": {
     "start": "concurrently \"yarn update-raf\" \"yarn start-dev-server\"",

src-demo/src/App.js

@@ -3,35 +3,35 @@ import { PostList, PostShow, PostCreate, PostEdit } from "./posts";
 import { UserList, UserShow, UserCreate, UserEdit } from "./users";
 import { Admin, Resource } from "react-admin";
 import {
-  FirebaseRealTimeSaga,
   FirebaseDataProvider,
   FirebaseAuthProvider
 } from "react-admin-firebase";
+import firebase from 'firebase';
 import UserIcon from '@material-ui/icons/People';
 
 import { firebaseConfig } from './FIREBASE_CONFIG';
 import CustomLoginPage from './CustomLoginPage';
 
+const firebaseApp = firebase.initializeApp(firebaseConfig);
+
 const options = {
   logging: true,
   rootRef: 'rootrefcollection/QQG2McwjR2Bohi9OwQzP',
-  // app: firebaseAppInstance
+  app: firebaseApp,
   // watch: ['posts'];
   // dontwatch: ['comments'];
 }
 
 const authProvider = FirebaseAuthProvider(firebaseConfig, options);
 const dataProvider = FirebaseDataProvider(firebaseConfig, options);
-const firebaseRealtime = FirebaseRealTimeSaga(dataProvider, options);
 
 class App extends React.Component {
   render() {
     return (
       <Admin
-        loginPage={CustomLoginPage} 
+        loginPage={CustomLoginPage}
         dataProvider={dataProvider}
         authProvider={authProvider}
-        customSagas={[firebaseRealtime]}
       >
         <Resource
           name="posts"

src-demo/src/CustomLoginPage.js

@@ -1,6 +1,23 @@
 // LoginPage.js
 import React from "react";
 import { Login, LoginForm } from "react-admin";
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
+import firebase from 'firebase';
+
+// Configure FirebaseUI.
+const uiConfig = {
+  // Popup signin flow rather than redirect flow.
+  signInFlow: 'popup',
+  // Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
+  signInSuccessUrl: '#/',
+  // We will display Google and Facebook as auth providers.
+  signInOptions: [
+    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+    firebase.auth.FacebookAuthProvider.PROVIDER_ID
+  ]
+};
+
+const SignInScreen = () => <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>;
 
 const CustomLoginForm = props => (
   <div>
@@ -9,11 +26,14 @@ const CustomLoginForm = props => (
       <p>Password: password</p>
     </div>
     <LoginForm {...props} />
+    <SignInScreen />
   </div>
 );
 
 const CustomLoginPage = props => (
-  <Login loginForm={<CustomLoginForm />} {...props} />
+  <Login {...props}>
+    <CustomLoginForm {...props}/>
+  </Login>
 );
 
 export default CustomLoginPage;

src-demo/src/posts.js

@@ -9,7 +9,6 @@ import {
   Edit,
   Filter,
   DateField,
-  DisabledInput,
   SimpleShowLayout,
   SimpleForm,
   TextField,
@@ -109,7 +108,7 @@ export const PostCreate = props => (
 export const PostEdit = props => (
   <Edit {...props}>
     <SimpleForm>
-      <DisabledInput source="id" />
+      <TextInput disabled source="id" />
       <DateField source="createdate" />
       <DateField source="lastupdate" />
       <TextInput source="title" />

src-demo/src/users.js

@@ -8,7 +8,6 @@ import {
   Create,
   Edit,
   Filter,
-  DisabledInput,
   SimpleShowLayout,
   SimpleForm,
   TextField,
@@ -61,9 +60,9 @@ export const UserCreate = (props) => (
 export const UserEdit = (props) => (
   <Edit {...props}>
     <SimpleForm>
-      <DisabledInput source="id" />
-      <DisabledInput source="createdate" />
-      <DisabledInput source="lastupdate" />
+      <TextInput disabled source="id" />
+      <TextInput disabled source="createdate" />
+      <TextInput disabled source="lastupdate" />
       <TextInput source="name" />
       <TextInput source="age" />
     </SimpleForm>

src/index.ts

@@ -1,10 +1,8 @@
-import { RealtimeSaga } from "./providers/RealtimeSaga";
 import { DataProvider } from "./providers/DataProvider";
 import { AuthProvider } from "./providers/AuthProvider";
 import { RAFirebaseOptions } from "./providers/RAFirebaseOptions";
 
 export {
-  RealtimeSaga as FirebaseRealTimeSaga,
   DataProvider as FirebaseDataProvider,
   AuthProvider as FirebaseAuthProvider,
   RAFirebaseOptions as RAFirebaseOptions

src/providers/AuthProvider.ts

@@ -1,13 +1,5 @@
 // import * as firebase from "firebase";
 import { FirebaseAuth } from "@firebase/auth-types";
-
-import {
-  AUTH_LOGIN,
-  AUTH_LOGOUT,
-  AUTH_ERROR,
-  AUTH_CHECK,
-  AUTH_GET_PERMISSIONS
-} from "react-admin";
 import { log, CheckLogging } from "../misc/logger";
 import { RAFirebaseOptions } from "./RAFirebaseOptions";
 import { FirebaseWrapper } from "./database/firebase/FirebaseWrapper";
@@ -26,58 +18,50 @@ class AuthClient {
   public async HandleAuthLogin(params) {
     const { username, password } = params;
 
-    try {
-      const user = await this.auth.signInWithEmailAndPassword(
-        username,
-        password
-      );
-      log("HandleAuthLogin: user sucessfully logged in", { user });
-      return user
-    } catch (e) {
-      log("HandleAuthLogin: invalid credentials", { params });
-      throw new Error("Login error: invalid credentials");
+    if (username && password) {
+      try {
+        const user = await this.auth.signInWithEmailAndPassword(
+          username,
+          password
+        );
+        log("HandleAuthLogin: user sucessfully logged in", { user });
+        return user
+      } catch (e) {
+        log("HandleAuthLogin: invalid credentials", { params });
+        throw new Error("Login error: invalid credentials");
+      }
+    } else {
+      return this.getUserLogin();
     }
   }
 
-  public async HandleAuthLogout(params) {
-    await this.auth.signOut();
+  public HandleAuthLogout() {
+    return this.auth.signOut();
   }
 
-  public async HandleAuthError(params) { }
+  public HandleAuthError(error) {
+    log("HandleAuthLogin: invalid credentials", { error });
+    return Promise.reject("Login error: invalid credentials");
+  }
 
-  public async HandleAuthCheck(params) {
-    try {
-      const user = await this.getUserLogin();
-      log("HandleAuthCheck: user is still logged in", { user });
-    } catch (e) {
-      log("HandleAuthCheck: ", { e });
-      throw new Error("Auth check error: " + e);
-    }
+  public HandleAuthCheck() {
+    return this.getUserLogin();
   }
 
-  public async getUserLogin() {
+  public getUserLogin() {
     return new Promise((resolve, reject) => {
-      this.auth.onAuthStateChanged((user) => {
+      if (this.auth.currentUser) return resolve(this.auth.currentUser);
+      const unsubscribe = this.auth.onAuthStateChanged(user => {
+        unsubscribe();
         if (user) {
           resolve(user);
         } else {
-          reject("User not logged in");
+          reject();
         }
-      });
+      })
     });
   }
 
-  public async HandleGetCurrent() {
-    try {
-      const user = await this.getUserLogin();
-      log("HandleGetCurrent: current user", { user });
-      return user;
-    } catch (e) {
-      log("HandleGetCurrent: no user is logged in", { e });
-      return null;
-    }
-  }
-
   public async HandleGetPermissions() {
     try {
       const user = await this.getUserLogin();
@@ -99,26 +83,12 @@ export function AuthProvider(firebaseConfig: {}, options: RAFirebaseOptions) {
   const auth = new AuthClient(firebaseConfig, options);
   CheckLogging(firebaseConfig, options);
 
-  return async (type: string, params: {}) => {
-    log("Auth Event: ", { type, params });
-    {
-      switch (type) {
-        case AUTH_LOGIN:
-          return auth.HandleAuthLogin(params);
-        case AUTH_LOGOUT:
-          return auth.HandleAuthLogout(params);
-        case AUTH_ERROR:
-          return auth.HandleAuthError(params);
-        case AUTH_CHECK:
-          return auth.HandleAuthCheck(params);
-        case "AUTH_GETCURRENT":
-          return auth.HandleGetCurrent();
-        case AUTH_GET_PERMISSIONS:
-          return auth.HandleGetPermissions();
-        default:
-          throw new Error("Unhandled auth type:" + type);
-      }
-    }
+  return {
+    login: params => auth.HandleAuthLogin(params),
+    logout: () => auth.HandleAuthLogout(),
+    checkAuth: () => auth.HandleAuthCheck(),
+    checkError: error => auth.HandleAuthError(error),
+    getPermissions: () => auth.HandleGetPermissions(),
   };
 }