From 1ce124069d06444edeecbd395d37bd2535758c32 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Tue, 12 Apr 2022 14:49:57 -0400 Subject: [PATCH] Add hash to send feedback email (#1551) - detected bug with zoom/lat/lng values and created ticket 1550 - get realtime has from mapRef - pass hash to AreaDetail as prop - update tests and snapshots --- .../src/components/AreaDetail/AreaDetail.tsx | 8 +++++-- .../__snapshots__/areaDetail.test.tsx.snap | 24 ++++++++++++------- .../AreaDetail/tests/areaDetail.test.tsx | 10 ++++---- client/src/components/J40Map.tsx | 9 +++++-- client/src/components/mapInfoPanel.tsx | 5 ++-- 5 files changed, 37 insertions(+), 19 deletions(-) diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index 0e226b1f..71120adc 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -21,6 +21,7 @@ import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail_outline.svg'; interface IAreaDetailProps { properties: constants.J40Properties, + hash: string[], } /** @@ -40,7 +41,7 @@ export interface indicatorInfo { threshold?: number, } -const AreaDetail = ({properties}:IAreaDetailProps) => { +const AreaDetail = ({properties, hash}:IAreaDetailProps) => { const intl = useIntl(); // console.log the properties of the census that is selected: @@ -55,7 +56,10 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { const isCommunityFocus = score >= constants.SCORE_BOUNDARY_THRESHOLD; - const feedbackEmailSubject = `Census tract ID ${blockGroup}, ${countyName}, ${stateName}`; + const feedbackEmailSubject = hash ? ` + Census tract ID ${blockGroup}, ${countyName}, ${stateName}, ( z/lat/lon: #${hash.join('/')} ) + ` : `Census tract ID ${blockGroup}, ${countyName}, ${stateName}`; + const feedbackEmailBody = intl.formatMessage(EXPLORE_COPY.SEND_FEEDBACK.EMAIL_BODY); /** diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index 3cee6a98..b64a6dca 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -22,7 +22,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p County: - N/A + Brooklyn
  • @@ -30,7 +30,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p Territory: - N/A + New York
  • @@ -60,7 +60,9 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p - N/A + Brooklyn
  • @@ -392,7 +394,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present State: - N/A + New York
  • @@ -422,7 +424,9 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present - N/A + Brooklyn
  • @@ -2129,7 +2133,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr Territory: - N/A + New York
  • @@ -2159,7 +2163,9 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr { [constants.SCORE_PROPERTY_HIGH]: .95, [constants.GEOID_PROPERTY]: 98729374234, [constants.TOTAL_POPULATION]: 3435435, + [constants.STATE_NAME]: 'New York', + [constants.COUNTY_NAME]: 'Brooklyn', [constants.POVERTY_BELOW_200_PERCENTILE]: .19, [constants.SIDE_PANEL_STATE]: constants.SIDE_PANEL_STATE_VALUES.NATION, [constants.COUNT_OF_CATEGORIES_DISADV]: 5, [constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS]: 3, }; - + const hash = ['11.54', '36.0762', '-84.4494']; it('checks if indicators for NATION is present', () => { const {asFragment} = render( - + , ); expect(asFragment()).toMatchSnapshot(); @@ -39,7 +41,7 @@ describe('rendering of the AreaDetail', () => { const {asFragment} = render( - + , ); expect(asFragment()).toMatchSnapshot(); @@ -57,7 +59,7 @@ describe('rendering of the AreaDetail', () => { const {asFragment} = render( - + , ); expect(asFragment()).toMatchSnapshot(); diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index 3b8bb85c..b69b1732 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -102,7 +102,10 @@ export const featureURLForTilesetName = (tilesetName: string): string => { const J40Map = ({location}: IJ40Interface) => { /** * Initializes the zoom, and the map's center point (lat, lng) via the URL hash #{z}/{lat}/{long} - * where: + * where + * @TODO: These values do not update when zooming in/out. Could explain a number of cypress bugs + * reference to ticket #1550 + * * z = zoom * lat = map center's latitude * long = map center's longitude @@ -132,6 +135,7 @@ const J40Map = ({location}: IJ40Interface) => { const selectedFeatureId = (selectedFeature && selectedFeature.id) || ''; const filter = useMemo(() => ['in', constants.GEOID_PROPERTY, selectedFeatureId], [selectedFeature]); + const zoomLatLngHash = mapRef.current?.getMap()._hash._getCurrentHash(); /** * This function will return the bounding box of the current map. Comment in when needed. * { @@ -444,7 +448,7 @@ const J40Map = ({location}: IJ40Interface) => { onClose={setDetailViewData} captureScroll={true} > - + )} @@ -477,6 +481,7 @@ const J40Map = ({location}: IJ40Interface) => { className={styles.mapInfoPanel} featureProperties={detailViewData?.properties} selectedFeatureId={selectedFeature?.id} + hash={zoomLatLngHash} /> diff --git a/client/src/components/mapInfoPanel.tsx b/client/src/components/mapInfoPanel.tsx index 211f9714..1a454448 100644 --- a/client/src/components/mapInfoPanel.tsx +++ b/client/src/components/mapInfoPanel.tsx @@ -6,13 +6,14 @@ interface IMapInfoPanelProps { className: string, featureProperties: { [key:string]: string | number } | undefined, selectedFeatureId: string | number | undefined + hash: string[], } -const MapInfoPanel = ({className, featureProperties, selectedFeatureId}:IMapInfoPanelProps) => { +const MapInfoPanel = ({className, featureProperties, selectedFeatureId, hash}:IMapInfoPanelProps) => { return (
    {(featureProperties && selectedFeatureId ) ? - : + : }