From 2dd51f8592f53f7b42128a57f16fe5f5a7a38df0 Mon Sep 17 00:00:00 2001 From: Macgregor Aubertin-Young Date: Wed, 5 Feb 2025 13:57:33 -0800 Subject: [PATCH] address pr comments --- .../components/animal/SurveySpatialAnimal.tsx | 2 +- .../SurveySpatialAnimalCapturePopup.tsx | 20 +++++++++++------ .../SurveySpatialAnimalMortalityPopup.tsx | 22 ++++++++++++------- .../animal/SurveySpatialAnimalTable.tsx | 15 +++++++------ 4 files changed, 36 insertions(+), 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 index 52d9c17e34..6a43c3cbc1 100644 --- 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) => , + popup: (feature) => , tooltip: (feature) => }; diff --git a/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalCapturePopup.tsx b/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalCapturePopup.tsx index ad7464034a..5dfaa0b99b 100644 --- a/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalCapturePopup.tsx +++ b/app/src/features/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 ( { 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); + } } }}> diff --git a/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalMortalityPopup.tsx b/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalMortalityPopup.tsx index 57f4e37edf..4aa9c15d3a 100644 --- a/app/src/features/surveys/view/survey-spatial/components/animal/SurveySpatialAnimalMortalityPopup.tsx +++ b/app/src/features/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 ( { const mortality = await mortalityDataLoader.load(mortalityId); - if (mortality) animalDataLoader.load(mortality.critter_id); + if (mortality) { + animalDataLoader.load(mortality.critter_id); + } } }}> 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 index c40e283b94..843703df29 100644 --- 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) => ({