Consolidate all year dropdowns (#292)

Consolidate dropdown year to just one for the entire agency site
caktus · Apr 16, 2024 · 896f5d1 · 896f5d1
1 parent dd66a50
commit 896f5d1
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 149 deletions.
diff --git a/frontend/src/Components/AgencyData/AgencyData.js b/frontend/src/Components/AgencyData/AgencyData.js
@@ -15,6 +15,8 @@ import AgencyHeader from './AgencyHeader';
 import Sidebar from '../Sidebar/Sidebar';
 import ChartRoutes from '../Charts/ChartRoutes';
 import { CompareAlertBox } from '../Elements/Alert/Alert';
+import { YEARS_DEFAULT } from '../Charts/chartUtils';
+import axios from '../../Services/Axios';
 
 function AgencyData(props) {
   let { agencyId } = useParams();
@@ -27,6 +29,10 @@ function AgencyData(props) {
   const [chartsOpen, setChartsOpen] = useState(false);
   const [chartState] = useDataset(agencyId, AGENCY_DETAILS);
 
+  const [yearRange, setYearRange] = useState([YEARS_DEFAULT]);
+  const [year, setYear] = useState(YEARS_DEFAULT);
+  const [yearIdx, setYearIdx] = useState(null);
+
   useEffect(() => {
     if (chartState.data[AGENCY_DETAILS]) setSidebarOpen(true);
   }, [chartState.data[AGENCY_DETAILS]]);
@@ -39,6 +45,18 @@ function AgencyData(props) {
     if (chartState.data[AGENCY_DETAILS]) setChartsOpen(true);
   }, [chartState.data[AGENCY_DETAILS]]);
 
+  useEffect(() => {
+    axios.get(`/api/agency/${agencyId}/year-range/`).then((res) => {
+      setYearRange([YEARS_DEFAULT].concat(res.data.year_range));
+    });
+  }, [agencyId]);
+
+  const handleYearSelect = (y, idx) => {
+    if (y === year) return;
+    setYear(y);
+    setYearIdx(idx); // Used for some pie chart graphs
+  };
+
   return (
     <S.AgencyData data-testid="AgencyData" {...props}>
       {props.showCompare && !props.agencyId && <CompareAlertBox />}
@@ -48,6 +66,9 @@ function AgencyData(props) {
         toggleShowCompare={props.toggleShowCompare}
         showCompareDepartments={props.showCompare}
         showCloseButton={!!props?.agencyId}
+        yearRange={yearRange}
+        year={year}
+        handleYearSelect={handleYearSelect}
       />
       <S.ContentWrapper showCompare={props.showCompare}>
         <AnimatePresence>
@@ -72,6 +93,9 @@ function AgencyData(props) {
             agencyId={agencyId}
             showCompare={props.showCompare}
             agencyName={chartState.data[AGENCY_DETAILS].name}
+            yearRange={yearRange}
+            year={year}
+            yearIdx={yearIdx}
           />
         )}
       </S.ContentWrapper>

diff --git a/frontend/src/Components/AgencyData/AgencyHeader.js b/frontend/src/Components/AgencyData/AgencyHeader.js
@@ -18,13 +18,17 @@ import BackButton from '../Elements/BackButton';
 import Button from '../Elements/Button';
 import * as ChartHeaderStyles from '../Charts/ChartSections/ChartHeader.styled';
 import CensusData from './CensusData';
+import DataSubsetPicker from '../Charts/ChartSections/DataSubsetPicker/DataSubsetPicker';
 
 function AgencyHeader({
   agencyHeaderOpen,
   agencyDetails,
   toggleShowCompare,
   showCompareDepartments,
   showCloseButton,
+  yearRange,
+  year,
+  handleYearSelect,
 }) {
   const history = useHistory();
   const { agencyId } = useParams();
@@ -92,6 +96,13 @@ function AgencyHeader({
               showCompareDepartments={showCompareDepartments}
             />
           </S.SubHeaderContentRow>
+          <DataSubsetPicker
+            label="Year"
+            value={year}
+            onChange={handleYearSelect}
+            options={yearRange}
+            dropDown
+          />
           {!showCloseButton && (
             <S.AgencyHeaderButton>
               <Button

diff --git a/frontend/src/Components/Charts/Arrest/Arrests.js b/frontend/src/Components/Charts/Arrest/Arrests.js
@@ -1,17 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import ArrestsStyled from './Arrests.styles';
 
-// Util
-import { YEARS_DEFAULT } from '../chartUtils';
-
 // Hooks
 import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // Children
-import DataSubsetPicker from '../ChartSections/DataSubsetPicker/DataSubsetPicker';
 import PercentageOfStops from './Charts/PercentageOfStops';
-import useYearSet from '../../../Hooks/useYearSet';
 import PercentageOfSearches from './Charts/PercentageOfSearches';
 import CountOfStopsAndArrests from './Charts/CountOfStopsAndArrests';
 import PercentageOfStopsForStopPurposeGroup from './Charts/PercentageOfStopsForPurposeGroup';
@@ -23,8 +18,7 @@ import Switch from 'react-switch';
 import { SwitchContainer } from '../TrafficStops/TrafficStops.styled';
 
 function Arrests(props) {
-  const [year, setYear] = useState(YEARS_DEFAULT);
-  const [yearRange] = useYearSet();
+  const { year } = props;
   const [togglePercentageOfStops, setTogglePercentageOfStops] = useState(true);
   const [togglePercentageOfSearches, setTogglePercentageOfSearches] = useState(true);
 
@@ -37,24 +31,10 @@ function Arrests(props) {
     }
   }, []);
 
-  const handleYearSelect = (y) => {
-    if (y === year) return;
-    setYear(y);
-  };
-
   return (
     <ArrestsStyled>
       {renderMetaTags()}
       {renderTableModal()}
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <DataSubsetPicker
-          label="Year"
-          value={year}
-          onChange={handleYearSelect}
-          options={[YEARS_DEFAULT].concat(yearRange)}
-          dropDown
-        />
-      </div>
       <PercentageOfStops {...props} year={year} />
       <PercentageOfSearches {...props} year={year} />
       <CountOfStopsAndArrests {...props} year={year} />

diff --git a/frontend/src/Components/Charts/Contraband/Contraband.js b/frontend/src/Components/Charts/Contraband/Contraband.js
@@ -12,7 +12,6 @@ import {
   CONTRABAND_TYPES_TABLE_COLUMNS,
   RACE_TABLE_COLUMNS,
   STATIC_CONTRABAND_KEYS,
-  YEARS_DEFAULT,
 } from '../chartUtils';
 
 // Hooks
@@ -38,7 +37,7 @@ import useOfficerId from '../../../Hooks/useOfficerId';
 const STOP_PURPOSE_TYPES = ['Safety Violation', 'Regulatory and Equipment', 'Other'];
 
 function Contraband(props) {
-  const { agencyId, showCompare } = props;
+  const { agencyId, showCompare, yearRange, year } = props;
 
   const officerId = useOfficerId();
   const [chartState] = useDataset(agencyId, CONTRABAND_HIT_RATE);
@@ -49,8 +48,6 @@ function Contraband(props) {
     }
   }, []);
 
-  const [year, setYear] = useState(YEARS_DEFAULT);
-
   const renderMetaTags = useMetaTags();
   const [renderTableModal] = useTableModal();
 
@@ -155,15 +152,13 @@ function Contraband(props) {
 
   /* INTERACTIONS */
   // Handle year dropdown state
-  const handleYearSelect = (y) => {
-    if (y === year) return;
-    setYear(y);
+  useEffect(() => {
     setContrabandData(initContrabandData);
     setContrabandTypesData(initContrabandTypesData);
     setContrabandStopPurposeData(initContrabandStopPurposeData);
     setContrabandGroupedStopPurposeData(initContrabandGroupedStopPurposeData);
-    fetchHitRateByStopPurpose(y);
-  };
+    fetchHitRateByStopPurpose();
+  }, [year]);
 
   // Build New Contraband Data
   useEffect(() => {
@@ -324,10 +319,10 @@ function Contraband(props) {
     fetchHitRateByStopPurpose('All');
   }, []);
 
-  const fetchHitRateByStopPurpose = (yr) => {
+  const fetchHitRateByStopPurpose = () => {
     const params = [];
-    if (yr && yr !== 'All') {
-      params.push({ param: 'year', val: yr });
+    if (year && year !== 'All') {
+      params.push({ param: 'year', val: year });
     }
     if (officerId) {
       params.push({ param: 'officer', val: officerId });
@@ -520,7 +515,7 @@ function Contraband(props) {
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
-    let fromYear = ` since ${chartState.yearRange[chartState.yearRange.length - 1]}`;
+    let fromYear = ` since ${yearRange[yearRange.length - 1]}`;
     if (year && year !== 'All') {
       fromYear = ` in ${year}`;
     }
@@ -561,15 +556,6 @@ function Contraband(props) {
           a tiny fraction of the illegal substance
         </span>
       </details>
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <DataSubsetPicker
-          label="Year"
-          value={year}
-          onChange={handleYearSelect}
-          options={[YEARS_DEFAULT].concat(chartState.yearRange)}
-          dropDown
-        />
-      </div>
       <S.ChartSection>
         <ChartHeader
           chartTitle='Contraband "Hit Rate"'

diff --git a/frontend/src/Components/Charts/Overview/Overview.js b/frontend/src/Components/Charts/Overview/Overview.js
@@ -29,24 +29,20 @@ import useDataset, {
 // Children
 import ChartHeader from '../ChartSections/ChartHeader';
 import useOfficerId from '../../../Hooks/useOfficerId';
-import DataSubsetPicker from '../ChartSections/DataSubsetPicker/DataSubsetPicker';
 import PieChart from '../../NewCharts/PieChart';
 import { pieChartConfig, pieChartLabels } from '../../../util/setChartColors';
-import useYearSet from '../../../Hooks/useYearSet';
 
 function Overview(props) {
-  const { agencyId } = props;
+  const { agencyId, yearRange, year } = props;
+
   const history = useHistory();
   const match = useRouteMatch();
   const officerId = useOfficerId();
-  const [yearRange] = useYearSet();
 
   useDataset(agencyId, STOPS);
   useDataset(agencyId, SEARCHES);
   const [chartState] = useDataset(agencyId, USE_OF_FORCE);
 
-  const [year, setYear] = useState(YEARS_DEFAULT);
-
   const initChartData = {
     labels: pieChartLabels,
     datasets: [
@@ -138,7 +134,7 @@ function Overview(props) {
     let title = `${chartTitle} for ${subject}`;
     if (chartTitle !== 'Census Demographics') {
       title = `${title} ${
-        year === YEARS_DEFAULT ? `since ${chartState.yearRange.reverse()[0]}` : `in ${year}`
+        year === YEARS_DEFAULT ? `since ${yearRange[yearRange.length - 1]}` : `in ${year}`
       }`;
     }
     return title;
@@ -165,13 +161,6 @@ function Overview(props) {
     }
   }, [chartState.data[USE_OF_FORCE], year]);
 
-  /* Methods */
-  // eslint-disable-next-line no-unused-vars
-  const handleYearSelect = (y) => {
-    if (y === year) return;
-    setYear(y);
-  };
-
   const getPageTitleForShare = () => {
     const agencyName = chartState.data[AGENCY_DETAILS].name;
     return `Traffic Stop statistics for ${agencyName}`;
@@ -200,15 +189,6 @@ function Overview(props) {
           twitterTitle: getPageTitleForShare(),
         }}
       />
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <DataSubsetPicker
-          label="Year"
-          value={year}
-          onChange={handleYearSelect}
-          options={[YEARS_DEFAULT].concat(yearRange)}
-          dropDown
-        />
-      </div>
       <S.SectionWrapper />
       <S.ChartsWrapper>
         <S.PieContainer>

diff --git a/frontend/src/Components/Charts/SearchRate/SearchRate.js b/frontend/src/Components/Charts/SearchRate/SearchRate.js
@@ -11,23 +11,20 @@ import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // Constants
-import { STOP_REASON_TABLE_COLUMNS, YEARS_DEFAULT } from '../chartUtils';
+import { STOP_REASON_TABLE_COLUMNS } from '../chartUtils';
 
 // Children
 import { P } from '../../../styles/StyledComponents/Typography';
 import ChartHeader from '../ChartSections/ChartHeader';
-import DataSubsetPicker from '../ChartSections/DataSubsetPicker/DataSubsetPicker';
 import axios from '../../../Services/Axios';
 import HorizontalBarChart from '../../NewCharts/HorizontalBarChart';
 
 function SearchRate(props) {
-  const { agencyId, showCompare } = props;
+  const { agencyId, showCompare, yearRange, year } = props;
   const officerId = useOfficerId();
 
   const [chartState] = useDataset(agencyId, LIKELIHOOD_OF_SEARCH);
 
-  const [year, setYear] = useState(YEARS_DEFAULT);
-
   const initData = { labels: [], datasets: [], loading: true };
   const [searchRateData, setSearchRateData] = useState(initData);
 
@@ -54,11 +51,6 @@ function SearchRate(props) {
       .catch((err) => console.log(err));
   }, [year]);
 
-  const handleYearSelected = (y) => {
-    if (y === year) return;
-    setYear(y);
-  };
-
   const handleViewData = () => {
     openModal(LIKELIHOOD_OF_SEARCH, STOP_REASON_TABLE_COLUMNS);
   };
@@ -87,7 +79,7 @@ function SearchRate(props) {
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
-    let fromYear = ` since ${chartState.yearRange[chartState.yearRange.length - 1]}`;
+    let fromYear = ` since ${yearRange[yearRange.length - 1]}`;
     if (year && year !== 'All') {
       fromYear = ` in ${year}`;
     }
@@ -132,17 +124,6 @@ function SearchRate(props) {
               />
             </div>
           </S.LineWrapper>
-          <S.LegendBelow>
-            <S.Spacing>
-              <DataSubsetPicker
-                label="Year"
-                value={year}
-                onChange={handleYearSelected}
-                options={[YEARS_DEFAULT].concat(chartState.yearRange)}
-                dropUp={!!showCompare}
-              />
-            </S.Spacing>
-          </S.LegendBelow>
         </S.ChartSubsection>
       </S.ChartSection>
     </SearchRateStyled>