update test

januschung · Dec 22, 2024 · c3c36e3 · c3c36e3
1 parent 39b5fbe
commit c3c36e3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 34 deletions.
diff --git a/src/components/JobApplicationList.jsx b/src/components/JobApplicationList.jsx
@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useMutation } from '@apollo/client';
 import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';
-import CommentRoundedIcon from '@mui/icons-material/CommentRounded';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ErrorIcon from '@mui/icons-material/Error';
 import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
@@ -28,6 +27,12 @@ import useJobApplicationDialog from './hooks/useJobApplicationDialog';
 import { DELETE_JOB_APPLICATION } from '../graphql/mutation';
 import { GET_JOB_APPLICATIONS } from '../graphql/query';
 
+const STATUS_COLORS = {
+    open: '#66BB6A',
+    active: '#42A5F5',
+    rejected: '#EF5350',
+};
+
 export default function JobApplicationList({ searchTerm }) {
     const [jobApplicationToDelete, setJobApplicationToDelete] = useState(null);
     const [localData, setLocalData] = useState([]);
@@ -42,32 +47,20 @@ export default function JobApplicationList({ searchTerm }) {
     });
 
     const sortJobApplications = (jobApplications) => {
-        const statusOrder = {
-            active: 1,
-            open: 2,
-            rejected: 3,
-        };
-
-        // Create a shallow copy of the array
-        const jobApplicationsCopy = [...jobApplications];
-
-        return jobApplicationsCopy.sort((a, b) => {
-            // First, compare by status
+        const statusOrder = { active: 1, open: 2, rejected: 3 };
+
+        return [...jobApplications].sort((a, b) => {
             const statusComparison = statusOrder[a.status] - statusOrder[b.status];
-            if (statusComparison !== 0) return statusComparison;
-
-            // If statuses are the same, compare by appliedDate
-            return new Date(b.appliedDate) - new Date(a.appliedDate);
+            return statusComparison !== 0
+                ? statusComparison
+                : new Date(b.appliedDate) - new Date(a.appliedDate);
         });
     };
-
-    const sortedData = !loading && !error && data ? sortJobApplications(data.allJobApplication) : [];
-
     useEffect(() => {
-        if (sortedData) {
-            setLocalData(sortedData);
+        if (data) {
+            setLocalData(sortJobApplications(data.allJobApplication));
         }
-    }, [sortedData]);
+    }, [data]);
 
     const confirmDeleteJobApplication = () => {
         if (jobApplicationToDelete) {
@@ -117,7 +110,10 @@ export default function JobApplicationList({ searchTerm }) {
                             Failed to fetch data. Please check your network connection and try again.
                         </Alert>
                     )}
-                    {!loading && !error && (
+                    {!loading && !error && filteredData.length === 0 && (
+                        <Typography variant="body1">No job applications match your search.</Typography>
+                    )}
+                    {!loading && !error && filteredData.length > 0 && (
                         <Grid container spacing={4}>
                             {filteredData.map((jobApplication) => (
                                 <Grid item key={jobApplication.id} xs={12} sm={6} md={4}>
@@ -127,17 +123,12 @@ export default function JobApplicationList({ searchTerm }) {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             borderTop: 4,
-                                            borderColor:
-                                                jobApplication.status === 'open'
-                                                    ? '#66BB6A' // Green for open
-                                                    : jobApplication.status === 'active'
-                                                    ? '#42A5F5' // Blue for active
-                                                    : '#EF5350', // Red for rejected
+                                            borderColor: STATUS_COLORS[jobApplication.status] || 'grey',
                                         }}
                                     >
                                         <CardContent sx={{ flexGrow: 1 }}>
                                             <Typography sx={{ fontSize: 12 }} color="text.secondary" gutterBottom>
-                                                <CalendarMonthRoundedIcon fontSize="inherit" />{" "}
+                                                <CalendarMonthRoundedIcon fontSize="inherit" />{' '}
                                                 {jobApplication.appliedDate}
                                             </Typography>
                                             <Typography variant="h5" component="div">
@@ -155,7 +146,13 @@ export default function JobApplicationList({ searchTerm }) {
                                             </Typography>
                                             <Typography sx={{ mb: 1.5, display: 'flex', alignItems: 'center' }} color="text.secondary">
                                                 <LinkRoundedIcon fontSize="inherit" sx={{ marginRight: 0.5 }} />
-                                                <Link href={jobApplication.jobUrl} underline="hover" color="inherit">
+                                                <Link
+                                                    href={jobApplication.jobUrl || '#'}
+                                                    underline="hover"
+                                                    color="inherit"
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
                                                     job link
                                                 </Link>
                                             </Typography>
@@ -168,7 +165,6 @@ export default function JobApplicationList({ searchTerm }) {
                                                     WebkitLineClamp: 3,
                                                 }}
                                             >
-                                                {/* <CommentRoundedIcon fontSize="inherit" sx={{ marginRight: 0.5 }} /> */}
                                                 {jobApplication.description}
                                             </Typography>
                                         </CardContent>
@@ -211,7 +207,6 @@ export default function JobApplicationList({ searchTerm }) {
                     severity="success"
                     onClose={handleSnackbarClose}
                 />
-
             </main>
         </div>
     );

diff --git a/src/components/__tests__/JobApplicationList.test.jsx b/src/components/__tests__/JobApplicationList.test.jsx
@@ -135,6 +135,19 @@ describe('JobApplicationList', () => {
     });
   });
 
+  test('filters job applications based on search term', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <JobApplicationList searchTerm="Backend" />
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText('Company A')).not.toBeInTheDocument();
+      expect(screen.getByText('Company B')).toBeInTheDocument();
+    });
+  });
+
   test('deletes a job application', async () => {
     render(
       <MockedProvider mocks={deleteMocks} addTypename={false}>