From 5f0a03818bd472207435f255e8ae570e21bf74ca Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Mon, 22 Nov 2021 08:10:42 -0800 Subject: [PATCH] Add basic nominatum - this commit has errors --- client/package-lock.json | 124 +++++++++++++++++- client/package.json | 2 + client/src/components/J40Map.tsx | 36 ++++- client/src/components/MapSearch/MapSearch.tsx | 20 ++- client/src/components/layout.tsx | 32 +++-- 5 files changed, 186 insertions(+), 28 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 80b606e3..ac8c2886 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4814,12 +4814,18 @@ "dev": true }, "axios": { - "version": "0.21.4", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", - "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", - "dev": true, + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz", + "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==", "requires": { - "follow-redirects": "^1.14.0" + "follow-redirects": "^1.14.4" + }, + "dependencies": { + "follow-redirects": { + "version": "1.14.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz", + "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==" + } } }, "axobject-query": { @@ -5214,6 +5220,11 @@ "integrity": "sha512-SWg5wFIShYffEmJpI6LgbL8/3Dqhku7xI1oEiy6FroP9DbcZlG0ZDjxvPdP9t7hTGW40IpIcC6zVoGT1oxjOuA==", "dev": true }, + "big-integer": { + "version": "1.6.51", + "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz", + "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==" + }, "big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -5385,6 +5396,21 @@ "fill-range": "^7.0.1" } }, + "broadcast-channel": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", + "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", + "requires": { + "@babel/runtime": "^7.7.2", + "detect-node": "^2.1.0", + "js-sha3": "0.8.0", + "microseconds": "0.2.0", + "nano-time": "1.0.0", + "oblivious-set": "1.0.0", + "rimraf": "3.0.2", + "unload": "2.2.0" + } + }, "brorand": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", @@ -6572,6 +6598,15 @@ "type-fest": "^0.20.2" }, "dependencies": { + "axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "dev": true, + "requires": { + "follow-redirects": "^1.14.0" + } + }, "type-fest": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", @@ -7777,8 +7812,7 @@ "detect-node": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", - "dev": true + "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" }, "detect-port": { "version": "1.3.0", @@ -10480,6 +10514,15 @@ "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true }, + "axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "dev": true, + "requires": { + "follow-redirects": "^1.14.0" + } + }, "debug": { "version": "3.2.7", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", @@ -14875,6 +14918,11 @@ "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==", "dev": true }, + "js-sha3": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", + "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" + }, "js-string-escape": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz", @@ -15767,6 +15815,15 @@ "repeat-string": "^1.0.0" } }, + "match-sorter": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz", + "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==", + "requires": { + "@babel/runtime": "^7.12.5", + "remove-accents": "0.4.2" + } + }, "matches-selector": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.2.0.tgz", @@ -16175,6 +16232,11 @@ "picomatch": "^2.2.3" } }, + "microseconds": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", + "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" + }, "miller-rabin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz", @@ -16525,6 +16587,14 @@ "stylis": "^4.0.6" } }, + "nano-time": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", + "integrity": "sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=", + "requires": { + "big-integer": "^1.6.16" + } + }, "nanoid": { "version": "3.1.23", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz", @@ -16935,6 +17005,11 @@ "es-abstract": "^1.18.2" } }, + "oblivious-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", + "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" + }, "obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -18800,6 +18875,16 @@ } } }, + "react-query": { + "version": "3.33.1", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.33.1.tgz", + "integrity": "sha512-RtvQKhD4sJkoAGbyFpLmftGezz1KL19SeGdmjIOLUulyPTZuhcn3gemee96yjEiBk/9LFB5CuSiqywZY20Qj5Q==", + "requires": { + "@babel/runtime": "^7.5.5", + "broadcast-channel": "^3.4.1", + "match-sorter": "^6.0.2" + } + }, "react-refresh": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", @@ -19434,6 +19519,11 @@ "xtend": "^4.0.1" } }, + "remove-accents": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz", + "integrity": "sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=" + }, "remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", @@ -22311,6 +22401,15 @@ } } }, + "unload": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", + "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", + "requires": { + "@babel/runtime": "^7.6.2", + "detect-node": "^2.0.4" + } + }, "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", @@ -22787,6 +22886,17 @@ "lodash": "^4.17.21", "minimist": "^1.2.5", "rxjs": "^6.6.3" + }, + "dependencies": { + "axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "dev": true, + "requires": { + "follow-redirects": "^1.14.0" + } + } } }, "walker": { diff --git a/client/package.json b/client/package.json index b8587e08..5d5a2749 100644 --- a/client/package.json +++ b/client/package.json @@ -76,6 +76,7 @@ "@sentry/gatsby": "^6.13.2", "@trussworks/react-uswds": "^2.0.0", "@turf/bbox": "^6.5.0", + "axios": "^0.24.0", "chroma-js": "^2.1.2", "d3-ease": "^3.0.1", "gatsby-plugin-env-variables": "^2.1.0", @@ -90,6 +91,7 @@ "react-helmet": "^6.1.0", "react-intl": "^5.20.4", "react-map-gl": "^6.1.16", + "react-query": "^3.33.1", "react-use": "^17.3.1", "uswds": "^2.10.3" }, diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index f0847071..fcb1a634 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -17,21 +17,23 @@ import * as d3 from 'd3-ease'; import {isMobile} from 'react-device-detect'; import {Grid} from '@trussworks/react-uswds'; import {useWindowSize} from 'react-use'; +import {useQuery} from 'react-query'; +import axios from 'axios'; // Contexts: import {useFlags} from '../contexts/FlagContext'; // Components: -import TerritoryFocusControl from './territoryFocusControl'; -import MapInfoPanel from './mapInfoPanel'; import AreaDetail from './AreaDetail'; +import MapInfoPanel from './mapInfoPanel'; +import MapSearch from './MapSearch'; +import TerritoryFocusControl from './territoryFocusControl'; // Styles and constants import {makeMapStyle} from '../data/mapStyle'; import 'maplibre-gl/dist/maplibre-gl.css'; import * as constants from '../data/constants'; import * as styles from './J40Map.module.scss'; -import MapSearch from './MapSearch'; declare global { @@ -53,6 +55,15 @@ export interface IDetailViewInterface { properties: constants.J40Properties, }; +const useSearchService = (searchTerm: string) => { + return useQuery('nominatumData', async () =>{ + const {data} = await axios.get(`https://nominatim.openstreetmap.org/search?q=${searchTerm}&format=json`); + return data; + }, + ); +}; + + const J40Map = ({location}: IJ40Interface) => { // Hash portion of URL is of the form #zoom/lat/lng const [zoom, lat, lng] = location.hash.slice(1).split('/'); @@ -74,8 +85,18 @@ const J40Map = ({location}: IJ40Interface) => { const selectedFeatureId = (selectedFeature && selectedFeature.id) || ''; const filter = useMemo(() => ['in', constants.GEOID_PROPERTY, selectedFeatureId], [selectedFeature]); + const [searchTerm, setSearchTerm] = useState(''); + + const {data, error, isFetching, isLoading} = useSearchService(searchTerm); + + if (isLoading) console.log('Loading...'); + else if (isFetching) console.log('Fetching...'); + else if (error) console.log('Error: ', error); + else console.log('search results: ', data); const onClick = (event: MapEvent) => { + console.log('map onclick: ', event); + const feature = event.features && event.features[0]; if (feature) { const [minLng, minLat, maxLng, maxLat] = bbox(feature); @@ -135,6 +156,13 @@ const J40Map = ({location}: IJ40Interface) => { }); }; + const onSearch = (event: React.FormEvent) => { + event.preventDefault(); + const searchTermCurrent = event.currentTarget.elements.search.value; + console.log(searchTerm); + if (searchTermCurrent != searchTerm) setSearchTerm(searchTermCurrent); + }; + const onClickTerritoryFocusButton = (event: MouseEvent) => { event.stopPropagation(); const buttonID = event.target && (event.target as HTMLElement).id; @@ -261,7 +289,7 @@ const J40Map = ({location}: IJ40Interface) => { {geolocationInProgress ?
Geolocation in progress...
: ''} {'fs' in flags ? :'' } - + diff --git a/client/src/components/MapSearch/MapSearch.tsx b/client/src/components/MapSearch/MapSearch.tsx index a2680b8e..323bda3d 100644 --- a/client/src/components/MapSearch/MapSearch.tsx +++ b/client/src/components/MapSearch/MapSearch.tsx @@ -1,14 +1,24 @@ import React from 'react'; import {Search} from '@trussworks/react-uswds'; -const onSearch = (event: React.FormEvent) => { - event.preventDefault(); - console.log('you searched!'); +interface IMapSearch { + onSearch(e:React.FormEvent): void & React.FormEventHandler; + // onSearch(e:React.FormEvent): void +} + +const onClickHandler = (e: React.MouseEvent) => { + console.log('search on click:', e); + // Some how stop the map from doing + e.stopPropagation(); }; -const MapSearch = () => { +const MapSearch = ({onSearch}:IMapSearch) => { return ( - onSearch(e)} /> + onClickHandler(e)} + placeholder="Enter in something (TBD)" + size="small" + onSubmit={(e) => onSearch(e)} /> ); }; diff --git a/client/src/components/layout.tsx b/client/src/components/layout.tsx index 911e3ae3..781859e3 100644 --- a/client/src/components/layout.tsx +++ b/client/src/components/layout.tsx @@ -1,16 +1,21 @@ import React, {ReactNode} from 'react'; -import J40Header from './J40Header'; -import J40Footer from './J40Footer'; -import {URLFlagProvider} from '../contexts/FlagContext'; import {Helmet} from 'react-helmet'; -import SurveyFab from './SurveyFab'; +import {QueryClient, QueryClientProvider} from 'react-query'; +import {ReactQueryDevtools} from 'react-query/devtools'; +import {URLFlagProvider} from '../contexts/FlagContext'; + +import J40Footer from './J40Footer'; +import J40Header from './J40Header'; +import SurveyFab from './SurveyFab'; interface ILayoutProps { children: ReactNode, location: Location, title: string, } +const queryClient = new QueryClient(); + const Layout = ({children, location, title}: ILayoutProps) => { // @ts-ignore return ( @@ -27,14 +32,17 @@ const Layout = ({children, location, title}: ILayoutProps) => { - - -
- {children} - -
- - + + + +
+ {children} + +
+ + + + ); };