Simplifying sorting function

Author: andycwilliams

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,17 +1,18 @@
-// hooks/useSortedData.js
 import { useState, useEffect } from 'react';
 
-const useSortedData = (initialData, getFieldValue, initialFieldType) => {
+const useSortedData = (getFieldValue, initialFieldType, initialData = []) => {
   const [fieldType, setFieldType] = useState(initialFieldType);
   const [sortedData, setSortedData] = useState([]);
 
   useEffect(() => {
-    const sortData = (dataToSort, field) =>
-      [...dataToSort].sort((a, b) => {
-        const fieldA = getFieldValue(a, field);
-        const fieldB = getFieldValue(b, field);
+    const sortData = (field, dataToSort = []) => {
+      if (!Array.isArray(dataToSort)) return [];
+      return [...dataToSort].sort((a, b) => {
+        const fieldA = getFieldValue(a, field) || '';
+        const fieldB = getFieldValue(b, field) || '';
         return fieldA.localeCompare(fieldB);
       });
+    };
 
     setSortedData(sortData(initialData, fieldType));
   }, [fieldType, initialData, getFieldValue]);

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}