Move events, teams and people to global state

icpc · Aug 3, 2023 · ea70464 · ea70464
1 parent d42c5ef
commit ea70464
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 54 deletions.
diff --git a/src/Util/PhotoLoader.js b/src/Util/PhotoLoader.js
@@ -4,7 +4,6 @@ import axios from "axios";
 import { useAppContext } from "../components/AppContext";
 import { TAG_ALBUM } from "../consts";
 
-import { getEventData } from "./DataLoader";
 import PhotoService from "./PhotoService";
 import UniqueList from "./UniqueList";
 
@@ -18,7 +17,7 @@ import UniqueList from "./UniqueList";
  * - photosList: An array of all photo objects.
  */
 const usePhotoLoader = () => {
-    const { data } = useAppContext();
+    const { data, events } = useAppContext();
 
     /**
      * State hook that stores a Map object containing photo objects grouped by event.
@@ -31,23 +30,6 @@ const usePhotoLoader = () => {
     const [fetching, setFetching] = useState(false);
     const [axiosCancelTokenSource, setAxiosCancelTokenSource] = useState(new axios.CancelToken.source());
 
-    const [events, setEvents] = useState([]);
-
-    useEffect(() => {
-        let isCancelled = false;
-
-        getEventData(data.year)
-            .then(eventsData => {
-                if (!isCancelled) {
-                    setEvents(eventsData);
-                }
-            });
-
-        return () => {
-            isCancelled = true;
-        };
-    }, [data.year]);
-
     useEffect(() => {
         axiosCancelTokenSource.cancel();
         setPhotosByEvent(new Map());

diff --git a/src/components/AppContext.jsx b/src/components/AppContext.jsx
@@ -3,6 +3,7 @@ import { useSearchParams } from "react-router-dom";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
 import { DEFAULT_EVENT, LAST_YEAR } from "../consts";
+import { getEventData, getPeopleData, getTeamData } from "../Util/DataLoader";
 
 /**
  * Data for the entire app.
@@ -187,6 +188,39 @@ const AppContextProvider = ({ children }) => {
         });
     }, [data]);
 
+    const [events, setEvents] = useState([]);
+    const [people, setPeople] = useState([]);
+    const [teams, setTeams] = useState([]);
+
+    useEffect(() => {
+        let isCancelled = false;
+
+        getEventData(data.year)
+            .then(eventsData => {
+                if (!isCancelled) {
+                    setEvents(eventsData);
+                }
+            });
+
+        getPeopleData(data.year)
+            .then(peopleData => {
+                if (!isCancelled) {
+                    setPeople(peopleData);
+                }
+            });
+
+        getTeamData(data.year)
+            .then(teamData => {
+                if (!isCancelled) {
+                    setTeams(teamData);
+                }
+            });
+
+        return () => {
+            isCancelled = true;
+        };
+    }, [data.year]);
+
     return (<AppContext.Provider value={{
         data,
         setYear,
@@ -201,6 +235,9 @@ const AppContextProvider = ({ children }) => {
         setIsOpenMenu,
         desktop,
         mobile,
+        events, 
+        people,
+        teams
     }}>
         {children}
     </AppContext.Provider>);
@@ -223,6 +260,9 @@ const AppContextProvider = ({ children }) => {
  *  setIsOpenMenu: function,
  *  desktop: boolean,
  *  mobile: boolean,
+ *  teams: Array,
+ *  people: Array,
+ *  events: Array,
  * }}.
  */
 const useAppContext = () => {

diff --git a/src/components/Header/Filters.jsx b/src/components/Header/Filters.jsx
@@ -6,47 +6,13 @@ import calendarIcon from "../../images/calender.svg";
 import eventIcon from "../../images/event.svg";
 import personIcon from "../../images/person.svg";
 import teamIcon from "../../images/team.svg";
-import { getEventData, getPeopleData, getTeamData } from "../../Util/DataLoader";
 import { useAppContext } from "../AppContext";
 
 import Search from "./Search";
 import Selector from "./Selector";
 
 const Filters = () => {
-    const { data, setYear, setEvent, setPerson, setTeam, setIsOpenMenu, desktop } = useAppContext();
-
-    const [events, setEvents] = useState([]);
-    const [people, setPeople] = useState([]);
-    const [teams, setTeams] = useState([]);
-
-    useEffect(() => {
-        let isCancelled = false;
-
-        getEventData(data.year)
-            .then(eventsData => {
-                if (!isCancelled) {
-                    setEvents(eventsData);
-                }
-            });
-
-        getPeopleData(data.year)
-            .then(peopleData => {
-                if (!isCancelled) {
-                    setPeople(peopleData);
-                }
-            });
-
-        getTeamData(data.year)
-            .then(teamData => {
-                if (!isCancelled) {
-                    setTeams(teamData);
-                }
-            });
-
-        return () => {
-            isCancelled = true;
-        };
-    }, [data.year]);
+    const { data, setYear, setEvent, setPerson, setTeam, setIsOpenMenu, desktop, events, people, teams } = useAppContext();
 
     function formatOptions(a) {
         return a.map(x => {