Refactor init data for graphs that should reload when user chooses ye…

…ar from dropdown, etc. (#277)
caktus · Feb 26, 2024 · 3766793 · 3766793
1 parent a04523c
commit 3766793
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/frontend/src/Components/Charts/Contraband/Contraband.js b/frontend/src/Components/Charts/Contraband/Contraband.js
@@ -47,28 +47,35 @@ function Contraband(props) {
 
   const renderMetaTags = useMetaTags();
   const [renderTableModal] = useTableModal();
-  const [contrabandData, setContrabandData] = useState({
+
+  const initContrabandData = {
     labels: [],
     datasets: [],
     isModalOpen: false,
     tableData: [],
     csvData: [],
     loading: true,
-  });
-  const [contrabandTypesData, setContrabandTypesData] = useState({
+  };
+  const [contrabandData, setContrabandData] = useState(initContrabandData);
+
+  const initContrabandTypesData = {
     labels: [],
     datasets: [],
     isModalOpen: false,
     tableData: [],
     csvData: [],
     loading: true,
-  });
+  };
+  const [contrabandTypesData, setContrabandTypesData] = useState(initContrabandTypesData);
 
-  const [contrabandStopPurposeData, setContrabandStopPurposeData] = useState({
+  const initContrabandStopPurposeData = {
     labels: [],
     datasets: [],
     loading: true,
-  });
+  };
+  const [contrabandStopPurposeData, setContrabandStopPurposeData] = useState(
+    initContrabandStopPurposeData
+  );
   const [contrabandStopPurposeModalData, setContrabandStopPurposeModalData] = useState({
     modalData: {},
     isOpen: false,
@@ -87,7 +94,7 @@ function Contraband(props) {
       loading: true,
     });
 
-  const initialContrabandGroupedData = [
+  const initContrabandGroupedStopPurposeData = [
     {
       labels: [],
       datasets: [],
@@ -105,7 +112,7 @@ function Contraband(props) {
     },
   ];
   const [contrabandGroupedStopPurposeData, setContrabandGroupedStopPurposeData] = useState(
-    initialContrabandGroupedData
+    initContrabandGroupedStopPurposeData
   );
   const [shouldRedrawContrabandGraphs, setShouldReDrawContrabandGraphs] = useState(true);
   const [contrabandTypes, setContrabandTypes] = useState(() =>
@@ -145,7 +152,10 @@ function Contraband(props) {
   const handleYearSelect = (y) => {
     if (y === year) return;
     setYear(y);
-    setContrabandGroupedStopPurposeData(initialContrabandGroupedData);
+    setContrabandData(initContrabandData);
+    setContrabandTypesData(initContrabandTypesData);
+    setContrabandStopPurposeData(initContrabandStopPurposeData);
+    setContrabandGroupedStopPurposeData(initContrabandGroupedStopPurposeData);
     fetchHitRateByStopPurpose(y);
   };
 

diff --git a/frontend/src/Components/Charts/SearchRate/SearchRate.js b/frontend/src/Components/Charts/SearchRate/SearchRate.js
@@ -27,12 +27,15 @@ function SearchRate(props) {
   const [chartState] = useDataset(agencyId, LIKELIHOOD_OF_SEARCH);
 
   const [year, setYear] = useState(YEARS_DEFAULT);
-  const [searchRateData, setSearchRateData] = useState({ labels: [], datasets: [], loading: true });
+
+  const initData = { labels: [], datasets: [], loading: true };
+  const [searchRateData, setSearchRateData] = useState(initData);
 
   const renderMetaTags = useMetaTags();
   const [renderTableModal, { openModal }] = useTableModal();
 
   useEffect(() => {
+    setSearchRateData(initData);
     const params = [];
     if (year && year !== 'All') {
       params.push({ param: 'year', val: year });

diff --git a/frontend/src/Components/Charts/Searches/Searches.js b/frontend/src/Components/Charts/Searches/Searches.js
@@ -52,11 +52,12 @@ function Searches(props) {
     loading: true,
   });
 
-  const [searchCountData, setSearchCountData] = useState({
+  const initCountData = {
     labels: [],
     datasets: [],
     loading: true,
-  });
+  };
+  const [searchCountData, setSearchCountData] = useState(initCountData);
   const [searchCountType, setSearchCountType] = useState(0);
   const renderMetaTags = useMetaTags();
   const [renderTableModal, { openModal }] = useTableModal();
@@ -81,6 +82,7 @@ function Searches(props) {
 
   // Build Searches By Count
   useEffect(() => {
+    setSearchCountData(initCountData);
     const params = [];
     if (searchType !== 0) {
       params.push({ param: 'search_type', val: searchCountType });

diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
@@ -223,17 +223,19 @@ function TrafficStops(props) {
     null,
     null,
   ]);
-  const [trafficStopsByCount, setTrafficStopsByCount] = useState({
+  const initStopsByCount = {
     labels: [],
     datasets: [],
     loading: true,
-  });
+  };
+  const [trafficStopsByCount, setTrafficStopsByCount] = useState(initStopsByCount);
 
   const createDateForRange = (yr) =>
     Number.isInteger(yr) ? new Date(`${yr}-01-01`) : new Date(yr);
 
   // Build Stops By Count
   useEffect(() => {
+    setTrafficStopsByCount(initStopsByCount);
     const params = [];
     if (trafficStopsByCountRange !== null) {
       const _from = `${trafficStopsByCountRange.from.year}-${trafficStopsByCountRange.from.month