Update Node to v22. (#352)

* Update Node to v22.

* Fix some JS console and eslint warnings.

Author: simonkagwi

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.17.0-bullseye-slim AS static_files
+FROM node:22.18.0-bullseye-slim AS static_files
 
 WORKDIR /code
 ENV PATH=/code/node_modules/.bin:$PATH
@@ -164,8 +164,10 @@ RUN --mount=type=cache,target=/var/cache/apt --mount=type=cache,target=/var/lib/
     # docker
     && curl https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor | tee /etc/apt/trusted.gpg.d/docker.gpg >/dev/null \
     && echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/trusted.gpg.d/docker.gpg] https://download.docker.com/linux/debian $(lsb_release -cs) stable" | tee /etc/apt/sources.list.d/docker.list > /dev/null \
-    # nodejs
-    && sh -c 'echo "deb https://deb.nodesource.com/node_18.x $(lsb_release -cs) main" > /etc/apt/sources.list.d/nodesource.list' \
+    # nodejs (https://github.com/nodesource/distributions/wiki/Repository-Manual-Installation#debian-systems)
+    && mkdir -p /etc/apt/keyrings \
+    && curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg \
+    && sh -c 'echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_22.x nodistro main" > /etc/apt/sources.list.d/nodesource.list' \
     && wget --quiet -O- https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add - \
     # PostgreSQL
     && sh -c 'echo "deb https://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list' \

docs/dev-setup.rst

@@ -6,7 +6,7 @@ Stops project. To begin you should have the following applications installed on
 your local development system:
 
 - Python 3.13
-- NodeJS >= 12.6.0
+- NodeJS >= 22
 - `Install uv <https://docs.astral.sh/uv/getting-started/installation/>`_
 - Postgres >= 16
 

frontend/src/Components/AgencyData/AgencyHeader.js

@@ -81,18 +81,16 @@ function AgencyHeader({
               )}
               <P size={SIZES[0]} color={COLORS[0]} weight={WEIGHTS[0]}>
                 {lastReportedStop()} {agencyDetails.last_reported_stop && 'on'}
-                <S.ReportedDate size={SIZES[0]} color={COLORS[0]} weight={WEIGHTS[1]}>
+                <strong>
                   {' '}
-                  <S.ReportedDate size={SIZES[0]} color={COLORS[0]} weight={WEIGHTS[1]}>
-                    {agencyDetails.last_reported_stop
-                      ? new Intl.DateTimeFormat('en-US', {
-                          year: 'numeric',
-                          month: 'short',
-                          day: 'numeric',
-                        }).format(new Date(agencyDetails.last_reported_stop))
-                      : 'Unknown'}
-                  </S.ReportedDate>
-                </S.ReportedDate>
+                  {agencyDetails.last_reported_stop
+                    ? new Intl.DateTimeFormat('en-US', {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      }).format(new Date(agencyDetails.last_reported_stop))
+                    : 'Unknown'}
+                </strong>
               </P>
             </S.EntityDetails>
             <CensusData

frontend/src/Components/AgencyData/AgencyHeader.styled.js

@@ -74,10 +74,6 @@ export const AgencyTitle = styled(H2)`
   font-size: 18px;
 `;
 
-export const ReportedDate = styled(P)`
-  display: inline;
-`;
-
 export const Other = styled(P)`
   font-size: 14px;
 `;

frontend/src/Components/AgencyData/CensusData.js

@@ -76,12 +76,10 @@ export default function CensusData({ agencyDetails, showCompareDepartments }) {
         <summary>
           <S.CensusTitleMobile>CENSUS DEMOGRAPHICS</S.CensusTitleMobile>
         </summary>
-        <p>
-          {censusData()}
-          <a href={ABOUT_SLUG}>
-            Sourced from most recent U.S. Census Bureau. See About page for more info.
-          </a>
-        </p>
+        <S.CensusRowMobile>{censusData()}</S.CensusRowMobile>
+        <a href={ABOUT_SLUG}>
+          Sourced from most recent U.S. Census Bureau. See About page for more info.
+        </a>
       </S.CensusDemographicsMobile>
     </>
   );

frontend/src/Components/AgencyData/CensusData.styled.js

@@ -65,6 +65,14 @@ export const CensusRow = styled.ul`
   }
 `;
 
+export const CensusRowMobile = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+`;
+
 export const CensusDatum = styled.li`
   display: flex;
   flex-direction: column;

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

@@ -181,6 +181,7 @@ function SearchRate(props) {
       census. A Stop Rate Ratio of 1.0 (or 100%) indicates equal stop likelihood across
       groups, while values above or below 1.0 suggest disparities. ${subjectObserving()}`;
     }
+    return '';
   };
 
   const getBarChartModalHeading = (title) => {

frontend/src/Components/NewCharts/HorizontalBarChart.js

@@ -2,7 +2,7 @@ import { Bar } from 'react-chartjs-2';
 import DataLoading from '../Charts/ChartPrimitives/DataLoading';
 import React, { useRef, useState } from 'react';
 import { usePopper } from 'react-popper';
-import { tooltipLanguage } from '../../util/tooltipLanguage';
+import tooltipLanguage from '../../util/tooltipLanguage';
 import styled from 'styled-components';
 import ChartModal from './ChartModal';
 import { EmptyMessage } from '../Charts/ChartSections/EmptyChartMessage';

frontend/src/Components/NewCharts/LineChart.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Line } from 'react-chartjs-2';
-import { tooltipLanguage } from '../../util/tooltipLanguage';
+import tooltipLanguage from '../../util/tooltipLanguage';
 import { usePopper } from 'react-popper';
 import styled from 'styled-components';
 import DataLoading from '../Charts/ChartPrimitives/DataLoading';

frontend/src/util/tooltipLanguage.js

@@ -1,4 +1,4 @@
-export const tooltipLanguage = (stopCause) => {
+const tooltipLanguage = (stopCause) => {
   const regEquip =
     'The "Regulatory and Equipment" category is comprised of: Vehicle Equipment Violations, Vehicle Regulatory Violations, Other Motor Vehicle Violations and Seat Belt Violations.';
   const definitions = {
@@ -32,3 +32,5 @@ export const tooltipLanguage = (stopCause) => {
   };
   return definitions[stopCause];
 };
+
+export default tooltipLanguage;