Merge pull request #913 from Eastern-Research-Group/feature/628_updat…

…e-switch-empty-values Feature/628 update switch empty values
Eastern-Research-Group · Oct 5, 2023 · 0430e46 · 0430e46
2 parents 5b48bed + e2d92cd
commit 0430e46
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 40 deletions.
diff --git a/app/client/src/components/pages/Community.Tabs.IdentifiedIssues.js b/app/client/src/components/pages/Community.Tabs.IdentifiedIssues.js
@@ -33,7 +33,7 @@ import { CommunityTabsContext } from 'contexts/CommunityTabs';
 import { useLayers } from 'contexts/Layers';
 import { LocationSearchContext } from 'contexts/locationSearch';
 // utilities
-import { formatNumber } from 'utils/utils';
+import { countOrNotAvailable, formatNumber } from 'utils/utils';
 import { getMappedParameter, plotIssues } from 'utils/mapFunctions';
 import { useDischargers, useWaterbodyOnMap } from 'utils/hooks';
 // errors
@@ -479,7 +479,7 @@ function IdentifiedIssues() {
 
   function getImpairedWatersPercent() {
     if (cipSummary.status === 'failure') return 'N/A';
-    return nullPollutedWaterbodies ? 'N/A %' : `${pollutedPercent ?? 0}%`;
+    return nullPollutedWaterbodies ? '0%' : `${pollutedPercent ?? 0}%`;
   }
 
   // Reset the dischargers layer filter when leaving the tab
@@ -559,9 +559,7 @@ function IdentifiedIssues() {
           ) : (
             <label css={switchContainerStyles}>
               <span css={keyMetricNumberStyles}>
-                {dischargersStatus === 'failure'
-                  ? 'N/A'
-                  : dischargers.length.toLocaleString()}
+                {countOrNotAvailable(dischargers, dischargersStatus)}
               </span>
               <p css={keyMetricLabelStyles}>Permitted Dischargers</p>
               <Switch
@@ -837,7 +835,10 @@ function IdentifiedIssues() {
                               </div>
                             </td>
                             <td>
-                              {violatingDischargers.length.toLocaleString()}
+                              {countOrNotAvailable(
+                                violatingDischargers,
+                                dischargersStatus,
+                              )}
                             </td>
                           </tr>
                           <tr>
@@ -855,7 +856,10 @@ function IdentifiedIssues() {
                               </label>
                             </td>
                             <td>
-                              {compliantDischargers.length.toLocaleString()}
+                              {countOrNotAvailable(
+                                compliantDischargers,
+                                dischargersStatus,
+                              )}
                             </td>
                           </tr>
                         </tbody>

diff --git a/app/client/src/components/pages/Community.Tabs.Monitoring.js b/app/client/src/components/pages/Community.Tabs.Monitoring.js
@@ -45,6 +45,7 @@ import {
   useStreamgages,
   useWaterbodyOnMap,
 } from 'utils/hooks';
+import { countOrNotAvailable } from 'utils/utils';
 // data
 import { characteristicGroupMappings } from 'config/characteristicGroupMappings';
 // errors
@@ -316,7 +317,11 @@ function Monitoring() {
           ) : (
             <label css={switchContainerStyles}>
               <span css={keyMetricNumberStyles}>
-                {totalCurrentWaterConditions || 'N/A'}
+                {countOrNotAvailable(
+                  totalCurrentWaterConditions,
+                  usgsStreamgages.status,
+                  cyanWaterbodies.status,
+                )}
               </span>
               <p css={keyMetricLabelStyles}>Current Water Conditions</p>
               <Switch
@@ -336,7 +341,10 @@ function Monitoring() {
           ) : (
             <label css={switchContainerStyles}>
               <span css={keyMetricNumberStyles}>
-                {monitoringLocations.data?.length || 'N/A'}
+                {countOrNotAvailable(
+                  monitoringLocations.data,
+                  monitoringLocations.status,
+                )}
               </span>
               <p css={keyMetricLabelStyles}>Past Water Conditions</p>
               <Switch
@@ -564,7 +572,7 @@ function CurrentConditionsTab({
                     <span>USGS Sensors</span>
                   </label>
                 </td>
-                <td>{streamgages.length}</td>
+                <td>{countOrNotAvailable(streamgages, streamgagesStatus)}</td>
               </tr>
               <tr>
                 <td>
@@ -586,7 +594,9 @@ function CurrentConditionsTab({
                     </GlossaryTerm>
                   </div>
                 </td>
-                <td>{cyanWaterbodies.length ?? 'N/A'}</td>
+                <td>
+                  {countOrNotAvailable(cyanWaterbodies, cyanWaterbodiesStatus)}
+                </td>
               </tr>
             </tbody>
           </table>

diff --git a/app/client/src/components/pages/Community.Tabs.Overview.js b/app/client/src/components/pages/Community.Tabs.Overview.js
@@ -47,6 +47,7 @@ import {
   useWaterbodyOnMap,
 } from 'utils/hooks';
 import { getUniqueWaterbodies } from 'utils/mapFunctions';
+import { countOrNotAvailable } from 'utils/utils';
 // errors
 import {
   cyanError,
@@ -228,9 +229,7 @@ function Overview() {
           ) : (
             <label css={switchContainerStyles}>
               <span css={keyMetricNumberStyles}>
-                {Boolean(totalWaterbodies) && cipSummary.status === 'success'
-                  ? totalWaterbodies.toLocaleString()
-                  : 'N/A'}
+                {countOrNotAvailable(totalWaterbodies, cipSummary.status)}
               </span>
               <p css={keyMetricLabelStyles}>Waterbodies</p>
               <div>
@@ -255,7 +254,12 @@ function Overview() {
           ) : (
             <label css={switchContainerStyles}>
               <span css={keyMetricNumberStyles}>
-                {totalMonitoringAndSensors ?? 'N/A'}
+                {countOrNotAvailable(
+                  totalMonitoringAndSensors,
+                  cyanWaterbodiesStatus,
+                  monitoringLocationsStatus,
+                  streamgagesStatus,
+                )}
               </span>
               <p css={keyMetricLabelStyles}>Water Monitoring Locations</p>
               <div>
@@ -278,7 +282,7 @@ function Overview() {
           ) : (
             <label css={switchContainerStyles}>
               <span css={keyMetricNumberStyles}>
-                {totalPermittedDischargers ?? 'N/A'}
+                {countOrNotAvailable(dischargers, dischargersStatus)}
               </span>
               <p css={keyMetricLabelStyles}>Permitted Dischargers</p>
               <div>
@@ -847,7 +851,7 @@ function MonitoringAndSensorsTab({
                       <span>USGS Sensors</span>
                     </label>
                   </td>
-                  <td>{streamgages.length}</td>
+                  <td>{countOrNotAvailable(streamgages, streamgagesStatus)}</td>
                 </tr>
                 <tr>
                   <td>
@@ -863,7 +867,12 @@ function MonitoringAndSensorsTab({
                       <span>Past Water Conditions</span>
                     </label>
                   </td>
-                  <td>{monitoringLocations.length}</td>
+                  <td>
+                    {countOrNotAvailable(
+                      monitoringLocations,
+                      monitoringLocationsStatus,
+                    )}
+                  </td>
                 </tr>
                 <tr>
                   <td>
@@ -882,7 +891,12 @@ function MonitoringAndSensorsTab({
                       </GlossaryTerm>
                     </div>
                   </td>
-                  <td>{cyanWaterbodies.length}</td>
+                  <td>
+                    {countOrNotAvailable(
+                      cyanWaterbodies,
+                      cyanWaterbodiesStatus,
+                    )}
+                  </td>
                 </tr>
               </tbody>
             </table>

diff --git a/app/client/src/components/pages/Community.Tabs.Restore.js b/app/client/src/components/pages/Community.Tabs.Restore.js
@@ -25,6 +25,7 @@ import { LocationSearchContext } from 'contexts/locationSearch';
 import { getUrlFromMarkup } from 'components/shared/Regex';
 import { useWaterbodyOnMap } from 'utils/hooks';
 import { mapRestorationPlanToGlossary } from 'utils/mapFunctions';
+import { countOrNotAvailable } from 'utils/utils';
 // errors
 import {
   restoreNonpointSourceError,
@@ -81,9 +82,7 @@ function Restore() {
             <LoadingSpinner />
           ) : (
             <span css={keyMetricNumberStyles}>
-              {grts.status === 'failure'
-                ? 'N/A'
-                : sortedGrtsData.length.toLocaleString()}
+              {countOrNotAvailable(sortedGrtsData, grts.status)}
             </span>
           )}
           <p css={keyMetricLabelStyles}>Projects</p>
@@ -93,9 +92,7 @@ function Restore() {
             <LoadingSpinner />
           ) : (
             <span css={keyMetricNumberStyles}>
-              {attainsPlans.status === 'failure'
-                ? 'N/A'
-                : sortedAttainsPlanData.length.toLocaleString()}
+              {countOrNotAvailable(sortedAttainsPlanData, attainsPlans.status)}
             </span>
           )}
           <p css={keyMetricLabelStyles}>Plans</p>

diff --git a/app/client/src/components/shared/TribalMapList.js b/app/client/src/components/shared/TribalMapList.js
@@ -71,7 +71,10 @@ import {
   getPopupTitle,
   getPopupContent,
 } from 'utils/mapFunctions';
-import { browserIsCompatibleWithArcGIS } from 'utils/utils';
+import {
+  browserIsCompatibleWithArcGIS,
+  countOrNotAvailable,
+} from 'utils/utils';
 // errors
 import {
   esriMapLoadingFailure,
@@ -367,10 +370,7 @@ function TribalMapList({
             waterbodies.status === 'failure') && (
             <Fragment>
               <span css={keyMetricNumberStyles}>
-                {Boolean(waterbodies.data.length) &&
-                waterbodies.status === 'success'
-                  ? waterbodies.data.length.toLocaleString()
-                  : 'N/A'}
+                {countOrNotAvailable(waterbodies.data, waterbodies.status)}
               </span>
               <p css={keyMetricLabelStyles}>Waterbodies</p>
               <div css={switchContainerStyles}>
@@ -400,9 +400,10 @@ function TribalMapList({
           ) : (
             <>
               <span css={keyMetricNumberStyles}>
-                {Boolean(monitoringLocations.length)
-                  ? monitoringLocations.length
-                  : 'N/A'}
+                {countOrNotAvailable(
+                  monitoringLocations,
+                  monitoringLocationsStatus,
+                )}
               </span>
               <p css={keyMetricLabelStyles}>Water Monitoring Locations</p>
               <div css={switchContainerStyles}>

diff --git a/app/client/src/contexts/locationSearch.js b/app/client/src/contexts/locationSearch.js
@@ -62,7 +62,6 @@ type State = {
   waterbodyData: Array<Object>,
   linesData: Array<Object>,
   areasData: Array<Object>,
-  cyanWaterbodies: { status: Status, data: Array<Object> | null },
   pointsData: Array<Object>,
   orphanFeatures: Array<Object>,
   waterbodyCountMismatch: boolean,
@@ -135,7 +134,6 @@ export class LocationSearchProvider extends Component<Props, State> {
     linesData: null,
     areasData: null,
     pointsData: null,
-    cyanWaterbodies: { status: 'idle', data: null },
     orphanFeatures: { status: 'fetching', features: [] },
     waterbodyCountMismatch: null,
     FIPS: { status: 'fetching', stateCode: '', countyCode: '' },
@@ -284,9 +282,6 @@ export class LocationSearchProvider extends Component<Props, State> {
     setPointsData: (pointsData) => {
       this.setState({ pointsData });
     },
-    setCyanWaterbodies: (cyanWaterbodies) => {
-      this.setState({ cyanWaterbodies });
-    },
     setGrts: (grts) => {
       this.setState({ grts });
     },
@@ -380,7 +375,6 @@ export class LocationSearchProvider extends Component<Props, State> {
         pointsData: null,
         linesData: null,
         areasData: null,
-        cyanWaterbodies: { status: 'idle', data: null },
         orphanFeatures: { status: 'fetching', features: [] },
         waterbodyCountMismatch: null,
         countyBoundaries: '',
@@ -416,7 +410,6 @@ export class LocationSearchProvider extends Component<Props, State> {
         pointsData: [],
         linesData: [],
         areasData: [],
-        cyanWaterbodies: { status: 'success', data: [] },
         orphanFeatures: { status: 'fetching', features: [] },
         waterbodyCountMismatch: null,
         countyBoundaries: '',

diff --git a/app/client/src/utils/utils.ts b/app/client/src/utils/utils.ts
@@ -1,5 +1,6 @@
 // types
 import type { KeyboardEvent, MouseEvent } from 'react';
+import type { FetchStatus } from 'types';
 
 // utility function to split up an array into chunks of a designated length
 export function chunkArray(array: any, chunkLength: number): Array<Array<any>> {
@@ -46,6 +47,19 @@ export function containsScriptTag(string: string) {
   );
 }
 
+/**
+ * Return the string "N/A" if the provided status is not "success",
+ * otherwise return `countOrData` if it is a number or the length if it is an array.
+ */
+export function countOrNotAvailable(
+  countOrData: number | unknown[] | null,
+  ...statuses: FetchStatus[]
+) {
+  if (!statuses.some((status) => status === 'success')) return 'N/A';
+  if (typeof countOrData === 'number') return countOrData.toLocaleString();
+  return (countOrData?.length ?? 0).toLocaleString();
+}
+
 export function formatNumber(number: number, digits: number = 0) {
   if (!number) return '0';