From 7970e49eb4e0e387b43dd3100bf28ac65f1c0be9 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Fri, 5 Apr 2024 16:12:15 -0700 Subject: [PATCH 01/19] feat: implement scanner Co-authored-by: Jessie He --- src/components/Checkin/CheckinModal.jsx | 8 ++-- src/components/Scanner.jsx | 60 +++++++++++++++---------- src/pages/CheckinPage.jsx | 33 ++++++++++++++ 3 files changed, 75 insertions(+), 26 deletions(-) diff --git a/src/components/Checkin/CheckinModal.jsx b/src/components/Checkin/CheckinModal.jsx index 1c80526..b357d6e 100644 --- a/src/components/Checkin/CheckinModal.jsx +++ b/src/components/Checkin/CheckinModal.jsx @@ -22,8 +22,8 @@ import { FaUserAlt } from 'react-icons/fa'; // Icon for when there is no picture import GroupIcon from '../../Assets/groupIcon.svg'; const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => { - const [numberOfParticipants, setNumberOfParticipants] = useState(''); - const [submittable, setSubmittable] = useState(false); + const [numberOfParticipants, setNumberOfParticipants] = useState(1); + const [submittable, setSubmittable] = useState(true); const handleInput = e => { setNumberOfParticipants(e.target.value); @@ -76,7 +76,9 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => { > - {volunteer.number_in_party === 1 ? 'Individual' : 'Group'} + {!volunteer.number_in_party || volunteer.number_in_party == 1 + ? 'Individual' + : 'Group'} diff --git a/src/components/Scanner.jsx b/src/components/Scanner.jsx index f7064ef..167fcd1 100644 --- a/src/components/Scanner.jsx +++ b/src/components/Scanner.jsx @@ -1,38 +1,52 @@ import { QrReader } from 'react-qr-reader'; import { useState } from 'react'; import Backend from '../utils/utils'; +import { Button, Modal, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react'; +import PropTypes from 'prop-types'; -const Scanner = () => { +const Scanner = ({ isOpen, onClose, handleSuccess, event_id }) => { const [data, setData] = useState(); - const checkinVolunteer = async ({ event_id, volunteer_id }) => { - const resp = await Backend.patch(`/data/checkin/${event_id}/${volunteer_id}`); - console.log(resp.data); - return resp.data; + const checkinVolunteer = async volunteer_id => { + const volunteer = await Backend.get(`/profiles/${volunteer_id}`); // get Volunteer object + + onClose(); + handleSuccess(volunteer.data, Number(event_id)); }; return ( <> - { - if (result) { - // console.log('scanned'); - setData(result.getText()); // Displays the link obtained - checkinVolunteer(result.event_id, result.volunteer_id); - - // const event_id = 35; - // const volunteer_id = 112; - // checkinVolunteer({ event_id, volunteer_id }); - } - }} - ViewFinder={() => { - return
; - }} - /> -

{data}

+ + + + + + + + { + if (result) { + setData(result.getText()); // Displays the link obtained + checkinVolunteer(result.volunteer_id); + } + }} + ViewFinder={() => { + return
; + }} + /> +

{data}

