Merge pull request #675 from codeforpdx/hotfix-contacts-and-messages

Hotfix contacts and messages

Author: leekahung

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "pass",
   "homepage": ".",
-  "version": "1.0.0-alpha",
+  "version": "1.0.1-alpha",
   "description": "",
   "scripts": {
     "start": "concurrently --kill-others \"npm run podserver\" \"npm run dev\"",

package.json

@@ -33,7 +33,7 @@ const ContactListTable = ({ contacts, deleteContact, handleDeleteContact, addCon
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   const [showAddContactModal, setShowAddContactModal] = useState(false);
-  const [contactToEdit, setContactToEdit] = useState({});
+  const [contactToEdit, setContactToEdit] = useState(null);
   const [isEditing, setIsEditing] = useState(false);
 
   const handleSendMessage = (contactId) => {
@@ -89,6 +89,7 @@ const ContactListTable = ({ contacts, deleteContact, handleDeleteContact, addCon
         handleDeleteContact={handleDeleteContact}
         contactWebIds={contactWebIds}
         contacts={contacts}
+        setContactToEdit={setContactToEdit}
       />
     </Box>
   );

src/components/Contacts/ContactListTable.jsx

@@ -40,7 +40,6 @@ const CustomToolbar = () => (
  * @param {Function} Props.editContact - Function to edit a contact
  * @param {Function} Props.handleSendMessage - Function to handle sending a message
  * @param {string} Props.'data-testid' - Test ID
-//  * @param {Function} Props.handleProfileClick - Function to handle profile click
  * @returns {React.JSX.Element} The ContactListTableDesktop component
  */
 const ContactListTableDesktop = ({

src/components/Contacts/ContactListTableDesktop.jsx

@@ -129,8 +129,8 @@ const AddContactModal = ({
   useEffect(() => {
     // sets fields if form is set to Edit
     if (isEditing) {
-      setUserGivenName(contactToEdit?.givenName);
-      setUserFamilyName(contactToEdit?.familyName);
+      setUserGivenName(contactToEdit?.givenName ?? '');
+      setUserFamilyName(contactToEdit?.familyName ?? '');
 
       // parse out webid and usernames and set them to the state values
       parsePodUrl();

src/components/Modals/AddContactModal.jsx

@@ -59,10 +59,19 @@ const NewMessageModal = ({ showModal, setShowModal, oldMessage = '', toField = '
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   const contactListOptions =
-    data?.map((contact) => ({
-      label: `${contact.person} ${contact.podUrl}`,
-      id: contact.podUrl
-    })) ?? [];
+    data?.map((contact) => {
+      let contactName;
+      if (contact.givenName !== '' || contact.givenName !== null) {
+        contactName = contact.givenName;
+      }
+      if (contact.familyName !== '' || contact.familyName !== null) {
+        contactName += ` ${contact.familyName}`.trim();
+      }
+      return {
+        label: `${contactName} ${contact.podUrl}`.trim(),
+        id: contact.podUrl
+      };
+    }) ?? [];
   const recipientName = data?.filter((contact) => message.recipientPodUrl === contact.podUrl)[0];
   // Modifies message upon input
   const handleChange = (e) => {
@@ -137,7 +146,7 @@ const NewMessageModal = ({ showModal, setShowModal, oldMessage = '', toField = '
             data-testid="newMessageTo"
             id="recipientPodUrl"
             freeSolo
-            value={recipientName?.person ?? message.recipientPodUrl}
+            value={recipientName?.podUrl ?? message.recipientPodUrl}
             disablePortal
             autoSelect
             options={contactListOptions}

src/components/Modals/NewMessageModal.jsx

@@ -50,16 +50,11 @@ const useContactsList = () => {
   };
 
   const serialize = ({ givenName, familyName, webId }) => {
-    let builder = buildThing(createThing({ name: encodeURIComponent(webId) }))
+    const builder = buildThing(createThing({ name: encodeURIComponent(webId) }))
       .addUrl(RDF_PREDICATES.identifier, webId)
-      .addUrl(RDF_PREDICATES.URL, webId.split('profile')[0]);
-
-    if (givenName) {
-      builder = builder.addStringNoLocale(RDF_PREDICATES.givenName, givenName);
-    }
-    if (familyName) {
-      builder = builder.addStringNoLocale(RDF_PREDICATES.familyName, familyName);
-    }
+      .addUrl(RDF_PREDICATES.URL, webId.split('profile')[0])
+      .addStringNoLocale(RDF_PREDICATES.givenName, givenName ?? '')
+      .addStringNoLocale(RDF_PREDICATES.familyName, familyName ?? '');
 
     return builder.build();
   };

src/hooks/useContactsList.js

@@ -1,5 +1,5 @@
 // React Imports
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // Material UI Imports
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -42,12 +42,17 @@ const Contacts = () => {
     isLoading,
     isError,
     error,
+    refetch,
     add: addContact,
     delete: deleteContact
   } = useContactsList();
   const { addNotification } = useNotification();
   const [fieldType, setFieldType] = useState('First Name');
 
+  useEffect(() => {
+    refetch();
+  }, []);
+
   const getContactDisplayName = (contact) => {
     if (!contact) {
       return 'Unknown Contact';

src/pages/Contacts.jsx

@@ -113,7 +113,6 @@ it('selecting contact from autocomplete', async () => {
           {
             familyName: 'test',
             givenName: 'mock',
-            person: 'mock test',
             podUrl: 'http://example/mocktest',
             thingId: 'http://example/mocktest/profile/card#me',
             webId: 'http://example/mocktest/profile/card#me'
@@ -135,5 +134,5 @@ it('selecting contact from autocomplete', async () => {
   // Enter to select dropdown option
   await userEvent.keyboard('[Enter]');
   // verify value of input field
-  expect(toInput.value).toBe('mock test');
+  expect(toInput.value).toBe('http://example/mocktest');
 });