Merge branch 'main' of https://github.com/ctc-uci/stand-up-to-trash-f…

…rontend into 201-refactor-sidebar-1
ctc-uci · May 13, 2024 · c7a3508 · c7a3508
2 parents a5559e7 + f5947e9
commit c7a3508
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 59 deletions.
diff --git a/src/components/Auth/AuthPage.jsx b/src/components/Auth/AuthPage.jsx
@@ -1,17 +1,20 @@
-import { Box, SimpleGrid, Image, Heading } from '@chakra-ui/react';
+import { Box, Image, Flex, Heading } from '@chakra-ui/react';
 import S2T_Logo from '../../Assets/S2T_Logo.png';
 import PropTypes from 'prop-types';
 
 const AuthPage = ({ children }) => {
   return (
-    <SimpleGrid columns={2} spacing={0} minH={'100vh'}>
+    <Flex minH={'100vh'} justifyContent={{ base: 'center', md: 'normal' }} alignItems="center">
       <Box
         backgroundColor="#2D558A"
         position="relative"
-        display={'flex'}
+        // display={'flex'}
         flexDir={'column'}
         justifyContent={'center'}
         alignItems={'center'}
+        width="50%"
+        minH={'100vh'}
+        display={{ base: 'none', md: 'flex' }}
       >
         <Image
           borderRadius="full"
@@ -52,10 +55,27 @@ const AuthPage = ({ children }) => {
           </Heading>
         </Box>
       </Box>
-      <Box display={'flex'} h="100%" justifyContent={'center'} alignContent={'center'} mx={4}>
+      <Box
+        width={{ base: '70%', md: '50%' }}
+        display={'flex'}
+        h="100%"
+        justifyContent={'center'}
+        alignContent={'center'}
+        mx={4}
+        my={{ base: 7, md: 0 }}
+        flexDir={'column'}
+      >
+        <Image
+          src={S2T_Logo}
+          alt="Logo"
+          H={'7rem'}
+          w={'7rem'}
+          m={'auto'}
+          display={{ base: 'flex', md: 'none' }}
+        />
         {children}
       </Box>
-    </SimpleGrid>
+    </Flex>
   );
 };
 

diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx
@@ -93,7 +93,7 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
         </Flex>
       </Td>
       <Td>
-        <Flex alignItems={'start'} justifyContent={'start'} >
+        <Flex alignItems={'start'} justifyContent={'start'}>
           <Text fontSize="md">{number_in_party}</Text>
         </Flex>
       </Td>
@@ -120,7 +120,7 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
                     isOpen={isOpen}
                     onClose={onClose}
                     id={event_data_id}
-                    profileImage={image_url}
+                    image_url={image_url}
                     firstName={first_name}
                     lastName={last_name}
                     volunteerId={volunteer_id}

diff --git a/src/components/Events/VolunteerImpactSummary.jsx b/src/components/Events/VolunteerImpactSummary.jsx
@@ -18,12 +18,14 @@ const VolunteerImpactSummary = ({ showLargestItemCollected }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const totalItems = 3;
 
-  const { user, updateUser } = useContext(UserContext);
+  const { user } = useContext(UserContext);
 
   useEffect(() => {
-    updateUser();
-    getData();
-  }, []);
+    if (user) {
+      getData();
+    }
+
+  }, [user]);
 
   const getData = async () => {
     try {

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -16,7 +16,6 @@ import {
   VolunteersIconBlue,
   VolunteersIconGrey,
   SupportIconGrey,
-  SettingsIconGrey,
   LogOutIcon,
   QRCodeIconGrey,
   QRCodeIconBlue,
@@ -87,7 +86,6 @@ const Navbar = () => {
 
   // For the support and settings button at the bottom above the user
   const supportPath = '/playground';
-  const settingsPath = '/playground';
 
   // For logout in case it changes from /logoutv2
   const logoutPath = '/loginv2';
@@ -218,7 +216,7 @@ const Navbar = () => {
               paddingLeft="10px"
               marginLeft="14px"
               marginRight="14px"
-              marginBottom="-13px"
+              marginBottom="2px"
               borderRadius="4px"
               cursor="pointer" // Add this to change cursor to pointer
               onClick={e => {
@@ -239,37 +237,6 @@ const Navbar = () => {
               </Text>
             </Box>
 
-            {/* Settings button */}
-            <Box
-              height="49px"
-              display="flex"
-              flexDirection="row"
-              alignItems="center"
-              gap="10px"
-              paddingLeft="10px"
-              marginLeft="14px"
-              marginRight="14px"
-              marginBottom="2px"
-              borderRadius="4px"
-              cursor="pointer"
-              onClick={e => {
-                e.preventDefault();
-                navigate(settingsPath);
-              }}
-            >
-              <SettingsIconGrey />
-              <Text
-                style={{
-                  fontSize: '16px',
-                  fontWeight: '500',
-                  lineHeight: '25px',
-                  textAlign: 'center',
-                }}
-              >
-                Settings
-              </Text>
-            </Box>
-
             {/* User card at bottom */}
             <Box
               style={{

diff --git a/src/components/RegisterGuestModal/RegisterGuestModal.jsx b/src/components/RegisterGuestModal/RegisterGuestModal.jsx
@@ -83,6 +83,7 @@ const RegisterGuestModal = ({ isOpen, onClose, eventId }) => {
       };
       const res = await Backend.post('/profiles/guest', volunteer);
       onClose();
+      window.location.reload();
       return res.data;
     } catch (error) {
       console.error('Error registering new volunteer:', error.message);

diff --git a/src/components/Scanner.tsx b/src/components/Scanner.tsx
@@ -56,7 +56,7 @@ const Scanner = ({ event_id, isOpen, onClose, handleSuccess }: ScannerProps) =>
         <ModalContent padding={5}>
           <ModalCloseButton backgroundColor={'#EFEFEF'} borderRadius={'100px'} />
 
-          <Button onClick={() => checkinVolunteer(227)}>Success</Button>
+          {/* <Button onClick={() => checkinVolunteer(227)}>Success</Button> */}
 
           <QrReader
             scanDelay={1000}

diff --git a/src/components/VolunteerSideViewDrawer.jsx b/src/components/VolunteerSideViewDrawer.jsx
@@ -44,7 +44,7 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
 
   useEffect(() => {
     getEventById(eventId).then(data => setEventData(data));
-    getEventDataVolunteerId(user.id, eventId).then(data => setEventDataVolunteer(data));
+    getEventDataVolunteerId(user?.id, eventId).then(data => setEventDataVolunteer(data));
     // setDateObj(new Date(Date.parse(eventData.date)))
   }, [eventId]);
 

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -119,7 +119,7 @@ const Home = () => {
       <Flex justifyContent={'center'} flexDir={'column'} w={'95%'}>
         <Box justifyContent="space-between">
           <Flex flexDir={'column'} backgroundColor={'#F8F8F8'} p={8} borderRadius={'lg'} gap={8}>
-            <Heading w={'full'}>Upcoming Events</Heading>
+            <Heading w={'full'}>All Events</Heading>
             <Box display="flex" flex-direction="row" justifyContent="space-between">
               <HStack>
                 <InputGroup w="50%">

diff --git a/src/pages/LoginV2.jsx b/src/pages/LoginV2.jsx
@@ -143,14 +143,14 @@ const LoginForm = () => {
       <Box style={{ width: '100%' }} height={'fit-content'} mt={'auto'} mb="auto">
         <form onSubmit={handleSubmit(handleLogin)}>
           <Center>
-            <Heading marginTop={10}>Log In</Heading>
+            <Heading marginTop={{ base: 5, md: 10 }}>Log In</Heading>
           </Center>
           <FormControl isInvalid={errors.email} w={'100%'} d="block">
             {/* <FormLabel>Email address</FormLabel> */}
             <Center>
               <Input
                 maxW={'20rem'}
-                marginTop={30}
+                marginTop={{ base: 7, md: 30 }}
                 borderRadius={8}
                 placeholder="Email"
                 boxShadow={'0 4px 2px -2px gray'}

diff --git a/src/pages/VolunteerHomePage.jsx b/src/pages/VolunteerHomePage.jsx
@@ -40,13 +40,13 @@ const VolunteerHomePage = () => {
 
   const { onNavbarDrawerOpen } = useContext(NavbarContext);
 
-  const { user, updateUser } = useContext(UserContext);
+  const { user } = useContext(UserContext);
 
   const getEvents = async () => {
     try {
-      let userId = user?.id;
-
-      const eventsData = await Backend.get(`data/registered/${userId}`);
+      console.log
+      console.log(user)
+      const eventsData = await Backend.get(`data/registered/${user.id}`);
       console.log(eventsData);
       setEvents(eventsData.data);
       const options = { keys: ['name', 'date', 'location'], includeScore: true };
@@ -70,9 +70,10 @@ const VolunteerHomePage = () => {
   ));
 
   useEffect(() => {
-    updateUser();
-    getEvents();
-  }, []);
+    if (user) {
+      getEvents();
+    }
+  }, [user]);
 
   useEffect(() => {
     if (!fuse) {

diff --git a/src/pages/Volunteers.jsx b/src/pages/Volunteers.jsx
@@ -272,7 +272,7 @@ const Volunteers = () => {
                     filename="./data.csv"
                     headers={header}
                   >
-                    Export All Volunteer Data
+                    Export All
                   </CSVLink>
                 </Button>
               </Box>

diff --git a/src/utils/firebaseAuthUtils.js b/src/utils/firebaseAuthUtils.js
@@ -49,11 +49,11 @@ export const createUserInFirebase = async (email, password, redirect, navigate)
 export const logInWithEmailAndPassWord = async (email, password, redirect, navigate) => {
   try {
     await signInWithEmailAndPassword(auth, email, password);
+    navigate(redirect);
   } catch (error) {
     console.log(`${error.code}: ${error.message}`);
     throw error;
   }
-  navigate(redirect);
 };
 
 /**