diff --git a/.env.example b/.env.example index 868eb762b..1219f8965 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,3 @@ DEV_URL=https://hmda-development-server.example.com MAPBOX_ACCESS_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX +ALGOLIA_PUBLIC_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX diff --git a/README.md b/README.md index bc12259c0..1a4bf29fe 100644 --- a/README.md +++ b/README.md @@ -143,8 +143,11 @@ HMDA Help requires a connection to the [HMDA Institutions API](https://github.co If your development does not require this integration, you can simply: 1. Copy `.env.example` to `.env` and edit the environment variables. - - `DEV_URL` is the URL that the frontend app will use for API requests. It should not have a trailing slash. - - `MAPBOX_ACCESS_TOKEN` is the access token provided by Mapbox.com for the app's embedded maps. CFPB's token can be found in our [GitHub Enterprise wiki](https://GHE/HMDA-Operations/hmda-devops/wiki/Mapbox-credentials). + +- `DEV_URL` is the URL that the frontend app will use for API requests. It should not have a trailing slash. +- `MAPBOX_ACCESS_TOKEN` is the access token provided by Mapbox.com for the app's embedded maps. CFPB's token can be found in our [GitHub Enterprise wiki](https://github.local/HMDA-Operations/hmda-devops/wiki/Mapbox-and-Algolia-credentials). +- `ALGOLIA_PUBLIC_KEY` is the access token required for the site's search functionality. It's also in our [wiki](https://github.local/HMDA-Operations/hmda-devops/wiki/Mapbox-and-Algolia-credentials). + 2. Run `yarn start` to start a local development server at http://localhost:3000. #### Integrating with the Filing application @@ -207,11 +210,13 @@ docker run -p 8080:8080 hmda/hmda-frontend ``` ### Build image to run in EKS Cluster + ``` cp .env.example .env gsed -i 's/^.*MAPBOX_ACCESS.*$/MAPBOX_ACCESS_TOKEN=pk.xxx/' .env docker build --build-arg DOCKER_TAG=v3.3.1 --secret id=env_vars,src=.env -t .dkr.ecr.us-east-1.amazonaws.com/hmda/hmda-frontend:v3.3.1 ``` + To build using docker-compose: ``` diff --git a/src/common/Header.jsx b/src/common/Header.jsx index 034b99413..83f76cf36 100644 --- a/src/common/Header.jsx +++ b/src/common/Header.jsx @@ -1,15 +1,15 @@ -import React, { useState, useEffect } from 'react' +import { useEffect, useState } from 'react' import { Link } from 'react-router-dom' +import { isBeta } from '../common/Beta' import BannerUSA from './BannerUSA' import { defaultLinks } from './constants/links' -import { isBeta } from '../common/Beta' -import './uswds/css/styles.css' import logo from './images/ffiec-logo.svg' +import './uswds/css/styles.css' import closeBtn from './uswds/img/usa-icons/close.svg' -import { DocSearch } from '@docsearch/react' import '@docsearch/css' +import { DocSearch } from '@docsearch/react' export const hideHeaderFooter = (path) => { const parts = path && path.split('/') @@ -159,7 +159,7 @@ const Header = ({ location: { pathname }, links = defaultLinks, ...props }) => { )} diff --git a/src/data-browser/maps/MapContainer.jsx b/src/data-browser/maps/MapContainer.jsx index 9a730036a..f25e6f2f8 100644 --- a/src/data-browser/maps/MapContainer.jsx +++ b/src/data-browser/maps/MapContainer.jsx @@ -1,40 +1,40 @@ -import mapbox from 'mapbox-gl' -import { - createContext, - useCallback, +import React, { + useState, useEffect, + useCallback, useRef, - useState, + createContext, } from 'react' import Alert from '../../common/Alert.jsx' -import { getCSV, runFetch } from '../api.js' -import fips2Shortcode from '../constants/fipsToShortcode.js' -import DatasetDocsLink from '../datasets/DatasetDocsLink.jsx' -import { FilterReports } from './FilterReports' -import { MapsController } from './MapsController' -import { MapsNavBar } from './MapsNavBar' -import { ReportSummary } from './ReportSummary' -import { fetchFilterData } from './filterUtils.jsx' -import { - addLayers, - getOrigPer1000, - makeLegend, - makeStops, - setOutline, - useBias, -} from './layerUtils.jsx' -import './mapbox.css' -import { buildPopupHTML, popup } from './popupUtils.jsx' import { geographies, - getSelectData, + variables, getValuesForVariable, + getSelectData, makeCombinedDefaultValue, parseCombinedFilter, - variables, varNameMapping, } from './selectUtils.jsx' +import { + setOutline, + getOrigPer1000, + makeLegend, + makeStops, + addLayers, + useBias, +} from './layerUtils.jsx' +import { popup, buildPopupHTML } from './popupUtils.jsx' +import { fetchFilterData } from './filterUtils.jsx' +import { runFetch, getCSV } from '../api.js' +import fips2Shortcode from '../constants/fipsToShortcode.js' +import mapbox from 'mapbox-gl' import { useReportData } from './useReportData.jsx' +import { FilterReports } from './FilterReports' +import { MapsNavBar } from './MapsNavBar' +import { MapsController } from './MapsController' +import { ReportSummary } from './ReportSummary' +import './mapbox.css' +import DatasetDocsLink from '../datasets/DatasetDocsLink.jsx' mapbox.accessToken = import.meta.env.MAPBOX_ACCESS_TOKEN @@ -184,8 +184,6 @@ const MapContainer = (props) => { const [state2022Data, setState2022Data] = useState(null) const [county2023Data, setCounty2023Data] = useState(null) const [state2023Data, setState2023Data] = useState(null) - const [county2024Data, setCounty2024Data] = useState(null) - const [state2024Data, setState2024Data] = useState(null) const [filterData, setFilterData] = useState(null) const [tableFilterData, setTableFilterData] = useState(null) @@ -223,8 +221,6 @@ const MapContainer = (props) => { return geography.value === 'state' ? state2022Data : county2022Data case '2023': return geography.value === 'state' ? state2023Data : county2023Data - case '2024': - return geography.value === 'state' ? state2024Data : county2024Data default: return null } @@ -242,8 +238,6 @@ const MapContainer = (props) => { county2022Data, state2023Data, county2023Data, - state2024Data, - county2024Data, ], ) @@ -439,21 +433,6 @@ const MapContainer = (props) => { } }, [county2023Data, selectedGeography, year]) - useEffect(() => { - if ( - !county2024Data && - selectedGeography.value === "county" && - year === "2024" - ) { - fetchQ.push(1) - runFetch("/2024/county.json").then(jsonData => { - console.log(jsonData) - setCounty2024Data(jsonData) - fetchQ.pop() - }) - } - }, [county2024Data, selectedGeography, year]) - useEffect(() => { if ( !state2018Data && @@ -538,20 +517,6 @@ const MapContainer = (props) => { } }, [selectedGeography, state2023Data, year]) - useEffect(() => { - if ( - !state2024Data && - selectedGeography.value === "state" && - year === "2024" - ) { - fetchQ.push(1) - runFetch("/2024/state.json").then(jsonData => { - setState2024Data(jsonData) - fetchQ.pop() - }) - } - }, [selectedGeography, state2024Data, year]) - useEffect(() => { setData(getBaseData(year, selectedGeography)) }, [year, getBaseData, selectedGeography]) diff --git a/vite.config.js b/vite.config.js index cebd8bfbf..948b45871 100644 --- a/vite.config.js +++ b/vite.config.js @@ -7,7 +7,7 @@ import svgr from 'vite-plugin-svgr' dotenv.config() -if (!process.env.MAPBOX_ACCESS_TOKEN) { +if (!process.env.MAPBOX_ACCESS_TOKEN || !process.env.ALGOLIA_PUBLIC_KEY) { throw new Error( ` __ __ _______ __ __ _______ _______ ______ _______ _______ _______ @@ -25,7 +25,8 @@ if (!process.env.MAPBOX_ACCESS_TOKEN) { _____| || || ||_|| || |___ | | | _ || | | | | || |_| | |_______||_______||_| |_||_______| |___| |__| |__||___| |_| |__||_______| -👉 MAPBOX_ACCESS_TOKEN environment variable is not defined. Please set it in your .env file. 👈 +👉 Both MAPBOX_ACCESS_TOKEN and ALGOLIA_PUBLIC_KEY environment variables are required. 👈 +👉 Please define them in your .env file. 👈 `, ) } @@ -39,12 +40,15 @@ export default () => { environment: 'jsdom', globals: true, include: ['src/**/__tests__/**/*.{test,spec}.{js,jsx}'], - exclude: ['oldTests/**', 'cypress/**', '**/node_modules/**'] + exclude: ['oldTests/**', 'cypress/**', '**/node_modules/**'], }, define: { 'import.meta.env.MAPBOX_ACCESS_TOKEN': JSON.stringify( process.env.MAPBOX_ACCESS_TOKEN, ), + 'import.meta.env.ALGOLIA_PUBLIC_KEY': JSON.stringify( + process.env.ALGOLIA_PUBLIC_KEY, + ), }, css: { preprocessorOptions: {