Created responsive design for Navbar. Adjusted VolunteerEventPage and…

… VolunteerHomePage to properly accomodate responsive Navbar design. Adjusted naming for Export buttons. iPad view now uses VolunteerSideViewDrawer.
ctc-uci · May 19, 2024 · f553ba4 · f553ba4
1 parent 91b384c
commit f553ba4
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 36 deletions.
diff --git a/src/components/Events/EventFilteredGrid.jsx b/src/components/Events/EventFilteredGrid.jsx
@@ -10,7 +10,7 @@ import {
   Heading,
   HStack,
 } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { SearchIcon } from '@chakra-ui/icons';
 import PropTypes from 'prop-types';
 
@@ -30,7 +30,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
   const [date, setDate] = useState('');
   const [fuse, setFuse] = useState();
 
-  const getEvents = async () => {
+  const getEvents = useCallback(async () => {
     try {
       const eventsData = await Backend.get('/events/currentEvents');
       setEvents(eventsData.data);
@@ -42,7 +42,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
     } catch (err) {
       console.log(`Error getting events: `, err.message);
     }
-  };
+  }, []);
 
   const getLocation = data => {
     let location = [];
@@ -75,7 +75,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
 
   useEffect(() => {
     getEvents();
-  }, []);
+  }, [getEvents]);
 
   const handleLocationChange = event => {
     const selectedLocation = event.target.value;
@@ -121,7 +121,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
     } else result = events;
     // result.map((e) -> e.)
     setDisplayEvents(result);
