Merge pull request #132 from CreateThrive/refactor/fetch-user

Refactor: Fetch User

Author: TOPOFGR

functions/.gitignore

@@ -10,4 +10,6 @@ node_modules/
 lib/
 
 #Necessary config for testing
-env.json
+env.json
+
+service-account-key.json

src/components/UserForm/UserForm.test.js

@@ -5,8 +5,9 @@ import * as actions from 'state/actions/users';
 import UserForm from '.';
 
 describe('<UserForm /> rendering', () => {
-  let userData;
+  const setUser = jest.fn();
 
+  let userData;
   beforeEach(() => {
     userData = {
       email: 'mkrukuy@gmail.com',
@@ -24,7 +25,7 @@ describe('<UserForm /> rendering', () => {
     const user = { ...userData, createdAt: '11/21/2020' };
 
     const { component } = shallowWithProviders(
-      <UserForm user={user} action={actions.createUser} />
+      <UserForm user={user} action={actions.createUser} setUser={setUser} />
     )({
       users: {},
     });
@@ -34,7 +35,7 @@ describe('<UserForm /> rendering', () => {
 
   it('should display user name preview', () => {
     const { component } = mountWithProviders(
-      <UserForm user={userData} action={actions.createUser} />
+      <UserForm user={userData} action={actions.createUser} setUser={setUser} />
     )({
       users: {},
     });
@@ -46,7 +47,7 @@ describe('<UserForm /> rendering', () => {
 
   it('should display email preview if it is creating a new user', () => {
     const { component } = mountWithProviders(
-      <UserForm user={userData} action={actions.createUser} />
+      <UserForm user={userData} action={actions.createUser} setUser={setUser} />
     )({
       users: {},
     });
@@ -58,7 +59,12 @@ describe('<UserForm /> rendering', () => {
 
   it('should display location preview', () => {
     const { component } = mountWithProviders(
-      <UserForm user={userData} isEditing action={actions.createUser} />
+      <UserForm
+        user={userData}
+        isEditing
+        action={actions.createUser}
+        setUser={setUser}
+      />
     )({
       users: {},
     });
@@ -70,7 +76,12 @@ describe('<UserForm /> rendering', () => {
 
   it('should display admin preview', () => {
     const { component } = mountWithProviders(
-      <UserForm user={userData} isEditing action={actions.createUser} />
+      <UserForm
+        user={userData}
+        isEditing
+        action={actions.createUser}
+        setUser={setUser}
+      />
     )({
       users: {},
     });
@@ -80,7 +91,12 @@ describe('<UserForm /> rendering', () => {
 
   it('should display created preview', () => {
     const { component } = mountWithProviders(
-      <UserForm user={userData} isEditing action={actions.createUser} />
+      <UserForm
+        user={userData}
+        isEditing
+        action={actions.createUser}
+        setUser={setUser}
+      />
     )({
       users: {},
     });
@@ -90,8 +106,9 @@ describe('<UserForm /> rendering', () => {
 
 describe('<LoginForm /> actions', () => {
   const dispatchMock = jest.fn();
-  let userData;
+  const setUser = jest.fn();
 
+  let userData;
   beforeEach(() => {
     jest
       .spyOn(reactRedux, 'useDispatch')
@@ -112,7 +129,7 @@ describe('<LoginForm /> actions', () => {
 
   it('should dispatch createUser action when creating a new user', () => {
     const { component } = mountWithProviders(
-      <UserForm user={userData} action={actions.createUser} />
+      <UserForm user={userData} action={actions.createUser} setUser={setUser} />
     )({
       users: {},
     });
@@ -124,7 +141,12 @@ describe('<LoginForm /> actions', () => {
 
   it('should dispatch modifyUser action when editing a user', () => {
     const { component } = mountWithProviders(
-      <UserForm user={userData} isEditing action={actions.modifyUser} />
+      <UserForm
+        user={userData}
+        isEditing
+        action={actions.modifyUser}
+        setUser={setUser}
+      />
     )({
       users: {},
     });

src/components/UserForm/__snapshots__/UserForm.test.js.snap

@@ -143,6 +143,9 @@ exports[`<UserForm /> rendering should render without crashing 1`] = `
     >
       <UserForm
         action={[Function]}
+        isEditing={false}
+        isProfile={false}
+        setUser={[MockFunction]}
         user={
           Object {
             "createdAt": "11/21/2020",

src/components/UserForm/index.jsx

@@ -396,16 +396,24 @@ const UserForm = ({ isEditing, isProfile, user, setUser, action }) => {
 };
 
 UserForm.propTypes = {
-  isEditing: PropTypes.bool,
-  userData: PropTypes.shape({
+  user: PropTypes.shape({
     id: PropTypes.string,
     isAdmin: PropTypes.bool.isRequired,
     name: PropTypes.string.isRequired,
     location: PropTypes.string,
     logoUrl: PropTypes.string,
     createdAt: PropTypes.string.isRequired,
-  }),
+    email: PropTypes.string.isRequired,
+  }).isRequired,
+  setUser: PropTypes.func.isRequired,
   action: PropTypes.func.isRequired,
+  isEditing: PropTypes.bool,
+  isProfile: PropTypes.bool,
+};
+
+UserForm.defaultProps = {
+  isEditing: false,
+  isProfile: false,
 };
 
 export default UserForm;

src/pages/Login/index.jsx

@@ -11,7 +11,7 @@ import {
   authCleanUp,
   authFacebook,
   authGoogle,
-  authMicrosoft
+  authMicrosoft,
 } from 'state/actions/auth';
 import { useChangeHandler, useFormatMessage } from 'hooks';
 import { inputValidations } from 'utils';
@@ -20,11 +20,11 @@ import classes from './Login.module.scss';
 
 const Login = () => {
   const { error, isAuth, loading, locale } = useSelector(
-    state => ({
+    (state) => ({
       error: state.auth.error,
       isAuth: !!state.auth.userData.id,
       loading: state.auth.loading,
-      locale: state.preferences.locale
+      locale: state.preferences.locale,
     }),
     shallowEqual
   );
@@ -33,7 +33,7 @@ const Login = () => {
 
   const [authData, setAuthData] = useState({
     email: '',
-    password: ''
+    password: '',
   });
 
   const onChangeHandler = useChangeHandler(setAuthData);
@@ -56,7 +56,7 @@ const Login = () => {
     .auth()
     .isSignInWithEmailLink(window.location.href);
 
-  const onSubmitHandler = event => {
+  const onSubmitHandler = (event) => {
     event.preventDefault();
 
     if (isEmailLink) {
@@ -72,28 +72,28 @@ const Login = () => {
 
   const onFacebookHandler = useCallback(() => {
     dispatch(authFacebook());
-  }, [dispatch, authFacebook]);
+  }, [dispatch]);
 
   const onGoogleHandler = useCallback(() => {
     dispatch(authGoogle());
-  }, [dispatch, authGoogle]);
+  }, [dispatch]);
 
   const onMicrosoftHandler = useCallback(() => {
     dispatch(authMicrosoft());
-  }, [dispatch, authMicrosoft]);
+  }, [dispatch]);
 
   const inputs = isEmailLink
     ? inputValidations(authData.email, authData.password, locale)
     : {
         email: {
           modifier: null,
-          message: null
+          message: null,
         },
         password: {
           modifier: null,
-          message: null
+          message: null,
         },
-        canSubmit: false
+        canSubmit: false,
       };
 
   const redirect = isAuth && <Redirect to={paths.ROOT} />;
@@ -180,7 +180,7 @@ const Login = () => {
                         <button
                           type="submit"
                           className={classNames('button', 'is-black', {
-                            'is-loading': loading
+                            'is-loading': loading,
                           })}
                           disabled={isEmailLink ? !inputs.canSubmit : false}
                         >

src/pages/User/User.test.js

@@ -8,14 +8,7 @@ describe('<User /> rendering', () => {
   it('should render without crashing', () => {
     const { component } = shallowWithProviders(<User />)({
       users: {
-        user: {
-          name: '',
-          email: '',
-          location: '',
-          isAdmin: false,
-          file: null,
-          createdAt: new Date().toDateString(),
-        },
+        data: [],
       },
     });
 
@@ -25,14 +18,7 @@ describe('<User /> rendering', () => {
   it('should not show the spinner when creating a user', () => {
     const { component } = mountWithProviders(<User />)({
       users: {
-        user: {
-          name: '',
-          email: '',
-          location: '',
-          isAdmin: false,
-          file: null,
-          createdAt: new Date().toDateString(),
-        },
+        data: [],
       },
     });
 
@@ -42,14 +28,7 @@ describe('<User /> rendering', () => {
   it('should render the UserForm component when creating a user', () => {
     const { component } = mountWithProviders(<User />)({
       users: {
-        user: {
-          name: '',
-          email: '',
-          location: '',
-          isAdmin: false,
-          file: null,
-          createdAt: new Date().toDateString(),
-        },
+        data: [],
       },
     });
 

src/pages/User/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import ClipLoader from 'react-spinners/ClipLoader';
@@ -11,48 +11,42 @@ import { useFormatMessage } from 'hooks';
 const User = () => {
   const { id } = useParams();
 
-  const { success, usersList, userData, error } = useSelector(
+  const isEditing = useMemo(() => !!id, [id]);
+
+  const { success, userData, error } = useSelector(
     (state) => ({
       success: state.users.success,
-      usersList: state.users.list,
-      userData: state.users.user,
+      userData: state.users.data.find((user) => user.id === id),
       error: state.users.error,
     }),
     shallowEqual
   );
 
-  const [user, setUser] = useState(userData || {});
+  const [user, setUser] = useState(
+    isEditing
+      ? userData
+      : {
+          name: '',
+          email: '',
+          location: '',
+          createdAt: new Date().toDateString(),
+          isAdmin: false,
+        }
+  );
 
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (id) {
-      const userFetched = usersList.find(
-        (fetchedUser) => fetchedUser.id === id
-      );
-      if (userFetched) {
-        setUser(userFetched);
-      } else if (userData.id === id) {
-        setUser(userData);
-      } else {
+    if (isEditing) {
+      if (!userData) {
         dispatch(fetchUsers(id));
       }
-    }
-  }, [id, userData]);
-
-  const isEditing = !!id;
 
-  const userForm =
-    !user && id ? (
-      <ClipLoader />
-    ) : (
-      <UserForm
-        isEditing={isEditing}
-        user={user}
-        setUser={setUser}
-        action={isEditing ? modifyUser : createUser}
-      />
-    );
+      if (userData && !user) {
+        setUser(userData);
+      }
+    }
+  }, [isEditing, id, userData, user, dispatch]);
 
   const redirect = (error || success) && <Redirect to={paths.USERS} />;
 
@@ -70,7 +64,18 @@ const User = () => {
           </h1>
         </div>
       </section>
-      <section className="section is-main-section">{userForm}</section>
+      <section className="section is-main-section">
+        {isEditing && !user ? (
+          <ClipLoader />
+        ) : (
+          <UserForm
+            isEditing={isEditing}
+            user={user}
+            setUser={setUser}
+            action={isEditing ? modifyUser : createUser}
+          />
+        )}
+      </section>
     </>
   );
 };