Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement PastEvents Page + PastEvent Page #148

Merged
merged 4 commits into from
Apr 8, 2024
Merged

Implement PastEvents Page + PastEvent Page #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2f4ca5
Implement PastEvents Page + PastEvent Page
brelieu05 Apr 6, 2024
15bc102
Adjusted backend call to utilize new pastEvents route
Aokijiop Apr 8, 2024
f6bc75e
Fixed eslint dependency array issue
Aokijiop Apr 8, 2024
7e18424
Merge branch 'main' into 139-implement-pastevents-page-+-pastevent-page
Aokijiop Apr 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .yarn/install-state.gz
View file
Open in desktop
Binary file not shown.
15 changes: 12 additions & 3 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Outlet, Route, BrowserRouter as Router, Routes } from 'react-router-dom
import './App.css';
import EventPage from './pages/EventPage';
import HomePage from './pages/HomePage';
import ArchivedEvents from './pages/ArchivedEvents';
import DummyProfiles from './pages/DummyProfiles';
import DummyProfilePage from './pages/DummyProfilePage';
import DummySearchVolunteerEvents from './pages/DummySearchVolunteerEvents';
Expand All @@ -30,6 +29,8 @@ import { RoleProvider } from './utils/RoleContext';
import { UserProvider } from './utils/UserContext';
import ProtectedRoute from './utils/ProtectedRoute';
import NavbarContext from './utils/NavbarContext';
import PastEvents from './pages/PastEvents';
import ViewEvents from './pages/ViewEvents';

import { useDisclosure, useBreakpointValue, Box } from '@chakra-ui/react';

Expand Down Expand Up @@ -92,10 +93,18 @@ const App = () => {
}
/>
<Route
path="/archived-events"
path="/past-events"
element={
<ProtectedRoute pageType="admin">
<ArchivedEvents />{' '}
<PastEvents />{' '}
</ProtectedRoute>
}
/>
<Route
path="/past-events/:eventId"
element={
<ProtectedRoute pageType="admin">
<ViewEvents />{' '}
</ProtectedRoute>
}
/>
Expand Down
25 changes: 21 additions & 4 deletions src/components/Checkin/VolunteerEventsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ 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 RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isViewEventPage }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const {
first_name,
Expand Down Expand Up @@ -135,7 +135,10 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) =>
)}
</>
) : (
<Tag
<>
{
isViewEventPage ?
<Tag
onClick={() => changeIsCheckedIn(volunteer)}
cursor={'pointer'}
borderRadius={10}
Expand All @@ -144,10 +147,24 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) =>
bg={'white'}
border={'2px solid #0075FF'}
gap={1}
>
>
<MdCheck />
<Text fontSize={'md'}>Check-In</Text>
</Tag>
</Tag>
:
<Tag
borderRadius={10}
p={2}
color={'#0075FF'}
bg={'white'}
border={'2px solid #0075FF'}
gap={1}
>
<MdCheck />
<Text fontSize={'md'}>Check-In</Text>
</Tag>
}
</>
)}
</Flex>
</Td>
Expand Down
107 changes: 107 additions & 0 deletions src/components/EventsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/* eslint-disable react/prop-types */
import {
Text,
Flex,
Image,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Button,
} from '@chakra-ui/react';
import { NavLink } from "react-router-dom";

const RenderEventRow = ({ event }) => {
const { id, name, location, date, image_url } = event;

return (
<>
<Tr key={id} bg="#FFFFFF" fontWeight={'medium'}>
<Td>
<Flex>
<Image src={image_url} boxSize="4rem" borderRadius="full" />
<Flex direction="column" ml={3} mt={4} g={1} overflow="hidden">
<Text color={'#2D3748'} whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
{name}
</Text>
</Flex>
</Flex>
</Td>
<Td>
<Flex>
<Text fontWeight="550" mt={2}>
{location}
</Text>
</Flex>
</Td>
<Flex mt={9}>
<Text fontWeight="550">
{`${date.substring(5, 7)}/${date.substring(8, 10)}/${date.substring(0, 4)}`}
</Text>
</Flex>
<Td>
<NavLink
to={`/past-events/${event.id}`}
>
<Button
color="#0075FF"
variant="outline"
borderWidth="2px"
borderColor="#0075FF"
onClick={() => console.log("sends to new page")}
>
View Event
</Button>
</NavLink>
</Td>
</Tr>
</>
);
};

const EventsTable = ({ events }) => {
return (
<TableContainer border={'2px solid #E2E8F0'} borderRadius={'15px'}>
<Table mb={5} colorScheme="gray">
<Thead bg="#F7FAFC">
<Tr fontWeight={'medium'}>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Event Name
</Text>
</Flex>
</Th>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Location
</Text>
</Flex>
</Th>
<Th w="25%">
<Flex gap={2}>
<Text color="#2D3748" fontWeight="650">
Date
</Text>
</Flex>
</Th>
<Th w="100%">
</Th>
</Tr>
</Thead>
<Tbody>
{events.map(event => (
<RenderEventRow key={event.id} event={event} />
))}
</Tbody>
</Table>
</TableContainer>
);
};

export default EventsTable;

5 changes: 3 additions & 2 deletions src/components/Navbar/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,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
Expand Down Expand Up @@ -167,7 +167,7 @@ const Navbar = () => {
FocusedIcon={EventsIconBlue}
UnfocusedIcon={EventsIconGrey}
/>

{/* Conditional rendering based on the role */}
{role === 'admin' && (
<>
Expand All @@ -180,6 +180,7 @@ const Navbar = () => {
UnfocusedIcon={ArchivedEventsIconGrey}
/>


{/* Volunteers button */}
<NavbarButton
buttonText={'Volunteers'}
Expand Down
177 changes: 177 additions & 0 deletions src/pages/PastEvents.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
import {
Box,
HStack,
Input,
InputGroup,
InputLeftElement,
Heading,
Flex,
Stack
} from '@chakra-ui/react';
import { useEffect, useState, useContext } from 'react';
import { SearchIcon, HamburgerIcon } from '@chakra-ui/icons';

import ImpactSummary from '../components/Events/ImpactSummary';
import Backend from '../utils/utils';
import Fuse from 'fuse.js';
import NavbarContext from '../utils/NavbarContext';
import EventsTable from '../components/EventsTable';

const PastEvents = () => {
const [events, setEvents] = useState([]);
const [displayEvents, setDisplayEvents] = useState([]);
const [name, setName] = useState('');
const [date, setDate] = useState('');
const [location, setLocation] = useState('');
const [fuse, setFuse] = useState();

const { onNavbarDrawerOpen } = useContext(NavbarContext);

useEffect(() => {
console.log('!')
console.log(displayEvents);
}, [displayEvents])

// useEffect(() => {
// // If input is empty, display all volunteers, else conduct the search
// if (input.trim() === '') {
// setDisplayedVolunteers(volunteers);
// } else {
// const options = {
// keys: ['first_name', 'last_name'],
// };
// const fuse = new Fuse(volunteers, options);
// const searchResult = fuse.search(input);
// console.log('search result', searchResult);
// const reduceResult = searchResult.map(result => result.item);
// setDisplayedVolunteers(reduceResult);
// }
// }, [input, volunteers]);

const getEvents = async () => {
try {
const eventsData = await Backend.get('/events/pastEvents');
setEvents(eventsData.data);
const options = { keys: ['name', 'date', 'location'], includeScore: true };
setFuse(new Fuse(eventsData.data, options));
} catch (err) {
console.log(`Error getting events: `, err.message);
}
};


useEffect(() => {
getEvents();

// getEventId(eventId);
}, []);

useEffect(() => {
if (!fuse) {
return;
}
console.log(name);
let ands = [];
if (name) ands.push({ name: name });
if (location) ands.push({ location: location });
if (date) ands.push({ date: date });

let result;
if (ands.length > 0) {
const fuseResult = fuse.search({ $and: ands });
console.log(fuseResult);
// If we want to filter by score:
// result = fuseResult.filter(item => item.score <= 0.5).map(item => item.item);
result = fuseResult.map(item => item.item);
} else result = events;
console.log(result);
setDisplayEvents(result);
}, [name, location, date, fuse, events]);

return (
<Flex
flexDir={'column'}
justifyContent={'center'}
alignItems={'center'}
bg="#E6EAEF"
minH="100vh"
ml={{ base: '0', xl: '15rem' }}
py={10}
>
<Flex w={'95%'} flexDir={'column'}>
<Flex alignItems={'center'} mb="8" gap={4}>
<HamburgerIcon
color={'#717171'}
boxSize={16}
display={{ base: 'flex', xl: 'none' }}
onClick={onNavbarDrawerOpen}
/>
<Heading>Impact Summary</Heading>
</Flex>

<ImpactSummary />
</Flex>

<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'}>Past Events</Heading>
<Stack w="auto">
<HStack>
<InputGroup w="100%">
<InputLeftElement pointerEvents="none">
<SearchIcon />
</InputLeftElement>
<Input
bg={'white'}
value={name}
onChange={event => {
setName(event.target.value);
}}
placeholder='Search Event Name (e.g. "Festival of Whales")'
/>

</InputGroup>
</HStack>
<HStack>
<InputGroup w="25%">
<InputLeftElement pointerEvents="none">
<SearchIcon />
</InputLeftElement>
<Input
bg={'white'}
value={location}
onChange={event => {
setLocation(event.target.value);
}}
placeholder="Search Location"
/>
</InputGroup>
<InputGroup w="25%">
<InputLeftElement pointerEvents="none">
<SearchIcon />
</InputLeftElement>
<Input
bg={'white'}
value={date}
placeholder="Search Date"
type="date"
onChange={event => {
setDate(event.target.value);
}}
/>
</InputGroup>
</HStack>
</Stack>
</Flex>
<Box mt="1rem" backgroundColor={'#F8F8F8'} p={8} borderRadius={'lg'} gap={8}>
<EventsTable events={displayEvents} />
</Box>
</Box>
</Flex>
</Flex>
);
};

export default PastEvents;

Loading
Loading