Haoji fetch images from team page and multiple profile images selection for individuals

src/actions/userManagement.js

@@ -34,7 +34,7 @@ export const getAllUserProfile = () => {
  * @param {*} status  - Active/InActive
  */
 export const updateUserStatus = (user, status, reactivationDate) => {
-  const userProfile = { ...user};
+  const userProfile = { ...user };
   userProfile.isActive = status === UserStatus.Active;
   userProfile.reactivationDate = reactivationDate;
   const patchData = { status, reactivationDate };
@@ -72,6 +72,26 @@ export const updateRehireableStatus = (user, isRehireable) => {
   };
 };
 
+/**
+ * update the user profile picture
+ * @param {*} user - the user to be updated
+ * @param {*} pic  - profile picture url
+ */
+export const updateUserProfilePic = (user, pic, status) => {
+  const userProfile = { ...user };
+  const patchData = { status, profilePic: pic };
+  if (pic) {
+    patchData.profilePic = pic;
+    userProfile.profilePic = pic;
+  }
+  const updateProfilePromise = axios.patch(ENDPOINTS.USER_PROFILE(user._id), patchData);
+  return async dispatch => {
+    updateProfilePromise.then(res => {
+      dispatch(userProfileUpdateAction(userProfile));
+    });
+  };
+};
+
 /**
  * delete an existing user
  * @param {*} user  - the user to be deleted
@@ -152,7 +172,7 @@ export const userProfileDeleteAction = user => {
  * @param {*} finalDate  - the date to be inactive
  */
 export const updateUserFinalDayStatus = (user, status, finalDayDate) => {
-  const userProfile = { ...user};
+  const userProfile = { ...user };
   userProfile.endDate = finalDayDate;
   userProfile.isActive = status === 'Active';
   const patchData = { status, endDate: finalDayDate };
@@ -173,7 +193,7 @@ export const updateUserFinalDayStatus = (user, status, finalDayDate) => {
 };
 
 export const updateUserFinalDayStatusIsSet = (user, status, finalDayDate, isSet) => {
-  const userProfile = { ...user};
+  const userProfile = { ...user };
   userProfile.endDate = finalDayDate;
   userProfile.isActive = status === 'Active';
   userProfile.isSet = isSet === 'FinalDay';
@@ -192,4 +212,4 @@ export const updateUserFinalDayStatusIsSet = (user, status, finalDayDate, isSet)
       dispatch(userProfileUpdateAction(userProfile));
     });
   };
-};
+};

src/components/Header/Header.jsx

@@ -52,6 +52,7 @@ import PopUpBar from 'components/PopUpBar';
 import './Header.css';
 import hasPermission, { cantUpdateDevAdminDetails } from '../../utils/permissions';
 import { fetchTaskEditSuggestions } from 'components/TaskEditSuggestions/thunks';
+import { tr } from 'date-fns/locale';
 
 export function Header(props) {
   const [isOpen, setIsOpen] = useState(false);
@@ -110,7 +111,7 @@ export function Header(props) {
   const [hasProfileLoaded, setHasProfileLoaded] = useState(false);
   const dismissalKey = `lastDismissed_${userId}`;
   const [lastDismissed, setLastDismissed] = useState(localStorage.getItem(dismissalKey));
-
+  const [isSelectImgModalVisible, setSelectImgModalVisible] = useState(true);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -432,7 +433,23 @@ export function Header(props) {
             <div className="card-content">{modalContent}</div>
           </Card>
         )}
-
+      {isSelectImgModalVisible && (
+        <Card color="primary">
+        {props?.userProfile?.storedPics?.length > 0 && (
+          <>
+            <div className="close-button">
+              <Button close onClick={()=>{setSelectImgModalVisible(false)}} />
+            </div>
+            <p></p>
+            <Link to={`/userprofile/${props.userProfile._id}`}>
+              <div className='card-content'>We found multiple pictures for you on our website.
+              Please choose one of them in Profile page</div>
+            </Link>
+            <p></p>
+          </>
+        )}
+        </Card>
+      )}
     </div>
   );
 }

src/components/UserManagement/SelectProfilePicPopUp.jsx

