Created
April 27, 2023 13:52
-
-
Save tfuda/3e434a3ed555a41db6b1708c4950b19f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
EditCatchStateType = { | |
// Pretty much the same as what you have for EditCatchContextType now | |
} | |
export EditCatch = ({navigation, route} : EditCatchProps) => { | |
const [editCatchState, setEditCatchState] = useState<EditCatchStateType>(/* initial state value */); | |
const handleLengthChange = useCallback((length: number) => { | |
setEditCatchState((prev) => { | |
prev.length = length | |
return prev; | |
}); | |
}, []); | |
const handleSpeciesChange = useCallback((species: Species) => { | |
setEditCatchState((prev) => { | |
prev.species = species | |
return prev | |
}) | |
}, []) | |
const handleDateChange = useCallback((datetime: Date) => { | |
setEditCatchState((prev) => { | |
prev.createdAt = datetime | |
return prev | |
}) | |
}, []) | |
const handleLocationChange = useCallback((location: Location) => { | |
setEditCatchState((prev) => { | |
prev.location = location | |
return prev | |
}); | |
}, []) | |
const handleAdditionalDataChange = useCallback((additionalData: AdditionalDataType) => { | |
setEditCatchState((prev) => { | |
prev.additionalData = additionalData | |
return prev | |
} | |
}, []) | |
renderScene { | |
switch (route.key) { | |
case 'speciesSize': { | |
return ( | |
<EditSpeciesSize | |
onFishLengthChanged={handleLengthChange} | |
length={updatedCatch.length} | |
onSpeciesChange={handleSpeciesChange} | |
species={updatedCatch.species} | |
/>); | |
} | |
case 'dateTimeLocation': { | |
return ( | |
<EditDateTimeLocation | |
catchDate={updatedCatch.createdAt} | |
onDateChanged={handleDateChange} | |
location={updatedCatch.location} | |
onCatchLocationChanged={handleLocationChange} | |
/>); | |
); | |
} | |
case 'additionalData': { | |
return ( | |
<EditAdditionalData | |
additionalData={updatedCatch.additionalData} | |
onAdditionalDataChange={handleAdditionalDataChange} | |
/> | |
) | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Obviously not fully working code, but you get the "gist" of it. EditCatch maintains all of the state for the catch being edited, and the three child components only receive the pieces of the catch state they need, plus callbacks to update those pieces of state.