Complete Redux usage with User data integration

    * withAuthentication, withAuthorization deprecated
    * removed deprecated code
    * cleaned up code around user auth areas, profile, navbar
    * refactored code to hooks

Author: bpalomino5

src/components/app/App.jsx

@@ -1,13 +1,12 @@
 /* eslint react/prefer-stateless-function: 0 */
 /* eslint no-undef: 0 */
-import React, { Component } from 'react';
+import React from 'react';
 import { Route } from 'react-router-dom';
 import ReactGA from 'react-ga';
 import MessengerCustomerChat from 'react-messenger-customer-chat';
 
 import { ThemeProvider } from 'styled-components';
 
-// Font Awesome
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
   faPlus,
@@ -20,8 +19,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 
 import { Container } from 'reactstrap';
-import withAuthentication from '../utils/withAuthentication';
-
 import Navbar from '../shared/navbar';
 import Footer from '../shared/footer';
 
@@ -35,6 +32,7 @@ import ExploreProjects from '../explore-projects';
 import ForgotPassword from '../forgot-password';
 
 import './App.css';
+import useUser from '../../hooks/use-user';
 
 const mainContainerStyle = { marginBottom: '100px', marginTop: '50px' };
 
@@ -53,32 +51,31 @@ library.add(
   faExternalLinkAlt,
 );
 
-class App extends Component {
-  render() {
-    return (
-      <ThemeProvider theme={{ mode: 'bubbly' }}>
-        <div className="App">
-          <link
-            href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap"
-            rel="stylesheet"
-          />
-          <Navbar />
-          <Container style={mainContainerStyle}>
-            <Route path="/" exact component={Home} />
-            <Route path="/about" exact component={About} />
-            <Route path="/projects" exact component={ExploreProjects} />
-            <Route path="/projects/:shortname" exact component={ProjectPage} />
-            <Route path="/profiles" exact component={ExploreProfiles} />
-            <Route path="/profile/:id" exact component={ProfilePage} />
-            <Route path="/signupin" exact component={SignUpIn} />
-            <Route path="/signupin/forgotpassword" exact component={ForgotPassword} />
-            <MessengerCustomerChat pageId="1191043211036808" appId="295451067827152" />
-          </Container>
-          <Footer />
-        </div>
-      </ThemeProvider>
-    );
-  }
-}
+const App = () => {
+  useUser(true);
+  return (
+    <ThemeProvider theme={{ mode: 'bubbly' }}>
+      <div className="App">
+        <link
+          href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap"
+          rel="stylesheet"
+        />
+        <Navbar />
+        <Container style={mainContainerStyle}>
+          <Route path="/" exact component={Home} />
+          <Route path="/about" exact component={About} />
+          <Route path="/projects" exact component={ExploreProjects} />
+          <Route path="/projects/:shortname" exact component={ProjectPage} />
+          <Route path="/profiles" exact component={ExploreProfiles} />
+          <Route path="/profile/:id" exact component={ProfilePage} />
+          <Route path="/signupin" exact component={SignUpIn} />
+          <Route path="/signupin/forgotpassword" exact component={ForgotPassword} />
+          <MessengerCustomerChat pageId="1191043211036808" appId="295451067827152" />
+        </Container>
+        <Footer />
+      </div>
+    </ThemeProvider>
+  );
+};
 
-export default withAuthentication(App);
+export default App;

src/components/app/actions/index.js

@@ -1,2 +1,3 @@
 export * from './project';
 export * from './tag';
+export * from './user';

src/components/app/actions/project.js

