From c3c1b357949c176c611e24f3ee47d1b93f96e041 Mon Sep 17 00:00:00 2001
From: Aristotel Fani <afani1997@gmail.com>
Date: Thu, 11 Apr 2024 16:07:08 -0400
Subject: [PATCH] Pass agency name value from props instead of chart state

---
 .../Charts/Contraband/Contraband.js           | 26 ++++++------
 .../Components/Charts/Overview/Overview.js    | 17 ++++----
 .../Charts/SearchRate/SearchRate.js           |  8 ++--
 .../Components/Charts/Searches/Searches.js    | 16 +++-----
 .../Charts/TrafficStops/TrafficStops.js       | 40 +++++++++----------
 .../Charts/UseOfForce/UseOfForce.js           | 10 ++---
 6 files changed, 54 insertions(+), 63 deletions(-)

diff --git a/frontend/src/Components/Charts/Contraband/Contraband.js b/frontend/src/Components/Charts/Contraband/Contraband.js
index 5a0d1c26..95f36cec 100644
--- a/frontend/src/Components/Charts/Contraband/Contraband.js
+++ b/frontend/src/Components/Charts/Contraband/Contraband.js
@@ -14,7 +14,7 @@ import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // State
-import useDataset, { AGENCY_DETAILS, CONTRABAND_HIT_RATE } from '../../../Hooks/useDataset';
+import useDataset, { CONTRABAND_HIT_RATE } from '../../../Hooks/useDataset';
 
 // Children
 import { P, WEIGHTS } from '../../../styles/StyledComponents/Typography';
@@ -32,7 +32,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, agencyName, showCompare } = props;
 
   const officerId = useOfficerId();
   const [chartState] = useDataset(agencyId, CONTRABAND_HIT_RATE);
