Merge pull request #681 from codeforpdx/663/add-mobile-contacts-search

663/add mobile contacts sort

Author: leekahung

src/components/Contacts/ContactListTable.jsx

@@ -26,15 +26,15 @@ import ContactListTableMobile from './ContactListTableMobile';
  * @param {Function} Props.addContact - from Contacts page
  * @returns {React.JSX.Element} The ContactListTable Component
  */
-const ContactListTable = ({ contacts, deleteContact, handleDeleteContact, addContact }) => {
+const ContactListTable = ({ contacts = [], deleteContact, handleDeleteContact, addContact }) => {
   const [showMessageModal, setShowMessageModal] = useState(false);
   const [messageToField, setMessageToField] = useState('');
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-
   const [showAddContactModal, setShowAddContactModal] = useState(false);
   const [contactToEdit, setContactToEdit] = useState(null);
   const [isEditing, setIsEditing] = useState(false);
+  const contactWebIds = contacts.map(({ webId }) => webId);
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   const handleSendMessage = (contactId) => {
     setShowMessageModal(!showMessageModal);
@@ -47,14 +47,12 @@ const ContactListTable = ({ contacts, deleteContact, handleDeleteContact, addCon
     setIsEditing(true);
   };
 
-  const contactWebIds = contacts.map(({ webId }) => webId);
-
   return (
     <Box
       sx={{
         margin: '20px 0',
         width: '95vw',
-        height: '500px'
+        minHeight: '500px'
       }}
     >
       {isSmallScreen ? (

src/hooks/useTableSort.js

@@ -1,22 +1,36 @@
-// hooks/useSortedData.js
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-const useSortedData = (initialData, getFieldValue, initialFieldType) => {
-  const [fieldType, setFieldType] = useState(initialFieldType);
+const useTableSort = (initialData, initialSortValue) => {
   const [sortedData, setSortedData] = useState([]);
+  const [sortValue, setSortValue] = useState(initialSortValue);
+
+  const sortData = (value) => {
+    const sorted = [...initialData].sort((a, b) => {
+      if (value === 'First Name') {
+        return a.givenName.localeCompare(b.givenName);
+      }
+      if (value === 'Last Name') {
+        return a.familyName.localeCompare(b.familyName);
+      }
+      if (value === 'Web ID') {
+        return a.webId.localeCompare(b.webId);
+      }
+      return 0;
+    });
+    setSortedData(sorted);
+  };
 
   useEffect(() => {
-    const sortData = (dataToSort, field) =>
-      [...dataToSort].sort((a, b) => {
-        const fieldA = getFieldValue(a, field);
-        const fieldB = getFieldValue(b, field);
-        return fieldA.localeCompare(fieldB);
-      });
+    setSortedData([...initialData]);
+  }, [initialData]);
 
-    setSortedData(sortData(initialData, fieldType));
-  }, [fieldType, initialData, getFieldValue]);
+  useEffect(() => {
+    if (initialData.length > 0) {
+      sortData(sortValue, initialData);
+    }
+  }, [sortValue, initialData]);
 
-  return { fieldType, setFieldType, sortedData };
+  return { sortedData, sortValue, setSortValue };
 };
 
-export default useSortedData;
+export default useTableSort;

src/pages/Contacts.jsx

@@ -37,8 +37,10 @@ const Contacts = () => {
   const [processing, setProcessing] = useState(false);
   const [selectedContactToDelete, setSelectedContactToDelete] = useState(null);
   const [deleteViaEdit, setDeleteViaEdit] = useState(false);
+  const [sortValue, setSortValue] = useState('Sort by:');
+  const [sortedData, setSortedData] = useState([]);
   const {
-    data,
+    data = [],
     isLoading,
     isError,
     error,
@@ -47,12 +49,42 @@ const Contacts = () => {
     delete: deleteContact
   } = useContactsList();
   const { addNotification } = useNotification();
-  const [fieldType, setFieldType] = useState('First Name');
+
+  const sortData = (value) => {
+    const sorted = [...data].sort((a, b) => {
+      if (value === 'Default') {
+        return data;
+      }
+      if (value === 'First Name') {
+        return a.givenName.localeCompare(b.givenName);
+      }
+      if (value === 'Last Name') {
+        return a.familyName.localeCompare(b.familyName);
+      }
+      if (value === 'Web ID') {
+        return a.webId.localeCompare(b.webId);
+      }
+      return 0;
+    });
+    setSortedData(sorted);
+  };
+
+  const handleSortChange = (event) => {
+    const { value } = event.target;
+    setSortValue(value);
+    sortData(value);
+  };
 
   useEffect(() => {
     refetch();
   }, []);
 
+  useEffect(() => {
+    if (data.length > 0) {
+      setSortedData(data);
+    }
+  }, [data]);
+
   const getContactDisplayName = (contact) => {
     if (!contact) {
       return 'Unknown Contact';
@@ -104,14 +136,13 @@ const Contacts = () => {
     >
       <Box>
         <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          {/* TODO: Make sorting options functional */}
           {isSmallScreen && (
             <FormControl sx={{ minWidth: 120 }} size="small">
               <Select
                 id="contact-select-field-small"
-                value={fieldType}
                 defaultValue="First Name"
-                onChange={(e) => setFieldType(e.target.value)}
+                value={sortValue}
+                onChange={handleSortChange}
                 sx={{
                   borderRadius: '8px',
                   color: 'primary.main',
@@ -127,6 +158,11 @@ const Contacts = () => {
                 }}
                 IconComponent={KeyboardArrowDownIcon}
               >
+                {' '}
+                <MenuItem value="Sort by:" disabled>
+                  Sort by:
+                </MenuItem>
+                <MenuItem value="Default">Default</MenuItem>
                 <MenuItem value="First Name">First Name</MenuItem>
                 <MenuItem value="Last Name">Last Name</MenuItem>
                 <MenuItem value="Web ID">Web ID</MenuItem>
@@ -145,7 +181,7 @@ const Contacts = () => {
         </Box>
         {data.length > 0 ? (
           <ContactListTable
-            contacts={data}
+            contacts={isSmallScreen ? sortedData : data}
             deleteContact={(contact) => handleSelectDeleteContact(contact)}
             handleDeleteContact={handleDeleteContact}
             addContact={addContact}

test/components/Contacts/ContactListTableDesktop.test.jsx

@@ -48,6 +48,12 @@ const contacts = [
     givenName: 'Bob',
     person: 'Bob Builder',
     webId: 'https://example.com/Builder'
+  },
+  {
+    familyName: 'Carl',
+    givenName: 'Carson',
+    person: 'Carl Carson',
+    webId: 'https://example.com/Carson'
   }
 ];
 

test/components/Contacts/ContactListTableMobile.test.jsx

@@ -13,6 +13,20 @@ afterEach(() => {
 
 const queryClient = new QueryClient();
 
+const sortData = (data, key) =>
+  [...data].sort((a, b) => {
+    if (key === 'First Name') {
+      return a.givenName.localeCompare(b.givenName);
+    }
+    if (key === 'Last Name') {
+      return a.familyName.localeCompare(b.familyName);
+    }
+    if (key === 'Web ID') {
+      return a.webId.localeCompare(b.webId);
+    }
+    return 0;
+  });
+
 const MockTableComponent = ({
   contacts,
   deleteContact = vi.fn(),
@@ -48,6 +62,12 @@ const contacts = [
     givenName: 'Bob',
     person: 'Bob Builder',
     webId: 'https://example.com/Builder'
+  },
+  {
+    familyName: 'Carson',
+    givenName: 'Carl',
+    person: 'Carl Carson',
+    webId: 'https://example.com/Carson'
   }
 ];
 
@@ -82,4 +102,31 @@ describe('contacts list table mobile tests', () => {
       expect(webIdElement).not.toBeNull();
     });
   });
+
+  it('sorts by first name correctly', () => {
+    render(<MockTableComponent contacts={contacts} session={sessionObj} />);
+
+    const sortedData = sortData(contacts, 'First Name');
+    expect(sortedData[0].givenName).toBe('Aaron');
+    expect(sortedData[1].givenName).toBe('Bob');
+    expect(sortedData[2].givenName).toBe('Carl');
+  });
+
+  it('sorts by last name correctly', () => {
+    render(<MockTableComponent contacts={contacts} session={sessionObj} />);
+
+    const sortedData = sortData(contacts, 'Last Name');
+    expect(sortedData[0].familyName).toBe('Abby');
+    expect(sortedData[1].familyName).toBe('Builder');
+    expect(sortedData[2].familyName).toBe('Carson');
+  });
+
+  it('sorts by web ID correctly', () => {
+    render(<MockTableComponent contacts={contacts} session={sessionObj} />);
+
+    const sortedData = sortData(contacts, 'Web ID');
+    expect(sortedData[0].webId).toBe('https://example.com/Abby');
+    expect(sortedData[1].webId).toBe('https://example.com/Builder');
+    expect(sortedData[2].webId).toBe('https://example.com/Carson');
+  });
 });

test/pages/Contacts.test.jsx

@@ -73,6 +73,7 @@ describe('Contacts Page', () => {
     const contacts = getByRole('grid');
     expect(contacts).not.toBeNull();
   });
+
   it('displays empty list message when there are no contacts', () => {
     useContactsList.mockReturnValue({ data: [], refetch: vi.fn() });
     const { getByLabelText } = render(