diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx index f48cd2be3..15a584fd5 100644 --- a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx +++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatch.tsx @@ -10,6 +10,8 @@ import React from "react"; import type { RealmObservation } from "realmModels/types"; import { useTranslation } from "sharedHooks"; +import SavedMatchHeaderRight from "./SavedMatchHeaderRight"; + const cardClassTop = "rounded-t-2xl border-lightGray border-[2px] py-[18px] px-5 border-b-0 -mb-0.5"; const cardClassBottom @@ -31,13 +33,14 @@ const SavedMatch = ( { const { taxon } = observation; /* left todo - - fill in functionality in container + - simplify match header - add edit pencil - fix type errors */ return ( + diff --git a/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx new file mode 100644 index 000000000..d438aaf5e --- /dev/null +++ b/src/components/ObsDetailsDefaultMode/SavedMatch/SavedMatchHeaderRight.tsx @@ -0,0 +1,52 @@ +import { useNavigation } from "@react-navigation/native"; +import { + INatIconButton +} from "components/SharedComponents"; +import React, { useCallback, useEffect } from "react"; +import type { RealmObservation } from "realmModels/types"; +import { + useLocalObservation, + useNavigateToObsEdit, + useTranslation +} from "sharedHooks"; +import colors from "styles/tailwindColors"; + +interface Props { + uuid: string; +} + +const SavedMatchHeaderRight = ( { + uuid +}: Props ) => { + const navigation = useNavigation( ); + const { localObservation } = useLocalObservation( uuid ); + const { t } = useTranslation( ); + const navigateToObsEdit = useNavigateToObsEdit( ); + + const headerRight = useCallback( + ( ) => ( + navigateToObsEdit( localObservation as RealmObservation )} + icon="pencil" + color={String( colors?.darkGray )} + accessibilityLabel={t( "Edit" )} + /> + ), + [ + localObservation, + navigateToObsEdit, + t + ] + ); + + useEffect( + ( ) => navigation.setOptions( { headerRight } ), + [headerRight, navigation] + ); + + return null; +}; + +export default SavedMatchHeaderRight;