From 9d28f5a4c45733b90e1453c528afbcd6ebebfb3e Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Tue, 7 Dec 2021 12:52:50 -0500
Subject: [PATCH] Add a case if data is not present in tiles (#998)

- will check each property and display N/A if null
- update snapshot
---
 client/src/components/AreaDetail/index.tsx    | 89 +++++++++++--------
 .../__snapshots__/areaDetail.test.tsx.snap    | 70 +++++----------
 2 files changed, 78 insertions(+), 81 deletions(-)

diff --git a/client/src/components/AreaDetail/index.tsx b/client/src/components/AreaDetail/index.tsx
index 30ccc6ca..16bbbb04 100644
--- a/client/src/components/AreaDetail/index.tsx
+++ b/client/src/components/AreaDetail/index.tsx
@@ -12,24 +12,26 @@ import * as constants from '../../data/constants';
 import * as EXPLORE_COPY from '../../data/copy/explore';
 import * as METHODOLOGY_COPY from '../../data/copy/methodology';
 
-export const readablePercentile = (percentile: number) => {
-  return Math.round(percentile * 100);
+export const readablePercentile = (percentile: number | null) => {
+  return percentile ? Math.round(percentile * 100) : 'N/A';
 };
 
 // Todo: Add internationalization to superscript ticket #582
-const getSuperscriptOrdinal = (percentile: number) => {
-  const englishOrdinalRules = new Intl.PluralRules('en', {
-    type: 'ordinal',
-  });
-  const suffixes = {
-    zero: 'th',
-    one: 'st',
-    two: 'nd',
-    few: 'rd',
-    many: 'th',
-    other: 'th',
-  };
-  return suffixes[englishOrdinalRules.select(percentile)];
+const getSuperscriptOrdinal = (percentile: number | string) => {
+  if (typeof percentile === "number") {
+    const englishOrdinalRules = new Intl.PluralRules('en', {
+      type: 'ordinal',
+    });
+    const suffixes = {
+      zero: 'th',
+      one: 'st',
+      two: 'nd',
+      few: 'rd',
+      many: 'th',
+      other: 'th',
+    };
+    return suffixes[englishOrdinalRules.select(percentile)];
+  }
 };
 
 interface IAreaDetailProps {
@@ -40,11 +42,13 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
   const intl = useIntl();
   const [isCommunityFocus, setIsCommunityFocus] = React.useState<boolean>(true);
 
-  const score = properties[constants.SCORE_PROPERTY_HIGH] as number;
-  const blockGroup = properties[constants.GEOID_PROPERTY];
-  const population = properties[constants.TOTAL_POPULATION];
-  const countyName = properties[constants.COUNTY_NAME];
-  const stateName = properties[constants.STATE_NAME];
+  console.log("Area Detail properies: ", properties);
+
+  const score = properties[constants.SCORE_PROPERTY_HIGH] ? properties[constants.SCORE_PROPERTY_HIGH] as number : 0;
+  const blockGroup = properties[constants.GEOID_PROPERTY] ? properties[constants.GEOID_PROPERTY] : "N/A";
+  const population = properties[constants.TOTAL_POPULATION] ? properties[constants.TOTAL_POPULATION] : "N/A";
+  const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A";
+  const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A";
 
   useEffect(() => {
     if (score >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
@@ -65,77 +69,92 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
   const areaMedianIncome:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.AREA_MEDIAN_INCOME),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.AREA_MEDIAN_INCOME),
-    value: properties[constants.AREA_MEDIAN_INCOME_PERCENTILE],
+    value: properties[constants.AREA_MEDIAN_INCOME_PERCENTILE] ?
+    properties[constants.AREA_MEDIAN_INCOME_PERCENTILE] : null,
   };
   const eduInfo:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EDUCATION),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EDUCATION),
-    value: properties[constants.EDUCATION_PROPERTY_PERCENTILE],
+    value: properties[constants.EDUCATION_PROPERTY_PERCENTILE] ?
+    properties[constants.EDUCATION_PROPERTY_PERCENTILE] : null,
   };
   const poverty:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
-    value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
+    value: properties[constants.POVERTY_PROPERTY_PERCENTILE] ?
+    properties[constants.POVERTY_PROPERTY_PERCENTILE] : null,
   };
   const asthma:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
