From 541603af3db0fdc6ff0c65dde067666416c85414 Mon Sep 17 00:00:00 2001 From: Dang Nguyen Nguyen Date: Sun, 31 Mar 2024 23:51:17 -0700 Subject: [PATCH 1/3] Added Vertical View for all pages using hamburger icon and Navbar as Drawer. Edited status and buttons in checkin page and input page to match design. Added Navbar context for smooth navigation using navbar. --- src/App.jsx | 25 ++++- src/Assets/status_icon/checked_in.svg | 3 + src/Assets/status_icon/registered.svg | 4 + .../Checkin/VolunteerEventsTable.jsx | 91 +++++++--------- src/components/Events/ImpactSummary.jsx | 103 ++++++++---------- src/components/Navbar/Navbar.jsx | 71 +++++++----- src/components/Navbar/NavbarDrawer.jsx | 27 +++++ src/pages/CheckinPage.jsx | 95 ++++++++-------- src/pages/EventPage.jsx | 26 ++++- src/pages/HomePage.jsx | 47 ++++---- src/pages/InputDataPage.jsx | 36 +++--- src/pages/Volunteers.jsx | 16 ++- src/utils/NavbarContext.jsx | 9 ++ 13 files changed, 323 insertions(+), 230 deletions(-) create mode 100644 src/Assets/status_icon/checked_in.svg create mode 100644 src/Assets/status_icon/registered.svg create mode 100644 src/components/Navbar/NavbarDrawer.jsx create mode 100644 src/utils/NavbarContext.jsx diff --git a/src/App.jsx b/src/App.jsx index 0cf9602..51750fe 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -24,17 +24,34 @@ import DummyVolunteerQR from './pages/DummyVolunteerQR'; import DummyAdminQR from './pages/DummyAdminQR'; import Volunteers from './pages/Volunteers'; import Navbar from './components/Navbar/Navbar'; +import NavbarDrawer from './components/Navbar/NavbarDrawer'; import AdminPage from './pages/AdminPage'; import { RoleProvider } from './utils/RoleContext'; import { UserProvider } from './utils/UserContext'; import ProtectedRoute from './utils/ProtectedRoute'; +import NavbarContext from './utils/NavbarContext'; + +import { useDisclosure, useBreakpointValue, Box } from '@chakra-ui/react'; const Layout = () => { + const isLargerThan1200px = useBreakpointValue({ base: false, xl: true }); + const { + isOpen: isNavbarDrawerOpen, + onOpen: onNavbarDrawerOpen, + onClose: onNavbarDrawerClose, + } = useDisclosure(); + return ( - <> - - - + + {isLargerThan1200px ? ( + + ) : ( + + )} + + + + ); }; diff --git a/src/Assets/status_icon/checked_in.svg b/src/Assets/status_icon/checked_in.svg new file mode 100644 index 0000000..2a9b612 --- /dev/null +++ b/src/Assets/status_icon/checked_in.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Assets/status_icon/registered.svg b/src/Assets/status_icon/registered.svg new file mode 100644 index 0000000..11e1657 --- /dev/null +++ b/src/Assets/status_icon/registered.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx index e16353a..361993a 100644 --- a/src/components/Checkin/VolunteerEventsTable.jsx +++ b/src/components/Checkin/VolunteerEventsTable.jsx @@ -1,25 +1,26 @@ /* eslint-disable react/prop-types */ -import 'react'; -import DataEntryModal from '../DataEntryModal/DataEntryModal'; import { - Text, Box, - Flex, - Spacer, Center, + Flex, Image, Table, - Thead, - Tbody, - Tr, - Th, - Td, TableContainer, Tag, + Tbody, + Td, + Text, + Th, + Thead, + Tr, useDisclosure, } from '@chakra-ui/react'; +import 'react'; import { FaUser } from 'react-icons/fa'; -import { MdInput, MdCheck } from 'react-icons/md'; +import { MdCheck, MdInput } from 'react-icons/md'; +import checked_in from '../../Assets/status_icon/checked_in.svg'; +import registered from '../../Assets/status_icon/registered.svg'; +import DataEntryModal from '../DataEntryModal/DataEntryModal'; const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) => { const { isOpen, onOpen, onClose } = useDisclosure(); @@ -43,16 +44,12 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) => } = volunteer; let status = 'Registered'; - let statusColor = 'white'; if (role === 'guest') { status = 'Guest'; - statusColor = '#FF84B0'; } else if (is_checked_in === false) { status = 'Registered'; - statusColor = '#9188F2'; } else if (is_checked_in === true) { status = 'Checked-in'; - statusColor = '#9BCB6C'; } // const stringvolunteerId = volunteer_id.toString(); @@ -82,41 +79,38 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) => - - - - {status} - + + + {status} {number_in_party} - + {is_checked_in ? ( <> {!isCheckinPage ? ( <> - - - - Input Data + + Input Data /> ) : ( - + Checked-in )} @@ -144,19 +138,17 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) => changeIsCheckedIn(volunteer)} cursor={'pointer'} - textColor={'gray'} borderRadius={10} - padding={2} - color={'#7B7C7D'} - bg={'#E2E4E5'} + p={2} + color={'#0075FF'} + bg={'white'} + border={'2px solid #0075FF'} + gap={1} > - - - - Check-In + + Check-In )} - @@ -182,7 +174,7 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage }) > - + @@ -190,7 +182,7 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage }) - + Type @@ -211,6 +203,7 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage }) + diff --git a/src/components/Events/ImpactSummary.jsx b/src/components/Events/ImpactSummary.jsx index 1fa1e31..b8d66b4 100644 --- a/src/components/Events/ImpactSummary.jsx +++ b/src/components/Events/ImpactSummary.jsx @@ -1,9 +1,9 @@ -import { Box, Heading, Button, VStack, Flex } from '@chakra-ui/react'; -import { useState, useEffect } from 'react'; +import { Box, Button, Flex, VStack } from '@chakra-ui/react'; +import { useEffect, useState } from 'react'; import { AiOutlineExport } from 'react-icons/ai'; import { FaTrashCan } from 'react-icons/fa6'; -import { MdPeopleAlt } from 'react-icons/md'; import { IoDocumentText } from 'react-icons/io5'; +import { MdPeopleAlt } from 'react-icons/md'; import Backend from '../../utils/utils'; import DataCard from './DataCard'; @@ -31,58 +31,51 @@ const ImpactSummary = () => { }; return ( - - Impact Summary - - - - - } - /> - - - - } - /> - - - - } - /> - - - - - - + + + + + } + /> + + + + } + /> + + + + } + /> + + + + + ); }; diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 70ea137..4b78307 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -1,10 +1,11 @@ -import { Box, Text } from '@chakra-ui/react'; +import { Box, Text, Flex } from '@chakra-ui/react'; import adminLogo from '../../Assets/navbar/stand_up_to_trash_logo.png'; import { useNavigate } from 'react-router-dom'; import { useContext, useEffect } from 'react'; import UserContext from '../../utils/UserContext'; import RoleContext from '../../utils/RoleContext'; -// import { useLocation } from 'react-router-dom'; +import NavbarContext from '../../utils/NavbarContext'; + import { ArchivedEventsIconBlue, ArchivedEventsIconGrey, @@ -18,6 +19,8 @@ import { SettingsIconGrey, LogOutIcon, } from '../Icons/NavbarIcons'; +import { CloseIcon } from '@chakra-ui/icons'; + import { Tag } from '@chakra-ui/react'; import { logout } from '../../utils/firebaseAuthUtils'; @@ -62,17 +65,14 @@ const NavbarButton = ({ buttonText, path, navigate, UnfocusedIcon, FocusedIcon } }; const Navbar = () => { - // const location = useLocation(); const { user, updateUser } = useContext(UserContext); const { role } = useContext(RoleContext); + const { onNavbarDrawerClose } = useContext(NavbarContext); + const navigate = useNavigate(); useEffect(() => { updateUser(); - // console.log(`Here is the user info:`); - // console.log(user); - // console.log(`The user's role is: ${role}`); - // console.log('Current route:', location.pathname); }, [updateUser]); // Change the paths for each button since these might change @@ -97,7 +97,7 @@ const Navbar = () => { return ( <> {/* Box for entire navbar */} - + {/* Box for entire nabar with coloring */} { {/* Box containing everything above "support" */} {/* Box containing the logo and role title at the top */} - - - + - {role?.charAt(0).toUpperCase() + role?.slice(1)} - - + + + {role?.charAt(0).toUpperCase() + role?.slice(1)} + + + { + e.preventDefault(); + onNavbarDrawerClose(); + }} + display={{ base: 'flex', xl: 'none' }} + /> + {/* Add break between role and logo at the top and the nav buttons */}


