diff --git a/src/components/AddToProjects/FieldInputs/TaxonFieldInput.tsx b/src/components/AddToProjects/FieldInputs/TaxonFieldInput.tsx index 33b6bfbe4..d5451b2b5 100644 --- a/src/components/AddToProjects/FieldInputs/TaxonFieldInput.tsx +++ b/src/components/AddToProjects/FieldInputs/TaxonFieldInput.tsx @@ -1,9 +1,11 @@ import ExploreTaxonSearchModal from "components/Explore/Modals/ExploreTaxonSearchModal"; -import { Body3 } from "components/SharedComponents"; -import { Pressable } from "components/styledComponents"; +import { Body3, DisplayTaxon } from "components/SharedComponents"; +import { Pressable, View } from "components/styledComponents"; import React, { useState } from "react"; import type { RealmTaxon } from "realmModels/types"; -import { useTranslation } from "sharedHooks"; +import { useTaxon, useTranslation } from "sharedHooks"; + +import useObservationFieldValue from "../hooks/useObservationFieldValue"; interface Props { obsFieldId: number; @@ -11,10 +13,16 @@ interface Props { const TaxonFieldInput = ( { obsFieldId }: Props ) => { const { t } = useTranslation( ); - console.log( "obsFieldId", obsFieldId ); + const { value, setValue } = useObservationFieldValue( obsFieldId ); const [showModal, setShowModal] = useState( false ); + const { taxon } = useTaxon( { id: value } ); + const updateTaxon = ( selectedTaxon: RealmTaxon | null ) => { - console.log( "selectedTaxon", selectedTaxon ); + if ( selectedTaxon?.id ) { + setValue( String( selectedTaxon.id ) ); + } else { + setValue( null ); + } }; return ( @@ -24,14 +32,25 @@ const TaxonFieldInput = ( { obsFieldId }: Props ) => { closeModal={( ) => setShowModal( false )} updateTaxon={updateTaxon} /> - setShowModal( true )} - > - - {t( "Select-a-species" )} - - + {value && taxon + ? ( + + setShowModal( true )} + taxon={taxon} + /> + + ) + : ( + setShowModal( true )} + > + + {t( "Select-a-species" )} + + + )} ); };