-  }, [name, location, date, fuse]);
+  }, [name, location, date, fuse, events]);
 
   return (
     <>
@@ -130,7 +130,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
         flexDir={'column'}
         alignItems={'center'}
         bg="#E6EAEF"
-        ml={{ base: '2vw', xl: '15%' }}
+        ml={{ base: '2vw', xl: isOpen ? '22%' : '15%' }}
         mr={{ base: '2vw' }}
         pt={4}
         mb="32px"

diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx
@@ -10,21 +10,23 @@ const FeaturedDashboard = ({
   setIsOpen,
   setShowOpenDrawerButton,
   onOpen,
+  isSideBarOpen,
   showOpenDrawerButton,
 }) => {
   const [featuredEvents, setFeaturedEvents] = useState([]);
   const numEvents = useBreakpointValue({ base: 1, md: 2, xl: 2 });
 
-  const getEvents = async () => {
-    try {
-      const eventsData = await Backend.get('/events');
-      setFeaturedEvents(eventsData.data.slice(0, numEvents));
-    } catch (err) {
-      console.log(`Error getting events: `, err.message);
-    }
-  };
 
   useEffect(() => {
+    const getEvents = async () => {
+      try {
+        const eventsData = await Backend.get('/events');
+        setFeaturedEvents(eventsData.data.slice(0, numEvents));
+      } catch (err) {
+        console.log(`Error getting events: `, err.message);
+      }
+    };
+
     getEvents();
   }, [numEvents]);
 
@@ -34,7 +36,7 @@ const FeaturedDashboard = ({
       flexDir={'column'}
       alignItems={'center'}
       bg="#E6EAEF"
-      ml={{ base: '3vw', xl: '15%' }}
+      ml={{ base: '3vw', xl: isSideBarOpen ? '22%' : '15%' }}
       mr={{ base: '3vw' }}
       pt={4}
     >
@@ -128,6 +130,7 @@ FeaturedDashboard.propTypes = {
   setCurrentEventId: PropTypes.func.isRequired,
   setIsOpen: PropTypes.func.isRequired,
   setShowOpenDrawerButton: PropTypes.func.isRequired,
+  isSideBarOpen: PropTypes.bool
 };
 
 export default FeaturedDashboard;
diff --git a/src/components/Events/ImpactSummary.jsx b/src/components/Events/ImpactSummary.jsx
@@ -137,7 +137,7 @@ const ImpactSummary = () => {
             filename="./data.csv"
             headers={header}
           >
-            Export Data
+            Export All Data
           </CSVLink>
           {/* {eventIdData.map((eventData) => <CSVLink
             data={eventData ? [eventData] : ''}

diff --git a/src/components/Events/PastEventsImpactSummary.jsx b/src/components/Events/PastEventsImpactSummary.jsx
@@ -124,7 +124,7 @@ const PastEventsImpactSummary = () => {
             filename="./data.csv"
             headers={header}
           >
-            Export Data
+            Export Past Events Data
           </CSVLink>
         </Button>
       </VStack>

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -76,7 +76,7 @@ const Navbar = () => {
 
   useEffect(() => {
     updateUser();
-  }, []);
+  }, [updateUser]);
 
   // Change the paths for each button since these might change
   const homePath = '/';
@@ -252,6 +252,7 @@ const Navbar = () => {
                 // borderRadius: '12px',
                 backgroundColor: '#FFF',
                 border: '1px',
+                width: 'full'
               }}
               onClick={e => {
                 e.preventDefault();
@@ -264,8 +265,8 @@ const Navbar = () => {
               {/* <Box style={{ borderRadius: '50%' }}> */}
                 <Image
                   src={user?.image_url}
-                  width="2.75vw"
-                  height="2.75vw"
+                  width="20%"
+                  aspectRatio={1}
                   borderRadius="full"
                   objectFit="cover"
                 />
@@ -284,7 +285,7 @@ const Navbar = () => {
                   textOverflow="ellipsis"
                   fontWeight='800'
                   color='#000000'
-                  fontSize='1vw'
+                  fontSize='75%'
                   lineHeight='25px'
                   textAlign='left'
                   marginTop='-1px'
@@ -295,7 +296,7 @@ const Navbar = () => {
 
                 <Tag
                   style={{
-                    fontSize: '0.75vw',
+                    fontSize: '56.25%',
                     fontWeight: '500',
                     lineHeight: '16px',
                     color: '#717171',

diff --git a/src/components/VolunteerSideViewDrawer.jsx b/src/components/VolunteerSideViewDrawer.jsx
@@ -3,7 +3,6 @@ import {
   Drawer,
   DrawerOverlay,
   DrawerContent,
-  DrawerCloseButton,
   DrawerBody,
   useDisclosure,
 } from '@chakra-ui/react';
@@ -46,7 +45,7 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
     getEventById(eventId).then(data => setEventData(data));
     getEventDataVolunteerId(user?.id, eventId).then(data => setEventDataVolunteer(data));
     // setDateObj(new Date(Date.parse(eventData.date)))
-  }, [eventId]);
+  }, [eventId, user?.id]);
 
   function formatDate(dateString) {
     const months = [
@@ -81,12 +80,11 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
     <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="full">
       <DrawerOverlay />
       <DrawerContent>
-        <DrawerCloseButton />
         <DrawerBody>
           <Flex
             flexDir={'column'}
             w={'100%'}
-            maxW={'26em'}
+            maxW={'100vw'}
             mt={'1em'}
             px={{ base: '10px', md: '20px' }}
           >

diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx
@@ -106,7 +106,7 @@ const VolunteerEventPage = () => {
         />
       </Box>
       {/* Drawer Component */}
-      {breakpoint == 'base' ? (
+      {breakpoint != 'xl' ? (
         <VolunteerSideViewDrawer
           eventId={currentEventId}
           isOpen={isDrawerOpen}

diff --git a/src/pages/VolunteerHomePage.jsx b/src/pages/VolunteerHomePage.jsx
@@ -13,7 +13,7 @@ import {
   useBreakpoint,
   useDisclosure,
 } from '@chakra-ui/react';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, useCallback } from 'react';
 import { SearchIcon, HamburgerIcon } from '@chakra-ui/icons';
 
 import EventCard from '../components/Events/EventCard';
@@ -42,7 +42,7 @@ const VolunteerHomePage = () => {
 
   const { user } = useContext(UserContext);
 
-  const getEvents = async () => {
+  const getEvents = useCallback(async () => {
     try {
       console.log;
       console.log(user);
@@ -54,7 +54,7 @@ const VolunteerHomePage = () => {
     } catch (err) {
       console.log(`Error getting events: `, err.message);
     }
-  };
+  }, [user]);
 
   const eventCards = displayEvents.map(element => (
     <GridItem
@@ -73,7 +73,7 @@ const VolunteerHomePage = () => {
     if (user) {
       getEvents();
     }
-  }, [user]);
+  }, [getEvents, user]);
 
   useEffect(() => {
     if (!fuse) {
@@ -231,7 +231,7 @@ const VolunteerHomePage = () => {
           </Box>
         </Flex>
       </Flex>
-      {breakpoint == 'base' ? (
+      {breakpoint != 'xl' ? (
         <VolunteerSideViewDrawer
           eventId={currentEventId}
           isOpen={isOpen}

diff --git a/src/pages/Volunteers.jsx b/src/pages/Volunteers.jsx
@@ -13,7 +13,8 @@ import { IoDocumentText } from 'react-icons/io5';
 import VolunteersTable from '../components/VolunteersTable';
 import { useState, useEffect, useContext } from 'react';
 import Backend from '../utils/utils';
-import { ExternalLinkIcon, HamburgerIcon } from '@chakra-ui/icons';
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { AiOutlineExport } from 'react-icons/ai';
 import { GreyCustomSearchIcon } from '../components/Icons/CustomSearchIcon';
 import Fuse from 'fuse.js';
 import { TrophyIcon } from '../components/Icons/TrophyIcon';
@@ -255,7 +256,7 @@ const Volunteers = () => {
                 justifyContent={{ base: 'center', lg: 'start' }}
                 alignItems={'end'}
               >
-                <Button
+                {/* <Button
                   backgroundColor={'#0075FF'}
                   fontSize="lg"
                   style={{
@@ -266,13 +267,26 @@ const Volunteers = () => {
                   }}
                   height={'fit-content'}
                 >
-                  <ExternalLinkIcon marginRight="2" boxSize="6" color={'white'} />{' '}
+                  <ExternalLinkIcon marginRight="2" boxSize="1vw" color={'white'} />{' '}
+                  <CSVLink
+                    data={volunteerData.length ? volunteerData : []}
+                    filename="./data.csv"
+                    headers={header}
+                  >
+                    Export
+                  </CSVLink>
+                </Button> */}
+                <Button
+                  colorScheme={'messenger'}
+                  leftIcon={<AiOutlineExport></AiOutlineExport>}
+                  size="md"
+                >
                   <CSVLink
                     data={volunteerData.length ? volunteerData : []}
                     filename="./data.csv"
                     headers={header}
                   >
-                    Export All
+                    Export Volunteer Data
                   </CSVLink>
                 </Button>
               </Box>