Added breaks between events in publish schedule (#58)

* Attempt at calculating and inserting breaks into published schedule * Attempt at calculating and inserting breaks into published schedule * Trying to add breaks but running into too many re-renders issue * A combo of a bunch of different methods * Added breaks in between events for each day * Fixed big where some events were missing * Actually, now it is fixed * re-formatting times * fixed several bugs --------- Co-authored-by: liannejl <[email protected]> Co-authored-by: ThatMegamind <[email protected]> Co-authored-by: ThatMegamind <[email protected]>
ctc-uci · Mar 24, 2024 · a1955dc · a1955dc
1 parent 48ccc66
commit a1955dc
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 32 deletions.
diff --git a/src/components/Events/Events.jsx b/src/components/Events/Events.jsx
@@ -1,40 +1,63 @@
 import DailyEvent from './DailyEvent.jsx';
 import PropTypes from 'prop-types';
 
-import {
-    Grid,
-} from '@chakra-ui/react';
+import { Grid } from '@chakra-ui/react';
 
+const Events = ({ eventData, location }) => {
 
-const Events = ( {eventData, location} ) => {
+  const formatDate = (date) => {
+    let time = date.split(":");
+    let hours = time[0];
+    let mins = time[1];
+    let ampm = hours >= 12 ? 'pm' : 'am';
+    hours = hours % 12;
+    hours = hours ? hours : 12;
+    return `${hours}:${mins} ${ampm}`;
+  }
 
-    const formatDate = (date) => {
-      let time = date.split(":");
-      let hours = time[0];
-      let mins = time[1];
-      let ampm = hours >= 12 ? 'pm' : 'am';
-      hours = hours % 12;
-      hours = hours ? hours : 12;
-      return `${hours}:${mins} ${ampm}`;
-    }
-    return (
-
-        <Grid gap={3}>
-            {eventData.map(item => (
-                <DailyEvent
-                    key={item.id}
-                    id={item.id}
-                    startTime={formatDate(item.startTime)}
-                    endTime={formatDate(item.endTime)}
-                    eventTitle={item.title}
-                    location={location}
-                    confirmed={item.confirmed}
-                />
-            ))}
-        </Grid>
+  let maxId = eventData.reduce((maxVal, event) => Math.max(maxVal, event.id), -Infinity)+1;
 
-    );
-  };
+  const eventDataWithBreaks = [];
+  if (eventData.length == 1) {
+    eventDataWithBreaks.push(eventData[0]);
+  }
+  for (let i = 0; i < eventData.length - 1; i++) {
+    const currentEvent = eventData[i];
+    const nextEvent = eventData[i + 1];
+    eventDataWithBreaks.push(currentEvent);
+    const currEnd = currentEvent.endTime.split(':').slice(0,2).join(":");
+    const nextStart = nextEvent.startTime.split(':').slice(0,2).join(":");
+    if (currEnd < nextStart) {
+      eventDataWithBreaks.push({
+        id: maxId,
+        startTime: currentEvent.endTime,
+        endTime: nextEvent.startTime,
+        title: 'Break / Team Time',
+        location: 'N/A',
+        confirmed: true,
+      });
+      maxId++;
+    }
+  }
+  if (eventData.length > 1) {
+    eventDataWithBreaks.push(eventData[eventData.length - 1]);
+  }
+  console.log(eventDataWithBreaks);
+  return (
+    <Grid gap={3}>
+      {eventDataWithBreaks.map(item => (
+        <DailyEvent
+          key={item.id}
+          startTime={formatDate(item.startTime)}
+          endTime={formatDate(item.endTime)}
+          eventTitle={item.title}
+          location={item.location == null ? location : null}
+          confirmed={item.confirmed}
+        />
+      ))}
+    </Grid>
+  );
+};
 
 Events.propTypes = {
   eventData: PropTypes.array.isRequired,

diff --git a/src/components/Events/PublishedScheduleTable.jsx b/src/components/Events/PublishedScheduleTable.jsx
@@ -54,7 +54,6 @@ const PublishedScheduleTable = ({ season }) => {
               <Tr key={item.day.id} verticalAlign={'top'}>
                 <Td>
                   <EventInfo
-
                     eventDate={getUTCDate(item.day.eventDate).toLocaleDateString('en-US')}
                     day={dayNames[getUTCDate(item.day.eventDate).getDay()]}
                     startTime={formatDate(item.day.startTime)}
@@ -63,7 +62,6 @@ const PublishedScheduleTable = ({ season }) => {
                     notes={item.day.notes}
                   />
                 </Td>
-
                 <Td style={{ textAlign: 'left' }} width="75%">
                   <Events eventData={item.data} location={item.day.location} />
                 </Td>