moved date header

ctc-uci · May 13, 2024 · f91f501 · f91f501
1 parent 37e4b36
commit f91f501
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 58 deletions.
diff --git a/src/components/Planner/PlannerEvents/PlannerEvents.jsx b/src/components/Planner/PlannerEvents/PlannerEvents.jsx
@@ -1,58 +1,22 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useContext } from 'react';
 import s from '../PlannerLayout.module.css';
-import { Text, Button, Heading, Box, IconButton, HStack, Flex, useDisclosure } from '@chakra-ui/react';
+import { Text, Button, Heading, Box, Flex, useDisclosure } from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
-import { FiEdit2 } from "react-icons/fi";
 import Catalog from '../../../pages/Catalog/Catalog';
 import PropTypes from 'prop-types';
 import { PlannerContext } from '../PlannerContext';
-import { NPOBackend } from '../../../utils/auth_utils';
-import AddDayModal from '../../../pages/PublishedSchedule/AddDayModal';
 import AddEventToPublishedScheduleForm from '../../AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm';
 import EmptyDayModal from '../EmptyDayModal';
 
 const PlannerEvents = ({ onClose }) => {
   const [isAddingEvent, setIsAddingEvent] = useState(false);
-  const [dateHeader, setDateHeader] = useState('');
-  const [dayData, setDayData] = useState({});
-  const { isOpen: isOpenDay, onOpen: onOpenDay, onClose: onCloseDay } = useDisclosure();
   const { isOpen: isOpenEmptyDay, onOpen: onOpenEmptyDay, onClose: onCloseEmptyDay } = useDisclosure();
 
-  const { plannedEventsContext, dayId, editContext, currEventContext } = useContext(PlannerContext);
+  const { plannedEventsContext, editContext, currEventContext } = useContext(PlannerContext);
   const [isEdit, setIsEdit] = editContext;
   const setCurrEvent = currEventContext[1]; // fix?
-  const [dataShouldRevalidate, setShouldDataRevalidate] = useState(false);
   const plannedEvents = plannedEventsContext[0];
 
-  const getUTCDate = (eventDate) => {
-    const utcDate = new Date(eventDate);
-    return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
-  }
-
-  const getDayData = async () => {
-    try {
-      const response = await NPOBackend.get(`/day/${dayId}`);
-      const responseData = response.data[0];
-      const [datePart] = responseData.eventDate.split('T');
-      const dateObj = getUTCDate(responseData.eventDate);
-      setDateHeader(dateObj.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }));
-      setDayData({id: responseData.id, eventDate: datePart, location: responseData.location, details: responseData.notes});
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  useEffect(() => {
-    getDayData();
-  }, [dayId]);
-
-  useEffect(() => {
-    if (dataShouldRevalidate) {
-      getDayData();
-      setShouldDataRevalidate(false);
-    }
-  }, [dataShouldRevalidate])
-
   const handleCreateNewEvent = () => {
     setCurrEvent({});
     togglePSForm();
@@ -83,19 +47,6 @@ const PlannerEvents = ({ onClose }) => {
         }
 
         <Box hidden={isAddingEvent || isEdit} h={(isAddingEvent || isEdit) && '0px'}>
-          <HStack mb="1.25rem">
-            <Text fontWeight={600}> Date: </Text>
-            <HStack borderBottom="1px" borderBottomColor="gray.300">
-              <Text>{dateHeader}</Text>
-              <IconButton icon={<FiEdit2 />} onClick={onOpenDay} color="gray.600" size="sm" h="24px"></IconButton>
-            </HStack>
-
-            <Text fontWeight={600} ml="3rem"> Location: </Text>
-            <HStack borderBottom="1px" borderBottomColor="gray.300">
-              <Text>{dayData.location}</Text>
-              <IconButton icon={<FiEdit2 />} onClick={onOpenDay} color="gray.600" size="sm" h="24px"></IconButton>
-            </HStack>
-          </HStack>
           <Box bgColor="white" p="1rem" borderRadius="5px" mb="1rem">
             <Heading size="md" pb="1rem" color="gray.800" fontWeight={600}>Create New Event</Heading>
             <Button
@@ -131,7 +82,6 @@ const PlannerEvents = ({ onClose }) => {
             </Button>
           </Flex>
         </Box>
-        <AddDayModal isOpenDay={isOpenDay} onCloseDay={onCloseDay} isEdit={true} dayData={dayData} setShouldDataRevalidate={setShouldDataRevalidate} />
         <EmptyDayModal onClose={onCloseEmptyDay} isOpen={isOpenEmptyDay} onClosePlanner={onClose} />
       </div>
     </div>

diff --git a/src/components/Planner/PlannerLayout.module.css b/src/components/Planner/PlannerLayout.module.css
@@ -38,23 +38,24 @@
 
 /* PLANNER TIMELINE */
 #planner-timeline-container {
-  margin-left: 1rem;
   background-color: white;
   width: clamp(250px, 30%, 600px);
+  border-right: 2px solid var(--chakra-colors-gray-300);
 }
 
 .timeline-grid {
-  max-height: 100vh;
+  max-height: 87vh;
   display: grid;
   grid-template-columns: 64px repeat(2, 1fr);
   grid-auto-rows: 1fr;
   overflow-y: auto;
+  margin-left: 1rem;
 }
 
 .grid-hour-container {
   min-height: 128px;
   position: relative;
-  border-top: 2px solid var(--chakra-colors-blackAlpha-400);
+  border-bottom: 2px solid var(--chakra-colors-blackAlpha-400);
 }
 
 .timeline-event-wrapper {

diff --git a/src/components/Planner/PlannerTimeline/PlannerTimeline.jsx b/src/components/Planner/PlannerTimeline/PlannerTimeline.jsx
@@ -1,10 +1,13 @@
 import s from '../PlannerLayout.module.css';
-import { useMemo, useContext, useEffect } from 'react';
+import { useMemo, useContext, useEffect, useState } from 'react';
 import { generateTimestamps, minutesInFormattedTime } from '../chrono';
-import { Badge, Text, Box, HStack } from '@chakra-ui/react';
+import { Badge, Box, Heading, HStack, Icon, IconButton, Spacer, Text, useDisclosure } from '@chakra-ui/react';
 import { PlannerContext } from '../PlannerContext';
 import PlannedEvent, { convertTimeToMinutes } from '../PlannedEvent';
 import { NPOBackend } from '../../../utils/auth_utils';
+import { EditIcon } from '@chakra-ui/icons';
+import AddDayModal from '../../../pages/PublishedSchedule/AddDayModal';
+import { FaLocationDot } from "react-icons/fa6";
 
 
 const PlannerTimeline = () => {
@@ -14,6 +17,11 @@ const PlannerTimeline = () => {
   const [eventData, setCurrEvent] = currEventContext;
   const [isEdit, setIsEdit] = editContext;
 
+  const [dateHeader, setDateHeader] = useState('');
+  const [dayData, setDayData] = useState({});
+  const { isOpen: isOpenDay, onOpen: onOpenDay, onClose: onCloseDay } = useDisclosure();
+  const [dataShouldRevalidate, setShouldDataRevalidate] = useState(false);
+
   const addedEvents = [];
 
   const fetchEditData = async (id) => {
@@ -48,8 +56,16 @@ const PlannerTimeline = () => {
 
   useEffect(() => {
     updateTimeline();
+    getDayData();
   }, []);
 
+  useEffect(() => {
+    if (dataShouldRevalidate) {
+      getDayData();
+      setShouldDataRevalidate(false);
+    }
+  }, [dataShouldRevalidate])
+
   const updateTimeline = async () => {
     const psEvents = await fetchDayInfo(dayId);
     if (psEvents && psEvents[0].id) {
@@ -64,6 +80,24 @@ const PlannerTimeline = () => {
     }
   }
 
+  const getUTCDate = (eventDate) => {
+    const utcDate = new Date(eventDate);
+    return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
+  }
+
+  const getDayData = async () => {
+    try {
+      const response = await NPOBackend.get(`/day/${dayId}`);
+      const responseData = response.data[0];
+      const [datePart] = responseData.eventDate.split('T');
+      const dateObj = getUTCDate(responseData.eventDate);
+      setDateHeader(dateObj.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }));
+      setDayData({id: responseData.id, eventDate: datePart, location: responseData.location, details: responseData.notes});
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   // Memoize function call for time labels to increase efficiency between component re-renders
   const timelineBlocks = useMemo(() => {
     const timeStamps = generateTimestamps();
@@ -89,6 +123,18 @@ const PlannerTimeline = () => {
 
   return (
     <div id={s['planner-timeline-container']}>
+      <Box bg="gray.100" pl="2rem" pr="0.5rem" py="1rem" color="blue.800" borderBottom="2px solid var(--chakra-colors-gray-300)">
+        <HStack>
+          <Heading size="md">{dateHeader}</Heading>
+          <Spacer />
+          <IconButton icon={<EditIcon />} onClick={onOpenDay} color="gray.600" />
+        </HStack>
+        <HStack>
+          <Icon as={FaLocationDot} />
+          <Text> {dayData.location}</Text>
+        </HStack>
+        <AddDayModal isOpenDay={isOpenDay} onCloseDay={onCloseDay} isEdit={true} dayData={dayData} setShouldDataRevalidate={setShouldDataRevalidate}/>
+      </Box>
       <div className={`${s['timeline-grid']} ${s['gray-scrollbar-vertical']}`}>
         {timelineBlocks}
         {plannedEvents.map(plannedEvent => {