Merge pull request #2031 from jng34/alphabetizeProjMembers

Sort Project Members by first name

Author: trillium

VRMS

@@ -0,0 +1 @@
+Subproject commit 7042af0f43f0b034977c7f64c613e9d8b7199edb

client/src/components/manageProjects/editPMs/editProjectMembers.jsx

@@ -29,6 +29,9 @@ const EditProjectMembers = ({ projectToEdit }) => {
   const [projectMembers, setProjectMembers] = useState([]);
   const [renderedUsers, setRenderedUsers] = useState([]);
 
+  // Sort users alphabetically by first name
+  const sortUsers = (userArr) => [...userArr].sort((a, b) => a.name.firstName.localeCompare(b.name.firstName));
+
   useEffect(() => {
     // Create an array of projectMembers (users) from project's managedByUsers (user IDs)
     const fetchProjectMembers = async () => {
@@ -41,8 +44,9 @@ const EditProjectMembers = ({ projectToEdit }) => {
               return user;
             })
           );
-          setProjectMembers(members);
-          setRenderedUsers(members);
+          const sortedMembers = sortUsers(members);
+          setProjectMembers(sortedMembers);
+          setRenderedUsers(sortedMembers);
         } catch (err) {
           console.log(err)
         }
@@ -123,7 +127,7 @@ const EditProjectMembers = ({ projectToEdit }) => {
 
     setToggleSelect(true);
     if (!toggleSelect) {
-      setRenderedUsers((prevUsers) => [...prevUsers, addedUser]); // Add user to project's managedByUsers array
+      setRenderedUsers((prevUsers) => sortUsers([...prevUsers, addedUser])); // Add user to project's managedByUsers array
       setChangesMade(true); // Set changes made to true
     }
     // Confirmation message disappears after 1.5 seconds
@@ -175,7 +179,21 @@ const EditProjectMembers = ({ projectToEdit }) => {
         {/* Display error message */}
         {error && (<Typography color="red">{error}</Typography>)}
         {/* Display project members */}
-        <ProjectMembersList projectId={projectToEdit._id} projectMembers={projectMembers} editMode={editMode} setChangesMade={setChangesMade} closeConfirmModal={closeConfirmModal} setCloseConfirmModal={setCloseConfirmModal} setEditMode={setEditMode} renderedUsers={renderedUsers} setRenderedUsers={setRenderedUsers} isLoading={isLoading} setEmail={setEmail} setIsLoading={setIsLoading} />
+        <ProjectMembersList 
+          projectId={projectToEdit._id} 
+          projectMembers={projectMembers} 
+          editMode={editMode} 
+          setChangesMade={setChangesMade}
+          closeConfirmModal={closeConfirmModal} 
+          setCloseConfirmModal={setCloseConfirmModal} 
+          setEditMode={setEditMode} 
+          renderedUsers={renderedUsers} 
+          setRenderedUsers={setRenderedUsers} 
+          sortUsers={sortUsers} 
+          isLoading={isLoading} 
+          setEmail={setEmail} 
+          setIsLoading={setIsLoading} 
+        />
       </TitledBox>
     </Box>
   )

client/src/components/manageProjects/editPMs/projectMembersList.jsx

@@ -20,7 +20,7 @@ const userApiService = new UserApiService();
 const projectApiService = new ProjectApiService();
 
 
-const ProjectMembersList = ({ projectId, projectMembers, renderedUsers, setRenderedUsers, editMode, closeConfirmModal, setChangesMade, setCloseConfirmModal, setEditMode, isLoading, setEmail, setIsLoading }) => {
+const ProjectMembersList = ({ projectId, projectMembers, renderedUsers, setRenderedUsers, editMode, closeConfirmModal, setChangesMade, setCloseConfirmModal, setEditMode, sortUsers, isLoading, setEmail, setIsLoading }) => {
   const [openModal, setOpenModal] = useState(false);
   const [removeConfirmModal, setRemoveConfirmModal] = useState(false);
   const [removeId, setRemoveId] = useState("");
@@ -118,7 +118,8 @@ const ProjectMembersList = ({ projectId, projectMembers, renderedUsers, setRende
     setChangesMade(true);
     // Remove user from renderedUsers state to update UI
     const updatedUsers = renderedUsers.filter(user => user._id !== removeId);
-    setRenderedUsers(updatedUsers);
+    const sortedUsers = sortUsers(updatedUsers);
+    setRenderedUsers(sortedUsers);
     // Show confirmation modal
     setRemoveConfirmModal(true);
     setOpenModal(false);