Skip to content

Instantly share code, notes, and snippets.

@tfuda
Created April 27, 2023 13:52
Show Gist options
  • Save tfuda/3e434a3ed555a41db6b1708c4950b19f to your computer and use it in GitHub Desktop.
Save tfuda/3e434a3ed555a41db6b1708c4950b19f to your computer and use it in GitHub Desktop.
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}
/>
)
}
}
}
}
@tfuda
Copy link
Author

tfuda commented Apr 27, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment