Merge pull request #91 from ctc-uci/83-eventdashboard-match-updated-f…

…uzzy-search Updated event dashboard with fuzzy search and hi-fi designs
ctc-uci · Feb 24, 2024 · 29d03a3 · 29d03a3
2 parents 3f279ca + b71e1eb
commit 29d03a3
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 27 deletions.
diff --git a/src/components/AddEventsModal/AddEventsModal.jsx b/src/components/AddEventsModal/AddEventsModal.jsx
@@ -20,7 +20,7 @@ import {
   Box,
 } from '@chakra-ui/react';
 import { useState } from 'react';
-import { AttachmentIcon } from '@chakra-ui/icons';
+import { AttachmentIcon, AddIcon } from '@chakra-ui/icons';
 import Dropzone from '../Dropzone.tsx';
 import { theme, CreateEventIcon, CancelIcon } from '../Icons/EventsModalIcons.jsx';
 import { postEvent } from '../../utils/eventsUtils.js';
@@ -99,12 +99,8 @@ const AddEventsModal = () => {
 
   return (
     <ChakraProvider theme={extendTheme(theme)}>
-      <Button
-        style={{ backgroundColor: '#95D497', borderRadius: '30px' }}
-        height="50px"
-        onClick={onOpen}
-      >
-        <Box padding="13px 13px" fontSize="20px" display="inline-flex" gap="10px">
+      <a href="#" onClick={onOpen}>
+        {/* <Box padding="13px 13px" fontSize="20px" display="inline-flex" gap="10px">
           <svg
             width="24"
             height="24"
@@ -118,8 +114,24 @@ const AddEventsModal = () => {
             />
           </svg>
           Create Event
+        </Box> */}
+        <Box
+          width="293px"
+          height="250px"
+          boxShadow="0px 4px 4px 0px rgba(0, 0, 0, 0.25)"
+          display="flex"
+          flexDir="column"
+          alignItems={'center'}
+          justifyContent={'center'}
+          borderRadius="30px"
+          background={`linear-gradient(0deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.36) 100%)`}
+          backgroundSize="cover"
+        >
+          <Box px="27px" py="20px" color="white">
+            <AddIcon justifyContent={'center'} boxSize={50} />
+          </Box>
         </Box>
-      </Button>
+      </a>
 
       <Modal isOpen={isOpen} onClose={handleCancel}>
         <ModalOverlay />

diff --git a/src/pages/DummyEvents.jsx b/src/pages/DummyEvents.jsx
@@ -1,5 +1,19 @@
-import { Box, Button, Grid, GridItem, Spacer, useDisclosure, useToast } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Grid,
+  GridItem,
+  Spacer,
+  HStack,
+  useDisclosure,
+  useToast,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Heading,
+} from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
+import { SearchIcon } from '@chakra-ui/icons';
 
 import PropTypes from 'prop-types';
 import AllData from '../components/DummyEvents/AllData';
@@ -9,21 +23,29 @@ import RecentEventsCard from '../components/DummyEvents/RecentEventsCard';
 import Sidebar from '../components/DummyEvents/Sidebar';
 import AddEventsModal from '../components/AddEventsModal/AddEventsModal';
 import Backend from '../utils/utils';
+import Fuse from 'fuse.js';
 
 const DummyEvents = () => {
   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
   const [selectedEvents, setSelectedEvents] = useState([]);
+  const [name, setName] = useState('');
+  const [date, setDate] = useState('');
+  const [location, setLocation] = useState('');
+  const [fuse, setFuse] = useState();
 
   const getEvents = async () => {
     try {
       const eventsData = await Backend.get('/events');
       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);
     }
@@ -90,21 +112,17 @@ const DummyEvents = () => {
     console.log(selectedEvents);
   };
 
-  const eventCards = (
-    <Grid templateColumns="repeat(3, 1fr)" gap={6}>
-      {events.map(element => (
-        <GridItem key={element.id}>
-          <EventCard
-            {...element}
-            isSelected={selectedEvents.includes(element.id)}
-            showSelect={showSelect}
-            handleCheckboxChange={handleCheckboxChange}
-            getEvents={getEvents}
-          />
-        </GridItem>
-      ))}
-    </Grid>
-  );
+  const eventCards = displayEvents.map(element => (
+    <GridItem key={element.id}>
+      <EventCard
+        {...element}
+        isSelected={selectedEvents.includes(element.id)}
+        showSelect={showSelect}
+        handleCheckboxChange={handleCheckboxChange}
+        getEvents={getEvents}
+      />
+    </GridItem>
+  ));
 
   useEffect(() => {
     getEvents();
@@ -174,9 +192,31 @@ const DummyEvents = () => {
     );
   };
 
+  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]);
+
   return (
     <Sidebar>
-      <Box mx="156px" py="30px" justifyContent="flex-start" display="flex" flexDirection="column">
+      <Box py="30px" justifyContent="flex-start" display="flex" flexDirection="column">
         <Box
           mb="60px"
           display="flex"
@@ -189,10 +229,52 @@ const DummyEvents = () => {
           <AllData />
         </Box>
         <Spacer />
+        <Box display="flex" justifyContent={'center'} mb="4">
+          <Heading width="930px">Upcoming Events</Heading>
+        </Box>
         <Box display="flex" justifyContent={'center'}>
           <Box justifyContent="space-between" width="930px">
             <Box display="flex" flex-direction="row" justifyContent="space-between">
-              {isCreateButton ? <AddEventsModal getEvents={getEvents} /> : <DeselectButton />}
+              {isCreateButton ? <></> : <DeselectButton />}
+              <HStack>
+                <InputGroup w="50%">
+                  <InputLeftElement pointerEvents="none">
+                    <SearchIcon />
+                  </InputLeftElement>
+                  <Input
+                    value={name}
+                    onChange={event => {
+                      setName(event.target.value);
+                    }}
+                    placeholder='Search Event Name (e.g. "Festival of Whales")'
+                  />
+                </InputGroup>
+                <InputGroup w="25%">
+                  <InputLeftElement pointerEvents="none">
+                    <SearchIcon />
+                  </InputLeftElement>
+                  <Input
+                    value={location}
+                    onChange={event => {
+                      setLocation(event.target.value);
+                    }}
+                    placeholder="Search Location"
+                  />
+                </InputGroup>
+                <InputGroup w="25%">
+                  <InputLeftElement pointerEvents="none">
+                    <SearchIcon />
+                  </InputLeftElement>
+                  <Input
+                    value={date}
+                    placeholder="Search Date"
+                    onChange={event => {
+                      setDate(event.target.value);
+                    }}
+                  />
+                </InputGroup>
+              </HStack>
+
               {isSelectButton ? <SelectButton /> : <ArchiveButton id={32} />}
               <ArchiveEventsModal
                 isOpen={isArchiveEventModalOpen}
@@ -203,7 +285,12 @@ const DummyEvents = () => {
             </Box>
             <Spacer />
             <Box display="flex" flex-direction="space-between" justifyContent={'center'}>
-              <Box marginTop="3vh">{eventCards}</Box>
+              <Box marginTop="3vh">
+                <Grid templateColumns="repeat(3, 1fr)" gap={6}>
+                  <AddEventsModal getEvents={getEvents} />
+                  {eventCards}
+                </Grid>
+              </Box>
             </Box>
           </Box>
         </Box>