Merge pull request #3187 from OneCommunityGlobal/Shashank_fix_Profile_Page_issues

Shashank_Fix_Profile_Page

Author: one-community

src/actions/userManagement.js

@@ -14,13 +14,12 @@ import {
   CHANGE_USER_PROFILE_PAGE,
   START_USER_INFO_UPDATE,
   FINISH_USER_INFO_UPDATE,
-  ERROR_USER_INFO_UPDATE
+  ERROR_USER_INFO_UPDATE,
 } from '../constants/userManagement';
 import { ENDPOINTS } from '../utils/URL';
 import { UserStatus } from '../utils/enums';
 import { getTimeEndDateEntriesByPeriod, getTimeStartDateEntriesByPeriod } from './timeEntries';
 
-
 /**
  * fetching all user profiles
  */
@@ -50,32 +49,40 @@ export const updateUserStatus = (user, status, reactivationDate) => {
   userProfile.reactivationDate = reactivationDate;
   const patchData = { status, reactivationDate };
   return async dispatch => {
-    if (status === UserStatus.InActive) {
-      try {
-        //Check for last week of work
-        const lastEnddate = await dispatch(getTimeEndDateEntriesByPeriod(user._id, user.createdDate, userProfile.toDate));
-        if (lastEnddate !== "N/A") { //if work exists, set EndDate to that week
+    // Optimistic update
+    dispatch(userProfileUpdateAction(userProfile));
+
+    try {
+      if (status === UserStatus.InActive) {
+        // Check for the last week of work
+        const lastEnddate = await dispatch(
+          getTimeEndDateEntriesByPeriod(user._id, user.createdDate, userProfile.toDate),
+        );
+        if (lastEnddate !== 'N/A') {
+          //if work exists, set EndDate to that week
           patchData.endDate = moment(lastEnddate).format('YYYY-MM-DDTHH:mm:ss');
           userProfile.endDate = moment(lastEnddate).format('YYYY-MM-DDTHH:mm:ss');
-        } else { //No work exists, set end date to start date
+        } else {
+          //No work exists, set end date to start date
           patchData.endDate = moment(user.createdDate);
           userProfile.endDate = moment(user.createdDate);
         }
-
-        const updateProfilePromise = axios.patch(ENDPOINTS.USER_PROFILE(user._id), patchData);
-        updateProfilePromise.then(res => {
-          dispatch(userProfileUpdateAction(userProfile));
-        });
-      } catch (error) {
-        console.error("Error updating user status:", error);
+      } else {
+        // User is active
+        patchData.endDate = undefined;
+        userProfile.endDate = undefined;
       }
-    } else {//user is active
-      patchData.endDate = undefined;
-      userProfile.endDate = undefined;
-      const updateProfilePromise = axios.patch(ENDPOINTS.USER_PROFILE(user._id), patchData);
-      updateProfilePromise.then(res => {
-        dispatch(userProfileUpdateAction(userProfile));
-      });
+
+      // Perform the API call
+      await axios.patch(ENDPOINTS.USER_PROFILE(user._id), patchData);
+
+      // Ensure the dispatched action is final (optional if optimistic update is sufficient)
+      dispatch(userProfileUpdateAction(userProfile));
+    } catch (error) {
+      console.error('Error updating user status:', error);
+
+      // Rollback to previous state on error
+      dispatch(userProfileUpdateAction(user));
     }
   };
 };
@@ -105,18 +112,19 @@ export const updateRehireableStatus = (user, isRehireable) => {
  */
 export const toggleVisibility = (user, isVisible) => {
   const userProfile = { ...user };
-  userProfile.isVisible = isVisible
+  userProfile.isVisible = isVisible;
   const requestData = { isVisible };
 
-  const toggleVisibilityPromise = axios.patch(ENDPOINTS.TOGGLE_VISIBILITY(user._id), requestData)
+  const toggleVisibilityPromise = axios.patch(ENDPOINTS.TOGGLE_VISIBILITY(user._id), requestData);
   return async dispatch => {
-    toggleVisibilityPromise.then(res => {
-      dispatch(userProfileUpdateAction(userProfile));
-    }).catch(err => {
-      console.error("failed to toggle visibility: ", err);
-    });
+    toggleVisibilityPromise
+      .then(res => {
+        dispatch(userProfileUpdateAction(userProfile));
+      })
+      .catch(err => {
+        console.error('failed to toggle visibility: ', err);
+      });
   };
-
 };
 
 /**
@@ -220,24 +228,29 @@ export const updateUserFinalDayStatus = (user, status, finalDayDate) => {
 };
 
 export const updateUserFinalDayStatusIsSet = (user, status, finalDayDate, isSet) => {
-  const userProfile = { ...user };
-  userProfile.endDate = finalDayDate;
-  userProfile.isActive = status === 'Active';
-  userProfile.isSet = isSet === 'FinalDay';
-  const patchData = { status, endDate: finalDayDate, isSet };
-  if (finalDayDate === undefined) {
-    patchData.endDate = undefined;
-    userProfile.endDate = undefined;
-  } else {
-    userProfile.endDate = moment(finalDayDate).add(1, 'days').format('YYYY-MM-DD');
-    patchData.endDate = moment(finalDayDate).add(1, 'days').format('YYYY-MM-DD');
-  }
-
-  const updateProfilePromise = axios.patch(ENDPOINTS.USER_PROFILE(user._id), patchData);
   return async dispatch => {
-    updateProfilePromise.then(res => {
-      dispatch(userProfileUpdateAction(userProfile));
-    });
+    try {
+      // Prepare patch data
+      const patchData = {
+        status,
+        endDate: finalDayDate ? moment(finalDayDate).add(1, 'days').format('YYYY-MM-DD') : undefined,
+        isSet,
+      };
+
+      // Make the API request
+      const response = await axios.patch(ENDPOINTS.USER_PROFILE(user._id), patchData);
+
+      // Update the Redux store with the response data
+      const updatedUserProfile = {
+        ...user,
+        ...response.data, // Use the updated data from the API
+      };
+
+      dispatch(userProfileUpdateAction(updatedUserProfile));
+    } catch (error) {
+      console.error('Error updating user profile:', error);
+      throw new Error('Failed to update user profile.');
+    }
   };
 };
 
@@ -265,7 +278,6 @@ export const getUserProfileBasicInfo = () => {
   };
 };
 
-
 /**
  * Set a flag that starts fetching user profile basic info
  */
@@ -297,21 +309,21 @@ export const userProfilesBasicInfoFetchErrorAction = payload => {
   };
 };
 
-export const enableEditUserInfo = (value) => (dispatch, getState) => {
+export const enableEditUserInfo = value => (dispatch, getState) => {
   dispatch({ type: ENABLE_USER_PROFILE_EDIT, payload: value });
-}
+};
 
-export const disableEditUserInfo = (value) => (dispatch, getState) => {
+export const disableEditUserInfo = value => (dispatch, getState) => {
   dispatch({ type: DISABLE_USER_PROFILE_EDIT, payload: value });
-}
+};
 
-export const changePagination = (value) => (dispatch, getState) => {
+export const changePagination = value => (dispatch, getState) => {
   dispatch({ type: CHANGE_USER_PROFILE_PAGE, payload: value });
-}
+};
 
-export const updateUserInfomation = (value) => (dispatch, getState) => {
-  dispatch({ type: START_USER_INFO_UPDATE, payload: value })
-}
+export const updateUserInfomation = value => (dispatch, getState) => {
+  dispatch({ type: START_USER_INFO_UPDATE, payload: value });
+};
 
 // export const updateUserInformation=(value)=>async(dispatch,getState)=>{
 //   try {
@@ -324,4 +336,3 @@ export const updateUserInfomation = (value) => (dispatch, getState) => {
 //     dispatch({type:ERROR_USER_INFO_UPDATE})
 //   }
 // }
-

src/components/UserManagement/PauseAndResumeButton.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Button } from 'reactstrap';
 import { toast } from 'react-toastify';
-import { PAUSE, RESUME } from '../../languages/en/ui';
+import { PAUSE, RESUME, PROCESSING } from '../../languages/en/ui';
 import { UserStatus } from '../../utils/enums';
 import ActivationDatePopup from './ActivationDatePopup';
 import { updateUserStatus } from '../../actions/userManagement';
@@ -18,6 +18,7 @@ function PauseAndResumeButton(props) {
   const { darkMode } = props;
   const [activationDateOpen, setActivationDateOpen] = useState(false);
   const [isActive, setIsActive] = useState(true);
+  const [isLoading, setIsLoading] = useState(false); // Added loading state
 
   const activationDatePopupClose = () => {
     setActivationDateOpen(false);
@@ -33,26 +34,42 @@ function PauseAndResumeButton(props) {
    * Call back on Pause confirmation button click to trigger the action to update user status
    */
   const pauseUser = async reActivationDate => {
-    await updateUserStatus(props.userProfile, UserStatus.InActive, reActivationDate)(dispatch);
-    setIsActive(false);
-    setActivationDateOpen(false);
-    setTimeout(async () => {
-      await props.loadUserProfile();
+    setIsLoading(true); // Start loading indicator
+    try {
+      await updateUserStatus(props.userProfile, UserStatus.InActive, reActivationDate)(dispatch);
+      setIsActive(false);
+      setActivationDateOpen(false);
+
+      // Optimistically update the UI
       toast.success('Your Changes were saved successfully.');
-    }, 1000);
+    } catch (error) {
+      toast.error('Failed to update the user status.');
+      console.error(error);
+    } finally {
+      setIsLoading(false); // Stop loading indicator
+      await props.loadUserProfile(); // Ensure state sync
+    }
   };
 
   /**
    * Call back on Pause or Resume button click to trigger the action to update user status
    */
   const onPauseResumeClick = async (user, status) => {
     if (status === UserStatus.Active) {
-      await updateUserStatus(user, status, Date.now())(dispatch);
-      setIsActive(status);
-      setTimeout(async () => {
-        await props.loadUserProfile();
+      setIsLoading(true); // Start loading indicator
+      try {
+        await updateUserStatus(user, status, Date.now())(dispatch);
+        setIsActive(true);
+
+        // Optimistically update the UI
         toast.success('Your Changes were saved successfully.');
-      }, 1000);
+      } catch (error) {
+        toast.error('Failed to update the user status.');
+        console.error(error);
+      } finally {
+        setIsLoading(false); // Stop loading indicator
+        await props.loadUserProfile(); // Ensure state sync
+      }
     } else {
       setActivationDateOpen(true);
     }
@@ -67,6 +84,7 @@ function PauseAndResumeButton(props) {
       <Button
         outline={!darkMode}
         color={isActive ? 'warning' : 'success'}
+        disabled={isLoading} // Disable the button while loading
         className={`btn ${darkMode ? '' : `btn-outline-${isActive ? 'warning' : 'success'}`} ${
           props.isBigBtn ? '' : 'btn-sm'
         }  mr-1`}
@@ -76,7 +94,7 @@ function PauseAndResumeButton(props) {
         style={darkMode ? boxStyleDark : boxStyle}
         data-testid="pause-resume-button"
       >
-        {isActive ? PAUSE : RESUME}
+        {isLoading ? PROCESSING : isActive ? PAUSE : RESUME} {/* Show loading state */}
       </Button>
     </>
   );

src/components/UserManagement/SetUpFinalDayButton.jsx

@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
 import { updateUserFinalDayStatusIsSet } from '../../actions/userManagement';
 import { boxStyle, boxStyleDark } from '../../styles';
 import SetUpFinalDayPopUp from './SetUpFinalDayPopUp';
-import { SET_FINAL_DAY, CANCEL } from '../../languages/en/ui';
+import { SET_FINAL_DAY, CANCEL , PROCESSING } from '../../languages/en/ui';
 import { FinalDay } from '../../utils/enums';
 /**
  * @param {*} props
@@ -18,28 +18,36 @@ function SetUpFinalDayButton(props) {
   const [isSet, setIsSet] = useState(false);
   const [finalDayDateOpen, setFinalDayDateOpen] = useState(false);
   const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState(false); // Added loading state
 
   useEffect(() => {
     if (props.userProfile?.endDate !== undefined) setIsSet(true);
   }, []);
 
   const onFinalDayClick = async () => {
-    const activeStatus = props.userProfile.isActive ? 'Active' : 'Inactive';
-    if (isSet) {
-      // updateUserFinalDayStatus(props.userProfile, activeStatus, undefined)(dispatch);
-      setIsSet(!isSet);
-      setTimeout(async () => {
-        await props.loadUserProfile();
+    setIsLoading(true); // Start loading indicator
+    try {
+      const activeStatus = props.userProfile.isActive ? 'Active' : 'Inactive';
+
+      if (isSet) {
         await updateUserFinalDayStatusIsSet(
           props.userProfile,
           activeStatus,
           undefined,
           FinalDay.NotSetFinalDay,
         )(dispatch);
+
+        setIsSet(false);
+        await props.loadUserProfile(); // Ensure state sync
         toast.success("This user's final day has been deleted.");
-      }, 1000);
-    } else {
-      setFinalDayDateOpen(true);
+      } else {
+        setFinalDayDateOpen(true);
+      }
+    } catch (error) {
+      console.error('Error handling final day click:', error);
+      toast.error("An error occurred while updating the user's final day.");
+    } finally {
+      setIsLoading(false); // Stop loading indicator
     }
   };
 
@@ -48,19 +56,25 @@ function SetUpFinalDayButton(props) {
   };
 
   const deactiveUser = async finalDayDate => {
-    // await updateUserFinalDayStatus(props.userProfile, 'Active', finalDayDate)(dispatch);
-    setIsSet(true);
-    setFinalDayDateOpen(false);
-    setTimeout(async () => {
-      await props.loadUserProfile();
+    setIsLoading(true); // Start loading indicator
+    try {
       await updateUserFinalDayStatusIsSet(
         props.userProfile,
         'Active',
         finalDayDate,
         FinalDay.FinalDay,
       )(dispatch);
+
+      setIsSet(true);
+      setFinalDayDateOpen(false);
+      await props.loadUserProfile(); // Ensure state sync
       toast.success("This user's final day has been set.");
-    }, 1000);
+    } catch (error) {
+      console.error('Error setting the final day:', error);
+      toast.error("An error occurred while setting the user's final day.");
+    } finally {
+      setIsLoading(false); // Stop loading indicator
+    }
   };
 
   return (
@@ -81,7 +95,7 @@ function SetUpFinalDayButton(props) {
         }}
         style={darkMode ? boxStyleDark : boxStyle}
       >
-        {isSet ? CANCEL : SET_FINAL_DAY}
+        {isLoading ? PROCESSING : isSet ? CANCEL : SET_FINAL_DAY} {/* Show loading state */}
       </Button>
     </>
   );