-    value: properties[constants.ASTHMA_PERCENTILE],
+    value: properties[constants.ASTHMA_PERCENTILE] ?
+    properties[constants.ASTHMA_PERCENTILE] : null,
   };
   const diabetes:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
-    value: properties[constants.DIABETES_PERCENTILE],
+    value: properties[constants.DIABETES_PERCENTILE] ?
+    properties[constants.DIABETES_PERCENTILE] : null,
   };
   const dieselPartMatter:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
-    value: properties[constants.DIESEL_MATTER_PERCENTILE],
+    value: properties[constants.DIESEL_MATTER_PERCENTILE] ?
+    properties[constants.DIESEL_MATTER_PERCENTILE] : null,
   };
   const lifeExpect:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LIFE_EXPECT),
-    value: properties[constants.LIFE_PERCENTILE],
+    value: properties[constants.LIFE_PERCENTILE] ?
+    properties[constants.LIFE_PERCENTILE] : null,
   };
   const energyBurden:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
-    value: properties[constants.ENERGY_PERCENTILE],
+    value: properties[constants.ENERGY_PERCENTILE] ?
+    properties[constants.ENERGY_PERCENTILE] : null,
   };
   const pm25:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5),
-    value: properties[constants.PM25_PERCENTILE],
+    value: properties[constants.PM25_PERCENTILE] ?
+    properties[constants.PM25_PERCENTILE] : null,
   };
   const leadPaint:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
-    value: properties[constants.LEAD_PAINT_PERCENTILE],
+    value: properties[constants.LEAD_PAINT_PERCENTILE] ?
+    properties[constants.LEAD_PAINT_PERCENTILE] : null,
   };
   const trafficVolume:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
-    value: properties[constants.TRAFFIC_PERCENTILE],
+    value: properties[constants.TRAFFIC_PERCENTILE] ?
+    properties[constants.TRAFFIC_PERCENTILE] : null,
   };
   const wasteWater:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
-    value: properties[constants.WASTEWATER_PERCENTILE],
+    value: properties[constants.WASTEWATER_PERCENTILE] ?
+    properties[constants.WASTEWATER_PERCENTILE] : null,
   };
   const femaRisk:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FEMA_RISK),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FEMA_RISK),
-    value: properties[constants.FEMA_PERCENTILE],
+    value: properties[constants.FEMA_PERCENTILE] ?
+    properties[constants.FEMA_PERCENTILE] : null,
   };
   const heartDisease:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
-    value: properties[constants.HEART_PERCENTILE],
+    value: properties[constants.HEART_PERCENTILE] ?
+    properties[constants.HEART_PERCENTILE] : null,
   };
   const houseBurden:indicatorInfo = {
     label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
     description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
-    value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE],
+    value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] ?
+    properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
   };
 
 
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 0879df38..0686d46b 100644
--- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
+++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           County:
         </span>
         <span>
-           undefined
+           N/A
         </span>
       </li>
       <li>
@@ -27,7 +27,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           State: 
         </span>
         <span>
-           undefined
+           N/A
         </span>
       </li>
       <li>
@@ -134,11 +134,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Asthma
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -156,11 +154,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Diabetes
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -178,11 +174,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Diesel particulate matter
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -200,11 +194,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Energy burden
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -222,11 +214,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           FEMA Risk Index
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -244,11 +234,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Heart disease
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -288,11 +276,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Lead paint
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -310,11 +296,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Life expectancy
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -332,11 +316,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           PM2.5
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -354,11 +336,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Traffic proximity and volume
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>
@@ -376,11 +356,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
           Wastewater discharge
         </h4>
         <div>
-          NaN
+          N/A
           <sup>
-            <span>
-              th
-            </span>
+            <span />
           </sup>
         </div>
       </div>