@@ -510,7 +510,7 @@ function Contraband(props) {
   const getBarChartModalSubHeading = (title) => `${title} ${subjectObserving()}.`;
 
   const getBarChartModalHeading = (title) => {
-    let subject = chartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -577,7 +577,7 @@ function Contraband(props) {
           <NewModal
             tableHeader='Contraband "Hit Rate"'
             tableSubheader="Shows what number of searches led to the discovery of illegal items by race/ethnicity."
-            agencyName={chartState.data[AGENCY_DETAILS].name}
+            agencyName={agencyName}
             tableData={contrabandData.tableData}
             csvData={contrabandData.csvData}
             columns={CONTRABAND_TABLE_COLUMNS}
@@ -598,7 +598,7 @@ function Contraband(props) {
                 tableSubheader: getBarChartModalSubHeading(
                   'Shows what percentage of searches led to the discovery of illegal items by race/ethnicity'
                 ),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getBarChartModalHeading('Contraband "Hit Rate"'),
               }}
             />
@@ -622,7 +622,7 @@ function Contraband(props) {
         <NewModal
           tableHeader='Contraband "Hit Rate" Grouped By Stop Purpose'
           tableSubheader="Shows what number of searches led to the discovery of illegal items by race/ethnicity and original stop purpose."
-          agencyName={chartState.data[AGENCY_DETAILS].name}
+          agencyName={agencyName}
           tableData={contrabandStopPurposeModalData.tableData}
           csvData={contrabandStopPurposeModalData.csvData}
           columns={CONTRABAND_TABLE_COLUMNS}
@@ -652,7 +652,7 @@ function Contraband(props) {
                 tableSubheader: getBarChartModalSubHeading(
                   'Shows what number of searches led to the discovery of illegal items by race/ethnicity and original stop purpose'
                 ),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getBarChartModalHeading(
                   'Contraband "Hit Rate" Grouped By Stop Purpose'
                 ),
@@ -674,7 +674,7 @@ function Contraband(props) {
           <NewModal
             tableHeader='Contraband "Hit Rate" by type'
             tableSubheader="Shows what number of searches discovered specific types of illegal items."
-            agencyName={chartState.data[AGENCY_DETAILS].name}
+            agencyName={agencyName}
             tableData={contrabandTypesData.tableData}
             csvData={contrabandTypesData.csvData}
             columns={CONTRABAND_TYPES_TABLE_COLUMNS}
@@ -695,7 +695,7 @@ function Contraband(props) {
                 tableSubheader: getBarChartModalSubHeading(
                   'Shows what number of searches discovered specific types of illegal items'
                 ),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getBarChartModalHeading('Contraband "Hit Rate" by type'),
               }}
             />
@@ -722,7 +722,7 @@ function Contraband(props) {
         <NewModal
           tableHeader='Contraband "Hit Rate" by Type grouped by Stop Purpose'
           tableSubheader="Shows the specific types of illegal items discovered in searches by race and initial stop type."
-          agencyName={chartState.data[AGENCY_DETAILS].name}
+          agencyName={agencyName}
           tableData={groupedContrabandStopPurposeModalData.tableData}
           csvData={groupedContrabandStopPurposeModalData.csvData}
           columns={CONTRABAND_TABLE_COLUMNS}
@@ -780,7 +780,7 @@ function Contraband(props) {
                 tableSubheader: getBarChartModalSubHeading(
                   'Shows the specific types of illegal items discovered in searches by race and initial stop type'
                 ),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getBarChartModalHeading(
                   'Contraband "Hit Rate" by Type grouped by Safety Violation'
                 ),
@@ -804,7 +804,7 @@ function Contraband(props) {
                 tableSubheader: getBarChartModalSubHeading(
                   'Shows the specific types of illegal items discovered in searches by race and initial stop type'
                 ),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getBarChartModalHeading(
                   'Contraband "Hit Rate" by Type grouped by Regulatory/Equipment'
                 ),
@@ -830,7 +830,7 @@ function Contraband(props) {
                 tableSubheader: getBarChartModalSubHeading(
                   'Shows the specific types of illegal items discovered in searches by race and initial stop type'
                 ),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getBarChartModalHeading(
                   'Contraband "Hit Rate" by Type grouped by Other'
                 ),
diff --git a/frontend/src/Components/Charts/Overview/Overview.js b/frontend/src/Components/Charts/Overview/Overview.js
index 301d49d8..f727e6cd 100644
--- a/frontend/src/Components/Charts/Overview/Overview.js
+++ b/frontend/src/Components/Charts/Overview/Overview.js
@@ -35,7 +35,7 @@ import { pieChartConfig, pieChartLabels } from '../../../util/setChartColors';
 import useYearSet from '../../../Hooks/useYearSet';
 
 function Overview(props) {
-  const { agencyId } = props;
+  const { agencyId, agencyName } = props;
   const history = useHistory();
   const match = useRouteMatch();
   const officerId = useOfficerId();
@@ -131,7 +131,7 @@ function Overview(props) {
   }
 
   const pieChartTitle = (chartTitle) => {
-    let subject = chartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -172,10 +172,7 @@ function Overview(props) {
     setYear(y);
   };
 
-  const getPageTitleForShare = () => {
-    const agencyName = chartState.data[AGENCY_DETAILS].name;
-    return `Traffic Stop statistics for ${agencyName}`;
-  };
+  const getPageTitleForShare = () => `Traffic Stop statistics for ${agencyName}`;
 
   const useOfForcePieChartCopy = () => {
     if (officerId) {
@@ -224,7 +221,7 @@ function Overview(props) {
                 tableSubheader: `This data reflects the race/ethnic composition based on the most recent census data.
             While it can be used for general comparative purposes, the actual driving population may
             vary significantly from these figures.`,
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: pieChartTitle('Census Demographics'),
               }}
             />
@@ -249,7 +246,7 @@ function Overview(props) {
                 tableSubheader: getChartModalSubHeading(
                   'Shows the race/ethnic composition of drivers stopped'
                 ),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: pieChartTitle('Traffic Stops'),
               }}
             />
@@ -276,7 +273,7 @@ function Overview(props) {
                 tableSubheader: getChartModalSubHeading(
                   'Shows the race/ethnic composition of drivers searched'
                 ),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: pieChartTitle('Searches'),
               }}
             />
@@ -297,7 +294,7 @@ function Overview(props) {
               modalConfig={{
                 tableHeader: 'Use of Force',
                 tableSubheader: getOverviewSubheader(),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: pieChartTitle('Use of Force'),
               }}
             />
diff --git a/frontend/src/Components/Charts/SearchRate/SearchRate.js b/frontend/src/Components/Charts/SearchRate/SearchRate.js
index 00c203e3..3ab1ab37 100644
--- a/frontend/src/Components/Charts/SearchRate/SearchRate.js
+++ b/frontend/src/Components/Charts/SearchRate/SearchRate.js
@@ -3,7 +3,7 @@ import SearchRateStyled from './SearchRate.styled';
 import * as S from '../ChartSections/ChartsCommon.styled';
 
 // Data
-import useDataset, { AGENCY_DETAILS, LIKELIHOOD_OF_SEARCH } from '../../../Hooks/useDataset';
+import useDataset, { LIKELIHOOD_OF_SEARCH } from '../../../Hooks/useDataset';
 
 // Hooks
 import useOfficerId from '../../../Hooks/useOfficerId';
@@ -21,7 +21,7 @@ import axios from '../../../Services/Axios';
 import HorizontalBarChart from '../../NewCharts/HorizontalBarChart';
 
 function SearchRate(props) {
-  const { agencyId, showCompare } = props;
+  const { agencyId, agencyName, showCompare } = props;
   const officerId = useOfficerId();
 
   const [chartState] = useDataset(agencyId, LIKELIHOOD_OF_SEARCH);
@@ -83,7 +83,7 @@ function SearchRate(props) {
                       purposes ${subjectObserving()}.`;
 
   const getBarChartModalHeading = (title) => {
-    let subject = chartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -126,7 +126,7 @@ function SearchRate(props) {
                 modalConfig={{
                   tableHeader: 'Likelihood of Search',
                   tableSubheader: getBarChartModalSubHeading(),
-                  agencyName: chartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: getBarChartModalHeading('Likelihood of Search'),
                 }}
               />
diff --git a/frontend/src/Components/Charts/Searches/Searches.js b/frontend/src/Components/Charts/Searches/Searches.js
index 877bf397..ea20ecc9 100644
--- a/frontend/src/Components/Charts/Searches/Searches.js
+++ b/frontend/src/Components/Charts/Searches/Searches.js
@@ -6,12 +6,7 @@ import * as S from '../ChartSections/ChartsCommon.styled';
 import { SEARCH_TYPE_DEFAULT, SEARCH_TYPES } from '../chartUtils';
 
 // State
-import useDataset, {
-  AGENCY_DETAILS,
-  SEARCHES,
-  SEARCHES_BY_TYPE,
-  STOPS,
-} from '../../../Hooks/useDataset';
+import useDataset, { SEARCHES, SEARCHES_BY_TYPE, STOPS } from '../../../Hooks/useDataset';
 
 // Hooks
 import useMetaTags from '../../../Hooks/useMetaTags';
@@ -30,13 +25,12 @@ import LineChart from '../../NewCharts/LineChart';
 import axios from '../../../Services/Axios';
 
 function Searches(props) {
-  const { agencyId } = props;
+  const { agencyId, agencyName } = props;
 
   const officerId = useOfficerId();
 
   useDataset(agencyId, STOPS);
   useDataset(agencyId, SEARCHES);
-  const [chartState] = useDataset(agencyId, SEARCHES_BY_TYPE);
 
   useEffect(() => {
     if (window.location.hash) {
@@ -140,7 +134,7 @@ function Searches(props) {
   };
 
   const getLineChartModalHeading = (title, showStopPurpose = false) => {
-    let subject = chartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -194,7 +188,7 @@ function Searches(props) {
                   tableSubheader: getLineChartModalSubHeading(
                     'Shows the percent of stops that led to searches, broken down by race/ethnicity'
                   ),
-                  agencyName: chartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: getLineChartModalHeading('Searches By Percentage', false),
                 }}
               />
@@ -228,7 +222,7 @@ function Searches(props) {
                   tableSubheader: getLineChartModalSubHeading(
                     `Shows the number of searches performed ${subjectObserving()}, broken down by search type and race / ethnicity`
                   ),
-                  agencyName: chartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: getLineChartModalHeading('Searches By Count', true),
                 }}
               />
diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
index 69e57578..5df94e71 100644
--- a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
+++ b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
@@ -24,7 +24,7 @@ import {
 } from '../chartUtils';
 
 // State
-import useDataset, { STOPS_BY_REASON, STOPS, AGENCY_DETAILS } from '../../../Hooks/useDataset';
+import useDataset, { STOPS_BY_REASON, STOPS } from '../../../Hooks/useDataset';
 
 // Elements
 import { P, WEIGHTS } from '../../../styles/StyledComponents/Typography';
@@ -50,7 +50,7 @@ import { pieChartConfig, pieChartLabels, pieColors } from '../../../util/setChar
 import VerticalBarChart from '../../NewCharts/VerticalBarChart';
 
 function TrafficStops(props) {
-  const { agencyId } = props;
+  const { agencyId, agencyName } = props;
 
   const theme = useTheme();
   const officerId = useOfficerId();
@@ -615,7 +615,7 @@ function TrafficStops(props) {
   };
 
   const pieChartTitle = () => {
-    let subject = stopsChartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -630,7 +630,7 @@ function TrafficStops(props) {
   };
 
   const stopPurposeGroupPieChartTitle = () => {
-    let subject = stopsChartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -642,7 +642,7 @@ function TrafficStops(props) {
   };
 
   const getPieChartModalHeading = (stopPurpose) => {
-    let subject = stopsChartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -665,7 +665,7 @@ function TrafficStops(props) {
   };
 
   const getLineChartModalHeading = (title, showStopPurpose = false) => {
-    let subject = stopsChartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -682,7 +682,7 @@ function TrafficStops(props) {
   const formatTooltipValue = (ctx) => `${ctx.dataset.label}: ${(ctx.raw * 100).toFixed(2)}%`;
 
   const stopsByPercentageModalTitle = () => {
-    let subject = stopsChartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -724,7 +724,7 @@ function TrafficStops(props) {
               modalConfig={{
                 tableHeader: 'Traffic Stops By Percentage',
                 tableSubheader: `Shows the race/ethnic composition of drivers stopped ${subjectObserving()} over time.`,
-                agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: stopsByPercentageModalTitle(),
               }}
             />
@@ -742,7 +742,7 @@ function TrafficStops(props) {
                     'Shows the race/ethnic composition of drivers stopped',
                     year
                   ),
-                  agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: pieChartTitle(),
                 }}
               />
@@ -780,7 +780,7 @@ function TrafficStops(props) {
                   tableSubheader: getLineChartModalSubHeading(
                     'Shows the number of traffics stops broken down by purpose and race / ethnicity'
                   ),
-                  agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: getLineChartModalHeading('Traffic Stops By Count', true),
                 }}
               />
@@ -820,7 +820,7 @@ function TrafficStops(props) {
         <NewModal
           tableHeader="Traffic Stops By Stop Purpose"
           tableSubheader="Shows the number of traffics stops broken down by purpose and race / ethnicity."
-          agencyName={stopsChartState.data[AGENCY_DETAILS].name}
+          agencyName={agencyName}
           tableData={stopPurposeModalData.tableData}
           csvData={stopPurposeModalData.csvData}
           columns={STOP_PURPOSE_TABLE_COLUMNS}
@@ -841,7 +841,7 @@ function TrafficStops(props) {
                 tableSubheader: getLineChartModalSubHeading(
                   'Shows the number of traffics stops broken down by purpose and race / ethnicity'
                 ),
-                agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getLineChartModalHeading('Traffic Stops By Group'),
               }}
             />
@@ -858,7 +858,7 @@ function TrafficStops(props) {
                     'Shows the stop purpose and race/ethnic composition of drivers stopped',
                     groupedStopYear
                   ),
-                  agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: stopPurposeGroupPieChartTitle(),
                 }}
               />
@@ -887,7 +887,7 @@ function TrafficStops(props) {
         <NewModal
           tableHeader="Traffic Stops By Stop Purpose and Race Count"
           tableSubheader="Shows the number of traffics stops broken down by purpose and race / ethnicity"
-          agencyName={stopsChartState.data[AGENCY_DETAILS].name}
+          agencyName={agencyName}
           tableData={groupedStopPurposeModalData.tableData}
           csvData={groupedStopPurposeModalData.csvData}
           columns={GROUPED_STOP_PURPOSE_TABLE_COLUMNS}
@@ -938,7 +938,7 @@ function TrafficStops(props) {
                 tableSubheader: getLineChartModalSubHeading(
                   'Shows the number of traffics stops broken down by purpose and race / ethnicity'
                 ),
-                agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getLineChartModalHeading('Traffic Stops Grouped By Safety Violation'),
               }}
             />
@@ -957,7 +957,7 @@ function TrafficStops(props) {
                 tableSubheader: getLineChartModalSubHeading(
                   'Shows the number of traffics stops broken down by purpose and race / ethnicity'
                 ),
-                agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getLineChartModalHeading(
                   'Traffic Stops Grouped By Regulatory/Equipment'
                 ),
@@ -980,7 +980,7 @@ function TrafficStops(props) {
                 tableSubheader: getLineChartModalSubHeading(
                   'Shows the number of traffics stops broken down by purpose and race / ethnicity'
                 ),
-                agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: getLineChartModalHeading('Traffic Stops Grouped By Other'),
               }}
             />
@@ -1007,7 +1007,7 @@ function TrafficStops(props) {
                   tableSubheader: getPieChartModalSubHeading(
                     'Shows the number of traffics stops broken down by purpose and race / ethnicity'
                   ),
-                  agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: getPieChartModalHeading('Safety Violation'),
                 }}
               />
@@ -1025,7 +1025,7 @@ function TrafficStops(props) {
                   tableSubheader: getPieChartModalSubHeading(
                     'Shows the number of traffics stops broken down by purpose and race / ethnicity'
                   ),
-                  agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: getPieChartModalHeading('Regulatory/Equipment'),
                 }}
               />
@@ -1043,7 +1043,7 @@ function TrafficStops(props) {
                   tableSubheader: getPieChartModalSubHeading(
                     'Shows the number of traffics stops broken down by purpose and race / ethnicity'
                   ),
-                  agencyName: stopsChartState.data[AGENCY_DETAILS].name,
+                  agencyName,
                   chartTitle: getPieChartModalHeading('Other'),
                 }}
               />
diff --git a/frontend/src/Components/Charts/UseOfForce/UseOfForce.js b/frontend/src/Components/Charts/UseOfForce/UseOfForce.js
index 413cd08c..8bee8485 100644
--- a/frontend/src/Components/Charts/UseOfForce/UseOfForce.js
+++ b/frontend/src/Components/Charts/UseOfForce/UseOfForce.js
@@ -12,7 +12,7 @@ import {
 } from '../chartUtils';
 
 // State
-import useDataset, { AGENCY_DETAILS, USE_OF_FORCE } from '../../../Hooks/useDataset';
+import useDataset, { USE_OF_FORCE } from '../../../Hooks/useDataset';
 
 // Hooks
 import useMetaTags from '../../../Hooks/useMetaTags';
@@ -29,7 +29,7 @@ import VerticalBarChart from '../../NewCharts/VerticalBarChart';
 import axios from '../../../Services/Axios';
 
 function UseOfForce(props) {
-  const { agencyId, showCompare } = props;
+  const { agencyId, agencyName, showCompare } = props;
   const officerId = useOfficerId();
 
   const [chartState] = useDataset(agencyId, USE_OF_FORCE);
@@ -122,7 +122,7 @@ function UseOfForce(props) {
   };
 
   const chartModalTitle = (displayYear = true) => {
-    let subject = chartState.data[AGENCY_DETAILS].name;
+    let subject = agencyName;
     if (officerId) {
       subject = `Officer ${officerId}`;
     }
@@ -160,7 +160,7 @@ function UseOfForce(props) {
             modalConfig={{
               tableHeader: 'Use of Force',
               tableSubheader: getChartModalSubHeading(false),
-              agencyName: chartState.data[AGENCY_DETAILS].name,
+              agencyName,
               chartTitle: chartModalTitle(false),
             }}
           />
@@ -174,7 +174,7 @@ function UseOfForce(props) {
               modalConfig={{
                 tableHeader: 'Use of Force',
                 tableSubheader: getChartModalSubHeading(),
-                agencyName: chartState.data[AGENCY_DETAILS].name,
+                agencyName,
                 chartTitle: chartModalTitle(),
               }}
             />