consolidate meta tags to the agency data component (#294)

Co-authored-by: Simon Kagwi <[email protected]>

Author: Afani97

frontend/src/Components/AgencyData/AgencyData.js

@@ -17,9 +17,13 @@ import ChartRoutes from '../Charts/ChartRoutes';
 import { CompareAlertBox } from '../Elements/Alert/Alert';
 import { YEARS_DEFAULT } from '../Charts/chartUtils';
 import axios from '../../Services/Axios';
+import useOfficerId from '../../Hooks/useOfficerId';
+import MetaTags from '../Charts/ChartSections/MetaTags';
 
 function AgencyData(props) {
   let { agencyId } = useParams();
+  const officerId = useOfficerId();
+
   if (props.agencyId) {
     agencyId = props.agencyId;
   }
@@ -33,6 +37,9 @@ function AgencyData(props) {
   const [year, setYear] = useState(YEARS_DEFAULT);
   const [yearIdx, setYearIdx] = useState(null);
 
+  const _getEntityReference = () =>
+    officerId ? `Officer ${officerId}` : chartState?.data[AGENCY_DETAILS]?.name;
+
   useEffect(() => {
     if (chartState.data[AGENCY_DETAILS]) setSidebarOpen(true);
   }, [chartState.data[AGENCY_DETAILS]]);
@@ -59,6 +66,7 @@ function AgencyData(props) {
 
   return (
     <S.AgencyData data-testid="AgencyData" {...props}>
+      <MetaTags entityReference={_getEntityReference()} />
       {props.showCompare && !props.agencyId && <CompareAlertBox />}
       <AgencyHeader
         agencyHeaderOpen={agencyHeaderOpen}

frontend/src/Components/Charts/Arrest/Arrests.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import ArrestsStyled from './Arrests.styles';
 
 // Hooks
-import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // Children
@@ -22,7 +21,6 @@ function Arrests(props) {
   const [togglePercentageOfStops, setTogglePercentageOfStops] = useState(true);
   const [togglePercentageOfSearches, setTogglePercentageOfSearches] = useState(true);
 
-  const renderMetaTags = useMetaTags();
   const [renderTableModal] = useTableModal();
 
   useEffect(() => {
@@ -59,7 +57,6 @@ function Arrests(props) {
 
   return (
     <ArrestsStyled>
-      {renderMetaTags()}
       {renderTableModal()}
       <PercentageOfStops {...props} year={year} />
       <PercentageOfSearches {...props} year={year} />

frontend/src/Components/Charts/ChartSections/MetaTags.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import CopWatchLogoSolid from '../../../img/NC_copwatch_logo_solid.png';
+
+// Deps
+import { Helmet } from 'react-helmet';
+
+export default function MetaTags({ entityReference }) {
+  const _getPageTitle = () => `Stop Data for ${entityReference}`;
+  const _getUrlForShare = () => window.location.href;
+
+  return (
+    <Helmet>
+      <title>{_getPageTitle()}</title>
+      <meta property="og:title" content={`Traffic Stop Data for ${_getPageTitle()}`} />
+      <meta
+        property="og:description"
+        content={`NC Copwatch collects traffic stop data reported by policing agencies across the state. ${entityReference} has traffic stop data available for analysis at nccopwatch.org.`}
+      />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={_getUrlForShare()} />
+      <meta property="og:image" content={CopWatchLogoSolid} />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:image:alt" content="The NC CopWatch Logo" />
+      <meta property="og:image:width" content="600" />
+      <meta property="og:image:height" content="300" />
+    </Helmet>
+  );
+}

frontend/src/Components/Charts/Contraband/Contraband.js

@@ -14,7 +14,6 @@ import {
 } from '../chartUtils';
 
 // Hooks
-import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // State
@@ -48,7 +47,6 @@ function Contraband(props) {
     }
   }, []);
 
-  const renderMetaTags = useMetaTags();
   const [renderTableModal] = useTableModal();
 
   const initContrabandData = {
@@ -537,7 +535,6 @@ function Contraband(props) {
 
   return (
     <ContrabandStyled>
-      {renderMetaTags()}
       {renderTableModal()}
       <details>
         <summary style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>

frontend/src/Components/Charts/Overview/Overview.js

@@ -15,9 +15,6 @@ import {
 } from '../chartUtils';
 import * as slugs from '../../../Routes/slugs';
 
-// Hooks
-import useMetaTags from '../../../Hooks/useMetaTags';
-
 // Data
 import useDataset, {
   AGENCY_DETAILS,
@@ -59,8 +56,6 @@ function Overview(props) {
   const [searchesData, setSearchesData] = useState(initChartData);
   const [useOfForceData, setUseOfForceData] = useState(initChartData);
 
-  const renderMetaTags = useMetaTags();
-
   const subjectObserving = () => {
     if (officerId) {
       return 'by this officer';
@@ -182,7 +177,6 @@ function Overview(props) {
 
   return (
     <OverviewStyled>
-      {renderMetaTags()}
       <ChartHeader
         chartTitle="Overview"
         shareProps={{

frontend/src/Components/Charts/SearchRate/SearchRate.js

@@ -11,7 +11,6 @@ import useDataset, {
 
 // Hooks
 import useOfficerId from '../../../Hooks/useOfficerId';
-import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // Constants
@@ -43,7 +42,6 @@ function SearchRate(props) {
   const [stopRateData, setStopRateData] = useState(initStopRateData);
   const [noACSData, setNoACSData] = useState(false);
 
-  const renderMetaTags = useMetaTags();
   const [renderTableModal, { openModal }] = useTableModal();
 
   // eslint-disable-next-line no-unused-vars
@@ -198,7 +196,6 @@ function SearchRate(props) {
 
   return (
     <SearchRateStyled>
-      {renderMetaTags()}
       {renderTableModal()}
       <S.ChartSection>
         <ChartHeader

frontend/src/Components/Charts/Searches/Searches.js

@@ -14,7 +14,6 @@ import useDataset, {
 } from '../../../Hooks/useDataset';
 
 // Hooks
-import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // Elements
@@ -59,7 +58,6 @@ function Searches(props) {
   };
   const [searchCountData, setSearchCountData] = useState(initCountData);
   const [searchCountType, setSearchCountType] = useState(0);
-  const renderMetaTags = useMetaTags();
   const [renderTableModal, { openModal }] = useTableModal();
 
   // Build Searches By Percentage
@@ -167,7 +165,6 @@ function Searches(props) {
   return (
     <SearchesStyled>
       {/* Search Rate */}
-      {renderMetaTags()}
       {renderTableModal()}
       <S.ChartSection id="searches_by_percentage">
         <ChartHeader

frontend/src/Components/Charts/TrafficStops/TrafficStops.js

@@ -38,7 +38,6 @@ import useDataset, { STOPS_BY_REASON, STOPS, AGENCY_DETAILS } from '../../../Hoo
 import { P, WEIGHTS } from '../../../styles/StyledComponents/Typography';
 
 // Hooks
-import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // Children
@@ -112,7 +111,6 @@ function TrafficStops(props) {
     ],
   });
 
-  const renderMetaTags = useMetaTags();
   const [renderTableModal, { openModal }] = useTableModal();
 
   const [stopPurposeGroupsData, setStopPurposeGroups] = useState({
@@ -709,7 +707,6 @@ function TrafficStops(props) {
   return (
     <TrafficStopsStyled>
       {/* Traffic Stops by Percentage */}
-      {renderMetaTags()}
       {renderTableModal()}
       <div style={{ display: 'flex', justifyContent: 'center' }}>
         <MonthRangePicker

frontend/src/Components/Charts/UseOfForce/UseOfForce.js

@@ -16,7 +16,6 @@ import {
 import useDataset, { AGENCY_DETAILS, USE_OF_FORCE } from '../../../Hooks/useDataset';
 
 // Hooks
-import useMetaTags from '../../../Hooks/useMetaTags';
 import useTableModal from '../../../Hooks/useTableModal';
 
 // Children
@@ -50,7 +49,6 @@ function UseOfForce(props) {
     ],
   });
 
-  const renderMetaTags = useMetaTags();
   const [renderTableModal, { openModal }] = useTableModal();
 
   const subjectObserving = () => {
@@ -136,7 +134,6 @@ function UseOfForce(props) {
 
   return (
     <UseOfForceStyled>
-      {renderMetaTags()}
       {renderTableModal()}
       <S.ChartSection>
         <ChartHeader chartTitle="Use of Force" handleViewData={handleViewData} />