From 4961e241448d381791457b8170efa6f4ecbb79e2 Mon Sep 17 00:00:00 2001 From: Nia M Date: Mon, 15 Apr 2024 15:26:53 -0400 Subject: [PATCH 1/4] committing code for list Item component. --- .../components/DashboardListItem/index.tsx | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 apps/applicant-tracking/src/components/DashboardListItem/index.tsx diff --git a/apps/applicant-tracking/src/components/DashboardListItem/index.tsx b/apps/applicant-tracking/src/components/DashboardListItem/index.tsx new file mode 100644 index 0000000..07b8a99 --- /dev/null +++ b/apps/applicant-tracking/src/components/DashboardListItem/index.tsx @@ -0,0 +1,82 @@ +//code here +'use client'; +import { DashboardListApplicantResponse } from '@hack4impact-utk/internal-models'; +import { Button, Chip, ListItemSecondaryAction } from '@mui/material'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import { useEffect, useState } from 'react'; + +interface DashboardListItemProps { + applicant: DashboardListApplicantResponse; +} + +//return a button instead of just a string of text in the switch case +function ActionButton(status: string): JSX.Element { + switch (status) { + case 'Pending Review': + return ; + //do something? + case 'Scheduling Interview': + return ; + case 'Interview Complete': + return ; + default: //what should I make the default case?? + throw new Error('invalid status argument.'); + } +} + +export default function DashboardListItem(props: DashboardListItemProps) { + /*how to show the applicant info without the quotes? How to render the caption in a different style? + such as the 'pending review' stuff. How to ensure that the button is in the correct place?*/ + + const [today, setToday] = useState(null); + useEffect(() => { + setToday(new Date()); + }, []); + + const updatedAt = new Date(props.applicant.statusUpdatedAt); //converting to date type so it can be used in calculation below + let daysSinceUpdate = 0; + + if (today) { + daysSinceUpdate = Math.floor( + (today.getTime() - updatedAt.getTime()) / (1000 * 3600 * 24) + ); //computing how long ago status was updated + } + const actionButton = ActionButton(props.applicant.status); //included eblow + const formattedDate = updatedAt.toLocaleDateString(); //for display purposes + + //determininig what color to make the date text + let dateColor = ''; + if (daysSinceUpdate < 3) { + dateColor = 'gray'; // or any other color + } else if (daysSinceUpdate < 7) { + dateColor = 'orange'; // or any other color + } else { + dateColor = 'red'; // or any other color + } + + //use a chip to display applicant status + return ( + + + + {props.applicant.firstName} {props.applicant.lastName} + + + + } //applicant name *where to display the applicant status? + secondary={ + + {formattedDate} + + } + /> + + {props.applicant.status == 'Pending Review' && //how can I include the button in here + actionButton} + + + ); +} From 119df29ca246bef9e829ff754c17b5b318d230ae Mon Sep 17 00:00:00 2001 From: Nia M Date: Mon, 15 Apr 2024 15:42:58 -0400 Subject: [PATCH 2/4] changed button variant and added onclick feedback. --- .../components/DashboardListItem/index.tsx | 41 ++++++++++++++++--- 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/apps/applicant-tracking/src/components/DashboardListItem/index.tsx b/apps/applicant-tracking/src/components/DashboardListItem/index.tsx index 07b8a99..fb6feda 100644 --- a/apps/applicant-tracking/src/components/DashboardListItem/index.tsx +++ b/apps/applicant-tracking/src/components/DashboardListItem/index.tsx @@ -14,13 +14,40 @@ interface DashboardListItemProps { function ActionButton(status: string): JSX.Element { switch (status) { case 'Pending Review': - return ; + return ( + + ); //do something? case 'Scheduling Interview': - return ; + return ( + + ); case 'Interview Complete': - return ; - default: //what should I make the default case?? + return ( + + ); + default: throw new Error('invalid status argument.'); } } @@ -74,8 +101,10 @@ export default function DashboardListItem(props: DashboardListItemProps) { } /> - {props.applicant.status == 'Pending Review' && //how can I include the button in here - actionButton} + { + //how can I include the button in here + actionButton + } ); From 92ec2e9451fd4274621b446b3e158fe6fd621b6f Mon Sep 17 00:00:00 2001 From: Nia M Date: Mon, 15 Apr 2024 15:43:56 -0400 Subject: [PATCH 3/4] updated comments --- .../src/components/DashboardListItem/index.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/apps/applicant-tracking/src/components/DashboardListItem/index.tsx b/apps/applicant-tracking/src/components/DashboardListItem/index.tsx index fb6feda..f43074e 100644 --- a/apps/applicant-tracking/src/components/DashboardListItem/index.tsx +++ b/apps/applicant-tracking/src/components/DashboardListItem/index.tsx @@ -24,7 +24,7 @@ function ActionButton(status: string): JSX.Element { schedule interview ); - //do something? + case 'Scheduling Interview': return (