Firebase Refactor (#44)

* fix returns to be objects instead of queries * separation of functions initial * setup temp * removed withFirebase completely * fix imports and remove extra
HKN-UCSD · May 16, 2020 · bd6d042 · bd6d042
1 parent 5217742
commit bd6d042
Show file tree

Hide file tree

Showing 21 changed files with 433 additions and 470 deletions.
diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.js
@@ -36,9 +36,11 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import HomeIcon from '@material-ui/icons/Home';
 
 import styles from './styles';
-import { withFirebase } from '../../services/Firebase';
 import * as ROUTES from '../../constants/routes';
 
+import { queryCurrentUserRole } from '../../services/user';
+import { doSignOut } from '../../services/auth';
+
 const INITIAL_STATES = {
   isDrawerOpen: false,
   isOfficer: false,
@@ -56,9 +58,7 @@ class NavBar extends React.Component {
   }
 
   checkIfOfficer = () => {
-    const { firebase } = this.props;
-    firebase
-      .queryCurrentUserRole()
+    queryCurrentUserRole()
       .then(role => {
         if (role === 'Officer') {
           this.setState({
@@ -67,7 +67,7 @@ class NavBar extends React.Component {
         }
       })
       .catch(error => {
-        console.log(`ERROR: ${error}`);
+        throw Error(`ERROR: ${error}`);
       });
   };
 
@@ -92,8 +92,9 @@ class NavBar extends React.Component {
   };
 
   render() {
-    const { classes, children, firebase } = this.props;
+    const { classes, children } = this.props;
     const { isDrawerOpen, isOfficer, isConfirmationModalOpen } = this.state;
+
     return (
       <div className={classes.root}>
         <CssBaseline />
@@ -214,7 +215,7 @@ class NavBar extends React.Component {
               </DialogContentText>
             </DialogContent>
             <DialogActions>
-              <Button onClick={firebase.doSignOut} color='primary'>
+              <Button onClick={doSignOut} color='primary'>
                 Yes
               </Button>
               <Button onClick={this.handleClose} color='primary' autoFocus>
@@ -233,4 +234,4 @@ NavBar.propTypes = {
   children: PropTypes.objectOf(React.Component).isRequired,
 };
 
-export default compose(withStyles(styles), withFirebase)(NavBar);
+export default compose(withStyles(styles))(NavBar);
diff --git a/src/contexts.js b/src/contexts.js
@@ -1,4 +1,5 @@
 import React from 'react';
 
-export const AuthUserContext = React.createContext(null);
-export const FirebaseContext = React.createContext(null);
+const AuthUserContext = React.createContext(null);
+
+export default AuthUserContext;
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,31 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import * as firebase from 'firebase/app';
+import 'firebase/firestore';
+
 import App from './pages/App';
-import Firebase from './services/Firebase';
-import { FirebaseContext } from './contexts';
 
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
-  <FirebaseContext.Provider value={new Firebase()}>
-    <App />
-  </FirebaseContext.Provider>,
-  document.getElementById('root')
-);
+const config = {
+  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,
+};
+
+firebase.initializeApp(config);
+firebase
+  .firestore()
+  .enablePersistence()
+  .catch(err => {
+    throw Error(`Firestore enable persistence failed: ${err}`);
+    // Just don't cache. Catching error to ensure that it doesn't propagate out.
+  });
+
+ReactDOM.render(<App />, document.getElementById('root'));
 
 serviceWorker.unregister();
diff --git a/src/pages/App/index.js b/src/pages/App/index.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import * as firebase from 'firebase/app';
+import 'firebase/auth';
+
 import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
 import SignInPage from '../SignInPage';
 import SignUpPage from '../SignUpPage';
@@ -12,33 +15,29 @@ import CalendarPage from '../CalendarPage';
 import Loading from '../../components/Loading';
 import NavBar from '../../components/NavBar';
 import * as ROUTES from '../../constants/routes';
-import { AuthUserContext } from '../../contexts';
-
-import { withFirebase } from '../../services/Firebase';
+import AuthUserContext from '../../contexts';
 
 // PrivateRoute can be used just like a normal Route from react-router-dom
 // With a PrivateRoute, if the user is not logged in then they will be
 // automatically redirected to the Sign In Page
 // If the nav prop is true, then the component will be rendered with a navbar.
-const PrivateRoute = withFirebase(
-  ({ firebase, nav, component: Component, ...otherProps }) => (
-    <Route
-      {...otherProps}
-      render={props => {
-        if (firebase.auth.currentUser) {
-          if (nav) {
-            return (
-              <NavBar>
-                <Component {...props} />
-              </NavBar>
-            );
-          }
-          return <Component {...props} />;
+const PrivateRoute = ({ nav, component: Component, ...otherProps }) => (
+  <Route
+    {...otherProps}
+    render={props => {
+      if (firebase.auth().currentUser) {
+        if (nav) {
+          return (
+            <NavBar>
+              <Component {...props} />
+            </NavBar>
+          );
         }
-        return <Redirect to={ROUTES.SIGN_IN} />;
-      }}
-    />
-  )
+        return <Component {...props} />;
+      }
+      return <Redirect to={ROUTES.SIGN_IN} />;
+    }}
+  />
 );
 
 PrivateRoute.propTypes = {
@@ -63,8 +62,7 @@ class App extends React.Component {
   }
 
   componentDidMount() {
-    const { firebase } = this.props;
-    this.listener = firebase.auth.onAuthStateChanged(user => {
+    this.listener = firebase.auth().onAuthStateChanged(user => {
       if (user) {
         this.setState({
           authUser: user,
@@ -124,4 +122,4 @@ class App extends React.Component {
   }
 }
 
-export default withFirebase(App);
+export default App;
diff --git a/src/pages/EventsPage/index.js b/src/pages/EventsPage/index.js
@@ -2,9 +2,10 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { compose } from 'recompose';
 import { Divider } from '@material-ui/core';
-import { withFirebase } from '../../services/Firebase';
 import EventButtons from './eventButtons';
 
+import { queryCurrentUserRole } from '../../services/user';
+
 const styles = theme => ({
   root: {
     width: '100%',
@@ -88,9 +89,7 @@ class EventsPage extends React.Component {
   };
 
   checkIfInductee() {
-    const { firebase } = this.props;
-    firebase
-      .queryCurrentUserRole()
+    queryCurrentUserRole()
       .then(role => {
         if (role !== undefined && role !== 'Inductee') {
           this.setState({
@@ -99,7 +98,7 @@ class EventsPage extends React.Component {
         }
       })
       .catch(error => {
-        console.log(`ERROR: ${error}`);
+        throw Error(`ERROR: ${error}`);
       });
   }
 
@@ -142,4 +141,4 @@ class EventsPage extends React.Component {
   }
 }
 
-export default compose(withStyles(styles), withFirebase)(EventsPage);
+export default compose(withStyles(styles))(EventsPage);
diff --git a/src/pages/InducteePointsPage/PointDetail.js b/src/pages/InducteePointsPage/PointDetail.js
@@ -14,7 +14,7 @@ import {
 import { grey } from '@material-ui/core/colors';
 import { withStyles } from '@material-ui/core/styles';
 
-import { withFirebase } from '../../services/Firebase';
+import { getUserEvent } from '../../services/events';
 
 const styles = theme => ({
   root: {
@@ -38,9 +38,9 @@ class PointDetail extends React.Component {
   }
 
   componentDidMount() {
-    const { user, firebase } = this.props;
+    const { user } = this.props;
     this.setState({ officerSigns: user.officerSigns });
-    firebase.getUserEvent(user.uid).then(events => {
+    getUserEvent(user.uid).then(events => {
       const eventNames = events.map(event => event.event_name);
       this.setState({ eventNames });
     });
@@ -88,4 +88,4 @@ PointDetail.propTypes = {
   }).isRequired,
 };
 
-export default compose(withStyles(styles), withFirebase)(PointDetail);
+export default compose(withStyles(styles))(PointDetail);
diff --git a/src/pages/InducteePointsPage/index.js b/src/pages/InducteePointsPage/index.js
@@ -6,10 +6,12 @@ import { Redirect } from 'react-router-dom';
 import Table from '../../components/Table';
 import PointDetail from './PointDetail';
 
-import { withFirebase } from '../../services/Firebase';
 import { USER_ROLES } from '../../constants/roles';
 import * as ROUTES from '../../constants/routes';
 
+import { queryCurrentUserRole } from '../../services/user';
+import { getInducteesInfo } from '../../services/officer';
+
 const INITIAL_STATE = {
   users: [],
   isOfficer: null,
@@ -46,20 +48,17 @@ class InducteePoints extends React.Component {
   }
 
   componentDidMount() {
-    const { firebase } = this.props;
     const users = [];
-    firebase
-      .queryCurrentUserRole()
+    queryCurrentUserRole()
       .then(userRole => {
         const isOfficer = userRole === USER_ROLES.OFFICER;
         this.setState({ isOfficer });
         return isOfficer;
       })
       .then(isOfficer => {
         if (isOfficer) {
-          firebase.getInducteesInfo().then(querySnapshot => {
-            querySnapshot.forEach(doc => {
-              const data = doc.data();
+          getInducteesInfo().then(inducteeInfo => {
+            inducteeInfo.forEach(data => {
               const {
                 induction_points: inductionPoints,
                 professional,
@@ -72,7 +71,7 @@ class InducteePoints extends React.Component {
                 officerSigns = [];
               }
 
-              const uid = doc.id;
+              const uid = data.id;
               const mentorshipStatus = mentorship ? 'Complete' : 'Incomplete';
               const professionalStatus = professional
                 ? 'Complete'
@@ -118,4 +117,4 @@ class InducteePoints extends React.Component {
   }
 }
 
-export default compose(withStyles(styles), withFirebase)(InducteePoints);
+export default compose(withStyles(styles))(InducteePoints);
diff --git a/src/pages/PointsPage/point_display.js b/src/pages/PointsPage/point_display.js
@@ -90,7 +90,7 @@ class PointDisplay extends React.Component {
 }
 
 PointDisplay.propTypes = {
-  points: PropTypes.arrayOf(PropTypes.number).isRequired,
+  points: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
 export default compose(withStyles(styles))(PointDisplay);