@@ -4,8 +4,13 @@ import { schema } from '../../../utils';
 import { db, Project, storage } from '../../../firebase';
 
 export const createProject = createAction('CREATE_PROJECT', async (values) => {
-  const response = await Project.create(values);
-  return response;
+  const id = await Project.create(values);
+  return normalize({ id, ...values }, schema.project);
+});
+
+export const deleteProject = createAction('DELETE_PROJECT', async (pid) => {
+  await Project.destroy(pid);
+  return normalize({ id: pid }, schema.project);
 });
 
 export const getProjects = createAction('GET_PROJECTS', async () => {

src/components/app/actions/user.js

@@ -0,0 +1,19 @@
+// import { normalize } from 'normalizr';
+import { createAction } from 'redux-actions';
+// import { schema } from '../../../utils';
+import { db, auth } from '../../../firebase';
+
+export const createUser = () => {};
+
+export const setUser = createAction('SET_USER', async (authUser) => {
+  const user = await db.get('users')(authUser.uid);
+  return user;
+});
+
+export const loginUser = createAction('LOGIN', async ({ email, password }) => {
+  const response = await auth.signInUser(email, password);
+  const user = await db.get('users')(response.user.uid);
+  return user;
+});
+
+export const logoutUser = createAction('LOGOUT', auth.signOutUser);

src/components/app/reducers/index.js

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
 
 import projects from './project';
 import tags from './tag';
+import user from './user';
 
 export default () => {
   const data = combineReducers({
     projects,
     tags,
+    user,
   });
 
   const appReducer = combineReducers({

src/components/app/reducers/project.js

@@ -1,6 +1,6 @@
 import { handleActions } from 'redux-actions';
-
-import { createProject, getProjects, getProject, updateProject } from '../actions';
+import { omit } from 'lodash';
+import { createProject, getProjects, getProject, updateProject, deleteProject } from '../actions';
 
 const reducer = handleActions(
   {
@@ -14,6 +14,9 @@ const reducer = handleActions(
         };
       },
     },
+    [deleteProject]: {
+      FULFILLED: (state, { payload }) => omit(state, [ payload.result ]),
+    },
     [getProjects]: {
       FULFILLED: (state, { payload }) => ({
         ...state,

src/components/app/reducers/tag.js

@@ -1,6 +1,6 @@
 import { handleActions } from 'redux-actions';
 
-import { getTags, getTag, updateTags } from '../actions';
+import { getTags, getTag } from '../actions';
 
 const reducer = handleActions(
   {
@@ -20,16 +20,6 @@ const reducer = handleActions(
         };
       },
     },
-    // [updateTags]: {
-    //   FULFILLED: (state, { payload }) => {
-    //     const id = payload.result;
-    //     const values = payload.entities.projects[id].tags;
-    //     return {
-    //       ...state,
-    //       [id]: { ...state[id], ...values },
-    //     };
-    //   },
-    // },
   },
   {},
 );

src/components/app/reducers/user.js

@@ -0,0 +1,19 @@
+import { handleActions } from 'redux-actions';
+import { setUser, loginUser, logoutUser } from '../actions';
+
+const reducer = handleActions(
+  {
+    [setUser]: {
+      FULFILLED: (state, action) => action.payload,
+    },
+    [loginUser]: {
+      FULFILLED: (state, action) => action.payload,
+    },
+    [logoutUser]: {
+      FULFILLED: () => ({}),
+    },
+  },
+  {},
+);
+
+export default reducer;

src/components/create-project/CreateProject.jsx

@@ -1,33 +1,33 @@
 import React, { useState } from 'react';
+import { withRouter } from 'react-router-dom';
 
-import { Project, db } from '../../firebase';
-import { getUserInfo } from '../../firebase/auth';
+import { auth } from '../../firebase';
 
-import NewProjectModal from './components/new-project-modal/NewProjectModal';
+import NewProjectModal from './components/new-project-modal';
 import Button from '../shared/button';
-
 import useModal from '../../hooks/use-modal';
+import useProject from '../../hooks/use-project';
 
 const NEW_PROJECT_MODAL_ID = 'NEW_PROJECT_MODAL_ID';
 
-const CreateProject = () => {
+const CreateProject = ({ history }) => {
+  const { createProject } = useProject();
   const { closeModal, openModal, isModalOpen } = useModal();
   const [ loading, setLoading ] = useState(false);
 
   const handleCreate = name => async () => {
     setLoading(true);
     // fetch current logged in user
-    const user = getUserInfo();
+    const user = auth.getUserInfo();
     if (!user) {
       setLoading(false);
       return;
     }
-    // create the project with one field only for simplicity
-    const pid = await Project.create({ name });
-    Project.updateFieldArrayWithId(db.add)('admin')(pid)(user.uid);
-    Project.updateFieldArrayWithId(db.add)('team')(pid)(user.uid);
-    // redirect
-    window.location.replace(`/projects/${ pid }`);
+
+    const payload = await createProject({ name, team: [ user.uid ], admin: [ user.uid ] });
+    if (payload) {
+      history.replace(`/projects/${ payload.value.result }`, { id: payload.value.result });
+    }
   };
 
   return (
@@ -45,4 +45,4 @@ const CreateProject = () => {
   );
 };
 
-export default CreateProject;
+export default withRouter(CreateProject);

src/components/explore-profiles/ExploreProfiles.jsx

@@ -3,7 +3,7 @@ import ReactGA from 'react-ga';
 
 import { db, auth } from '../../firebase';
 
-import ProfileList from './components/profile-list';
+// import ProfileList from './components/profile-list';
 import SignUpModal from '../shared/sign-up-modal';
 import Filter from '../shared/filter';
 
@@ -45,7 +45,7 @@ class ExploreProfiles extends Component {
   };
 
   render() {
-    const { profiles, modal } = this.state;
+    const { modal } = this.state;
     return (
       <div>
         <h2 style={{ marginBottom: '20px' }}>Find People</h2>

src/components/home/Home.jsx

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { Row, Col } from 'reactstrap';
 import Banner from './components/banner';
 import Card from '../shared/card';
-
 import useProjects from '../../hooks/use-projects';
 
 const Header = styled.div`

src/components/profile-page/ProfilePage.jsx

@@ -1,42 +1,19 @@
-import React, { Component } from 'react';
-
-import AuthUserContext from '../utils/AuthUserContext';
-import withAuthorization from '../utils/withAuthorization';
+import React from 'react';
+import { get } from 'lodash';
 import Overview from './components/profile-summary';
 import SocialContentSection from './components/social-content-section';
+import useUser from '../../hooks/use-user';
 
-class ProfilePage extends Component {
-  state = { uid: null };
-
-  componentDidMount = () => {
-    const { match } = this.props;
-    if (match.params.id) {
-      this.setState({ uid: match.params.id });
-    }
-  };
-
-  componentDidUpdate = (prevProps) => {
-    const { match } = this.props;
-    if (prevProps.match.params.id !== match.params.id) {
-      this.setState({ uid: match.params.id });
-    }
-  };
+const ProfilePage = ({ match, location }) => {
+  const { user } = useUser();
+  const id = get(match, 'params.id', null);
 
-  render() {
-    const { uid } = this.state;
-    const { location: { hash } } = this.props;
-    return (
-      <AuthUserContext.Consumer>
-        {authUser => (
-          <div>
-            <Overview authUser={authUser} />
-            <SocialContentSection uid={uid} selected={hash} />
-          </div>
-        )}
-      </AuthUserContext.Consumer>
-    );
-  }
-}
+  return (
+    <div>
+      <Overview authUser={user} uid={id} />
+      <SocialContentSection uid={id} authUser={user} selected={location.hash} />
+    </div>
+  );
+};
 
-const authCondition = authUser => !!authUser;
-export default withAuthorization(authCondition)(ProfilePage);
+export default ProfilePage;