address pr comments

bcgov · Feb 5, 2025 · 2dd51f8 · 2dd51f8
1 parent b2fb691
commit 2dd51f8
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimal.tsx b/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimal.tsx
@@ -68,7 +68,7 @@ export const SurveySpatialAnimal = (props: ISurveySpatialAnimalProps) => {
           properties: {}
         }
       })) ?? [],
-    popup: (feature) => <SurveySpatialAnimalCapturePopup captureId={`${feature.id}`} />,
+    popup: (feature) => <SurveySpatialAnimalCapturePopup captureId={String(feature.id)} />,
     tooltip: (feature) => <SurveyMapTooltip title="Animal Capture" key={`mortality-tooltip-${feature.id}`} />
   };
 

diff --git a/...eatures/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalCapturePopup.tsx b/...eatures/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalCapturePopup.tsx
@@ -3,7 +3,9 @@ import dayjs from 'dayjs';
 import { SurveyMapPopup } from 'features/surveys/view/SurveyMapPopup';
 import { useCritterbaseApi } from 'hooks/useCritterbaseApi';
 import useDataLoader from 'hooks/useDataLoader';
+import { useMemo } from 'react';
 import { Popup } from 'react-leaflet';
+import { isDefined } from 'utils/Utils';
 
 interface ISurveySpatialAnimalCapturePopupProps {
   captureId: string;
@@ -23,8 +25,10 @@ export const SurveySpatialAnimalCapturePopup = (props: ISurveySpatialAnimalCaptu
   const captureDataLoader = useDataLoader(() => critterbaseApi.capture.getCapture(captureId));
   const animalDataLoader = useDataLoader(critterbaseApi.critters.getCritterSimple);
 
-  const formatPopupMetadata = () => {
-    if (!captureDataLoader.data || !animalDataLoader.data) return [];
+  const popupMetadata = useMemo(() => {
+    if (!captureDataLoader.data || !animalDataLoader.data) {
+      return [];
+    }
 
     const { capture_date, capture_time, capture_location } = captureDataLoader.data;
     const { animal_id } = animalDataLoader.data;
@@ -36,12 +40,12 @@ export const SurveySpatialAnimalCapturePopup = (props: ISurveySpatialAnimalCaptu
       {
         label: 'Coordinates',
         value: [capture_location?.latitude, capture_location?.longitude]
-          .filter((coord): coord is number => coord !== null)
+          .filter((coord): coord is number => isDefined(coord))
           .map((coord) => coord.toFixed(6))
           .join(', ')
       }
     ];
-  };
+  }, [captureDataLoader.data, animalDataLoader.data]);
 
   return (
     <Popup
@@ -51,14 +55,16 @@ export const SurveySpatialAnimalCapturePopup = (props: ISurveySpatialAnimalCaptu
       eventHandlers={{
         add: async () => {
           const capture = await captureDataLoader.load();
-          // Fetch critter information to get the animal's nickname to display, which isn't included in the capture response
-          if (capture) animalDataLoader.load(capture.critter_id);
+          // Fetch critter information to get the animal's animal_id to display, which isn't included in the capture response
+          if (capture) {
+            animalDataLoader.load(capture.critter_id);
+          }
         }
       }}>
       <SurveyMapPopup
         isLoading={captureDataLoader.isLoading || animalDataLoader.isLoading}
         title="Capture Details"
-        metadata={formatPopupMetadata()}
+        metadata={popupMetadata}
         key={`capture-feature-popup-${captureId}`}
       />
     </Popup>

diff --git a/...tures/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalMortalityPopup.tsx b/...tures/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalMortalityPopup.tsx
@@ -3,7 +3,9 @@ import dayjs from 'dayjs';
 import { SurveyMapPopup } from 'features/surveys/view/SurveyMapPopup';
 import { useCritterbaseApi } from 'hooks/useCritterbaseApi';
 import useDataLoader from 'hooks/useDataLoader';
+import { useMemo } from 'react';
 import { Popup } from 'react-leaflet';
+import { isDefined } from 'utils/Utils';
 
 interface ISurveySpatialAnimalMortalityPopupProps {
   mortalityId: string;
@@ -23,8 +25,10 @@ export const SurveySpatialAnimalMortalityPopup = (props: ISurveySpatialAnimalMor
   const mortalityDataLoader = useDataLoader(critterbaseApi.mortality.getMortality);
   const animalDataLoader = useDataLoader(critterbaseApi.critters.getCritterSimple);
 
-  const formatPopupMetadata = () => {
-    if (!mortalityDataLoader.data || !animalDataLoader.data) return [];
+  const popupMetadata = useMemo(() => {
+    if (!mortalityDataLoader.data || !animalDataLoader.data) {
+      return [];
+    }
 
     const { mortality_timestamp, location } = mortalityDataLoader.data;
     const { animal_id } = animalDataLoader.data;
@@ -34,17 +38,17 @@ export const SurveySpatialAnimalMortalityPopup = (props: ISurveySpatialAnimalMor
       {
         label: 'Date',
         // Critterbase does not provide time as its own string so mortalities without time data will erroneously show 12:00 AM in the popup
-        value: dayjs(mortality_timestamp).format(DATE_FORMAT.MediumDateTimeFormat)
+        value: dayjs(mortality_timestamp).format(DATE_FORMAT.LongDateTimeFormat)
       },
       {
         label: 'Coordinates',
         value: [location?.latitude, location?.longitude]
-          .filter(Boolean)
-          .map((coord) => coord!.toFixed(6))
+          .filter((coord): coord is number => isDefined(coord))
+          .map((coord) => coord.toFixed(6))
           .join(', ')
       }
     ];
-  };
+  }, [mortalityDataLoader.data, animalDataLoader.data]);
 
   return (
     <Popup
@@ -54,13 +58,15 @@ export const SurveySpatialAnimalMortalityPopup = (props: ISurveySpatialAnimalMor
       eventHandlers={{
         add: async () => {
           const mortality = await mortalityDataLoader.load(mortalityId);
-          if (mortality) animalDataLoader.load(mortality.critter_id);
+          if (mortality) {
+            animalDataLoader.load(mortality.critter_id);
+          }
         }
       }}>
       <SurveyMapPopup
         isLoading={mortalityDataLoader.isLoading || animalDataLoader.isLoading}
         title="Mortality Details"
-        metadata={formatPopupMetadata()}
+        metadata={popupMetadata}
         key={`mortality-feature-popup-${mortalityId}`}
       />
     </Popup>

diff --git a/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalTable.tsx b/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalTable.tsx
@@ -12,7 +12,7 @@ import { ScientificNameTypography } from 'features/surveys/animals/components/Sc
 import { useSurveyContext } from 'hooks/useContext';
 import { useCritterbaseApi } from 'hooks/useCritterbaseApi';
 import useDataLoader from 'hooks/useDataLoader';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 const rowHeight = 52;
 
@@ -39,17 +39,18 @@ export const SurveySpatialAnimalTable = (props: ISurveyDataAnimalTableProps) =>
 
   const { critterDataLoader } = useSurveyContext();
   const critterbaseApi = useCritterbaseApi();
-  const animals = critterDataLoader.data ?? [];
+
+  const animals = useMemo(() => critterDataLoader.data ?? [], [critterDataLoader.data]);
 
   const animalsDataLoader = useDataLoader(() =>
-    critterbaseApi.critters.getMultipleCrittersByIds(
-      animals.map(({ critterbase_critter_id }) => critterbase_critter_id)
-    )
+    critterbaseApi.critters.getMultipleCrittersByIds(animals.map((animal) => animal.critterbase_critter_id))
   );
 
   useEffect(() => {
-    if (animals.length) animalsDataLoader.load();
-  }, [animals]);
+    if (animals.length) {
+      animalsDataLoader.load();
+    }
+  }, [animals, animalsDataLoader]);
 
   const rows: IAnimalRow[] =
     animalsDataLoader.data?.map((animal) => ({