From 687380de95650486344d19dd601e1d60ba23c467 Mon Sep 17 00:00:00 2001
From: Michael Bunsen <notbot@gmail.com>
Date: Sun, 3 Dec 2023 01:12:01 -0800
Subject: [PATCH] Hide counts that are missing in API response

---
 ui/src/data-services/models/species.ts                    | 4 ++--
 ui/src/design-system/components/info-block/info-block.tsx | 3 ++-
 ui/src/pages/species-details/species-details.tsx          | 2 +-
 ui/src/utils/language.ts                                  | 4 +++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/src/data-services/models/species.ts b/ui/src/data-services/models/species.ts
index a0c7ada3f..0346839ab 100644
--- a/ui/src/data-services/models/species.ts
+++ b/ui/src/data-services/models/species.ts
@@ -22,11 +22,11 @@ export class Species extends Taxon {
   }
 
   get numDetections(): number {
-    return this._species.detections_count
+    return this._species.detections_count || null
   }
 
   get numOccurrences(): number {
-    return this._species.occurrences_count
+    return this._species.occurrences_count || null
   }
 
   get trainingImagesLabel(): string {
diff --git a/ui/src/design-system/components/info-block/info-block.tsx b/ui/src/design-system/components/info-block/info-block.tsx
index 7f39db162..65f98da0e 100644
--- a/ui/src/design-system/components/info-block/info-block.tsx
+++ b/ui/src/design-system/components/info-block/info-block.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import { Link } from 'react-router-dom'
+import { STRING } from 'utils/language'
 import styles from './info-block.module.scss'
 
 interface Field {
@@ -11,7 +12,7 @@ interface Field {
 export const InfoBlock = ({ fields }: { fields: Field[] }) => (
   <>
     {fields.map((field, index) => {
-      const value = field.value !== undefined ? field.value : 'N/A'
+      const value = field.value !== undefined ? field.value : STRING.VALUE_NOT_AVAILABLE
 
       return (
         <p className={styles.field} key={index}>
diff --git a/ui/src/pages/species-details/species-details.tsx b/ui/src/pages/species-details/species-details.tsx
index 939164aef..f753a0c37 100644
--- a/ui/src/pages/species-details/species-details.tsx
+++ b/ui/src/pages/species-details/species-details.tsx
@@ -53,7 +53,7 @@ export const SpeciesDetails = ({ species }: { species: Species }) => {
       value: species.trainingImagesLabel,
       to: species.trainingImagesUrl,
     },
-  ]
+  ].filter((field) => field.value !== null);
 
   return (
     <div className={styles.wrapper}>
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index 4bd18c8b0..0dbba7b18 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -164,6 +164,7 @@ export enum STRING {
   UPDATING_DATA,
   USER_INFO,
   VERIFIED_BY,
+  VALUE_NOT_AVAILABLE,
 }
 
 const ENGLISH_STRINGS: { [key in STRING]: string } = {
@@ -242,7 +243,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_THUMBNAIL]: 'Thumbnail',
   [STRING.FIELD_LABEL_TIME]: 'Time',
   [STRING.FIELD_LABEL_TIMESTAMP]: 'Timestamp',
-  [STRING.FIELD_LABEL_TRAINING_IMAGES]: 'Training images',
+  [STRING.FIELD_LABEL_TRAINING_IMAGES]: 'Reference images',
   [STRING.FIELD_LABEL_FIRST_DATE]: 'First date',
   [STRING.FIELD_LABEL_LAST_DATE]: 'Last date',
   [STRING.FIELD_LABEL_UPDATED_AT]: 'Updated at',
@@ -342,6 +343,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.UPDATING_DATA]: 'Updating data',
   [STRING.USER_INFO]: 'User info',
   [STRING.VERIFIED_BY]: 'Verified by\n{{name}}',
+  [STRING.VALUE_NOT_AVAILABLE]: 'n/a',
 }
 
 // When we have more translations available, this function could return a value based on current language settings.