From 157e58626a67fac1a36ef6529a26fdbb43c79c8d Mon Sep 17 00:00:00 2001
From: Josh Fung <joshuagyfung@gmail.com>
Date: Thu, 23 Jan 2025 18:52:31 -0800
Subject: [PATCH] Modified logic to differentiate between past classes and
 current classes to show missed status

---
 frontend/src/components/ShiftCard/index.js | 25 ++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ShiftCard/index.js b/frontend/src/components/ShiftCard/index.js
index 38e2abb..035d5a8 100644
--- a/frontend/src/components/ShiftCard/index.js
+++ b/frontend/src/components/ShiftCard/index.js
@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
 import CheckInIcon from '../../assets/check-in-icon.png'
 import Plus from '../../assets/plus.png'
 import RequestCoverageIcon from '../../assets/request-coverage.png'
@@ -8,7 +9,13 @@ import { SHIFT_TYPES, COVERAGE_STATUSES } from '../../data/constants';
 
 function ShiftCard({ shift, shiftType, onUpdate, onShiftSelect }) {
     const currentDate = dayjs();
-    const pastShift = dayjs(shift.shift_date).format('YYYY-MM-DD') <= currentDate.format('YYYY-MM-DD');
+    const shiftDay = dayjs(shift.shift_date).format('YYYY-MM-DD');
+    const shiftStart = dayjs(`${shiftDay} ${shift.start_time}`);
+    const shiftEnd = dayjs(`${shiftDay} ${shift.end_time}`);
+
+    const pastShift = currentDate.isAfter(shiftEnd);
+    const currentShift = currentDate.isBetween(shiftStart, shiftEnd, 'minute', '[]');
+
     const volunteerID = localStorage.getItem('volunteerID');
 
     const handleCoverShiftClick = async () => {
@@ -27,7 +34,7 @@ function ShiftCard({ shift, shiftType, onUpdate, onShiftSelect }) {
 
     // TODO Check-in handler for 'my-shifts'
     const handleCheckInClick = async () => {
-        if (!shift.checked_in && pastShift) {
+        if (!shift.checked_in && currentShift) {
             // Perform check-in logic here
             console.log(`Checking in for shift ${shift.shift_id}`);
             // Set the state or make API call here to mark the shift as checked in
@@ -43,9 +50,15 @@ function ShiftCard({ shift, shiftType, onUpdate, onShiftSelect }) {
     const buttonConfig = {
         [SHIFT_TYPES.MY_SHIFTS]: {
             lineColor: 'var(--green)',
-            label: shift.checked_in ? 'Checked In' : pastShift ? 'Check In' : 'Upcoming',
-            icon: shift.checked_in ? null : pastShift ? CheckInIcon : null,
-            disabled: shift.checked_in || !pastShift,
+            label: shift.checked_in 
+                ? 'Checked In' 
+                    : currentShift 
+                    ? 'Check In' 
+                        : pastShift
+                        ? 'Missed Shift'
+                            : 'Upcoming',
+            icon: shift.checked_in ? null : currentShift ? CheckInIcon : null,
+            disabled: shift.checked_in || !currentShift,
             buttonClass: shift.checked_in ? 'checked-in' : '',
             onClick: handleCheckInClick,
         },
@@ -87,7 +100,7 @@ function ShiftCard({ shift, shiftType, onUpdate, onShiftSelect }) {
         const primaryButton = buttonConfig[shiftType] || buttonConfig[SHIFT_TYPES.DEFAULT];
 
         buttons.push(primaryButton);
-        if (shiftType === SHIFT_TYPES.MY_SHIFTS) {
+        if (shiftType === SHIFT_TYPES.MY_SHIFTS && !shift.checked_in && !pastShift) {
             buttons.push(buttonConfig.REQUEST_COVERAGE);
         }
         return buttons;