From 1a6b246182723a68185c416a9b7ccdf60f2f3084 Mon Sep 17 00:00:00 2001 From: Macgregor Aubertin-Young Date: Tue, 30 Jul 2024 12:40:35 -0700 Subject: [PATCH 1/2] cleanup --- .../animals/animal-form/components/AnimalFormContainer.tsx | 3 ++- .../surveys/animals/animal-form/create/CreateAnimalPage.tsx | 3 ++- .../surveys/animals/animal-form/edit/EditAnimalPage.tsx | 3 ++- app/src/interfaces/useCritterApi.interface.ts | 5 +++-- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/app/src/features/surveys/animals/animal-form/components/AnimalFormContainer.tsx b/app/src/features/surveys/animals/animal-form/components/AnimalFormContainer.tsx index e64556ed20..f2bdb576c5 100644 --- a/app/src/features/surveys/animals/animal-form/components/AnimalFormContainer.tsx +++ b/app/src/features/surveys/animals/animal-form/components/AnimalFormContainer.tsx @@ -39,7 +39,7 @@ export interface IAnimalFormProps { } const AnimalFormYupSchema = yup.object({ - nickname: yup.string().trim().min(3, 'Nickname must be at least 3 letters').required('Nickname is required'), + nickname: yup.string().trim().min(1, 'Nickname is required').required('Nickname is required'), species: yup .object() .shape({ @@ -53,6 +53,7 @@ const AnimalFormYupSchema = yup.object({ .nullable() .required('Species is required'), critter_comment: yup.string().nullable(), + sex: yup.string().nullable(), ecological_units: yup.array( yup .object() diff --git a/app/src/features/surveys/animals/animal-form/create/CreateAnimalPage.tsx b/app/src/features/surveys/animals/animal-form/create/CreateAnimalPage.tsx index 3f8ed2659d..40dacbe718 100644 --- a/app/src/features/surveys/animals/animal-form/create/CreateAnimalPage.tsx +++ b/app/src/features/surveys/animals/animal-form/create/CreateAnimalPage.tsx @@ -25,6 +25,7 @@ import { Link as RouterLink } from 'react-router-dom'; export const defaultAnimalDataFormValues: ICreateEditAnimalRequest = { nickname: '', species: null, + sex: AnimalSex.UNKNOWN, ecological_units: [], wildlife_health_id: '', critter_comment: '' @@ -91,7 +92,7 @@ export const CreateAnimalPage = () => { itis_tsn: values.species.tsn, wlh_id: undefined, animal_id: values.nickname, - sex: AnimalSex.UNKNOWN, + sex: values.sex, critter_comment: values.critter_comment }); diff --git a/app/src/features/surveys/animals/animal-form/edit/EditAnimalPage.tsx b/app/src/features/surveys/animals/animal-form/edit/EditAnimalPage.tsx index a38fb4d213..1af5944547 100644 --- a/app/src/features/surveys/animals/animal-form/edit/EditAnimalPage.tsx +++ b/app/src/features/surveys/animals/animal-form/edit/EditAnimalPage.tsx @@ -111,7 +111,7 @@ export const EditAnimalPage = () => { itis_tsn: values.species.tsn, wlh_id: values.wildlife_health_id, animal_id: values.nickname, - sex: AnimalSex.UNKNOWN, + sex: values.sex, critter_comment: values.critter_comment }); @@ -218,6 +218,7 @@ export const EditAnimalPage = () => { initialAnimalData={{ critter_id: critter.critter_id, nickname: critter.animal_id || '', + sex: critter.sex as AnimalSex, species: { commonNames: [], rank: undefined, diff --git a/app/src/interfaces/useCritterApi.interface.ts b/app/src/interfaces/useCritterApi.interface.ts index 810e8a6d0f..f39a325111 100644 --- a/app/src/interfaces/useCritterApi.interface.ts +++ b/app/src/interfaces/useCritterApi.interface.ts @@ -1,4 +1,4 @@ -import { ICreateCritterCollectionUnit } from 'features/surveys/view/survey-animals/animal'; +import { AnimalSex, ICreateCritterCollectionUnit } from 'features/surveys/view/survey-animals/animal'; import { Feature } from 'geojson'; import { IPartialTaxonomy } from './useTaxonomyApi.interface'; @@ -6,7 +6,7 @@ export interface ICritterCreate { critter_id?: string; wlh_id?: string | null; animal_id?: string | null; - sex: string; + sex: AnimalSex; itis_tsn: number; responsible_region_nr_id?: string | null; critter_comment?: string | null; @@ -16,6 +16,7 @@ export interface ICreateEditAnimalRequest { critter_id?: string; nickname: string; species: IPartialTaxonomy | null; + sex: AnimalSex; ecological_units: ICreateCritterCollectionUnit[]; wildlife_health_id: string | null; critter_comment: string | null; From 901095940b857602639d64d8db7647da1c90bebd Mon Sep 17 00:00:00 2001 From: Nick Phura Date: Tue, 30 Jul 2024 14:47:57 -0700 Subject: [PATCH 2/2] Fix bug in species autocomplete that was preventing a user from selecting a previously selected taxon. Fix bug in species autocomplete that was causing lots of extra re-renders when clearing a selected taxon. --- .../components/SpeciesAutocompleteField.tsx | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/app/src/components/species/components/SpeciesAutocompleteField.tsx b/app/src/components/species/components/SpeciesAutocompleteField.tsx index de90f1e808..6deb762e28 100644 --- a/app/src/components/species/components/SpeciesAutocompleteField.tsx +++ b/app/src/components/species/components/SpeciesAutocompleteField.tsx @@ -126,7 +126,7 @@ const SpeciesAutocompleteField = (props: ISpeciesAutocompleteFieldProps) => { const isMounted = useIsMounted(); // A default species has been provided and it is not a promise - const isDefaultSpecies = defaultSpecies && !('then' in defaultSpecies); + const isDefaultSpecies = defaultSpecies && !(defaultSpecies instanceof Promise); const [hasLoadedDefaultSpecies, setHasLoadedDefaultSpecies] = useState(false); // The input field value @@ -137,7 +137,7 @@ const SpeciesAutocompleteField = (props: ISpeciesAutocompleteFieldProps) => { const [isLoading, setIsLoading] = useState(false); useEffect(() => { - if (defaultSpecies && 'then' in defaultSpecies) { + if (defaultSpecies instanceof Promise) { // A default species has been provided and it is a promise defaultSpecies.then((taxonomy) => { if (hasLoadedDefaultSpecies) { @@ -186,27 +186,36 @@ const SpeciesAutocompleteField = (props: ISpeciesAutocompleteFieldProps) => { id={formikFieldName} disabled={disabled} data-testid={formikFieldName} - filterSelectedOptions noOptionsText="No matching options" options={options} getOptionLabel={(option) => option.scientificName} - isOptionEqualToValue={(option, value) => { - return option.tsn === value.tsn; - }} filterOptions={(item) => item} inputValue={inputValue} // Text field value changed onInputChange={(_, value, reason) => { if (reason === 'reset') { - if (clearOnSelect) { - setInputValue(''); - setOptions([]); - handleClear?.(); + if (!clearOnSelect) { + return; + } + + if (inputValue === '' && options.length === 0) { + // Nothing to clear + return; } + + setInputValue(''); + setOptions([]); + handleClear?.(); + return; } if (reason === 'clear') { + if (inputValue === '' && options.length === 0) { + // Nothing to clear + return; + } + setInputValue(''); setOptions([]); handleClear?.(); @@ -214,6 +223,11 @@ const SpeciesAutocompleteField = (props: ISpeciesAutocompleteFieldProps) => { } if (!value) { + if (inputValue === '' && options.length === 0) { + // Nothing to clear + return; + } + setInputValue(''); setOptions([]); return;