@@ -0,0 +1,160 @@
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert } from 'reactstrap';
+import { boxStyle } from 'styles';
+import { toast } from 'react-toastify';
+import { getUserProfile, updateUserProfile } from '../../actions/userProfile';
+import { connect, useDispatch, useSelector } from 'react-redux';
+import { ENDPOINTS } from '../../utils/URL';
+import axios from 'axios';
+import { set } from 'lodash';
+/**
+ * Modal popup to show the user profile picture
+ */
+const SelectProfilePicPopup = React.memo(props => {
+  const [selectedPic, setSelectedPic] = useState();
+  const [newPic, setNewPic] = useState();
+  const [storedPics, setStoredPics] = useState();
+  const [profilePic, setProfilePic] = useState();
+  const userProfile = useSelector(state => state.userProfile);
+
+
+
+  useEffect(() => {
+    loadUserProfile();
+  }, [props]);
+
+  const loadUserProfile = async () => {
+
+    const userId = props?.user?._id;
+    if (!userId) return;
+    console.log(userId);
+    try {
+      const response = await axios.get(ENDPOINTS.USER_PROFILE(userId));
+      const userProfile = response.data;
+      setStoredPics(userProfile.storedPics);
+      setProfilePic(userProfile.profilePic);
+    } catch (err) {
+      console.error(err);
+      toast.error('Failed to load user profile.');
+    }
+  };
+
+  const closePopup = e => {
+    props.onClose();
+  };
+
+  /****
+   * Remaining Problem: cannot selct the added url because it does not pass the
+   * validateProfilePic function in the userHelper.js, which should be further
+   * modified for the new feature.
+   *  ****/
+  const saveChange = async e => {
+    try {
+      await props.getUserProfile(props.user._id);
+      console.log(selectedPic[0])
+      const updatedProfile = {
+        ...userProfile,
+        profilePic: selectedPic[0],
+      };
+      await props.updateUserProfile(updatedProfile);
+      toast.success('Picture selected has been saved as profile photo.');
+    } catch (err) {
+      console.log(err);
+      toast.error('Failed to update the profile picture.');
+    }
+  };
+
+  const addPic = e => {
+    const newURL = [document.getElementById('newProfilePicURL').value];
+    setNewPic(newURL);
+  };
+
+  const selectPic = async (pic, id) => {
+    await props.getUserProfile(props.user._id);
+    console.log(userProfile)
+    const selected = [pic].flat();
+    setSelectedPic(selected);
+    document.querySelectorAll('.dashboardimg').forEach(element => {
+      element.style.border = '';
+    });
+    document.getElementById(id).style.border = '3px solid red';
+  };
+
+  return (
+    <Modal isOpen={props.open} toggle={closePopup} autoFocus={false}>
+      <ModalHeader toggle={closePopup}>Select Your Profile Picture</ModalHeader>
+      <ModalBody>
+        <b>Please choose the profile picture:</b>
+        <div>
+          {
+            profilePic ?
+              <img
+                src={`${profilePic || '/pfp-default-header.png'}`}
+                alt=""
+                style={{ maxWidth: '60px', maxHeight: '60px' }}
+                className="dashboardimg"
+                id={'currentProfilePic'}
+                onClick={e => selectPic(profilePic, 'currentProfilePic')}
+              />
+              :
+              (Array.isArray(storedPics) && storedPics.length > 0) ?
+                storedPics.map((pic, index) => (
+                  <img
+                    src={`${pic || '/pfp-default-header.png'}`}
+                    alt=""
+                    style={{ maxWidth: '60px', maxHeight: '60px' }}
+                    className="dashboardimg"
+                    key={`pic_fetched_'+${index}`}
+                    id={`pic_fetched_'+${index}`}
+                    onClick={e => selectPic(pic, `pic_fetched_'+${index}`)}
+                  />
+                ))
+                :
+                null
+          }
+          {newPic && (
+            <img
+              src={`${newPic || '/pfp-default-header.png'}`}
+              alt=""
+              style={{ maxWidth: '60px', maxHeight: '60px' }}
+              className="dashboardimg"
+              key={`pic_added`}
+              id={`pic_added`}
+              onClick={e => selectPic(newPic, `pic_added`)}
+            />
+          )}
+        </div>
+        <p>Cannot find any? Add an image:</p>
+
+        <input
+          type="url"
+          name="url"
+          id="newProfilePicURL"
+          placeholder="https://example.com"
+          pattern="https://.*"
+          size="30"
+          required
+        />
+        <Button color="primary" onClick={addPic} style={boxStyle} id="add_url">
+          Add
+        </Button>
+      </ModalBody>
+      <ModalFooter>
+        <Button color="primary" onClick={saveChange} style={boxStyle}>
+          Save
+        </Button>
+        <Button color="secondary" onClick={closePopup} style={boxStyle}>
+          Close
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+});
+
+const mapStateToProps = state => state;
+
+export default connect(mapStateToProps, {
+  getUserProfile,
+  updateUserProfile,
+})(SelectProfilePicPopup);