Merge branch '536-Enhancement-Confirmation_Modal_For_Uploading_Docs' of

https://github.com/codeforpdx/PASS into 536-Enhancement-Confirmation_Modal_For_Uploading_Docs
codeforpdx · Nov 30, 2023 · 2c15e18 · 2c15e18
2 parents 876484d + 385665a
commit 2c15e18
Show file tree

Hide file tree

Showing 31 changed files with 604 additions and 502 deletions.
diff --git a/src/components/CivicProfileForms/HousingInfo.jsx b/src/components/CivicProfileForms/HousingInfo.jsx
@@ -1,7 +1,9 @@
 // React Imports
 import React, { useState, useEffect } from 'react';
 // MUI Imports
-import { TextField, Button } from '@mui/material';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+// Custom Hooks Imports
 import { useCivicProfile } from '@hooks';
 
 /**

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export default Footer;
diff --git a/src/components/Messages/MessageFolder.jsx b/src/components/Messages/MessageFolder.jsx
@@ -27,7 +27,7 @@ import { EmptyListNotification, LoadingAnimation } from '../Notification';
  * @param {object} Props - Component props for MessageFolder
  * @param {string} Props.folderType - The name of the message box, i.e. "inbox"
  * or "outbox"
- * @param {() => Promise<void>} Props.handleRefresh - The handle function for
+ * @param {(folderType: string) => Promise<void>} Props.handleRefresh - The handle function for
  * message folder refresh
  * @param {boolean} Props.loadMessages - Boolean for triggering loading message
  * @param {messageListObject[]} Props.messageList - A list of messages from

diff --git a/src/components/Messages/MessagePreview.jsx b/src/components/Messages/MessagePreview.jsx
@@ -1,5 +1,5 @@
 // React Imports
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 // Material UI Imports
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -12,11 +12,7 @@ import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 // Custom Hook Imports
-import { useSession } from '@hooks';
-// Utility Imports
-import { updateMessageReadStatus, getMessageTTL } from '@utils';
-// Context Imports
-import { MessageContext, SignedInUserContext } from '@contexts';
+import { useMessageList } from '@hooks';
 // Component Imports
 import { NewMessageModal } from '../Modals';
 
@@ -38,18 +34,13 @@ import { NewMessageModal } from '../Modals';
 const MessagePreview = ({ message, folderType }) => {
   const [showContents, setShowContents] = useState(false);
   const [showModal, setShowModal] = useState(false);
-  const { session } = useSession();
-  const { podUrl } = useContext(SignedInUserContext);
-  const { inboxList, setInboxList } = useContext(MessageContext);
+  const { add: updateReadStatus } = useMessageList('Inbox');
 
   const handleClick = async () => {
     setShowContents(!showContents);
-    if (folderType === 'Inbox') {
+    if (folderType === 'Inbox' && !message.readStatus) {
       try {
-        await updateMessageReadStatus(session, message);
-        const messagesInSolid = await getMessageTTL(session, folderType, inboxList, podUrl);
-        messagesInSolid.sort((a, b) => b.uploadDate - a.uploadDate);
-        setInboxList(messagesInSolid);
+        await updateReadStatus(message);
       } catch {
         throw new Error('Failed to update read status');
       }
@@ -93,52 +84,53 @@ const MessagePreview = ({ message, folderType }) => {
   ];
 
   return (
-    <Container sx={{ wordWrap: 'break-word' }}>
-      <Paper>
-        <Box sx={{ flexGrow: 1 }}>
-          <ListItemButton onClick={() => handleClick()} alignItems="flex-start">
-            <Grid container columnSpacing={1} sx={{ padding: isSmallScreen ? '0' : '10px' }}>
-              {messageInfo.map((info, index) => (
-                <Grid
-                  item
-                  xs={info.xs_value}
-                  sx={{ opacity: message.readStatus ? '0.5' : '1' }}
-                  key={info.title + String(index)}
-                >
-                  <Typography>
-                    {info.title} <strong>{info.text}</strong>
-                  </Typography>
-                </Grid>
-              ))}
-
-              {showContents && (
-                <Grid item xs={12}>
-                  <Divider />
-                  {message.message.split('\n').map((line, index) => (
-                    <Typography sx={{ padding: '10px 5px' }} key={line + String(index)}>
-                      {line}
+    <>
+      <Container sx={{ wordWrap: 'break-word' }}>
+        <Paper>
+          <Box sx={{ flexGrow: 1 }}>
+            <ListItemButton
+              onClick={handleClick}
+              alignItems="flex-start"
+              aria-label={`open message preview ${message.messageId}`}
+            >
+              <Grid container columnSpacing={1} sx={{ padding: isSmallScreen ? '0' : '10px' }}>
+                {messageInfo.map((info, index) => (
+                  <Grid
+                    item
+                    xs={info.xs_value}
+                    sx={{ opacity: message.readStatus ? '0.5' : '1' }}
+                    key={info.title + String(index)}
+                  >
+                    <Typography>
+                      {info.title} <strong>{info.text}</strong>
                     </Typography>
-                  ))}
-                  {showContents && folderType === 'Inbox' && (
-                    <Button variant="contained" type="button" onClick={handleReplyMessage}>
-                      Reply
-                    </Button>
-                  )}
-                </Grid>
-              )}
-            </Grid>
+                  </Grid>
+                ))}
 
-            {showModal && (
-              <NewMessageModal
-                showModal={showModal}
-                setShowModal={setShowModal}
-                oldMessage={message}
-              />
-            )}
-          </ListItemButton>
-        </Box>
-      </Paper>
-    </Container>
+                {showContents && (
+                  <Grid item xs={12}>
+                    <Divider />
+                    {message.message.split('\n').map((line, index) => (
+                      <Typography sx={{ padding: '10px 5px' }} key={line + String(index)}>
+                        {line}
+                      </Typography>
+                    ))}
+                    {showContents && folderType === 'Inbox' && (
+                      <Button variant="contained" type="button" onClick={handleReplyMessage}>
+                        Reply
+                      </Button>
+                    )}
+                  </Grid>
+                )}
+              </Grid>
+            </ListItemButton>
+          </Box>
+        </Paper>
+      </Container>
+      {showModal && (
+        <NewMessageModal showModal={showModal} setShowModal={setShowModal} oldMessage={message} />
+      )}
+    </>
   );
 };
 

diff --git a/src/components/Modals/NewMessageModal.jsx b/src/components/Modals/NewMessageModal.jsx
@@ -1,7 +1,7 @@
 // React Imports
 import React, { useContext, useEffect, useState } from 'react';
 // Inrupt Library Imports
-import { useNotification, useSession } from '@hooks';
+import { useMessageList, useNotification, useSession } from '@hooks';
 // Material UI Imports
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -14,9 +14,9 @@ import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 // Utility Imports
-import { sendMessageTTL, getMessageTTL } from '@utils';
+import { sendMessageTTL } from '@utils';
 // Context Imports
-import { MessageContext, SignedInUserContext } from '@contexts';
+import { SignedInUserContext } from '@contexts';
 
 /**
  * @typedef {import("../../typedefs.js").messageListObject} messageListObject
@@ -39,7 +39,7 @@ import { MessageContext, SignedInUserContext } from '@contexts';
  */
 const NewMessageModal = ({ showModal, setShowModal, oldMessage = '', toField = '' }) => {
   const { session } = useSession();
-  const { outboxList, setOutboxList } = useContext(MessageContext);
+  const { refetch: refreshOutbox } = useMessageList('Outbox');
   const { podUrl } = useContext(SignedInUserContext);
   const { addNotification } = useNotification();
   const [originalMessage, setOriginalMessage] = useState(oldMessage.message);
@@ -107,12 +107,7 @@ const NewMessageModal = ({ showModal, setShowModal, oldMessage = '', toField = '
         }, 2000);
       }
     }
