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

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);
 
   /**

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:
         </span>
         <span>
-           N/A
+           Brooklyn
         </span>
       </li>
       <li>
@@ -30,7 +30,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
           Territory: 
         </span>
         <span>
-           N/A
+           New York
         </span>
       </li>
       <li>
@@ -60,7 +60,9 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
       </div>
       <a
         href="
-            mailto:Screeningtool-Support@omb.eop.gov?subject=Census tract ID 98729374234, N/A, N/A&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
+            mailto:Screeningtool-Support@omb.eop.gov?subject=
+    Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
+  &body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
     
           "
         rel="noreferrer"
@@ -384,7 +386,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
           County:
         </span>
         <span>
-           N/A
+           Brooklyn
         </span>
       </li>
       <li>
@@ -392,7 +394,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
           State: 
         </span>
         <span>
-           N/A
+           New York
         </span>
       </li>
       <li>
@@ -422,7 +424,9 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
       </div>
       <a
         href="
-            mailto:Screeningtool-Support@omb.eop.gov?subject=Census tract ID 98729374234, N/A, N/A&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
+            mailto:Screeningtool-Support@omb.eop.gov?subject=
+    Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
+  &body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
     
           "
         rel="noreferrer"
@@ -2121,7 +2125,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
           County:
         </span>
         <span>
-           N/A
+           Brooklyn
         </span>
       </li>
       <li>
@@ -2129,7 +2133,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
           Territory: 
         </span>
         <span>
-           N/A
+           New York
         </span>
       </li>
       <li>
@@ -2159,7 +2163,9 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
       </div>
       <a
         href="
-            mailto:Screeningtool-Support@omb.eop.gov?subject=Census tract ID 98729374234, N/A, N/A&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
+            mailto:Screeningtool-Support@omb.eop.gov?subject=
+    Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
+  &body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
     
           "
         rel="noreferrer"

client/src/components/AreaDetail/tests/areaDetail.test.tsx

@@ -15,17 +15,19 @@ describe('rendering of the AreaDetail', () => {
     [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(
         <LocalizedComponent>
-          <AreaDetail properties={properties}/>
+          <AreaDetail properties={properties} hash={hash}/>
         </LocalizedComponent>,
     );
     expect(asFragment()).toMatchSnapshot();
@@ -39,7 +41,7 @@ describe('rendering of the AreaDetail', () => {
 
     const {asFragment} = render(
         <LocalizedComponent>
-          <AreaDetail properties={propertiesPR}/>
+          <AreaDetail properties={propertiesPR} hash={hash}/>
         </LocalizedComponent>,
     );
     expect(asFragment()).toMatchSnapshot();
@@ -57,7 +59,7 @@ describe('rendering of the AreaDetail', () => {
 
     const {asFragment} = render(
         <LocalizedComponent>
-          <AreaDetail properties={propertiesIA}/>
+          <AreaDetail properties={propertiesIA} hash={hash}/>
         </LocalizedComponent>,
     );
     expect(asFragment()).toMatchSnapshot();

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}
             >
-              <AreaDetail properties={detailViewData.properties} />
+              <AreaDetail properties={detailViewData.properties} hash={zoomLatLngHash}/>
             </Popup>
           )}
 
@@ -477,6 +481,7 @@ const J40Map = ({location}: IJ40Interface) => {
           className={styles.mapInfoPanel}
           featureProperties={detailViewData?.properties}
           selectedFeatureId={selectedFeature?.id}
+          hash={zoomLatLngHash}
         />
       </Grid>
     </>

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 (
     <div className={className} >
       {(featureProperties && selectedFeatureId ) ?
-          <AreaDetail properties={featureProperties} /> :
+          <AreaDetail properties={featureProperties} hash={hash}/> :
           <SidePanelInfo />
       }
     </div>