+ + ); }; +Scanner.propTypes = { + isOpen: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + handleSuccess: PropTypes.func.isRequired, + event_id: PropTypes.string.isRequired, +}; + export default Scanner; diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx index 6379a08..107cfb8 100644 --- a/src/pages/CheckinPage.jsx +++ b/src/pages/CheckinPage.jsx @@ -11,6 +11,7 @@ import CheckinInputPageToggle from '../components/Checkin/CheckinInputPageToggle import { ArrowBackIcon, HamburgerIcon } from '@chakra-ui/icons'; import CheckinModal from '../components/Checkin/CheckinModal'; import NavbarContext from '../utils/NavbarContext'; +import Scanner from '../components/Scanner'; import { useParams } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; @@ -29,6 +30,7 @@ import { import { GreyCustomSearchIcon } from '../components/Icons/CustomSearchIcon'; import RegisterGuestModal from '../components/RegisterGuestModal/RegisterGuestModal'; +import { FaCamera } from 'react-icons/fa'; const CheckinPage = () => { const [joinedData, setJoinedData] = useState([]); @@ -45,6 +47,7 @@ const CheckinPage = () => { const navigate = useNavigate(); const [isCheckinModalOpen, setIsCheckinModalOpen] = useState(false); + const [isScannerModalOpen, setIsScannerModalOpen] = useState(false); const [selectedVolunteer, setSelectedVolunteer] = useState(null); useEffect(() => { @@ -104,6 +107,12 @@ const CheckinPage = () => { } }, [input, joinedData, eventId]); + const handleScannerSuccess = async (volunteer, eventId) => { + setSelectedVolunteer(volunteer); + setIsCheckinModalOpen(true); + await Backend.patch(`/data/checkin/${eventId}/${volunteer.id}`); // update backend with user + }; + /* updates check in status for a volunteer on the backend, dynamically rerenders it on the frontend */ @@ -246,7 +255,31 @@ const CheckinPage = () => { )} + + + + + Date: Sat, 27 Apr 2024 18:19:55 -0700 Subject: [PATCH 02/19] drawer is set up --- src/pages/VolunteerEventPage.jsx | 49 ++++++++++++++++---------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx index 25a8645..abe9851 100644 --- a/src/pages/VolunteerEventPage.jsx +++ b/src/pages/VolunteerEventPage.jsx @@ -6,19 +6,19 @@ import { useContext, useState } from 'react'; import NavbarContext from '../utils/NavbarContext'; import VolunteerSideView from '../components/VolunteerSideView.jsx'; import { RxCaretLeft } from 'react-icons/rx'; +import { Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, DrawerHeader, DrawerBody, useDisclosure } from '@chakra-ui/react'; const VolunteerEventPage = () => { + const { isOpen, onOpen, onClose } = useDisclosure(); const { onNavbarDrawerOpen } = useContext(NavbarContext); - // eslint-disable-next-line const [currentEventId, setCurrentEventId] = useState(-1); - const [showOpenDrawerButton, setShowOpenDrawerButton] = useState(false); - const [isOpen, setIsOpen] = useState(false); - const onOpen = () => { - setIsOpen(!isOpen); - setShowOpenDrawerButton(false); + const openEventDrawer = (eventId) => { + setCurrentEventId(eventId); + onOpen(); }; - const onClose = () => setIsOpen(!isOpen); + + console.log('test' + currentEventId); @@ -61,7 +61,6 @@ const VolunteerEventPage = () => { flex-shrink="0" borderRadius={'xl'} flexDir={'column'} - display={showOpenDrawerButton ? { base: 'flex', xl: 'none' } : 'none'} > { - - - {isOpen && ( - - )} - - + {/* Drawer Component */} + + + + + Event Details + + {/* Conditional rendering based on `currentEventId` */} + {isOpen && ( + + )} + + + ); }; - export default VolunteerEventPage; From 4e6eb4fd24b32cdd3252bf8a566d0e701df104c6 Mon Sep 17 00:00:00 2001 From: Farahnaz Hoque <107436970+farahnazhoque@users.noreply.github.com> Date: Sun, 28 Apr 2024 12:11:58 -0700 Subject: [PATCH 03/19] 178 done --- src/components/Navbar/Navbar.jsx | 24 +--- src/components/VolunteerSideView.jsx | 177 ++++++++++++--------------- src/pages/VolunteerEventPage.jsx | 14 +-- 3 files changed, 87 insertions(+), 128 deletions(-) diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index ffff9eb..68a08be 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -18,8 +18,6 @@ import { SupportIconGrey, SettingsIconGrey, LogOutIcon, - QRCodeIconGrey, - QRCodeIconBlue, } from '../Icons/NavbarIcons'; import { CloseIcon } from '@chakra-ui/icons'; @@ -41,7 +39,6 @@ const NavbarButton = ({ buttonText, path, navigate, UnfocusedIcon, FocusedIcon } marginBottom="6px" backgroundColor={location.pathname === path ? '#D4E4F9' : 'transparent'} borderRadius="4px" - cursor="pointer" onClick={e => { e.preventDefault(); navigate(path); @@ -81,7 +78,7 @@ const Navbar = () => { // Change the paths for each button since these might change const homePath = '/'; const eventsPath = '/event'; - const archivedEventsPath = '/past-events'; + const archivedEventsPath = '/archived-events'; const volunteersPath = '/volunteers'; // For the support and settings button at the bottom above the user @@ -90,8 +87,6 @@ const Navbar = () => { // For logout in case it changes from /logoutv2 const logoutPath = '/loginv2'; - // QR code path - const qrPath = '/qr'; // For navigating to the user profile when you click on it // at the bottom @@ -115,7 +110,7 @@ const Navbar = () => { alignItems="start" > {/* Box containing everything above "support" */} - + {/* Box containing the logo and role title at the top */} { navigate={navigate} FocusedIcon={HomeIconBlue} UnfocusedIcon={HomeIconGrey} - /> - + /> {/* Current Events button */} { /> {/* Conditional rendering based on the role */} - {role === 'admin' ? ( + {role === 'admin' && ( <> {/* Archived Events button */} { UnfocusedIcon={VolunteersIconGrey} /> - ) : ( - )} {/* Bottom of navbar, support and below */} diff --git a/src/components/VolunteerSideView.jsx b/src/components/VolunteerSideView.jsx index 5e9a58e..a600b96 100644 --- a/src/components/VolunteerSideView.jsx +++ b/src/components/VolunteerSideView.jsx @@ -58,22 +58,20 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { return `${month} ${day}, ${year} @ ${time}`; } return ( - + } onClick={() => { onClose(); setShowOpenDrawerButton(true); }} - > + /> { p={'0.8em'} borderWidth={'0.2em'} borderRadius="lg" - marginY={'0.8em'} + my={'0.8em'} borderColor={'#EFEFEF'} > Your event status - + @@ -116,7 +114,6 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { px={'0.4em'} borderRadius={'md'} bg="gray.200" - mb={'0.3em'} justifyContent={'center'} alignItems={'center'} gap={'0.3em'} @@ -132,7 +129,6 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { px={'0.4em'} borderRadius={'md'} borderWidth={'0.15em'} - mb={'0.3em'} justifyContent={'center'} alignItems={'center'} gap={'0.3em'} @@ -144,113 +140,92 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { Party size 12 people - + - - - - - + + + {eventData.name} - - {formatDate(dateObj)} + + {formatDate(eventData.date)} - {eventData.description} - - {!isReadMore && ( - setIsReadMore(true)} - > - Read more... - - )} - + + {eventData.description} + + - - Add this event + + Add this event to: - - setCalendarSelected(prev => !prev)} - borderColor={calendarSelected ? 'blue.200' : '#EFEFEF'} - borderWidth={2} - > - - - Calendar - - - - - - { - setMapSelected(prev => !prev); - const { location } = await getEventById(eventId); - window.open(`https://www.google.com/maps/dir/?api=1&destination=${location}`); - }} - borderColor={mapSelected ? 'blue.200' : '#EFEFEF'} - borderWidth={2} - > - - - - Google Map - - - - - - - + + + + - diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx index abe9851..1a02712 100644 --- a/src/pages/VolunteerEventPage.jsx +++ b/src/pages/VolunteerEventPage.jsx @@ -85,18 +85,16 @@ const VolunteerEventPage = () => { /> {/* Drawer Component */} - + - + {/* Setting a minimum width */} Event Details - {/* Conditional rendering based on `currentEventId` */} {isOpen && ( - +
{/* Ensure content fits and is scrollable if needed */} + +
)} @@ -104,4 +102,4 @@ const VolunteerEventPage = () => { ); }; -export default VolunteerEventPage; +export default VolunteerEventPage; \ No newline at end of file From 8563196dfaaa84aa83669a6a89ed9f7c32a1f7ec Mon Sep 17 00:00:00 2001 From: Farahnaz Hoque <107436970+farahnazhoque@users.noreply.github.com> Date: Wed, 1 May 2024 13:45:31 -0700 Subject: [PATCH 04/19] desktop drawer automatically set to open --- src/components/Navbar/Navbar.jsx | 26 ++- src/components/VolunteerSideView.jsx | 205 ++++++++++-------- src/components/VolunteerSideViewMobile.jsx | 241 +++++++++++++++++++++ src/pages/VolunteerEventPage.jsx | 48 ++-- 4 files changed, 406 insertions(+), 114 deletions(-) create mode 100644 src/components/VolunteerSideViewMobile.jsx diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 68a08be..ed12b2a 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -18,6 +18,8 @@ import { SupportIconGrey, SettingsIconGrey, LogOutIcon, + QRCodeIconGrey, + QRCodeIconBlue, } from '../Icons/NavbarIcons'; import { CloseIcon } from '@chakra-ui/icons'; @@ -39,6 +41,7 @@ const NavbarButton = ({ buttonText, path, navigate, UnfocusedIcon, FocusedIcon } marginBottom="6px" backgroundColor={location.pathname === path ? '#D4E4F9' : 'transparent'} borderRadius="4px" + cursor="pointer" onClick={e => { e.preventDefault(); navigate(path); @@ -78,7 +81,7 @@ const Navbar = () => { // Change the paths for each button since these might change const homePath = '/'; const eventsPath = '/event'; - const archivedEventsPath = '/archived-events'; + const archivedEventsPath = '/past-events'; const volunteersPath = '/volunteers'; // For the support and settings button at the bottom above the user @@ -87,6 +90,8 @@ const Navbar = () => { // For logout in case it changes from /logoutv2 const logoutPath = '/loginv2'; + // QR code path + const qrPath = '/qr'; // For navigating to the user profile when you click on it // at the bottom @@ -110,7 +115,7 @@ const Navbar = () => { alignItems="start" > {/* Box containing everything above "support" */} - + {/* Box containing the logo and role title at the top */} { navigate={navigate} FocusedIcon={HomeIconBlue} UnfocusedIcon={HomeIconGrey} - /> + /> + {/* Current Events button */} { /> {/* Conditional rendering based on the role */} - {role === 'admin' && ( + {role === 'admin' ? ( <> {/* Archived Events button */} { UnfocusedIcon={VolunteersIconGrey} /> + ) : ( + )} {/* Bottom of navbar, support and below */} @@ -348,4 +362,4 @@ const Navbar = () => { ); }; -export default Navbar; +export default Navbar; \ No newline at end of file diff --git a/src/components/VolunteerSideView.jsx b/src/components/VolunteerSideView.jsx index a600b96..a43ab9a 100644 --- a/src/components/VolunteerSideView.jsx +++ b/src/components/VolunteerSideView.jsx @@ -1,4 +1,12 @@ -import { Flex, Button, Image, Text, HStack, Box, VStack, IconButton } from '@chakra-ui/react'; +import { + Flex, + Image, + Text, + HStack, + Box, + VStack, + IconButton, +} from '@chakra-ui/react'; import PropTypes from 'prop-types'; import { useState, useEffect } from 'react'; import { Icon } from '@chakra-ui/react'; @@ -25,9 +33,12 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { // setDateObj(new Date(Date.parse(eventData.date))) }, [eventId]); - // console.log('e', eventData); - // console.log('d', dateObj) - + const handleClose = () => { + if (setShowOpenDrawerButton) { + setShowOpenDrawerButton(false); + } + onClose(); // Ensure onClose is always called to close the view + }; function formatDate(dateString) { const months = [ 'Jan', @@ -43,7 +54,6 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { 'Nov', 'Dec', ]; - console.log('dateString', dateString); const date = new Date(dateString); const month = months[date.getUTCMonth()]; const day = date.getUTCDate(); @@ -58,20 +68,19 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { return `${month} ${day}, ${year} @ ${time}`; } return ( - + } - onClick={() => { - onClose(); - setShowOpenDrawerButton(true); - }} - /> + onClick={handleClose} + > { p={'0.8em'} borderWidth={'0.2em'} borderRadius="lg" - my={'0.8em'} + marginY={'0.8em'} borderColor={'#EFEFEF'} > Your event status - + @@ -114,6 +123,7 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { px={'0.4em'} borderRadius={'md'} bg="gray.200" + mb={'0.3em'} justifyContent={'center'} alignItems={'center'} gap={'0.3em'} @@ -129,6 +139,7 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { px={'0.4em'} borderRadius={'md'} borderWidth={'0.15em'} + mb={'0.3em'} justifyContent={'center'} alignItems={'center'} gap={'0.3em'} @@ -140,94 +151,112 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { Party size 12 people - + - - - + + + + + {eventData.name} - - {formatDate(eventData.date)} - - - {eventData.description} + + {formatDate(dateObj)} - + {eventData.description} + + {!isReadMore && ( + setIsReadMore(true)} + > + Read more... + + )} + - - Add this event to: + + Add this event - - - - + + setCalendarSelected(prev => !prev)} + borderColor={calendarSelected ? 'blue.200' : '#EFEFEF'} + borderWidth={2} + > + + + Calendar + + + + + + { + setMapSelected(prev => !prev); + const { location } = await getEventById(eventId); + window.open(`https://www.google.com/maps/dir/?api=1&destination=${location}`); + }} + borderColor={mapSelected ? 'blue.200' : '#EFEFEF'} + borderWidth={2} + > + + + + Google Map + + + + + + + - ); }; @@ -238,4 +267,4 @@ VolunteerSideView.propTypes = { setShowOpenDrawerButton: PropTypes.func.isRequired, }; -export default VolunteerSideView; +export default VolunteerSideView; \ No newline at end of file diff --git a/src/components/VolunteerSideViewMobile.jsx b/src/components/VolunteerSideViewMobile.jsx new file mode 100644 index 0000000..a600b96 --- /dev/null +++ b/src/components/VolunteerSideViewMobile.jsx @@ -0,0 +1,241 @@ +import { Flex, Button, Image, Text, HStack, Box, VStack, IconButton } from '@chakra-ui/react'; +import PropTypes from 'prop-types'; +import { useState, useEffect } from 'react'; +import { Icon } from '@chakra-ui/react'; +import { getEventById } from '../utils/eventsUtils'; +import { EditIcon, CalendarIcon } from '@chakra-ui/icons'; +import logos_google_calendar from '../assets/logos_google-calendar.svg'; +import logos_google_maps from '../assets/logos_google-maps.svg'; +import { IoPeopleSharp } from 'react-icons/io5'; +import { IoMdLink } from 'react-icons/io'; +import { RxCaretRight } from 'react-icons/rx'; +import HappeningInChip from '../components/HappeningInChip/HappeningInChip'; + +const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { + const [eventData, setEventData] = useState([]); + const [isReadMore, setIsReadMore] = useState(false); + const [calendarSelected, setCalendarSelected] = useState(false); + const [mapSelected, setMapSelected] = useState(false); + // const [dateObj, setDateObj] = useState(new Date()); + const dateObj = new Date(Date.parse(eventData.date)); + // console.log(eventData); + + useEffect(() => { + getEventById(eventId).then(data => setEventData(data)); + // setDateObj(new Date(Date.parse(eventData.date))) + }, [eventId]); + + // console.log('e', eventData); + // console.log('d', dateObj) + + function formatDate(dateString) { + const months = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ]; + console.log('dateString', dateString); + const date = new Date(dateString); + const month = months[date.getUTCMonth()]; + const day = date.getUTCDate(); + const year = date.getUTCFullYear(); + const time = dateObj.toLocaleString('default', { timeStyle: 'short' }); + // const time = + // date.getUTCHours().toString().padStart(2, '0') + + // ':' + + // date.getUTCMinutes().toString().padStart(2, '0') + + // (hours >= 12 ? ' PM' : ' AM'); + + return `${month} ${day}, ${year} @ ${time}`; + } + return ( + + + } + onClick={() => { + onClose(); + setShowOpenDrawerButton(true); + }} + /> + + + + + + + + + + + + + + + Your event status + + + + + + Type + + + Group + + + + Registration + + + Registered + + + + Party size + 12 people + + + + + + + {eventData.name} + + + {formatDate(eventData.date)} + + + {eventData.description} + + + + + + + Add this event to: + + + + + + + + + + ); +}; + +VolunteerSideView.propTypes = { + eventId: PropTypes.string.isRequired, + onClose: PropTypes.func.isRequired, + setShowOpenDrawerButton: PropTypes.func.isRequired, +}; + +export default VolunteerSideView; diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx index 1a02712..2f0ebd2 100644 --- a/src/pages/VolunteerEventPage.jsx +++ b/src/pages/VolunteerEventPage.jsx @@ -6,20 +6,25 @@ import { useContext, useState } from 'react'; import NavbarContext from '../utils/NavbarContext'; import VolunteerSideView from '../components/VolunteerSideView.jsx'; import { RxCaretLeft } from 'react-icons/rx'; -import { Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, DrawerHeader, DrawerBody, useDisclosure } from '@chakra-ui/react'; - +import { Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, useMediaQuery, DrawerBody, useDisclosure } from '@chakra-ui/react'; +import VolunteerSideViewMobile from '../components/VolunteerSideViewMobile'; const VolunteerEventPage = () => { const { isOpen, onOpen, onClose } = useDisclosure(); const { onNavbarDrawerOpen } = useContext(NavbarContext); - const [currentEventId, setCurrentEventId] = useState(-1); + const [currentEventId, setCurrentEventId] = useState(null); // Initial state is null to indicate no event selected + const [isMobile] = useMediaQuery("(max-width: 768px)"); + const [setShowOpenDrawerButton] = useState(false); + const openEventDrawer = (eventId) => { - setCurrentEventId(eventId); + setCurrentEventId(eventId); // Set the current event ID, which triggers the side view to display onOpen(); }; - - + const handleClose = () => { + onClose(); + setCurrentEventId(null); // Clear the current event ID on close + }; console.log('test' + currentEventId); return ( @@ -85,20 +90,23 @@ const VolunteerEventPage = () => { /> {/* Drawer Component */} - - - {/* Setting a minimum width */} - - Event Details - - {isOpen && ( -
{/* Ensure content fits and is scrollable if needed */} - -
- )} - - - + {isMobile ? ( + + + + + + + + + + ) : ( + + )} ); }; From 7261c6f61750d4fe4f875c754dc2654f328fc075 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Thu, 2 May 2024 01:32:54 -0700 Subject: [PATCH 05/19] fix: correct various bugs --- src/components/Checkin/CheckinModal.jsx | 4 +- src/components/Scanner.jsx | 52 ------------ src/components/Scanner.tsx | 105 ++++++++++++++++++++++++ src/pages/CheckinPage.jsx | 2 + 4 files changed, 110 insertions(+), 53 deletions(-) delete mode 100644 src/components/Scanner.jsx create mode 100644 src/components/Scanner.tsx diff --git a/src/components/Checkin/CheckinModal.jsx b/src/components/Checkin/CheckinModal.jsx index b357d6e..2f0d749 100644 --- a/src/components/Checkin/CheckinModal.jsx +++ b/src/components/Checkin/CheckinModal.jsx @@ -33,7 +33,8 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => { }; const handleCheckIn = async () => { - if (volunteer && typeof volunteer === 'object' && volunteer.id) { + console.log('handle checkin', volunteer); + if (volunteer && typeof volunteer === 'object' && volunteer.id && volunteer.event_data_id) { await onCheckInConfirm(volunteer, numberOfParticipants); // Pass the entire volunteer object onClose(); } else { @@ -130,6 +131,7 @@ CheckinModal.propTypes = { email: PropTypes.string, image_url: PropTypes.string, number_in_party: PropTypes.number, + event_data_id: PropTypes.number, }), }; diff --git a/src/components/Scanner.jsx b/src/components/Scanner.jsx deleted file mode 100644 index 167fcd1..0000000 --- a/src/components/Scanner.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import { QrReader } from 'react-qr-reader'; -import { useState } from 'react'; -import Backend from '../utils/utils'; -import { Button, Modal, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react'; -import PropTypes from 'prop-types'; - -const Scanner = ({ isOpen, onClose, handleSuccess, event_id }) => { - const [data, setData] = useState(); - - const checkinVolunteer = async volunteer_id => { - const volunteer = await Backend.get(`/profiles/${volunteer_id}`); // get Volunteer object - - onClose(); - handleSuccess(volunteer.data, Number(event_id)); - }; - - return ( - <> - - - - - - - - { - if (result) { - setData(result.getText()); // Displays the link obtained - checkinVolunteer(result.volunteer_id); - } - }} - ViewFinder={() => { - return
; - }} - /> -

{data}

- - - - ); -}; - -Scanner.propTypes = { - isOpen: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - handleSuccess: PropTypes.func.isRequired, - event_id: PropTypes.string.isRequired, -}; - -export default Scanner; diff --git a/src/components/Scanner.tsx b/src/components/Scanner.tsx new file mode 100644 index 0000000..f5b5e12 --- /dev/null +++ b/src/components/Scanner.tsx @@ -0,0 +1,105 @@ +import { QrReader } from 'react-qr-reader'; +import React, { useState } from 'react'; +import Backend from '../utils/utils'; +import { + Button, + Text, + Modal, + ModalCloseButton, + ModalContent, + ModalOverlay, +} from '@chakra-ui/react'; +import PropTypes from 'prop-types'; + +interface QRCodeData { + first_name: string; + last_name: string; + id: number; +} + +interface ScannerProps { + event_id: string | undefined; + isOpen: boolean; + onClose: React.Dispatch>; + handleSuccess: (volunteer: any, eventId: any) => Promise; +} + +const Scanner = ({ event_id, isOpen, onClose, handleSuccess }: ScannerProps) => { + const [data, setData] = useState(); + const [error, setError] = useState(false); + + const checkinVolunteer = async (volunteer_id: number) => { + const volunteer = await Backend.get(`/profiles/${volunteer_id}`); // get Volunteer object + + handleClose(); + handleSuccess({ ...volunteer.data, number_in_party: 1, event_data_id: Number(event_id) }, 1); + }; + + const handleClose = () => { + setData(undefined); + setError(false); + + onClose(false); + }; + + return ( + <> + + + + + + + + { + if (result) { + let data; + + try { + data = JSON.parse(result.getText()); + } catch (e) { + console.error('Failed parsing QR Code:', e); + setError(true); + } + + setData(data); + } + }} + constraints={{ facingMode: 'user' }} + ViewFinder={() => { + return
; + }} + /> + + {error && ( + + Error: No valid volunteer found + + )} + + {!error && data && ( + <> + + Volunteer: {data?.first_name} {data?.last_name} + + + + )} + + + + ); +}; + +Scanner.propTypes = { + isOpen: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + handleSuccess: PropTypes.func.isRequired, + event_id: PropTypes.string.isRequired, +}; + +export default Scanner; diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx index 107cfb8..6fd5829 100644 --- a/src/pages/CheckinPage.jsx +++ b/src/pages/CheckinPage.jsx @@ -118,7 +118,9 @@ const CheckinPage = () => { */ const changeIsCheckedIn = async (volunteer, numberOfParticipants) => { try { + console.log('volunteer', volunteer); const event_data_id = volunteer.event_data_id; + console.log('event_data_id:', volunteer.event_data_id); console.log('Number of participants:', numberOfParticipants); const response = await Backend.put(`/data/checkin/${event_data_id}`, { From 22394e98b183b5c32105f848fcea0e4c523abebd Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Thu, 2 May 2024 01:36:14 -0700 Subject: [PATCH 06/19] fix: remove uneeded console log from diff --- src/components/Checkin/CheckinModal.jsx | 1 - src/pages/CheckinPage.jsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/components/Checkin/CheckinModal.jsx b/src/components/Checkin/CheckinModal.jsx index 2f0d749..72da30e 100644 --- a/src/components/Checkin/CheckinModal.jsx +++ b/src/components/Checkin/CheckinModal.jsx @@ -33,7 +33,6 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => { }; const handleCheckIn = async () => { - console.log('handle checkin', volunteer); if (volunteer && typeof volunteer === 'object' && volunteer.id && volunteer.event_data_id) { await onCheckInConfirm(volunteer, numberOfParticipants); // Pass the entire volunteer object onClose(); diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx index 6fd5829..107cfb8 100644 --- a/src/pages/CheckinPage.jsx +++ b/src/pages/CheckinPage.jsx @@ -118,9 +118,7 @@ const CheckinPage = () => { */ const changeIsCheckedIn = async (volunteer, numberOfParticipants) => { try { - console.log('volunteer', volunteer); const event_data_id = volunteer.event_data_id; - console.log('event_data_id:', volunteer.event_data_id); console.log('Number of participants:', numberOfParticipants); const response = await Backend.put(`/data/checkin/${event_data_id}`, { From eb1c6741df7b2088e250869e6b08c9bfcad2352c Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Thu, 2 May 2024 02:00:06 -0700 Subject: [PATCH 07/19] fix: pass in event_data_id to volunteer object --- src/components/Scanner.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Scanner.tsx b/src/components/Scanner.tsx index f5b5e12..bae2bc4 100644 --- a/src/components/Scanner.tsx +++ b/src/components/Scanner.tsx @@ -31,8 +31,11 @@ const Scanner = ({ event_id, isOpen, onClose, handleSuccess }: ScannerProps) => const checkinVolunteer = async (volunteer_id: number) => { const volunteer = await Backend.get(`/profiles/${volunteer_id}`); // get Volunteer object + handleSuccess( + { ...volunteer.data, number_in_party: 1, event_data_id: Number(event_id) }, + Number(event_id), + ); handleClose(); - handleSuccess({ ...volunteer.data, number_in_party: 1, event_data_id: Number(event_id) }, 1); }; const handleClose = () => { @@ -49,7 +52,7 @@ const Scanner = ({ event_id, isOpen, onClose, handleSuccess }: ScannerProps) => - + Volunteer: {data?.first_name} {data?.last_name} - From 7603252d7b04b4488ff76b6b5ae7d5c5fbf962f3 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Thu, 2 May 2024 02:05:13 -0700 Subject: [PATCH 08/19] fix: match backend endpoint --- src/pages/CheckinPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx index 107cfb8..3e1f32f 100644 --- a/src/pages/CheckinPage.jsx +++ b/src/pages/CheckinPage.jsx @@ -121,7 +121,7 @@ const CheckinPage = () => { const event_data_id = volunteer.event_data_id; console.log('Number of participants:', numberOfParticipants); - const response = await Backend.put(`/data/checkin/${event_data_id}`, { + const response = await Backend.put(`/data/checkin/${event_data_id}/${volunteer.id}`, { number_in_party: numberOfParticipants, }); console.log('Response from server:', response); From be85fe653711518f95d3b778a220a47f13105ead Mon Sep 17 00:00:00 2001 From: Emmy Chen Date: Thu, 2 May 2024 07:45:11 -0700 Subject: [PATCH 09/19] fix laptop view --- ...SideViewMobile.jsx => VolunteerSideViewDrawer.jsx} | 4 ++-- src/pages/VolunteerEventPage.jsx | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) rename src/components/{VolunteerSideViewMobile.jsx => VolunteerSideViewDrawer.jsx} (98%) diff --git a/src/components/VolunteerSideViewMobile.jsx b/src/components/VolunteerSideViewDrawer.jsx similarity index 98% rename from src/components/VolunteerSideViewMobile.jsx rename to src/components/VolunteerSideViewDrawer.jsx index a600b96..073a656 100644 --- a/src/components/VolunteerSideViewMobile.jsx +++ b/src/components/VolunteerSideViewDrawer.jsx @@ -9,7 +9,7 @@ import logos_google_maps from '../assets/logos_google-maps.svg'; import { IoPeopleSharp } from 'react-icons/io5'; import { IoMdLink } from 'react-icons/io'; import { RxCaretRight } from 'react-icons/rx'; -import HappeningInChip from '../components/HappeningInChip/HappeningInChip'; +import HappeningInChip from './HappeningInChip/HappeningInChip'; const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { const [eventData, setEventData] = useState([]); @@ -145,7 +145,7 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { { const { isOpen, onOpen, onClose } = useDisclosure(); const { onNavbarDrawerOpen } = useContext(NavbarContext); @@ -15,7 +15,7 @@ const VolunteerEventPage = () => { const [isMobile] = useMediaQuery("(max-width: 768px)"); const [setShowOpenDrawerButton] = useState(false); - + const openEventDrawer = (eventId) => { setCurrentEventId(eventId); // Set the current event ID, which triggers the side view to display onOpen(); @@ -100,14 +100,15 @@ const VolunteerEventPage = () => { - ) : ( + ) : null} + {isOpen ? ( - )} + ) : null} ); }; -export default VolunteerEventPage; \ No newline at end of file +export default VolunteerEventPage; From b26d63a4d8b46c7a93bc75cdcd4082e67af68cf9 Mon Sep 17 00:00:00 2001 From: Emmy Chen Date: Thu, 2 May 2024 07:59:17 -0700 Subject: [PATCH 10/19] war is over? --- src/components/VolunteerSideViewDrawer.jsx | 371 +++++++++++---------- src/pages/VolunteerEventPage.jsx | 41 +-- 2 files changed, 221 insertions(+), 191 deletions(-) diff --git a/src/components/VolunteerSideViewDrawer.jsx b/src/components/VolunteerSideViewDrawer.jsx index 073a656..e183601 100644 --- a/src/components/VolunteerSideViewDrawer.jsx +++ b/src/components/VolunteerSideViewDrawer.jsx @@ -1,4 +1,11 @@ import { Flex, Button, Image, Text, HStack, Box, VStack, IconButton } from '@chakra-ui/react'; +import { + Drawer, + DrawerOverlay, + DrawerContent, + DrawerCloseButton, + DrawerBody, +} from '@chakra-ui/react'; import PropTypes from 'prop-types'; import { useState, useEffect } from 'react'; import { Icon } from '@chakra-ui/react'; @@ -11,7 +18,7 @@ import { IoMdLink } from 'react-icons/io'; import { RxCaretRight } from 'react-icons/rx'; import HappeningInChip from './HappeningInChip/HappeningInChip'; -const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { +const VolunteerSideView = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }) => { const [eventData, setEventData] = useState([]); const [isReadMore, setIsReadMore] = useState(false); const [calendarSelected, setCalendarSelected] = useState(false); @@ -58,182 +65,212 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => { return `${month} ${day}, ${year} @ ${time}`; } return ( - - - } - onClick={() => { - onClose(); - setShowOpenDrawerButton(true); - }} - /> - - - - - - - - - - - - - - - Your event status - - - - - - Type - - - Group - - - - Registration + + + + + - - Registered - - - - Party size - 12 people - - + + } + onClick={() => { + onClose(); + setShowOpenDrawerButton(true); + }} + /> + + + + + + + + + + + - - - - {eventData.name} - - - {formatDate(eventData.date)} - - - {eventData.description} - - - + + + Your event status + + + + + + Type + + + Group + + + + Registration + + + Registered + + + + Party size + 12 people + + - - - Add this event to: - - - - - - + + + + {eventData.name} + + + {formatDate(eventData.date)} + + + {eventData.description} + + + - - + + + Add this event to: + + + + + + + + + + + + ); }; VolunteerSideView.propTypes = { eventId: PropTypes.string.isRequired, + isOpen: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, setShowOpenDrawerButton: PropTypes.func.isRequired, }; diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx index 7113d6f..7eb50a7 100644 --- a/src/pages/VolunteerEventPage.jsx +++ b/src/pages/VolunteerEventPage.jsx @@ -6,17 +6,16 @@ import { useContext, useState } from 'react'; import NavbarContext from '../utils/NavbarContext'; import VolunteerSideView from '../components/VolunteerSideView.jsx'; import { RxCaretLeft } from 'react-icons/rx'; -import { Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, useMediaQuery, DrawerBody, useDisclosure } from '@chakra-ui/react'; -import VolunteerSideViewMobile from '../components/VolunteerSideViewDrawer.jsx'; +import { useBreakpoint, useDisclosure } from '@chakra-ui/react'; +import VolunteerSideViewDrawer from '../components/VolunteerSideViewDrawer.jsx'; const VolunteerEventPage = () => { const { isOpen, onOpen, onClose } = useDisclosure(); const { onNavbarDrawerOpen } = useContext(NavbarContext); - const [currentEventId, setCurrentEventId] = useState(null); // Initial state is null to indicate no event selected - const [isMobile] = useMediaQuery("(max-width: 768px)"); + const [currentEventId, setCurrentEventId] = useState(null); // Initial state is null to indicate no event selected + const breakpoint = useBreakpoint(); const [setShowOpenDrawerButton] = useState(false); - - const openEventDrawer = (eventId) => { + const openEventDrawer = eventId => { setCurrentEventId(eventId); // Set the current event ID, which triggers the side view to display onOpen(); }; @@ -80,33 +79,27 @@ const VolunteerEventPage = () => { > - + {/* Drawer Component */} - {isMobile ? ( - - - - - - - - - + {breakpoint == 'base' ? ( + ) : null} {isOpen ? ( + eventId={currentEventId} + onClose={handleClose} + setShowOpenDrawerButton={setShowOpenDrawerButton} + /> ) : null} ); From 5f23b7c8c1aeb7e1775b5577669aeac6bb766de2 Mon Sep 17 00:00:00 2001 From: Emmy Chen Date: Sat, 4 May 2024 19:26:31 -0700 Subject: [PATCH 11/19] Committing i think this is it? --- src/components/EventsTable.jsx | 10 ++++++++-- src/components/Leaderboard/Leaderboard.jsx | 12 +++++++++++- src/components/Navbar/Navbar.jsx | 5 ++++- src/pages/DummyProfilePage.jsx | 21 +++++++++++++++++++-- src/pages/QRCodePage.jsx | 10 ++++++++-- src/pages/Volunteers.jsx | 16 +++++++++++++--- 6 files changed, 63 insertions(+), 11 deletions(-) diff --git a/src/components/EventsTable.jsx b/src/components/EventsTable.jsx index 1a4e0be..c6cc6fc 100644 --- a/src/components/EventsTable.jsx +++ b/src/components/EventsTable.jsx @@ -24,8 +24,14 @@ const RenderEventRow = ({ event }) => { - - {name} + + {name} asdfasdfasdflkajsdlfkjasldkfjalsdkfjalsdkjf diff --git a/src/components/Leaderboard/Leaderboard.jsx b/src/components/Leaderboard/Leaderboard.jsx index 0bfbccb..7845b3f 100644 --- a/src/components/Leaderboard/Leaderboard.jsx +++ b/src/components/Leaderboard/Leaderboard.jsx @@ -89,7 +89,14 @@ const LeaderboardCard = ({ event_id }) => { 2 - + {LeaderboardArray[1] && LeaderboardArray[1].volunteer_first_name}{' '} {LeaderboardArray[1] && LeaderboardArray[1].volunteer_last_name} @@ -118,6 +125,9 @@ const LeaderboardCard = ({ event_id }) => { fontWeight="semibold" fontSize={{ base: '16px', xl: '16px' }} textAlign="center" + whiteSpace="nowrap" + maxWidth={{ base: '100px', xl: '150px' }} + overflow="hidden" > {LeaderboardArray[2] && LeaderboardArray[2].volunteer_first_name}{' '} {LeaderboardArray[2] && LeaderboardArray[2].volunteer_last_name} diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 0d48d4b..e1be779 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -309,17 +309,20 @@ const Navbar = () => { > {/* User name */} {user?.first_name} {user?.last_name} + supercalifragilisticexpialidocious { padding={'2%'} > - + {`${user.first_name} ${user.last_name}`}
@@ -260,7 +269,15 @@ export const DummyProfilePage = () => {
- + {`${user.first_name} ${user.last_name}`}
diff --git a/src/pages/QRCodePage.jsx b/src/pages/QRCodePage.jsx index a8546c0..20c3a8a 100644 --- a/src/pages/QRCodePage.jsx +++ b/src/pages/QRCodePage.jsx @@ -46,9 +46,15 @@ function QRCodePage() { /> - + - {volunteerFirstName} {volunteerLastName} + {volunteerFirstName} {volunteerLastName} asdkfjhajksdf diff --git a/src/pages/Volunteers.jsx b/src/pages/Volunteers.jsx index bd48425..2edb42a 100644 --- a/src/pages/Volunteers.jsx +++ b/src/pages/Volunteers.jsx @@ -174,7 +174,7 @@ const Volunteers = () => { overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" - maxWidth="10vw" // Adjust the width based on your design + maxWidth={{ base: '100px', md: '600px', xl: '100px' }} > {topThree[0] && topThree[0].volunteer_first_name}{' '} {topThree[0] && topThree[0].volunteer_last_name}{' '} @@ -187,7 +187,12 @@ const Volunteers = () => { 2 - + {topThree[1] && topThree[1].volunteer_first_name}{' '} {topThree[1] && topThree[1].volunteer_last_name}{' '} @@ -197,7 +202,12 @@ const Volunteers = () => { 3{' '} {' '} - + {topThree[2] && topThree[2].volunteer_first_name}{' '} {topThree[2] && topThree[2].volunteer_last_name}{' '} From c1bb614862e5b1ba5845f374adece04148c3ff1a Mon Sep 17 00:00:00 2001 From: Gayathri Yedavilli Date: Sun, 5 May 2024 12:15:44 -0700 Subject: [PATCH 12/19] implemented csv route for admin volunteers page --- src/pages/Volunteers.jsx | 35 +++++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/src/pages/Volunteers.jsx b/src/pages/Volunteers.jsx index bd48425..5b2475e 100644 --- a/src/pages/Volunteers.jsx +++ b/src/pages/Volunteers.jsx @@ -19,6 +19,7 @@ import Fuse from 'fuse.js'; import { TrophyIcon } from '../components/Icons/TrophyIcon'; import NavbarContext from '../utils/NavbarContext'; import { MdPeopleAlt } from 'react-icons/md'; +import { CSVLink } from 'react-csv'; const Volunteers = () => { const [registered, setRegistered] = useState(''); @@ -27,8 +28,19 @@ const Volunteers = () => { const [volunteers, setVolunteers] = useState([]); const [displayedVolunteers, setDisplayedVolunteers] = useState([]); const [input, setInput] = useState(''); + const [volunteerData, setVolunteerData] = useState([]); const { onNavbarDrawerOpen } = useContext(NavbarContext); + const header = [ + { key: 'name', label: 'NAME' }, + { key: 'email', label: 'EMAIL' }, + { key: 'phone_number', label: 'PHONE_NUMBER' }, + { key: 'organization', label: 'ORGANIZATION' }, + { key: 'about_me', label: 'ABOUT_ME' }, + { key: 'total_trash', label: 'TOTAL_TRASH' }, + { key: 'events_attended', label: 'EVENTS_ATTENDED' }, + ]; + const setData = async () => { try { const res = await Backend.get('/stats/registered'); @@ -69,6 +81,19 @@ const Volunteers = () => { } }, [input, volunteers]); + useEffect(() => { + const getVolunteerData = async () => { + try { + const volunteerData = await Backend.get(`/stats/export/volunteers`); + setVolunteerData(volunteerData.data); + } catch (err) { + console.log(err.message); + } + }; + + getVolunteerData(); + }, []); + return ( <> {/* Registered + Checked-In */} @@ -215,13 +240,19 @@ const Volunteers = () => { style={{ whiteSpace: 'normal', wordWrap: 'break-word', + color: 'white', + my: "3" }} height={'fit-content'} > {' '} - + Export All Volunteer Data - + From c9ee9ac89f6e78e4af7182c10c3682fcb5da8b19 Mon Sep 17 00:00:00 2001 From: Katy Huang Date: Sun, 5 May 2024 14:21:14 -0700 Subject: [PATCH 13/19] chore: remove all font --- src/components/Auth/AuthPage.jsx | 2 +- .../ProfilePageModals.jsx | 30 ------------------- .../EventRegistration/LoadingModal.jsx | 3 +- .../EventRegistration/RegistrationModal.jsx | 3 +- .../EventRegistration/SignWaiverModal.jsx | 11 ++----- .../SuccessfulRegistrationModal.jsx | 3 +- src/components/Events/DataCard.jsx | 3 +- src/components/Events/DeleteEventsModal.jsx | 1 - src/components/Events/EventCard.jsx | 3 -- src/components/Events/EventFilteredGrid.jsx | 1 - src/components/Events/FeaturedDashboard.jsx | 1 - .../Events/VolunteerImpactSummary.jsx | 6 ++-- src/pages/AdminPage.jsx | 2 +- src/pages/ForgotPasswordV2.jsx | 3 +- src/pages/LoginV2.jsx | 6 ---- src/pages/SignupV2.jsx | 5 ---- src/pages/VolunteerHomePage.jsx | 2 -- 17 files changed, 12 insertions(+), 73 deletions(-) diff --git a/src/components/Auth/AuthPage.jsx b/src/components/Auth/AuthPage.jsx index b2204cb..3a46e51 100644 --- a/src/components/Auth/AuthPage.jsx +++ b/src/components/Auth/AuthPage.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; const AuthPage = ({ children }) => { return ( - + { // Push over by the size of the button width={'100%'} fontWeight={'800'} - fontFamily={'Avenir'} letterSpacing={'0em'} > Edit First Name @@ -123,7 +122,6 @@ const EditFirstNameModal = ({ isOpen, onClose, user }) => { fontWeight={'500'} fontSize={'16px'} marginLeft={'13px'} - fontFamily={'Avenir'} lineHeight={'15px'} letterSpacing={'0em'} justify={'left'} @@ -132,7 +130,6 @@ const EditFirstNameModal = ({ isOpen, onClose, user }) => { First Name { color={'#0075FF'} gap={'6px'} padding={'12 11.321188926696777 12 11.321188926696777'} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'red', @@ -179,7 +175,6 @@ const EditFirstNameModal = ({ isOpen, onClose, user }) => { color={'#FFFFFF'} onClick={handleSubmit} isDisabled={isSubmittable} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'green', @@ -267,7 +262,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => { // Push over by the size of the button width={'100%'} fontWeight={'800'} - fontFamily={'Avenir'} letterSpacing={'0em'} > Edit Last Name @@ -298,7 +292,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => { fontWeight={'500'} fontSize={'16px'} marginLeft={'13px'} - fontFamily={'Avenir'} lineHeight={'15px'} letterSpacing={'0em'} justify={'left'} @@ -307,7 +300,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => { Last Name { color={'#0075FF'} gap={'6px'} padding={'12 11.321188926696777 12 11.321188926696777'} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'red', @@ -354,7 +345,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => { color={'#FFFFFF'} onClick={handleSubmit} isDisabled={isSubmittable} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'green', @@ -442,7 +432,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => { // Push over by the size of the button width={'100%'} fontWeight={'800'} - fontFamily={'Avenir'} letterSpacing={'0em'} > Edit Email @@ -473,7 +462,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => { fontWeight={'500'} fontSize={'16px'} marginLeft={'13px'} - fontFamily={'Avenir'} lineHeight={'15px'} letterSpacing={'0em'} justify={'left'} @@ -482,7 +470,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => { Email { color={'#0075FF'} gap={'6px'} padding={'12 11.321188926696777 12 11.321188926696777'} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'red', @@ -529,7 +515,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => { color={'#FFFFFF'} onClick={handleSubmit} isDisabled={isSubmittable} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'green', @@ -617,7 +602,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => { // Push over by the size of the button width={'100%'} fontWeight={'800'} - fontFamily={'Avenir'} letterSpacing={'0em'} > Edit Organization @@ -648,7 +632,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => { fontWeight={'500'} fontSize={'16px'} marginLeft={'13px'} - fontFamily={'Avenir'} lineHeight={'15px'} letterSpacing={'0em'} justify={'left'} @@ -657,7 +640,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => { Organization { color={'#0075FF'} gap={'6px'} padding={'12 11.321188926696777 12 11.321188926696777'} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'red', @@ -704,7 +685,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => { color={'#FFFFFF'} onClick={handleSubmit} isDisabled={isSubmittable} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'green', @@ -792,7 +772,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => { // Push over by the size of the button width={'100%'} fontWeight={'800'} - fontFamily={'Avenir'} letterSpacing={'0em'} > Edit Phone Number @@ -823,7 +802,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => { fontWeight={'500'} fontSize={'16px'} marginLeft={'13px'} - fontFamily={'Avenir'} lineHeight={'15px'} letterSpacing={'0em'} justify={'left'} @@ -832,7 +810,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => { Phone Number { color={'#0075FF'} gap={'6px'} padding={'12 11.321188926696777 12 11.321188926696777'} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'red', @@ -879,7 +855,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => { color={'#FFFFFF'} onClick={handleSubmit} isDisabled={isSubmittable} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'green', @@ -967,7 +942,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => { // Push over by the size of the button width={'100%'} fontWeight={'800'} - fontFamily={'Avenir'} letterSpacing={'0em'} > Edit About Me Section @@ -998,7 +972,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => { fontWeight={'500'} fontSize={'16px'} marginLeft={'13px'} - fontFamily={'Avenir'} lineHeight={'15px'} letterSpacing={'0em'} justify={'left'} @@ -1007,7 +980,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => { About Me { color={'#0075FF'} gap={'6px'} padding={'12 11.321188926696777 12 11.321188926696777'} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'red', @@ -1054,7 +1025,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => { color={'#FFFFFF'} onClick={handleSubmit} isDisabled={isSubmittable} - fontFamily={'Avenir'} fontSize={'14px'} _hover={{ bg: 'green', diff --git a/src/components/EventRegistration/LoadingModal.jsx b/src/components/EventRegistration/LoadingModal.jsx index 1e48221..b9c4dd1 100644 --- a/src/components/EventRegistration/LoadingModal.jsx +++ b/src/components/EventRegistration/LoadingModal.jsx @@ -8,14 +8,13 @@ const LoadingModal = ({ ...props }) => { - + {`Registering...`} {`Hang tight, and you'll registered soon!`} diff --git a/src/components/EventRegistration/RegistrationModal.jsx b/src/components/EventRegistration/RegistrationModal.jsx index c23626a..8165aae 100644 --- a/src/components/EventRegistration/RegistrationModal.jsx +++ b/src/components/EventRegistration/RegistrationModal.jsx @@ -30,13 +30,12 @@ const RegistrationModal = ({ color={'#717171'} fontSize={'20px'} align={'center'} - fontFamily={'Avenir'} fontWeight={800} mb={'-6px'} > Volunteer registration - + {title} diff --git a/src/components/EventRegistration/SignWaiverModal.jsx b/src/components/EventRegistration/SignWaiverModal.jsx index 81d3e52..cb8d6e1 100644 --- a/src/components/EventRegistration/SignWaiverModal.jsx +++ b/src/components/EventRegistration/SignWaiverModal.jsx @@ -19,21 +19,14 @@ const SignWaiverModal = ({ registrationFlowState, ...props }) => { continueText={'Register'} {...props} > - {/* color: var(--Primary-Text, #3B3B3B); -font-family: Avenir; -font-size: 18px; -font-style: normal; -font-weight: 500; -line-height: normal; */} - + Read terms and conditions {/* Terms box */} - + I agree to the terms and conditions diff --git a/src/components/EventRegistration/SuccessfulRegistrationModal.jsx b/src/components/EventRegistration/SuccessfulRegistrationModal.jsx index bf633be..0acb330 100644 --- a/src/components/EventRegistration/SuccessfulRegistrationModal.jsx +++ b/src/components/EventRegistration/SuccessfulRegistrationModal.jsx @@ -39,14 +39,13 @@ const SuccessfulRegistrationModal = ({ ...props }) => { - + {`You're all set!`} {`We're excited to see you at the event!`} diff --git a/src/components/Events/DataCard.jsx b/src/components/Events/DataCard.jsx index 7fa4e56..7bcbc8c 100644 --- a/src/components/Events/DataCard.jsx +++ b/src/components/Events/DataCard.jsx @@ -4,7 +4,7 @@ const DataCard = ({ icon, text, amount }) => { return ( {icon} - + {text} { fontSize={56} fontWeight={800} color={'rgba(0, 0, 0, 0.75)'} - fontFamily={'Avenir'} > {amount} diff --git a/src/components/Events/DeleteEventsModal.jsx b/src/components/Events/DeleteEventsModal.jsx index 1fac607..a039f78 100644 --- a/src/components/Events/DeleteEventsModal.jsx +++ b/src/components/Events/DeleteEventsModal.jsx @@ -27,7 +27,6 @@ const DeleteEventsModal = ({ isOpen, onClose, events, confirmDelete }) => { fontWeight="800" fontSize="32px" lineHeight="33.71px" - fontFamily="Avenir, sans-serif" style={{ display: 'block' }} // Ensure text alignment applies correctly > Are you sure you want to delete: {formattedEventNames} {eventLabel}? diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx index 6c20a04..ca85444 100644 --- a/src/components/Events/EventCard.jsx +++ b/src/components/Events/EventCard.jsx @@ -139,7 +139,6 @@ const EventCard = ({ fontWeight="800" fontSize="24px" lineHeight="30px" - fontFamily="Avenir" mt={2} overflowWrap={'break-word'} > @@ -150,7 +149,6 @@ const EventCard = ({ fontWeight="800" fontSize={{ base: '20px', md: '24px' }} lineHeight="30px" - fontFamily="Avenir" mt={2} overflowWrap={'break-word'} > @@ -158,7 +156,6 @@ const EventCard = ({ )} All Upcoming Events diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx index 4da069f..5c6d307 100644 --- a/src/components/Events/FeaturedDashboard.jsx +++ b/src/components/Events/FeaturedDashboard.jsx @@ -49,7 +49,6 @@ const FeaturedDashboard = ({ onOpen, showOpenDrawerButton }) => { lineHeight="normal" fontStyle="normal" fontSize={{ base: '18px', xl: '32px' }} - fontFamily={'Avenir'} color={'rgba(0, 0, 0, 0.75)'} > Featured Events diff --git a/src/components/Events/VolunteerImpactSummary.jsx b/src/components/Events/VolunteerImpactSummary.jsx index 930f87f..6c28f6b 100644 --- a/src/components/Events/VolunteerImpactSummary.jsx +++ b/src/components/Events/VolunteerImpactSummary.jsx @@ -87,7 +87,7 @@ const VolunteerImpactSummary = () => { index={1} amount={events} text={ - + Total Events Participated } @@ -103,7 +103,7 @@ const VolunteerImpactSummary = () => { index={2} amount={total + ' lbs'} text={ - + Total Trash Weight } @@ -119,7 +119,7 @@ const VolunteerImpactSummary = () => { index={3} amount={largestItem + ' lbs'} text={ - + Largest Trash Item Collected } diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx index 037f331..be2149a 100644 --- a/src/pages/AdminPage.jsx +++ b/src/pages/AdminPage.jsx @@ -96,7 +96,7 @@ export default function AdminPage() { return ( - + Administrators diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx index 03f8698..a894bf7 100644 --- a/src/pages/CheckinPage.jsx +++ b/src/pages/CheckinPage.jsx @@ -49,6 +49,7 @@ const CheckinPage = () => { const [isCheckinModalOpen, setIsCheckinModalOpen] = useState(false); const [isScannerModalOpen, setIsScannerModalOpen] = useState(false); const [selectedVolunteer, setSelectedVolunteer] = useState(null); + const [usingScanner, setUsingScanner] = useState(false); useEffect(() => { // 0 is all, 1 is checked-in, 2 is not checked-in, 3 are guests @@ -107,10 +108,11 @@ const CheckinPage = () => { } }, [input, joinedData, eventId]); - const handleScannerSuccess = async (volunteer, eventId) => { + const handleScannerSuccess = async (volunteer) => { setSelectedVolunteer(volunteer); setIsCheckinModalOpen(true); - await Backend.patch(`/data/checkin/${eventId}/${volunteer.id}`); // update backend with user + setUsingScanner(true); + // await Backend.patch(`/data/checkin/${eventId}/${volunteer.id}`); // update backend with user }; /* @@ -120,12 +122,23 @@ const CheckinPage = () => { try { const event_data_id = volunteer.event_data_id; console.log(event_data_id, numberOfParticipants); + console.log(volunteer); + + let response; + + if (!usingScanner) { + response = await Backend.put(`/data/checkin/${volunteer.event_data_id}`, { + number_in_party: numberOfParticipants, + }); + } else { + response = await Backend.patch(`/data/checkin/${volunteer.event_data_id}/${volunteer.id}`, { + number_in_party: numberOfParticipants, + }); + } - const response = await Backend.put(`/data/checkin/${event_data_id}/${volunteer.id}`, { - number_in_party: numberOfParticipants, - }); console.log('Response from server:', response); + setUsingScanner(false); await setData(); // Refresh data } catch (err) { console.error('Error in changeIsCheckedIn:', err);