From 0a0b6c7a55f04cd643850edca8d005a60582af7d Mon Sep 17 00:00:00 2001
From: Janus Chung <januschung@gmail.com>
Date: Thu, 19 Dec 2024 22:07:28 -0800
Subject: [PATCH] better offerlist UX

---
 src/components/AppHeader.jsx             |   1 +
 src/components/MobileMenu.jsx            |   4 +-
 src/components/OfferListDialog.jsx       | 104 +++++++++--------------
 src/components/common/SortableTable.jsx  |  58 +++++++++++++
 src/components/hooks/useSortableTable.js |  40 +++++++++
 src/util/sortUtil.js                     |  18 ++++
 6 files changed, 161 insertions(+), 64 deletions(-)
 create mode 100644 src/components/common/SortableTable.jsx
 create mode 100644 src/components/hooks/useSortableTable.js
 create mode 100644 src/util/sortUtil.js

diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
index 3e134b8..c954218 100644
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -168,6 +168,7 @@ export default function AppHeader() {
           handleMobileMenuClose={handleMobileMenuClose}
           handleProfileMenuOpen={handleProfileMenuOpen} 
           handleJobApplicationOpen={handleOpen}
+          handleOfferListDialogOpen={handleOfferListDialogOpen}
           interviewCount={interviewCount}
           offerCount={offerCount}
         />
diff --git a/src/components/MobileMenu.jsx b/src/components/MobileMenu.jsx
index deb5447..ebd89b3 100644
--- a/src/components/MobileMenu.jsx
+++ b/src/components/MobileMenu.jsx
@@ -8,7 +8,7 @@ import EventAvailableIcon from '@mui/icons-material/EventAvailable';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 
-export default function MobileMenu({ mobileMoreAnchorEl, isMobileMenuOpen, handleMobileMenuClose, handleProfileMenuOpen, handleJobApplicationOpen, interviewCount, offerCount }) {
+export default function MobileMenu({ mobileMoreAnchorEl, isMobileMenuOpen, handleMobileMenuClose, handleProfileMenuOpen, handleJobApplicationOpen, handleOfferListDialogOpen, interviewCount, offerCount }) {
   const mobileMenuId = 'primary-search-account-menu-mobile';
   return (
     <Menu
@@ -40,7 +40,7 @@ export default function MobileMenu({ mobileMoreAnchorEl, isMobileMenuOpen, handl
         </IconButton>
         <p>Interviews</p>
       </MenuItem>
-      <MenuItem>
+      <MenuItem onClick={handleOfferListDialogOpen}>
         <IconButton size="large" color="inherit">
           <Badge badgeContent={offerCount} color="error">
             <NotificationsIcon />
diff --git a/src/components/OfferListDialog.jsx b/src/components/OfferListDialog.jsx
index 7a07626..ebead83 100644
--- a/src/components/OfferListDialog.jsx
+++ b/src/components/OfferListDialog.jsx
@@ -7,25 +7,22 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
 import { GET_ALL_OFFERS } from '../graphql/query';
 import useJobApplicationDialog from './hooks/useJobApplicationDialog';
 import JobApplicationDialog from './JobApplicationDialog';
 import DialogTitleBar from './DialogTitleBar';
+import useSortableTable from './hooks/useSortableTable';
+import SortableTable from './common/SortableTable';
 
 export default function OfferListDialog({ handleClose, open }) {
   const [offers, setOffers] = useState([]);
+  
   const { loading, error, data, refetch } = useQuery(GET_ALL_OFFERS, {
     fetchPolicy: 'network-only',
     onCompleted: (data) => setOffers(data.allOffer),
   });
+
   const { 
     open: jobDialogOpen, 
     jobApplication, 
@@ -35,6 +32,35 @@ export default function OfferListDialog({ handleClose, open }) {
     refetch().then(({ data }) => setOffers(data.allOffer));
   });
 
+  const columns = [
+    {
+      key: 'jobApplication.companyName', // Nested property example
+      label: 'Company Name',
+      sortable: true,
+      render: (value, row) => value || row.jobApplication?.companyName || 'N/A', // Fallback for nested value
+    },
+    { key: 'offerDate', label: 'Offer Date', sortable: true },
+    { key: 'salaryOffered', label: 'Salary Offered', sortable: true },
+    { key: 'description', label: 'Note' },
+    {
+      key: 'actions',
+      label: 'Job Application',
+      render: (value, row) => (
+        <Button 
+          size="small" 
+          color="info" 
+          variant="outlined" 
+          onClick={() => handleJobDialogOpen(row.jobApplication)}
+        >
+          Job Details
+        </Button>
+      ),
+      align: 'center',
+    },
+  ];
+
+  const { sortedData, handleSort, getSortIndicator } = useSortableTable(offers, columns);
+
   useEffect(() => {
     if (open) {
       refetch()
@@ -49,8 +75,6 @@ export default function OfferListDialog({ handleClose, open }) {
     <Dialog
       open={open}
       onClose={handleClose}
-      aria-labelledby="modal-title"
-      aria-describedby="modal-description"
       fullWidth
       maxWidth="md"
       slotProps={{
@@ -62,68 +86,24 @@ export default function OfferListDialog({ handleClose, open }) {
       }}
     >
       <DialogTitleBar title="Offer List" />
-
       <DialogContent dividers>
-        {loading && (
+        {loading ? (
           <Box display="flex" justifyContent="center" alignItems="center" height="200px">
             <CircularProgress />
           </Box>
-        )}
-
-        {error && (
+        ) : error ? (
           <Typography variant="body1" color="error" align="center">
             Something went wrong. Please try again later.
           </Typography>
-        )}
-
-        {!loading && !error && offers.length === 0 && (
-          <Box textAlign="center" p={4}>
-            <Typography variant="h6" color="textSecondary">
-              No offers available yet!
-            </Typography>
-            <Button color="primary" variant="contained" onClick={handleClose}>
-              Add an Offer
-            </Button>
-          </Box>
-        )}
-
-        {!loading && !error && offers.length > 0 && (
-          <TableContainer component={Paper}>
-            <Table>
-              <TableHead>
-                <TableRow>
-                  <TableCell align="left">Company</TableCell>
-                  <TableCell align="left">Offer Date</TableCell>
-                  <TableCell align="left">Salary Offered</TableCell>
-                  <TableCell align="left">Note</TableCell>
-                  <TableCell align="center">Job Application</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {offers.map((offer, index) => (
-                  <TableRow key={index}>
-                    <TableCell align="left">{offer.jobApplication.companyName}</TableCell>
-                    <TableCell align="left">{offer.offerDate}</TableCell>
-                    <TableCell align="left">{offer.salaryOffered}</TableCell>
-                    <TableCell align="left">{offer.description}</TableCell>
-                    <TableCell align="center">
-                      <Button
-                        size="small"
-                        color="info"
-                        variant="outlined"
-                        onClick={() => handleJobDialogOpen(offer.jobApplication)}
-                      >
-                        Job Details
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
+        ) : (
+          <SortableTable
+            data={sortedData}
+            columns={columns}
+            handleSort={handleSort}
+            getSortIndicator={getSortIndicator}
+          />
         )}
       </DialogContent>
-
       <DialogActions>
         <Button color="info" variant="outlined" startIcon={<CancelIcon />} onClick={handleClose}>
           Cancel
diff --git a/src/components/common/SortableTable.jsx b/src/components/common/SortableTable.jsx
new file mode 100644
index 0000000..172f38e
--- /dev/null
+++ b/src/components/common/SortableTable.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Paper from '@mui/material/Paper';
+
+const SortableTable = ({ data, columns, handleSort, getSortIndicator }) => {
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            {columns.map((column) => (
+              <TableCell 
+                key={column.key} 
+                align={column.align || 'left'}
+                style={{
+                  cursor: 'pointer',
+                  fontWeight: 'bold',
+                  backgroundColor: '#e3f2fd',
+                }}
+              >
+                {column.sortable ? (
+                  <TableSortLabel
+                    active={getSortIndicator(column.key)}
+                    direction={getSortIndicator(column.key) || 'asc'}
+                    onClick={() => handleSort(column.key)}
+                  >
+                    {column.label}
+                  </TableSortLabel>
+                ) : (
+                  column.label
+                )}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map((row, index) => (
+            <TableRow key={index}>
+              {columns.map((column) => (
+                <TableCell key={column.key} align={column.align || 'left'}>
+                  {column.render ? column.render(row[column.key], row) : row[column.key]}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default SortableTable;
diff --git a/src/components/hooks/useSortableTable.js b/src/components/hooks/useSortableTable.js
new file mode 100644
index 0000000..b8efcdb
--- /dev/null
+++ b/src/components/hooks/useSortableTable.js
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+const useSortableTable = (data, columns) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+
+  const handleSort = (key) => {
+    const direction = sortConfig.key === key && sortConfig.direction === 'asc' ? 'desc' : 'asc';
+    setSortConfig({ key, direction });
+  };
+
+  // Function to get the value from a nested object
+  const getValue = (item, key) => {
+    const keys = key.split('.'); // Split key into parts for nested access
+    return keys.reduce((obj, keyPart) => obj && obj[keyPart], item);
+  };
+
+  const sortedData = sortConfig.key
+    ? [...data].sort((a, b) => {
+        const aValue = getValue(a, sortConfig.key);
+        const bValue = getValue(b, sortConfig.key);
+
+        if (aValue < bValue) return sortConfig.direction === 'asc' ? -1 : 1;
+        if (aValue > bValue) return sortConfig.direction === 'asc' ? 1 : -1;
+        return 0;
+      })
+    : data;
+
+  const getSortIndicator = (key) => {
+    if (sortConfig.key !== key) return '';
+    return sortConfig.direction === 'asc' ? '↑' : '↓';
+  };
+
+  return {
+    sortedData,
+    handleSort,
+    getSortIndicator,
+  };
+};
+
+export default useSortableTable;
diff --git a/src/util/sortUtil.js b/src/util/sortUtil.js
new file mode 100644
index 0000000..d66d6ea
--- /dev/null
+++ b/src/util/sortUtil.js
@@ -0,0 +1,18 @@
+/**
+ * Sorts an array of objects by a given key with an optional nested field.
+ * @param {Array} data - The array of objects to sort.
+ * @param {string} key - The key to sort by.
+ * @param {string} direction - The sort direction ('asc' or 'desc').
+ * @param {boolean} isNested - Whether the key is nested in an object.
+ * @returns {Array} - The sorted array.
+ */
+export function sortData(data, key, direction, isNested = false) {
+  return [...data].sort((a, b) => {
+    const aValue = isNested ? a.jobApplication[key]?.toLowerCase() : a[key]?.toLowerCase();
+    const bValue = isNested ? b.jobApplication[key]?.toLowerCase() : b[key]?.toLowerCase();
+
+    if (aValue < bValue) return direction === 'asc' ? -1 : 1;
+    if (aValue > bValue) return direction === 'asc' ? 1 : -1;
+    return 0;
+  });
+}