userData changes

Author: tpiaggio

src/components/UserForm/index.jsx

@@ -402,7 +402,7 @@ UserForm.propTypes = {
     id: PropTypes.string,
     isAdmin: PropTypes.bool.isRequired,
     name: PropTypes.string.isRequired,
-    location: PropTypes.string.isRequired,
+    location: PropTypes.string,
     logoUrl: PropTypes.string,
     createdAt: PropTypes.string.isRequired
   }),

src/pages/User/index.jsx

@@ -11,49 +11,37 @@ import { useFormatMessage } from 'hooks';
 const User = () => {
   const { id } = useParams();
 
-  const { success, usersList } = useSelector(
+  const { success, usersList, userData, error } = useSelector(
     (state) => ({
       success: state.users.success,
-      usersList: state.users.data,
+      usersList: state.users.list,
+      userData: state.users.user,
+      error: state.users.error
     }),
     shallowEqual
   );
 
-  const [user, setUser] = useState({
-    name: '',
-    email: '',
-    location: '',
-    isAdmin: false,
-    file: null,
-    createdAt: new Date().toDateString(),
-  });
+  const [user, setUser] = useState(userData);
 
   const dispatch = useDispatch();
 
   useEffect(() => {
     if (id) {
-      const thisUser = usersList
-        ?.filter((fetchedUser) => fetchedUser.id === id)
-        .pop();
-      if (thisUser) {
-        setUser(thisUser);
+      const userFetched = usersList?.find((fetchedUser) => fetchedUser.id === id);
+      if (userFetched) {
+        setUser(userFetched);
+      } else if(userData.id === id) {
+        setUser(userData);
       } else {
         dispatch(fetchUsers(id));
       }
     }
-  }, [id]);
-
-  useEffect(() => {
-    const thisUser = usersList
-      ?.filter((fetchedUser) => fetchedUser.id === id)
-      .pop();
-    setUser(thisUser);
-  }, [usersList]);
+  }, [id, userData]);
 
   const isEditing = !!id;
 
   const userForm =
-    !user.name && id ? (
+    !user && id ? (
       <ClipLoader />
     ) : (
       <UserForm
@@ -63,7 +51,7 @@ const User = () => {
       />
     );
 
-  const redirect = (user.error || success) && <Redirect to={paths.USERS} />;
+  const redirect = (error || success) && <Redirect to={paths.USERS} />;
 
   const editUserMessage = useFormatMessage('User.editUser');
 

src/pages/Users/index.jsx

@@ -14,7 +14,7 @@ import classes from './Users.module.scss';
 const Users = () => {
   const { usersList, isAdmin, error, loading, deleted } = useSelector(
     state => ({
-      usersList: state.users.data,
+      usersList: state.users.list,
       isAdmin: state.auth.userData.isAdmin,
       error: state.users.error,
       loading: state.users.loading,

src/state/actions/users.js

@@ -54,7 +54,8 @@ export const fetchUsers = (userId = '') => {
       const user = { ...userData, id: userId };
       return dispatch(
         USERS_FETCH_DATA_SUCCESS({
-          users: [user],
+          list: getState().users.list,
+          user
         })
       );
     }
@@ -79,7 +80,8 @@ export const fetchUsers = (userId = '') => {
 
     return dispatch(
       USERS_FETCH_DATA_SUCCESS({
-        users: usersData.filter((user) => user.id !== id),
+        list: usersData.filter((user) => user.id !== id),
+        user: getState().users.user
       })
     );
   };
@@ -98,7 +100,7 @@ export const deleteUser = (id) => {
     dispatch(USERS_DELETE_USER_INIT());
     const { locale } = getState().preferences;
     const { logoUrl } = getState()
-      .users.data.filter((user) => user.id === id)
+      .users.list.filter((user) => user.id === id)
       .pop();
 
     const deleteLogoTask = logoUrl ? deleteLogo(logoUrl) : null;
@@ -241,7 +243,7 @@ export const modifyUser = ({
     const { logoUrl } = isProfile
       ? getState().auth.userData
       : getState()
-          .users.data.filter((user) => user.id === id)
+          .users.list.filter((user) => user.id === id)
           .pop();
 
     let deleteLogoTask;

src/state/reducers/users/index.js

@@ -19,7 +19,15 @@ import {
 } from 'state/actions/users';
 
 const initialState = {
-  data: [],
+  list: [],
+  user: {
+    name: '',
+    email: '',
+    location: '',
+    isAdmin: false,
+    file: null,
+    createdAt: new Date().toDateString()
+  },
   loading: false,
   error: null,
   success: false,
@@ -34,7 +42,8 @@ export const usersReducer = createReducer(
     }),
     [USERS_FETCH_DATA_SUCCESS]: (state, payload) => ({
       ...state,
-      data: payload.users,
+      list: payload.list,
+      user: payload.user,
       loading: false,
       error: null
     }),
@@ -49,7 +58,7 @@ export const usersReducer = createReducer(
     }),
     [USERS_DELETE_USER_SUCCESS]: (state, payload) => ({
       ...state,
-      data: state.data.filter(elem => elem.id !== payload.id),
+      list: state.list.filter(elem => elem.id !== payload.id),
       loading: false,
       error: null,
       deleted: true
@@ -61,15 +70,15 @@ export const usersReducer = createReducer(
     }),
     [USERS_CLEAR_DATA]: state => ({
       ...initialState,
-      data: state.data
+      list: state.list
     }),
     [USERS_CREATE_USER_INIT]: state => ({
       ...state,
       loading: true
     }),
     [USERS_CREATE_USER_SUCCESS]: (state, payload) => ({
       ...state,
-      data: state.data.concat(payload.user),
+      list: state.list.concat(payload.user),
       loading: false,
       error: null,
       success: true
@@ -85,7 +94,7 @@ export const usersReducer = createReducer(
     }),
     [USERS_MODIFY_USER_SUCCESS]: (state, payload) => ({
       ...state,
-      data: state.data.map(elem => {
+      list: state.list.map(elem => {
         if (elem.id === payload.id) {
           return {
             name: payload.user.name,
@@ -98,6 +107,7 @@ export const usersReducer = createReducer(
         }
         return elem;
       }),
+      user: payload,
       loading: false,
       error: null,
       success: true