diff --git a/src/components/Navbar/NavbarDrawer.jsx b/src/components/Navbar/NavbarDrawer.jsx new file mode 100644 index 0000000..6acd851 --- /dev/null +++ b/src/components/Navbar/NavbarDrawer.jsx @@ -0,0 +1,27 @@ +import Navbar from './Navbar'; // Make sure the path to your Navbar component is correct. + +import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerOverlay } from '@chakra-ui/react'; + +import PropTypes from 'prop-types'; + +const NavbarDrawer = ({ isOpen, onClose }) => { + return ( + + + + Menu + + + + + + + ); +}; + +NavbarDrawer.propTypes = { + isOpen: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, +}; + +export default NavbarDrawer; diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx index 8327569..42b39d2 100644 --- a/src/pages/CheckinPage.jsx +++ b/src/pages/CheckinPage.jsx @@ -1,5 +1,5 @@ /* eslint-disable react/prop-types */ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useContext } from 'react'; import { fetchJoinedEventsById } from '../utils/fuseUtils'; import { getEventById } from '../utils/eventsUtils'; import Backend from '../utils/utils'; @@ -8,8 +8,9 @@ import VolunteerEventsTable from '../components/Checkin/VolunteerEventsTable'; import CheckinStatsDashboard from '../components/Checkin/CheckinStatsDashboard'; import VolunteerTabNavigation from '../components/Checkin/VolunteerTabNavigation'; import CheckinInputPageToggle from '../components/Checkin/CheckinInputPageToggle'; -import { ArrowBackIcon } from '@chakra-ui/icons'; +import { ArrowBackIcon, HamburgerIcon } from '@chakra-ui/icons'; import CheckinModal from '../components/Checkin/CheckinModal'; +import NavbarContext from '../utils/NavbarContext'; import { useParams } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; @@ -40,6 +41,7 @@ const CheckinPage = () => { const { isOpen, onOpen, onClose } = useDisclosure(); const [displayedVolunteers, setDisplayedVolunteers] = useState([]); const [tabIndex, setTabIndex] = useState(0); + const { onNavbarDrawerOpen } = useContext(NavbarContext); const navigate = useNavigate(); const [isCheckinModalOpen, setIsCheckinModalOpen] = useState(false); @@ -60,7 +62,6 @@ const CheckinPage = () => { setDisplayedVolunteers(volunteerResults.filter(v => v.role === 'guest')); }, [tabIndex, volunteerResults]); - const setData = async () => { try { const data = await fetchJoinedEventsById(eventId); // joined data for table rendering @@ -106,35 +107,32 @@ const CheckinPage = () => { /* updates check in status for a volunteer on the backend, dynamically rerenders it on the frontend */ - const changeIsCheckedIn = async (volunteer, numberOfParticipants) => { - try { - const event_data_id = volunteer.event_data_new_id; - console.log('Number of participants:', numberOfParticipants); - - const response = await Backend.put(`/data/checkin/${event_data_id}`, { - number_in_party: numberOfParticipants - }); - console.log('Response from server:', response); - - await setData(); // Refresh data - } catch (err) { - console.error('Error in changeIsCheckedIn:', err); - } - }; - - - - const handleCheckinButtonClick = (volunteer) => { + const changeIsCheckedIn = async (volunteer, numberOfParticipants) => { + try { + const event_data_id = volunteer.event_data_new_id; + console.log('Number of participants:', numberOfParticipants); + + const response = await Backend.put(`/data/checkin/${event_data_id}`, { + number_in_party: numberOfParticipants, + }); + console.log('Response from server:', response); + + await setData(); // Refresh data + } catch (err) { + console.error('Error in changeIsCheckedIn:', err); + } + }; + + const handleCheckinButtonClick = volunteer => { console.log(volunteer); setSelectedVolunteer(volunteer); // `volunteer` is the volunteer object from the list setIsCheckinModalOpen(true); -}; + }; - const closeCheckinModal = () => { setIsCheckinModalOpen(false); }; - + //gets the number of ppl that registered and checked in const getRegistered = async event_id => { try { @@ -164,23 +162,31 @@ const CheckinPage = () => { return ( - + + + + + @@ -212,15 +218,17 @@ const CheckinPage = () => { @@ -245,7 +253,6 @@ const CheckinPage = () => { volunteer={selectedVolunteer} onCheckInConfirm={changeIsCheckedIn} /> - ); }; diff --git a/src/pages/EventPage.jsx b/src/pages/EventPage.jsx index 371d286..b8009e3 100644 --- a/src/pages/EventPage.jsx +++ b/src/pages/EventPage.jsx @@ -9,8 +9,10 @@ import { Select, Flex, } from '@chakra-ui/react'; -import { useEffect, useState } from 'react'; -import { SearchIcon, CalendarIcon } from '@chakra-ui/icons'; +import { useEffect, useState, useContext } from 'react'; +import { SearchIcon, CalendarIcon, HamburgerIcon } from '@chakra-ui/icons'; + +import NavbarContext from '../utils/NavbarContext'; import EventCard from '../components/Events/EventCard'; import AddEventsModal from '../components/AddEventsModal/AddEventsModal'; @@ -18,6 +20,7 @@ import Backend from '../utils/utils'; import Fuse from 'fuse.js'; const Events = () => { + const { onNavbarDrawerOpen } = useContext(NavbarContext); const [events, setEvents] = useState([]); const [displayEvents, setDisplayEvents] = useState([]); @@ -145,7 +148,14 @@ const Events = () => { }, [name, location, date, fuse]); return ( - + { borderRadius={'xl'} flexDir={'column'} > - All Upcoming Events + + + All Upcoming Events + diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 4d83376..07572d5 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -13,25 +13,21 @@ import { Heading, Flex, } from '@chakra-ui/react'; -import { useEffect, useState } from 'react'; -import { SearchIcon } from '@chakra-ui/icons'; +import { useEffect, useState, useContext } from 'react'; +import { SearchIcon, HamburgerIcon } from '@chakra-ui/icons'; import PropTypes from 'prop-types'; -// import AllData from '../components/Events/AllData'; import ArchiveEventsModal from '../components/Events/ArchiveEventsModal'; import EventCard from '../components/Events/EventCard'; -// import DataCard from '../components/Events/DataCard'; -// import AddEventsModal from '../components/AddEventsModal/AddEventsModal'; import ImpactSummary from '../components/Events/ImpactSummary'; import Backend from '../utils/utils'; import Fuse from 'fuse.js'; +import NavbarContext from '../utils/NavbarContext'; const Home = () => { const toast = useToast(); const [events, setEvents] = useState([]); const [displayEvents, setDisplayEvents] = useState([]); - // const [eventId, setEventId] = useState(''); - // const [showEvents, setShowEvents] = useState(true); const [showSelect, setShowSelect] = useState(false); const [isSelectButton, setIsSelectButton] = useState(true); const [isCreateButton, setIsCreateButton] = useState(true); // toggle between create event button and deselect button @@ -41,6 +37,8 @@ const Home = () => { const [location, setLocation] = useState(''); const [fuse, setFuse] = useState(); + const { onNavbarDrawerOpen } = useContext(NavbarContext); + const getEvents = async () => { try { const eventsData = await Backend.get('/events'); @@ -52,22 +50,12 @@ const Home = () => { } }; - // const getEventId = async () => { - // try { - // const eventIdData = await Backend.get(`/events/${eventId}`); - // console.log(eventIdData); - // setSelectEvent(eventIdData.data); - // console.log(events); - // } catch (err) { - // console.log(`Error getting event ${eventId}: `, err.message); - // } - // }; - const { isOpen: isArchiveEventModalOpen, onOpen: onArchiveEventModalOpen, onClose: onArchiveEventModalClose, } = useDisclosure(); + const confirmArchive = async () => { for (const id of selectedEvents) { try { @@ -92,13 +80,6 @@ const Home = () => { else onArchiveEventModalOpen(); }; - // const showEvent = () => { - // setShowEvents(true); - // if (eventId) { - // getEventId(); - // } - // }; - const handleCheckboxChange = id => { const newCheckedItems = [...selectedEvents]; const index = newCheckedItems.indexOf(id); @@ -222,10 +203,22 @@ const Home = () => { alignItems={'center'} bg="#E6EAEF" minH="100vh" - ml="15rem" + ml={{ base: '0', xl: '15rem' }} py={10} > - + + + + Impact Summary + + + + diff --git a/src/pages/InputDataPage.jsx b/src/pages/InputDataPage.jsx index b3f10d9..9169c44 100644 --- a/src/pages/InputDataPage.jsx +++ b/src/pages/InputDataPage.jsx @@ -1,5 +1,5 @@ /* eslint-disable react/prop-types */ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useContext } from 'react'; import { fetchJoinedEventsById } from '../utils/fuseUtils'; import { getEventById } from '../utils/eventsUtils'; import Backend from '../utils/utils'; @@ -8,6 +8,8 @@ import VolunteerEventsTable from '../components/Checkin/VolunteerEventsTable'; import InputDataDashboard from '../components/InputData/InputDataDashboard'; import CheckinInputPageToggle from '../components/Checkin/CheckinInputPageToggle'; import { useNavigate } from 'react-router-dom'; +import NavbarContext from '../utils/NavbarContext'; +import { HamburgerIcon } from '@chakra-ui/icons'; import { useParams } from 'react-router-dom'; import { @@ -34,6 +36,7 @@ const InputDataPage = () => { const [trashCollected, setTrashCollected] = useState(''); const { eventId } = useParams(); const [displayedVolunteers, setDisplayedVolunteers] = useState([]); + const { onNavbarDrawerOpen } = useContext(NavbarContext); const navigate = useNavigate(); console.log(volunteerResults); @@ -141,23 +144,30 @@ const InputDataPage = () => { return ( - + + + + { const [registered, setRegistered] = useState(''); @@ -25,6 +26,7 @@ const Volunteers = () => { const [volunteers, setVolunteers] = useState([]); const [displayedVolunteers, setDisplayedVolunteers] = useState([]); const [input, setInput] = useState(''); + const { onNavbarDrawerOpen } = useContext(NavbarContext); const setData = async () => { try { @@ -73,9 +75,15 @@ const Volunteers = () => { return ( <> {/* Registered + Checked-In */} - + - + + {}, + onNavbarDrawerClose: () => {}, +}); + +export default DataContext; From 27e94d12a90ee96236222c13abd3da7fbada4ecf Mon Sep 17 00:00:00 2001 From: Dang Nguyen Nguyen <93059380+NwinNwin@users.noreply.github.com> Date: Mon, 1 Apr 2024 18:40:11 -0700 Subject: [PATCH 2/3] Added refresh page on submit --- .../AddEventsModal/AddEventsModal.jsx | 2 ++ src/components/Checkin/CheckinModal.jsx | 30 ++++++++----------- .../Checkin/CheckinStatsDashboard.jsx | 4 +-- .../DataEntryModal/DataEntryModal.jsx | 2 ++ src/components/Events/EventCard.jsx | 4 +-- 5 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/components/AddEventsModal/AddEventsModal.jsx b/src/components/AddEventsModal/AddEventsModal.jsx index 49c65b2..f9842b5 100644 --- a/src/components/AddEventsModal/AddEventsModal.jsx +++ b/src/components/AddEventsModal/AddEventsModal.jsx @@ -66,6 +66,7 @@ const AddEventsModal = () => { isClosable: true, }); onClose(); + window.location.reload(); } catch (err) { console.log(err); toast({ @@ -282,6 +283,7 @@ const AddEventsModal = () => { borderRadius={'5px'} marginLeft={'10px'} paddingX={5} + color={'white'} onClick={handleSubmit} isDisabled={isSubmittable} > diff --git a/src/components/Checkin/CheckinModal.jsx b/src/components/Checkin/CheckinModal.jsx index 3fc8e5b..1c80526 100644 --- a/src/components/Checkin/CheckinModal.jsx +++ b/src/components/Checkin/CheckinModal.jsx @@ -1,23 +1,23 @@ -import { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; import { - Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalCloseButton, - Button, - Text, - Image, Box, + Button, Center, + Flex, FormControl, FormLabel, + Image, Input, - Flex, InputGroup, InputLeftElement, + Modal, + ModalCloseButton, + ModalContent, + ModalHeader, + ModalOverlay, + Text, } from '@chakra-ui/react'; +import PropTypes from 'prop-types'; +import { useState } from 'react'; import { FaUserAlt } from 'react-icons/fa'; // Icon for when there is no picture import GroupIcon from '../../Assets/groupIcon.svg'; @@ -27,7 +27,6 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => { const handleInput = e => { setNumberOfParticipants(e.target.value); - console.log(e.target.value); const numericRegex = /^[0-9]*$/; const isNumeric = numericRegex.test(e.target.value); setSubmittable(isNumeric && e.target.value.trim() !== ''); @@ -35,7 +34,6 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => { const handleCheckIn = async () => { if (volunteer && typeof volunteer === 'object' && volunteer.id) { - console.log('Volunteer:', volunteer); await onCheckInConfirm(volunteer, numberOfParticipants); // Pass the entire volunteer object onClose(); } else { @@ -43,10 +41,6 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => { } }; - useEffect(() => { - console.log(volunteer); - }); - return (
@@ -133,7 +127,7 @@ CheckinModal.propTypes = { last_name: PropTypes.string, email: PropTypes.string, image_url: PropTypes.string, - number_in_party: PropTypes.number + number_in_party: PropTypes.number, }), }; diff --git a/src/components/Checkin/CheckinStatsDashboard.jsx b/src/components/Checkin/CheckinStatsDashboard.jsx index c6bc75a..10c7870 100644 --- a/src/components/Checkin/CheckinStatsDashboard.jsx +++ b/src/components/Checkin/CheckinStatsDashboard.jsx @@ -23,10 +23,10 @@ const CheckinStatsDashboard = ({ event, registered, checkin }) => { }; const getTimeString = () => { - if (!event || !event.time) { + if (!event || !event.start_time) { return ''; } - const time = event.time.substring(0, 5); + const time = event.start_time.substring(0, 5); const value = parseInt(time.substring(0, 2)); if (value > 12) { return (value - 12).toString() + time.substring(2); diff --git a/src/components/DataEntryModal/DataEntryModal.jsx b/src/components/DataEntryModal/DataEntryModal.jsx index 93a86af..1a9aa95 100644 --- a/src/components/DataEntryModal/DataEntryModal.jsx +++ b/src/components/DataEntryModal/DataEntryModal.jsx @@ -94,6 +94,7 @@ const DataEntryModal = ({ const trashBagsToSend = { trashBags: currentTrash, }; + console.log(trashBagsToSend); await Backend.put(`/trashbags/${id}`, trashBagsToSend); await Backend.put(`/data/${id}`, dataToSend); @@ -107,6 +108,7 @@ const DataEntryModal = ({ }); onClose(); + window.location.reload(); } catch (error) { console.error(error.message); toast({ diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx index 03321c9..a8b2d9e 100644 --- a/src/components/Events/EventCard.jsx +++ b/src/components/Events/EventCard.jsx @@ -132,9 +132,9 @@ const EventCard = ({ - {name.length > 20 ? ( + {name.length > 14 ? ( - {name.substring(0, 20)}... + {name.substring(0, 14)}... ) : ( From 6fa157dd7a07b8a9100def8be0c459eb1af13e9e Mon Sep 17 00:00:00 2001 From: Dang Nguyen Nguyen <93059380+NwinNwin@users.noreply.github.com> Date: Mon, 1 Apr 2024 19:20:47 -0700 Subject: [PATCH 3/3] forgor to remove refresh --- src/components/DataEntryModal/DataEntryModal.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/DataEntryModal/DataEntryModal.jsx b/src/components/DataEntryModal/DataEntryModal.jsx index da76314..157ada9 100644 --- a/src/components/DataEntryModal/DataEntryModal.jsx +++ b/src/components/DataEntryModal/DataEntryModal.jsx @@ -95,7 +95,6 @@ const DataEntryModal = ({ const trashBagsToSend = { trashBags: currentTrash, }; - console.log(trashBagsToSend); await Backend.put(`/trashbags/${id}`, trashBagsToSend); await Backend.put(`/data/${id}`, dataToSend); @@ -108,7 +107,6 @@ const DataEntryModal = ({ isClosable: true, }); onClose(); - window.location.reload(); } catch (error) { console.error(error.message); toast({