DBC22-904: Added components and redux logic

tyrel-oxd · tyrel-oxd · commit 2e2b4dd129dc · 2023-10-25T11:20:33.000-07:00
diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
@@ -30,6 +30,7 @@ import { MapContext } from '../App.js';
 import AdvisoriesAccordion from './advisories/AdvisoriesAccordion';
 import CurrentCameraIcon from './CurrentCameraIcon';
 import EventTypeIcon from './EventTypeIcon';
+import EventFilter from '../Components/events/EventFilter';
 import FriendlyTime from './FriendlyTime';
 import Layers from './Layers.js';
 import RouteSearch from './map/RouteSearch.js';
@@ -255,6 +256,7 @@ export default function MapWrapper({
         animation: {
           duration: 250,
         },
+        margin: 90,
       },
     });
     const vectorLayer = new VectorTileLayer({
@@ -763,6 +765,11 @@ export default function MapWrapper({
           <AdvisoriesAccordion />
         </div>
       )}
+      {!isPreview && (
+        <div>
+          <EventFilter/>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/frontend/src/Components/Map.scss b/src/frontend/src/Components/Map.scss
@@ -1,6 +1,15 @@
 @import "../styles/variables.scss";
 @import '~ol/ol.css';
 
+
+
+.delay-filter {
+  background-color: black;
+  position: absolute;
+  top: 50px;
+  height: 100000px;
+}
+
 .map-wrap {
   position: absolute;
   top: 50px;
@@ -10,7 +19,6 @@
   @media (min-width: 992px) {
     top: 58px;
   }
-
   .map {
     position: absolute;
     width: 100%;
diff --git a/src/frontend/src/Components/events/EventFilter.js b/src/frontend/src/Components/events/EventFilter.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import {useSelector, useDispatch } from 'react-redux'
+
+// Styling
+import '../../pages/EventsPage.scss';
+
+// Third party packages
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
+import Dropdown from 'react-bootstrap/Dropdown';
+import Form from 'react-bootstrap/Form';
+import { updateEventFilters } from '../../slices/eventFiltersSlice';
+
+export default function EventFilter() {
+  const dispatch = useDispatch();
+  const [ eventTypeFilter ] = useSelector((state) => [
+    state.eventFilters.filterSet,
+  ]);
+
+  const eventTypeFilterHandler = e => {
+    const eventType = e.target.value;
+
+    const newFilter = { ...eventTypeFilter };
+    newFilter[eventType] = !newFilter[eventType];
+    dispatch(updateEventFilters(newFilter));
+  };
+
+  const filterProps = [
+    {
+      id: 'checkbox-filter-incident',
+      label: 'Incidents',
+      value: 'INCIDENT',
+    },
+    {
+      id: 'checkbox-filter-weather',
+      label: 'Road Conditions',
+      value: 'WEATHER_CONDITION',
+    },
+    {
+      id: 'checkbox-filter-construction',
+      label: 'Current Events',
+      value: 'CONSTRUCTION',
+    },
+    {
+      id: 'checkbox-filter-special',
+      label: 'Future Events',
+      value: 'SPECIAL_EVENT',
+    },
+  ];
+  // Rendering
+  return (
+    <div className="sort-and-filter">
+      <div className="sort"></div>
+      <Dropdown align="end">
+        <Dropdown.Toggle variant="outline-primary" id="filter-dropdown">
+          Filters
+          <FontAwesomeIcon icon={faFilter} />
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {filterProps.map(fp => (
+            <Form.Check
+              id={fp.id}
+              key={fp.id}
+              label={
+                <span>
+                  {fp.icon}
+                  {fp.label}
+                </span>
+              }
+              value={fp.value}
+              checked={eventTypeFilter[fp.value]}
+              onChange={eventTypeFilterHandler}
+            />
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
+}
diff --git a/src/frontend/src/pages/EventsPage.js b/src/frontend/src/pages/EventsPage.js
@@ -1,23 +1,22 @@
 // React
 import React, {useEffect, useRef, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
+import { useSelector } from 'react-redux'
 
 // Third party packages
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
   faMapLocationDot,
-  faFilter,
 } from '@fortawesome/free-solid-svg-icons';
 import {useMediaQuery} from '@uidotdev/usehooks';
 import Container from 'react-bootstrap/Container';
-import Dropdown from 'react-bootstrap/Dropdown';
-import Form from 'react-bootstrap/Form';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
 // Components and functions
 import {getEvents} from '../Components/data/events';
 import EventCard from '../Components/events/EventCard';
 import EventsTable from '../Components/events/EventsTable';
+import EventFilter from '../Components/events/EventFilter';
 import FriendlyTime from '../Components/FriendlyTime';
 import PageHeader from '../PageHeader';
 import Footer from '../Footer.js';
@@ -32,6 +31,10 @@ export default function EventsPage() {
 
   const navigate = useNavigate();
 
+  const [ eventFilters ] = useSelector((state) => [
+    state.eventFilters.filterSet,
+  ]);
+
   const columns = [
     {
       header: 'Type',
@@ -69,38 +72,8 @@ export default function EventsPage() {
     },
   ];
 
-  const filterProps = [
-    {
-      id: 'checkbox-filter-incident',
-      label: 'Incidents',
-      value: 'INCIDENT',
-    },
-    {
-      id: 'checkbox-filter-weather',
-      label: 'Road Conditions',
-      value: 'WEATHER_CONDITION',
-    },
-    {
-      id: 'checkbox-filter-construction',
-      label: 'Current Events',
-      value: 'CONSTRUCTION',
-    },
-    {
-      id: 'checkbox-filter-special',
-      label: 'Future Events',
-      value: 'SPECIAL_EVENT',
-    },
-  ];
-
   const [sortingColumns, setSortingColumns] = useState([]);
 
-  const [eventTypeFilter, setEventTypeFilter] = useState({
-    'CONSTRUCTION': false,
-    'INCIDENT': false,
-    'SPECIAL_EVENT': false,
-    'WEATHER_CONDITION': false,
-  });
-
   const [events, setEvents] = useState([]);
   const [processedEvents, setProcessedEvents] = useState([]);
   const [displayedEvents, setDisplayedEvents] = useState([]);
@@ -131,13 +104,13 @@ export default function EventsPage() {
 
   const processEvents = () => {
     const hasTrue = (val) => !!val;
-    const hasFilterOn = Object.values(eventTypeFilter).some(hasTrue);
+    const hasFilterOn = Object.values(eventFilters).some(hasTrue);
 
     let res = [...events];
 
     // Filter
     if (hasFilterOn) {
-      res = res.filter((e) => !!eventTypeFilter[e.event_type]);
+      res = res.filter((e) => !!eventFilters[e.event_type]);
     }
 
     // Sort
@@ -174,16 +147,7 @@ export default function EventsPage() {
     if (!isInitialMount.current) { // Do not run on startup
       processEvents();
     }
-  }, [events, eventTypeFilter, sortingColumns]);
-
-  const eventTypeFilterHandler = (e) => {
-    const eventType = e.target.value;
-
-    const newFilter = {...eventTypeFilter};
-    newFilter[eventType] = !newFilter[eventType];
-
-    setEventTypeFilter(newFilter);
-  };
+  }, [events, eventFilters, sortingColumns]);
 
   const largeScreen = useMediaQuery('only screen and (min-width : 768px)');
 
@@ -195,27 +159,7 @@ export default function EventsPage() {
       </PageHeader>
       <Container>
       <Advisories />
-        <div className="sort-and-filter">
-          <div className="sort"></div>
-          <Dropdown align="end">
-            <Dropdown.Toggle variant="outline-primary" id="filter-dropdown">
-              Filters<FontAwesomeIcon icon={faFilter} />
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              {filterProps.map((fp) => (
-                <Form.Check
-                  id={fp.id}
-                  key={fp.id}
-                  label={
-                    <span>{fp.icon}{fp.label}</span>
-                  }
-                  value={fp.value}
-                  checked={eventTypeFilter[fp.value]}
-                  onChange={eventTypeFilterHandler} />
-              ))}
-            </Dropdown.Menu>
-          </Dropdown>
-        </div>
+       <EventFilter />
 
         { events && !!events.length && (
           <InfiniteScroll
diff --git a/src/frontend/src/slices/eventFiltersSlice.js b/src/frontend/src/slices/eventFiltersSlice.js
@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const eventFiltersSlice = createSlice({
+  name: 'eventFilters',
+  initialState: {
+    filterSet: {'CONSTRUCTION': false,
+    'INCIDENT': false,
+    'SPECIAL_EVENT': false,
+    'WEATHER_CONDITION': false,},
+  },
+  reducers: {
+    updateEventFilters: (state, action) => {
+      state.filterSet = action.payload;
+    },
+  },
+});
+export const { updateEventFilters } = eventFiltersSlice.actions;
+
+export default eventFiltersSlice.reducer;
diff --git a/src/frontend/src/store.js b/src/frontend/src/store.js
@@ -1,6 +1,7 @@
 import { configureStore } from '@reduxjs/toolkit';
 import camerasReducer from './slices/camerasSlice';
 import eventsReducer from './slices/eventsSlice';
+import eventFiltersReducer from './slices/eventFiltersSlice';
 import routesReducer from './slices/routesSlice';
 import mapReducer from './slices/mapSlice';
 
@@ -29,6 +30,7 @@ const store = configureStore({
   reducer: {
     cameras: persistReducer(getConfig('cameras'), camerasReducer),
     events: persistReducer(getConfig('events'), eventsReducer),
+    eventFilters: persistReducer(getConfig('eventFilters'), eventFiltersReducer),
     routes: persistReducer(getConfig('routes'), routesReducer),
     map: persistReducer(getConfig('map'), mapReducer),
   },
