Merge pull request #685 from codeforpdx/Development

Version Update from 1.0.0-alpha to 1.0.1-alpha

Author: leekahung

package-lock.json

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

package.json

@@ -7,7 +7,7 @@ import { useSession } from '@hooks';
 import { CIVIC_FORM_LIST, FormLayout } from '@components/CivicProfileForms';
 import { MESSAGE_PAGES_LIST, MessagesLayout } from '@components/Messages';
 // Page Imports
-import { CivicProfile, Home, Contacts, Profile, Signup } from './pages';
+import { CivicProfile, Documents, Home, Contacts, Profile, Signup } from './pages';
 
 const ProtectedRoute = ({ isLoggedIn, children }) =>
   isLoggedIn ? children ?? <Outlet /> : <Navigate to="/" replace />;
@@ -58,6 +58,7 @@ const AppRoutes = () => {
           ))}
         </Route>
         <Route path="/profile" element={<Profile />} />
+        <Route path="/documents" element={<Documents />} />
         {/* TODO: Remove blank Civic Profile page, ensure it directs Basic Information instead */}
         <Route path="/civic-profile" element={<CivicProfile />}>
           {CIVIC_FORM_LIST.map((formProps) => (

src/AppRoutes.jsx

@@ -26,15 +26,16 @@ 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({});
+  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 isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   const handleSendMessage = (contactId) => {
     setShowMessageModal(!showMessageModal);
@@ -47,17 +48,15 @@ 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 ? (
+      {isSmallScreen || isSmallScreenHeight ? (
         <ContactListTableMobile
           data-testid="ContactListTableMobile"
           contacts={contacts}
@@ -89,6 +88,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

@@ -1,5 +1,6 @@
 // React Imports
 import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 // Material UI Imports
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -41,6 +42,9 @@ import { truncateText, getTypeText } from '@utils';
  * @returns {React.JSX.Element} The DocumentCard component
  */
 const DocumentCard = ({ document, onShare, onDelete, onPreview }) => {
+  const location = useLocation();
+  const profileWebId = decodeURIComponent(location.pathname.split('/')[2]);
+
   const [anchorEl, setAnchorEl] = useState(null);
   const [openMenu, setOpenMenu] = useState(null);
 
@@ -149,22 +153,26 @@ const DocumentCard = ({ document, onShare, onDelete, onPreview }) => {
           >
             Preview
           </MenuItem>
-          <MenuItem
-            component={Button}
-            onClick={handleMenuItemClick(onShare, document)}
-            startIcon={<ShareIcon sx={iconSize} />}
-            sx={iconStyling}
-          >
-            Share
-          </MenuItem>
-          <MenuItem
-            component={Button}
-            onClick={handleMenuItemClick(onDelete, document)}
-            startIcon={<DeleteOutlineOutlinedIcon sx={iconSize} />}
-            sx={iconStyling}
-          >
-            Delete
-          </MenuItem>
+          {`${profileWebId}` === 'undefined' && (
+            <MenuItem
+              component={Button}
+              onClick={handleMenuItemClick(onShare, document)}
+              startIcon={<ShareIcon sx={iconSize} />}
+              sx={iconStyling}
+            >
+              Share
+            </MenuItem>
+          )}
+          {`${profileWebId}` === 'undefined' && (
+            <MenuItem
+              component={Button}
+              onClick={handleMenuItemClick(onDelete, document)}
+              startIcon={<DeleteOutlineOutlinedIcon sx={iconSize} />}
+              sx={iconStyling}
+            >
+              Delete
+            </MenuItem>
+          )}
         </Menu>
       </Card>
     </Box>

src/components/Documents/DocumentCard.jsx

@@ -37,6 +37,7 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
   const { documentListObject, loadingDocuments } = useContext(DocumentListContext);
 
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
 
   /**
    * Handles the local display of a document by opening it in a new window.
@@ -98,7 +99,7 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
       }}
       data-testid="document-table"
     >
-      {isMobile ? (
+      {isMobile || isSmallScreenHeight ? (
         <DocumentsMobile documents={documents} handlers={handlers} data-testid="documents-mobile" />
       ) : (
         <DocumentsDesktop