Merge branch 'main' into 201-refactor-sidebar-1

ctc-uci · May 19, 2024 · cafd186 · cafd186
2 parents c7a3508 + 0ccb37e
commit cafd186
Show file tree

Hide file tree

Showing 20 changed files with 588 additions and 363 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@hookform/resolvers": "^3.3.4",
     "axios": "^1.6.5",
     "csv-writer": "^1.6.0",
+    "date-fns": "^3.6.0",
     "dotenv": "^16.3.1",
     "es-abstract": "^1.22.5",
     "firebase": "^10.7.1",

diff --git a/src/components/Checkin/CheckinStatsDashboard.jsx b/src/components/Checkin/CheckinStatsDashboard.jsx
@@ -15,14 +15,14 @@ const CheckinStatsDashboard = ({ event, registered, checkin, isPastEvent = false
   // formats dbms date into Month Day, Year
   const getDateString = () => {
     const dateObject = new Date(Date.parse(event['date']));
-    const dateString = `${[
-      dateObject.getMonth(),
-    ]}/${dateObject.getDate()}/${dateObject.getFullYear()}`;
+
     if (isNaN(dateObject)) {
       // on page load, prevents displaying "Undefined" as date
       return '';
     }
 
+    const dateString = `${dateObject.getMonth() + 1}/${dateObject.getDate()}/${dateObject.getFullYear()}`;
+
     return dateString;
   };
 

diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx
@@ -56,15 +56,28 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
   return (
     <Tr key={id} bg="#FFFFFF" fontWeight={'medium'}>
       <Td>
-        <Flex maxWidth={{ base: '200px', md: '200px', lg: '300px', xl: '300px' }}>
-          <Image src={image_url} boxSize="4rem" borderRadius="full" />
-          <Flex direction="column" ml={3} mt={4} g={1} maxW="75%">
+        <Flex
+          maxWidth={{ base: '200px', md: '200px', lg: '300px', xl: '300px' }}
+          alignItems={'center'}
+          gap={4}
+        >
+          <Image
+            src={image_url}
+            boxSize="4rem"
+            borderRadius="full"
+            maxW={'30%'}
+            h={'fit-content'}
+            aspectRatio={1}
+          />
+
+          <Flex direction="column" g={1} maxW="75%">
             <Text color={'#2D3748'} overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
               {first_name} {last_name}
             </Text>
           </Flex>
         </Flex>
       </Td>
+
       <Td display={{ base: 'none', lg: 'table-cell' }}>
         <Flex>
           <Box backgroundColor="#8589dc" boxSize="2rem" borderRadius="full" mr={5}>
@@ -88,7 +101,9 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
             justifyContent={'center'}
           >
             <Image src={status === 'Checked-in' ? checked_in : registered} />
-            <Text fontSize="md">{status}</Text>
+            <Text fontSize="md" textOverflow={'ellipsis'} maxW={48} overflow={'hidden'}>
+              {status}
+            </Text>
           </Flex>
         </Flex>
       </Td>
@@ -221,7 +236,7 @@ const VolunteerEventsTable = ({
                 </Text>
               </Flex>
             </Th>
-            <Th display={{ base: 'none', xl: 'block' }}>
+            <Th>
               <Flex>
                 <Text color="#2D3748" fontWeight="650">
                   Party Size

diff --git a/src/components/Dropzone.tsx b/src/components/Dropzone.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 import axios from 'axios';
 import React, { useMemo } from 'react';
 import Backend from '../utils/utils';

diff --git a/src/components/EventRegistration/CancelFlowController.jsx b/src/components/EventRegistration/CancelFlowController.jsx
@@ -0,0 +1,50 @@
+import {
+  Button,
+  Text,
+  Stack,
+  Modal,
+  ModalContent,
+  ModalBody,
+  ModalOverlay,
+  ModalCloseButton,
+} from '@chakra-ui/react';
+import Backend from '../../utils/utils';
+import PropTypes from 'prop-types';
+
+const CancelFlowController = ({id, isOpen, onClose}) => {
+  const unregisterFromEvent = async (id) => {
+    console.log(id)
+    // Register for event
+    try {
+      const route = '/data/' + id
+      await Backend.delete(route);
+      onClose();
+    } catch (e) {
+      console.log('Error deleting event data entry', e);
+    }
+    // Added this to update the page / no longer show unregistered events
+    window.location.reload(false);
+  };
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+    <ModalOverlay />
+    <ModalContent>
+      <ModalCloseButton />
+      <ModalBody>
+        <Stack align="center" padding="1rem" gap="2rem">
+          <Text fontSize="2xl" align="center">Are you sure you want to cancel your registration?</Text>
+          <Button onClick={() => unregisterFromEvent(id)}>Confirm Cancellation</Button>
+        </Stack>
+      </ModalBody>
+    </ModalContent>
+    </Modal>
+  );
+}
+
+CancelFlowController.propTypes = {
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func,
+  id: PropTypes.number,
+};
+
+export default CancelFlowController;
diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx
@@ -28,11 +28,14 @@ import { useState, useRef, useEffect } from 'react';
 import { putEvent } from '../../utils/eventsUtils.js';
 import Dropzone from '../Dropzone.tsx';
 import HappeningInChip from '../HappeningInChip/HappeningInChip.jsx';
+import HappeningNowChip from '../HappeningNowChip/HappeningNowChip.jsx';
 import RegistrationFlowController from '../EventRegistration/RegistrationFlowController.jsx';
 
 const EventCard = ({
   id,
   name,
+  end_time,
+  start_time,
   date,
   showSelect,
   image_url,
@@ -41,8 +44,6 @@ const EventCard = ({
   hasBorder = false,
   isFeatured = false,
 }) => {
-  const { onOpen, onClose } = useDisclosure();
-
   // Placeholder for testing a high-res image
   // image_url =
   //   'https://s3-alpha-sig.figma.com/img/4683/1e77/df1444c9bf86d4882d7252f8c2939d3f?Expires=1713139200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=o5biccW0iouIqgojcte5OMBpWeqQBhdUheAzCF5dUsHGLEYO8lWMb9df75l8NeItiYS93QbY-ZMSRTotplxK2OkExz9nI1Iwy8~HBEZp3cVR9j16wsLAXgB8Vb7GwMCK9d4eFILp6yydgRfr8~Dhd7SwwjCYSgGx94czHpMdLTC231Ss1WmOJiy5PsvfnytNOE3FxumVN95mZ5s-tB5ywvh3h8zqj6-d8FBI2NZG5vd0KqJeiahVxBJQtHxoxmJk1MXrBaQiXuG8aNlUwjGl~wdsqzQ7Aq2~A0x6BfrZUNbVsmmFowD4cdmTPuRTyex4Gc1IjR7AtrAdp2P48iSBTQ__';
@@ -59,12 +60,6 @@ const EventCard = ({
   const breakpoint = 400;
   const [containerWidth, setContainerWidth] = useState(0);
 
-  const selectEventForSidebar = () => {
-    console.log("Hit");
-    onClose();
-    onOpen();
-  }
-
   const {
     isOpen: isRegistrationFlowOpen,
     onOpen: onRegistrationFlowOpen,
@@ -81,6 +76,25 @@ const EventCard = ({
 
   const sideBySideCard = containerWidth >= breakpoint && isFeatured;
 
+  const checkDate = () => {
+    const todayDate = new Date();
+    console.log(`TODAY DATE HOURS: ${todayDate.getHours()} MINUTE: ${todayDate.getMinutes()}`);
+
+    // Convert start_time, end_time, and eventDate to Date objects
+    const eventStartHour = start_time.split(':')[0];
+    const eventStartMin = start_time.split(':')[1];
+
+    const eventEndHour = end_time.split(':')[0];
+    const eventEndMin = end_time.split(':')[1];
+
+    return (
+      todayDate.getHours() >= eventStartHour &&
+      todayDate.getHours() <= eventEndHour &&
+      todayDate.getMinutes() >= eventStartMin &&
+      todayDate.getMinutes() <= eventEndMin
+    );
+  };
+
   return (
     <>
       <Box
@@ -89,7 +103,7 @@ const EventCard = ({
         flexDir="column"
         cursor={'pointer'}
         justifyContent={sideBySideCard ? 'center' : 'start'}
-        onClick={() => (showSelect ? handleCheckboxChange(id) : selectEventForSidebar())}
+        onClick={() => (showSelect ? handleCheckboxChange(id) : handleCheckboxChange(id))}
         border={hasBorder ? '2px solid var(--Secondary-Button-Color, #EFEFEF)' : ''}
         borderRadius="18px"
         width={'Fill (674px)'}
@@ -138,7 +152,7 @@ const EventCard = ({
             mt={sideBySideCard ? 0 : 5}
             mb={sideBySideCard ? 0 : 5}
           >
-            <HappeningInChip date={dateObj} mb={5} />
+            {checkDate() ? <HappeningNowChip mb={5} /> : <HappeningInChip date={dateObj} mb={5} />}
 
             {name.length > 30 ? (
               <Text
@@ -286,6 +300,8 @@ EventCard.propTypes = {
   getEvents: PropTypes.func,
   hasBorder: PropTypes.bool,
   isFeatured: PropTypes.bool,
+  start_time: PropTypes.string,
+  end_time: PropTypes.string,
 };
 
 export default EventCard;

diff --git a/src/components/Events/EventFilteredGrid.jsx b/src/components/Events/EventFilteredGrid.jsx
@@ -10,15 +10,17 @@ import {
   Heading,
   HStack,
 } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import { SearchIcon } from '@chakra-ui/icons';
 import PropTypes from 'prop-types';
 
 import EventCard from '../../components/Events/EventCard';
 import Backend from '../../utils/utils';
 import Fuse from 'fuse.js';
 
-const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButton, isOpen }) => {
+import UserContext from '../../utils/UserContext';
+
+const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButton, isOpen, onlyUnregistered=false }) => {
   const [events, setEvents] = useState([]);
   const [displayEvents, setDisplayEvents] = useState([]);
 
@@ -30,11 +32,19 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
   const [date, setDate] = useState('');
   const [fuse, setFuse] = useState();
 
+  const { user } = useContext(UserContext);
+
   const getEvents = async () => {
     try {
-      const eventsData = await Backend.get('/events/currentEvents');
+      let eventsData;
+      if (onlyUnregistered) {
+        // Will show only registered events
+        eventsData = await Backend.get(`data/unregistered/${user.id}`);
+      } else {
+        // Will show all events, default / previous behavior
+        eventsData = await Backend.get('/events/currentEvents');
+      }
       setEvents(eventsData.data);
-      // setDates();
       setLocations(getLocation(eventsData.data));
       setDates(getDate(eventsData.data));
       const options = { keys: ['name', 'date', 'location'], includeScore: true }; //use date and locaiton selected
@@ -119,7 +129,6 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
       // result = fuseResult.filter(item => item.score <= 0.5).map(item => item.item);
       result = fuseResult.map(item => item.item);
     } else result = events;
-    // result.map((e) -> e.)
     setDisplayEvents(result);
   }, [name, location, date, fuse]);
 
@@ -197,7 +206,6 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
                     </Select>
                     <Select
                       bg={'white'}
-                      //   icon={<Icon as={CalendarIcon}/>}
                       onChange={handleDateChange}
                       placeholder="Select Date"
                       border={'2px solid var(--Secondary-Button-Color, #EFEFEF)'}
@@ -237,7 +245,6 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
                   <EventCard
                     {...element}
                     isSelected={selectedEvents.includes(element.id)}
-                    // showSelect={showSelect}
                     handleCheckboxChange={handleCheckboxChange}
                     getEvents={getEvents}
                     hasBorder={true}
@@ -257,6 +264,7 @@ EventFilteredGrid.propTypes = {
   setIsOpen: PropTypes.func.isRequired,
   setShowOpenDrawerButton: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
+  onlyUnregistered: PropTypes.bool
 };
 
 export default EventFilteredGrid;
diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx
@@ -1,10 +1,12 @@
 import { Heading, Flex, Grid, GridItem, IconButton, useBreakpointValue } from '@chakra-ui/react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import Backend from '../../utils/utils';
 import EventCard from './EventCard';
 import { RxCaretLeft } from 'react-icons/rx';
 import PropTypes from 'prop-types';
 
+import UserContext from '../../utils/UserContext';
+
 const FeaturedDashboard = ({
   setCurrentEventId,
   setIsOpen,
@@ -15,9 +17,11 @@ const FeaturedDashboard = ({
   const [featuredEvents, setFeaturedEvents] = useState([]);
   const numEvents = useBreakpointValue({ base: 1, md: 2, xl: 2 });
 
+  const { user } = useContext(UserContext);
+
   const getEvents = async () => {
     try {
-      const eventsData = await Backend.get('/events');
+      const eventsData = await Backend.get(`/data/unregistered/${user.id}`);
       setFeaturedEvents(eventsData.data.slice(0, numEvents));
     } catch (err) {
       console.log(`Error getting events: `, err.message);

diff --git a/src/components/EventsModal/AddEventsModal.jsx b/src/components/EventsModal/AddEventsModal.jsx
@@ -54,7 +54,8 @@ const AddEventsModal = () => {
         isClosable: true,
       });
       // TODO: API request is comment out for now due to form change
-      await postEvent(eventData);
+      const res = await postEvent(eventData);
+      console.log(res);
       toast.close(toastIdRef.current);
       toast({
         title: 'Event Created.',
@@ -65,7 +66,7 @@ const AddEventsModal = () => {
         isClosable: true,
       });
       onClose();
-      window.location.reload();
+      // window.location.reload();
     } catch (err) {
       console.log(err);
       toast({
@@ -215,6 +216,7 @@ const AddEventsModal = () => {
                         size="lg"
                         borderRadius="8px"
                         onChange={e => {
+                          console.log(`date: ${e.target.value}`);
                           setEventData({ ...eventData, date: e.target.value });
                         }}
                       />