-
-    // Re-sorts messages when new message is added to outboxList
-    const outboxMessages = await getMessageTTL(session, 'Outbox', outboxList, podUrl);
-    const sortedOutbox = outboxMessages;
-    sortedOutbox.sort((a, b) => b.uploadDate - a.uploadDate);
-    setOutboxList(sortedOutbox);
+    await refreshOutbox();
   };
 
   /* eslint-disable jsx-a11y/label-has-associated-control */

diff --git a/src/components/NavBar/NavMenu.jsx b/src/components/NavBar/NavMenu.jsx
@@ -18,7 +18,8 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 // Context Imports
-import { DocumentListContext, MessageContext } from '@contexts';
+import { DocumentListContext } from '@contexts';
+import { useMessageList } from '@hooks';
 
 /**
  * NavMenu Component - Component that generates NavMenu section for PASS
@@ -52,7 +53,9 @@ const NavMenu = ({
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const { setContact } = useContext(DocumentListContext);
-  const { numUnreadMessages } = useContext(MessageContext);
+  const { data } = useMessageList('Inbox');
+
+  const numUnreadMessages = data?.reduce((a, m) => (!m.readStatus ? a + 1 : a), 0);
 
   const handleMenuClose = () => {
     setOpenMenu(false);

diff --git a/src/components/NavBar/NavbarDesktop.jsx b/src/components/NavBar/NavbarDesktop.jsx
@@ -14,8 +14,10 @@ import MenuItem from '@mui/material/MenuItem';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
+// Custom Hook Imports
+import { useMessageList } from '@hooks';
 // Component Imports
-import { MessageContext, SignedInUserContext } from '@contexts';
+import { SignedInUserContext } from '@contexts';
 import NavbarLinks from './NavbarLinks';
 import NavMenu from './NavMenu';
 
@@ -32,7 +34,9 @@ import NavMenu from './NavMenu';
  */
 const NavbarDesktop = ({ setShowConfirmation }) => {
   const theme = useTheme();
-  const { numUnreadMessages } = useContext(MessageContext);
+  const { data } = useMessageList('Inbox');
+
+  const numUnreadMessages = data?.reduce((a, m) => (!m.readStatus ? a + 1 : a), 0);
 
   // states for NavMenu component
   const [anchorEl, setAnchorEl] = useState(null);

diff --git a/src/constants/HMIS_ONTOLOGY_VALUES.js b/src/constants/HMIS_ONTOLOGY_VALUES.js
@@ -1,10 +1,10 @@
 const prefix = 'urn:hud:hmis:owl#';
 
 const HMIS_ONTOLOGY_VALUES = {
-  legalFirstName: 'urn:hud:hmis:owl#FirstName',
-  legalLastName: 'urn:hud:hmis:owl#LastName',
-  legalDOB: 'urn:hud:hmis:owl#DOB',
-  legalGender: 'urn:hud:hmis:owl#Gender',
+  legalFirstName: `${prefix}FirstName`,
+  legalLastName: `${prefix}LastName`,
+  legalDOB: `${prefix}DOB`,
+  legalGender: `${prefix}Gender`,
   lastPermanentCity: `${prefix}LastPermanentCity`,
   lastPermanentState: `${prefix}LastPermanentState`,
   lastPermanentStreet: `${prefix}LastPermanentStreet`,

diff --git a/src/contexts/MessageContext.jsx b/src/contexts/MessageContext.jsx
diff --git a/src/contexts/UserDataContext.jsx b/src/contexts/UserDataContext.jsx
@@ -1,11 +1,7 @@
 // React Imports
 import React from 'react';
 // Context Imports
-import {
-  MessageContextProvider,
-  DocumentListContextProvider,
-  SignedInUserContextProvider
-} from '.';
+import { DocumentListContextProvider, SignedInUserContextProvider } from '.';
 
 /**
  * A collection of React Contexts used for PASS to be used as a single wrapper
@@ -18,9 +14,7 @@ import {
  */
 const UserDataContextProvider = ({ children }) => (
   <SignedInUserContextProvider>
-    <DocumentListContextProvider>
-      <MessageContextProvider>{children}</MessageContextProvider>
-    </DocumentListContextProvider>
+    <DocumentListContextProvider>{children}</DocumentListContextProvider>
   </SignedInUserContextProvider>
 );
 

diff --git a/src/contexts/index.js b/src/contexts/index.js
@@ -6,6 +6,5 @@
  */
 
 export * from './SignedInUserContext';
-export * from './MessageContext';
 export * from './DocumentListContext';
 export * from './SessionContext';
diff --git a/src/hooks/index.js b/src/hooks/index.js
@@ -2,11 +2,12 @@ import useContactsList from './useContactsList';
 import useNotification from './useNotification';
 import useCivicProfile from './useCivicProfile';
 import useSession from './useSession';
+import useMessageList from './useMessageList';
 /**
  * The hooks module contains custom hooks to assist with form handling or status
  * notifications
  *
  * @namespace hooks
  */
 
-export { useContactsList, useNotification, useSession, useCivicProfile };
+export { useContactsList, useNotification, useSession, useCivicProfile, useMessageList };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Footer from './Footer';

		export default Footer;