Tl bug fixes (#86)

* day planner click block to edit * fixed random modal bug * delete modal work now?? * made hour blocks larger, events change on hover * fixed timeline hover color, character limits on day details and location, and season select styling * refresh data on day planner close * remove console * fixed navbar issue?? * added warning modal before exiting empty day * restricted time range to 7 am to 11 pm --------- Co-authored-by: ThatMegamind <[email protected]> Co-authored-by: ThatMegamind <[email protected]>
ctc-uci · Apr 29, 2024 · d15e24c · d15e24c
1 parent 6afd3e4
commit d15e24c
Show file tree

Hide file tree

Showing 14 changed files with 190 additions and 167 deletions.
diff --git a/src/components/AddDayForm/AddDayForm.jsx b/src/components/AddDayForm/AddDayForm.jsx
@@ -19,10 +19,10 @@ import { NPOBackend } from '../../utils/auth_utils';
 
 const schema = yup.object({
   date: yup.date().nullable().transform((curr, orig) => orig === '' ? null : curr).required('Date required'),
-  location: yup.string().required('Location required').max(50, 'Location exceeds 50 character limit'),
+  location: yup.string().required('Location required').max(100, 'Location exceeds 100 character limit'),
   details: yup
     .string()
-    .max(50, 'Details exceeds 50 character limit'),
+    .max(200, 'Details exceeds 200 character limit'),
 });
 
 const AddDayForm = ({ onClose, onOpen, setDayId, dayData, setShouldDataRevalidate }) => {

diff --git a/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx b/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx
@@ -12,7 +12,9 @@ import {
   Heading,
   Flex,
   Text,
-  Stack
+  HStack,
+  useDisclosure,
+  Spacer
 } from '@chakra-ui/react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
@@ -30,14 +32,19 @@ import Dropdown from '../Dropdown/Dropdown';
 import PropTypes from 'prop-types';
 import { PlannerContext } from '../Planner/PlannerContext';
 import PlannedEvent, { convertTimeToMinutes } from '../Planner/PlannedEvent';
+import RemoveTimelineEventModal from '../Planner/RemoveTimelineEventModal';
 
 const schema = yup.object({
-    startTime: yup.string().required('Start time is required'),
+    startTime: yup.string().required('Start time is required').test('is-after-7-am', 'Start time cannot be earlier than 7 AM', function(startTime) {
+      return startTime && startTime >= "07:00";
+    }),
     endTime: yup.string()
       .required('End time is required')
       .test('is-after', 'End time must be after start time', function(endTime) {
         const startTime = this.parent.startTime;
         return startTime && endTime && startTime < endTime;
+      }).test('is-before-11-pm', 'End time must be earlier than 11 PM', function(endTime) {
+        return endTime && endTime <= "23:00";
       }),
     host: yup.string().max(50, 'Host exceeds 50 character limit').default('').nullable(),
     title: yup.string().required('Title Required').max(50, 'Title exceeds 50 character limit'),
@@ -58,6 +65,7 @@ const AddEventToPublishedScheduleForm = ({ closeForm }) => {
   const [seasonFilter, yearFilter, subjectFilter, eventFilter] = filters;
   const [checkboxVal, setCheckboxVal] = useState(undefined);
   const [formData, setFormData] = useState({...eventData});
+  const { isOpen: isRemoveOpen, onOpen: onRemoveOpen, onClose: onRemoveClose } = useDisclosure();
 
   useEffect(() => {
     if (Object.keys(eventData).length === 0) {
@@ -85,7 +93,7 @@ const AddEventToPublishedScheduleForm = ({ closeForm }) => {
   }, [eventData]);
 
   useEffect(() => {
-    if (formData.startTime && formData.endTime && formData.startTime < formData.endTime) {
+    if (formData.startTime && formData.endTime && formData.startTime < formData.endTime && formData.startTime >= "07:00" && formData.endTime <= "23:00") {
       // if (isEdit) {
       //   // setPlannedEvents([...plannedEvents.filter(e => e.id != -1 && e.id != eventData.id)]);
       // }
@@ -264,7 +272,7 @@ const AddEventToPublishedScheduleForm = ({ closeForm }) => {
 
   return (
     <Box borderRadius="5px">
-      <form onSubmit={handleSubmit(submitData)}>
+      <form id="add-ps-event-form" onSubmit={handleSubmit(submitData)}>
         <Box bgColor="white" borderRadius="5px" p="1rem">
           <Heading size="md" color="gray.600" mb="0.5rem">Event Information</Heading>
           <Box px="1rem">
@@ -430,11 +438,16 @@ const AddEventToPublishedScheduleForm = ({ closeForm }) => {
               </Box>
             </Box>
         </Box>
-        <Stack spacing={2} justifyContent="right" direction="row" pb="1.5rem" mt="0.5rem">
-          <Button htype="submit" mt="1rem" mr="1rem" onClick={handleCancel}>Cancel</Button>
-          <Button colorScheme="blue" type="submit" mt="1rem">{isEdit ? 'Save' : 'Add Event'}</Button>
-        </Stack>
       </form>
+      <HStack spacing={2} pb="1.5rem" mt="0.5rem">
+        {isEdit &&
+          <Button variant="outline" mt="1rem" mr="1rem" onClick={onRemoveOpen}>Delete</Button>
+        }
+        <Spacer />
+        <Button htype="submit" mt="1rem" mr="1rem" onClick={handleCancel}>Cancel</Button>
+        <Button form="add-ps-event-form" colorScheme="blue" type="submit" mt="1rem">{isEdit ? 'Save' : 'Add Event'}</Button>
+      </HStack>
+      <RemoveTimelineEventModal onClose={onRemoveClose} isOpen={isRemoveOpen} deleteItemId={eventData.id ? eventData.id : -1} closeForm={closeForm}/>
     </Box>
   );
 };

diff --git a/src/components/Catalog/DeleteEventModal/DeleteEventModal.jsx b/src/components/Catalog/DeleteEventModal/DeleteEventModal.jsx
@@ -23,7 +23,7 @@ const DeleteEventModal = ({ isOpen, onClose, deleteItemId, setDataShouldRevalida
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>Remove Event?</ModalHeader>

diff --git a/src/components/Events/DailyEvent.jsx b/src/components/Events/DailyEvent.jsx
@@ -1,73 +1,70 @@
 import PropTypes from 'prop-types';
 import { Box, Flex, Text, Grid, Button, Spacer, Badge, VStack } from '@chakra-ui/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { NPOBackend } from '../../utils/auth_utils.js';
 import AUTH_ROLES from '../../utils/auth_config.js';
 import { useAuthContext } from '../../common/AuthContext.jsx';
 const { USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
 
-const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description, eventId }) => {
-  const [confirmEvent, setConfirmEvent] = useState(confirmed);
+const DailyEvent = ({ event }) => {
+  const [confirmEvent, setConfirmEvent] = useState(event.confirmed);
   const [cohort, setCohort] = useState(undefined);
   const [cohortBadgeColor, setCohortBadgeColor] = useState(undefined);
   const [cohortTextColor, setCohortTextColor] = useState(undefined);
   const [cohortBorderColor, setCohortBorderColor] = useState(undefined);
   const [cohortBorder, setCohortBorder] = useState(undefined);
   const {currentUser} = useAuthContext();
+  const [eventData, setEventData] = useState(event);
 
-  let border_color = '#2B93D1';
-  let background_color = '#F7FAFC';
-  if (!confirmEvent) {
-    border_color = '#F69052';
-    background_color = '#FEF1DC';
-  }
+  useEffect(() => {
+    setEventData(event);
 
-  const getCohort = async () => {
-    if (eventId) {
-      try {
-        const { data } = await NPOBackend.get(`/catalog/${eventId}`);
-        let year = data[0].year;
-        if( year.length == 2)
-        {
-          setCohort('Both');
-          setCohortBadgeColor("#FFFFFF");
-          setCohortTextColor("#4A5568");
-          setCohortBorderColor("#4A5568");
-          setCohortBorder("outline");
-        }
-        else if(year[0] == 'junior')
-        {
-          setCohort('Junior');
-          setCohortBadgeColor("#CBD5E0");
-          setCohortTextColor("#171923");
-          setCohortBorderColor("#CBD5E0");
-          setCohortBorder("simple");
-        }
-        else {
-          setCohort('Senior');
-          setCohortBadgeColor("#4A5568");
-          setCohortTextColor("#FFFFFF");
-          setCohortBorderColor("#4A5568");
-          setCohortBorder("simple");
-        }
-      } catch (error) {
-        console.error('Error fetching data:', error);
+    if (event.year) {
+      if( event.year.length == 2)
+      {
+        setCohort('Both');
+        setCohortBadgeColor("#FFFFFF");
+        setCohortTextColor("#4A5568");
+        setCohortBorderColor("#4A5568");
+        setCohortBorder("outline");
+      }
+      else if(event.year[0] == 'junior')
+      {
+        setCohort('Junior');
+        setCohortBadgeColor("#CBD5E0");
+        setCohortTextColor("#171923");
+        setCohortBorderColor("#CBD5E0");
+        setCohortBorder("simple");
+      }
+      else if(event.year[0] == 'senior')
+      {
+        setCohort('Senior');
+        setCohortBadgeColor("#4A5568");
+        setCohortTextColor("#FFFFFF");
+        setCohortBorderColor("#4A5568");
+        setCohortBorder("simple");
       }
     }
-  }
+  }, [event]);
 
-  getCohort();
+  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 handleConfirm = async () => {
     const date = new Date();
     try {
-      let response;
-      response = await NPOBackend.put(`/published-schedule/${id}`, {
+        await NPOBackend.put(`/published-schedule/${eventData.id}`, {
           confirmed: true,
           confirmedOn: date,
         }
       );
-      console.log(response);
       setConfirmEvent(true);
     } catch (error) {
       console.error('Error fetching data:', error);
@@ -76,28 +73,28 @@ const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description
 
   return (
     <Box
-      bg={background_color}
+      bg={eventData.confirmed ? '#F7FAFC' : '#FEF1DC'}
       p={6}
       borderRadius="7"
       borderLeftWidth="10px"
-      borderColor={border_color}
+      borderColor={eventData.confirmed ? '#2B93D1' : '#F69052'}
       boxShadow="md"
     >
       <Flex minWidth="max-content" alignItems="flex-start" gap="50" justifyContent="space-between">
         <Text>
-          {startTime} - {endTime}
+          {formatDate(eventData.startTime)} - {formatDate(eventData.endTime)}
         </Text>
 
         <Grid gap={2}>
-          <Text fontWeight="bold">{eventTitle}</Text>
-          <Text maxW="30vw" whiteSpace="pre-wrap">{description}</Text>
+          <Text fontWeight="bold">{eventData.title}</Text>
+          <Text maxW="30vw" whiteSpace="pre-wrap">{eventData.description}</Text>
         </Grid>
 
         <Spacer />
 
         <VStack align="flex-end">
-        <Badge
-            key={eventId}
+          <Badge
+            key={eventData.id}
             variant={cohortBorder}
             backgroundColor={cohortBadgeColor}
             color={cohortTextColor}
@@ -111,40 +108,34 @@ const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description
             {cohort}
           </Badge>
 
-        {!confirmEvent && (
-          <Box w="4rem" alignItems="top">
-            <Grid gap={2}>
-              <div></div>
-              <div></div>
-              <Button
-                variant="outline"
-                bg="#FEF1DC"
-                textColor="#F69052"
-                borderColor="#F69052"
-                _hover={{ bg: "#F6AD55", color: "#2D3748" }}
-                size="xs"
-                onClick={handleConfirm}
-                visibility={currentUser.type == USER_ROLE ? 'hidden' : 'visible'}
-              >
-                Confirm
-              </Button>
-          </Grid>
-        </Box>
-        )}
+          {!confirmEvent && (
+            <Box w="4rem" alignItems="top">
+              <Grid gap={2}>
+                <div></div>
+                <div></div>
+                <Button
+                  variant="outline"
+                  bg="#FEF1DC"
+                  textColor="#F69052"
+                  borderColor="#F69052"
+                  _hover={{ bg: "#F6AD55", color: "#2D3748" }}
+                  size="xs"
+                  onClick={handleConfirm}
+                  visibility={currentUser.type == USER_ROLE ? 'hidden' : 'visible'}
+                >
+                  Confirm
+                </Button>
+            </Grid>
+          </Box>
+          )}
         </VStack>
       </Flex>
     </Box>
   );
 };
 
 DailyEvent.propTypes = {
-  id: PropTypes.number.isRequired,
-  startTime: PropTypes.string.isRequired,
-  endTime: PropTypes.string.isRequired,
-  eventTitle: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  confirmed: PropTypes.bool.isRequired,
-  eventId: PropTypes.number.isRequired,
+  event: PropTypes.object.isRequired,
 };
 
 export default DailyEvent;
diff --git a/src/components/Events/Events.jsx b/src/components/Events/Events.jsx
@@ -2,21 +2,8 @@ import DailyEvent from './DailyEvent.jsx';
 import PropTypes from 'prop-types';
 
 import { Grid } from '@chakra-ui/react';
-
 const Events = ({ eventData }) => {
 
-  // console.log("Event Data", eventData);
-
-  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}`;
-  }
-
   let maxId = eventData.reduce((maxVal, event) => Math.max(maxVal, event.id), -Infinity)+1;
 
   eventData.sort((a, b) => {
@@ -49,7 +36,6 @@ const Events = ({ eventData }) => {
 
     const timeDiff = convertTimeToMin(startHour, startMin) - convertTimeToMin(endHour, endMin);
     if (currEnd < nextStart && timeDiff >= 5) {
-      console.log("break");
       eventDataWithBreaks.push({
         id: maxId,
         startTime: currentEvent.endTime,
@@ -63,19 +49,13 @@ const Events = ({ eventData }) => {
   if (eventData.length > 1) {
     eventDataWithBreaks.push(eventData[eventData.length - 1]);
   }
-  // console.log(eventDataWithBreaks);
+
   return (
     <Grid gap={3}>
       {eventDataWithBreaks.map(item => (
         <DailyEvent
           key={item.id}
-          id={item.id}
-          startTime={formatDate(item.startTime)}
-          endTime={formatDate(item.endTime)}
-          eventTitle={item.title}
-          description={item.description}
-          confirmed={item.confirmed}
-          eventId={item.eventId}
+          event={item}
         />
       ))}
     </Grid>

diff --git a/src/components/Events/PublishedScheduleTable.jsx b/src/components/Events/PublishedScheduleTable.jsx
@@ -38,7 +38,7 @@ const PublishedScheduleTable = ({ season, allSeasons }) => {
       renderTable();
       setShouldDataRevalidate(false);
     }
-  }, [dataShouldRevalidate])
+  }, [dataShouldRevalidate, renderTable])
 
   const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -34,7 +34,7 @@ const Navbar = ({ hasLoaded, isAdmin }) => {
     );
   };
 
-  if (!hasLoaded) {
+  if (!hasLoaded || location.pathname == '/login') {
     return null;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ const Navbar = ({ hasLoaded, isAdmin }) => { @@
         );
       };
-      if (!hasLoaded) {
+      if (!hasLoaded || location.pathname == '/login') {
         return null;
       }
@@ Expand Down @@