fix: time formating for matches

Author: EnricoBausenhart

client/src/components/Dashboard.tsx

@@ -25,7 +25,7 @@ import { useUserID } from '../contexts/UserIDContext';
 import { Link as RouterLink } from 'react-router-dom';
 import { useMatchActions } from '../hooks/useMatchActions';
 import MatchActionDialogs from './MatchActionDialogs';
-import { formatTimeslots } from '../utils/formatting';
+import { formatTimeslots, formatTime } from '../utils/formatting';
 
 const Dashboard = () => {
   const { user } = useAuth0();
@@ -176,26 +176,9 @@ const Dashboard = () => {
     });
   };
 
-  const formatTime = (timeSlot: number) => {
-    const times = [
-      '8:00 AM',
-      '8:30 AM',
-      '9:00 AM',
-      '9:30 AM',
-      '10:00 AM',
-      '10:30 AM',
-      '11:00 AM',
-      '11:30 AM',
-      '12:00 PM',
-      '12:30 PM',
-      '1:00 PM',
-      '1:30 PM',
-      '2:00 PM',
-      '2:30 PM',
-      '3:00 PM',
-      '3:30 PM',
-    ];
-    return times[timeSlot - 1] || 'Unknown time';
+  // Use the existing formatTime function for matches (single timeslot)
+  const formatMatchTime = (timeSlot: number) => {
+    return formatTime(timeSlot);
   };
 
   // Skeleton component for match boxes
@@ -331,7 +314,7 @@ const Dashboard = () => {
                         {formatDate(match.group.date)}
                       </Typography>
                       <Typography variant="body2" sx={{ color: 'text.secondary', mb: 0.5 }}>
-                        {formatTime(match.group.time)}
+                        {formatMatchTime(match.group.time)}
                       </Typography>
                       <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
                         {match.group.location}
@@ -433,7 +416,7 @@ const Dashboard = () => {
                         variant="body2"
                         sx={{ color: 'text.secondary', mb: { xs: 0.5, md: 0 } }}
                       >
-                        {formatTime(match.group.time)}
+                        {formatMatchTime(match.group.time)}
                       </Typography>
                       <Typography
                         variant="body2"
@@ -518,9 +501,9 @@ const Dashboard = () => {
                         <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
                           {formatDate(match.group.date)}
                         </Typography>
-                        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 0.5 }}>
-                          {formatTime(match.group.time)}
-                        </Typography>
+                                              <Typography variant="body2" sx={{ color: 'text.secondary', mb: 0.5 }}>
+                        {formatMatchTime(match.group.time)}
+                      </Typography>
                         <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
                           {match.group.location}
                         </Typography>
@@ -633,7 +616,7 @@ const Dashboard = () => {
                           variant="body2"
                           sx={{ color: 'text.secondary', mb: { xs: 0.5, md: 0 } }}
                         >
-                          {formatTime(match.group.time)}
+                          {formatMatchTime(match.group.time)}
                         </Typography>
                         <Typography
                           variant="body2"

client/src/components/Matches.tsx

@@ -25,6 +25,7 @@ import { MatchesResponse, Match, MatchStatus, ConversationStarter } from '../typ
 import { useMatchActions } from '../hooks/useMatchActions';
 import MatchActionDialogs from './MatchActionDialogs';
 import { useUserID } from '../contexts/UserIDContext';
+import { formatTime } from '../utils/formatting';
 
 const Matches = () => {
   const { getMatches } = useMatchesService();
@@ -124,27 +125,9 @@ const Matches = () => {
     });
   };
 
-  const formatTime = (timeSlot: number) => {
-    // Assuming time slots are 1-16 representing different times
-    const times = [
-      '8:00 AM',
-      '8:30 AM',
-      '9:00 AM',
-      '9:30 AM',
-      '10:00 AM',
-      '10:30 AM',
-      '11:00 AM',
-      '11:30 AM',
-      '12:00 PM',
-      '12:30 PM',
-      '1:00 PM',
-      '1:30 PM',
-      '2:00 PM',
-      '2:30 PM',
-      '3:00 PM',
-      '3:30 PM',
-    ];
-    return times[timeSlot - 1] || 'Unknown time';
+  // Use the existing formatTime function for matches (single timeslot)
+  const formatMatchTime = (timeSlot: number) => {
+    return formatTime(timeSlot);
   };
 
   const handleViewAllStarters = (starters: ConversationStarter[]) => {
@@ -310,7 +293,7 @@ const Matches = () => {
                       color="text.secondary"
                       sx={{ fontSize: '0.8rem', mb: 0.5 }}
                     >
-                      <strong>Time:</strong> {formatTime(match.group.time)}
+                      <strong>Time:</strong> {formatMatchTime(match.group.time)}
                     </Typography>
                     <Typography
                       variant="body2"

client/src/utils/formatting.ts

@@ -11,22 +11,22 @@ export const formatDate = (dateString: string) => {
 
 export const formatTime = (timeSlot: number) => {
   const times = [
-    '8:00 AM',
-    '8:30 AM',
-    '9:00 AM',
-    '9:30 AM',
     '10:00 AM',
+    '10:15 AM',
     '10:30 AM',
+    '10:45 AM',
     '11:00 AM',
+    '11:15 AM',
     '11:30 AM',
+    '11:45 AM',
     '12:00 PM',
+    '12:15 PM',
     '12:30 PM',
+    '12:45 PM',
     '1:00 PM',
+    '1:15 PM',
     '1:30 PM',
-    '2:00 PM',
-    '2:30 PM',
-    '3:00 PM',
-    '3:30 PM',
+    '1:45 PM',
   ];
   return times[timeSlot - 1] || 'Unknown time';
 };