firebase class

Author: rwieruch

package-lock.json

@@ -7,7 +7,8 @@
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.0"
+    "react-scripts": "2.1.0",
+    "recompose": "^0.30.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
+import { compose } from 'recompose';
 
-import { db } from '../../firebase';
+import { withFirebase } from '../Firebase';
 import * as ROLES from '../../constants/roles';
 import withAuthorization from '../Session/withAuthorization';
 
@@ -18,13 +19,14 @@ class AdminPage extends Component {
   componentDidMount() {
     this.setState({ loading: true });
 
-    db.users()
+    this.props.firebase
+      .users()
       .once('value')
       .then(snapshot => {
         const usersObject = snapshot.val();
         const users = Object.keys(usersObject).map(key => ({
           ...usersObject[key],
-          id: key,
+          uid: key,
         }));
 
         this.setState(state => ({
@@ -36,15 +38,15 @@ class AdminPage extends Component {
         this.setState({ error: true, loading: false });
       });
 
-    db.users().on('child_removed', snapshot => {
+    this.props.firebase.users().on('child_removed', snapshot => {
       this.setState(state => ({
-        users: state.users.filter(user => user.id !== snapshot.key),
+        users: state.users.filter(user => user.uid !== snapshot.key),
       }));
     });
   }
 
   onRemove = userId => {
-    db.user(userId).remove();
+    this.props.firebase.user(userId).remove();
   };
 
   render() {
@@ -69,9 +71,9 @@ class AdminPage extends Component {
 const UserList = ({ users, onRemove }) => (
   <ul>
     {users.map(user => (
-      <li key={user.id}>
+      <li key={user.uid}>
         <span>
-          <strong>ID:</strong> {user.id}
+          <strong>ID:</strong> {user.uid}
         </span>
         <span>
           <strong>E-Mail:</strong> {user.email}
@@ -83,7 +85,7 @@ const UserList = ({ users, onRemove }) => (
           <strong>Roles:</strong> {(user.roles || []).join('')}
         </span>
         <span>
-          <button type="button" onClick={() => onRemove(user.id)}>
+          <button type="button" onClick={() => onRemove(user.uid)}>
             Remove
           </button>
         </span>
@@ -95,4 +97,7 @@ const UserList = ({ users, onRemove }) => (
 const authCondition = authUser =>
   authUser && authUser.roles.includes(ROLES.ADMIN);
 
-export default withAuthorization(authCondition)(AdminPage);
+export default compose(
+  withAuthorization(authCondition),
+  withFirebase,
+)(AdminPage);

src/components/Admin/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const FirebaseContext = React.createContext(null);
+
+export const withFirebase = Component => props => (
+  <FirebaseContext.Consumer>
+    {firebase => <Component {...props} firebase={firebase} />}
+  </FirebaseContext.Consumer>
+);
+
+export default FirebaseContext;

src/components/Firebase/context.js

@@ -0,0 +1,89 @@
+import app from 'firebase/app';
+import 'firebase/auth';
+import 'firebase/database';
+
+const prodConfig = {
+  apiKey: process.env.REACT_APP_API_KEY,
+  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
+  databaseURL: process.env.REACT_APP_DATABASE_URL,
+  projectId: process.env.REACT_APP_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+};
+
+const devConfig = {
+  apiKey: process.env.REACT_APP_API_KEY,
+  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
+  databaseURL: process.env.REACT_APP_DATABASE_URL,
+  projectId: process.env.REACT_APP_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+};
+
+const config =
+  process.env.NODE_ENV === 'production' ? prodConfig : devConfig;
+
+class Firebase {
+  constructor() {
+    app.initializeApp(config);
+
+    this.db = app.database();
+    this.auth = app.auth();
+  }
+
+  // *** Auth API ***
+
+  doCreateUserWithEmailAndPassword = (email, password) =>
+    this.auth.createUserWithEmailAndPassword(email, password);
+
+  doSignInWithEmailAndPassword = (email, password) =>
+    this.auth.signInWithEmailAndPassword(email, password);
+
+  doSignOut = () => this.auth.signOut();
+
+  doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
+
+  doPasswordUpdate = password =>
+    this.auth.currentUser.updatePassword(password);
+
+  // *** Merge Auth and DB User API *** //
+
+  onAuthUserListener = (next, fallback) =>
+    this.auth.onAuthStateChanged(authUser => {
+      if (authUser) {
+        this.user(authUser.uid)
+          .once('value')
+          .then(snapshot => {
+            const dbUser = snapshot.val();
+
+            // default empty roles
+            if (!dbUser.roles) {
+              dbUser.roles = [];
+            }
+
+            // merge auth and db user
+            authUser = {
+              uid: authUser.uid,
+              email: authUser.email,
+              ...dbUser,
+            };
+
+            next(authUser);
+          });
+      } else {
+        fallback();
+      }
+    });
+
+  // *** User API ***
+
+  user = uid => this.db.ref(`users/${uid}`);
+
+  users = () => this.db.ref('users');
+
+  // *** Message API ***
+
+  messages = () => this.db.ref('messages');
+}
+
+export default Firebase;

src/components/Firebase/firebase.js

@@ -0,0 +1,6 @@
+import FirebaseContext, { withFirebase } from './context';
+import Firebase from './firebase';
+
+export default Firebase;
+
+export { FirebaseContext, withFirebase };