Add button to remove image from a workout

Closes #21
This commit is contained in:
Brandon Presley 2022-09-18 18:15:58 +12:00
parent be3bb8a189
commit eddad49719
1 changed files with 14 additions and 5 deletions

View File

@ -19,6 +19,7 @@ import {WorkoutsPageParams} from './WorkoutsPage';
export default function EditWorkout() { export default function EditWorkout() {
const [name, setName] = useState(''); const [name, setName] = useState('');
const [removeImage, setRemoveImage] = useState(false);
const [steps, setSteps] = useState(''); const [steps, setSteps] = useState('');
const [uri, setUri] = useState<string>(); const [uri, setUri] = useState<string>();
const {params} = useRoute<RouteProp<WorkoutsPageParams, 'EditWorkout'>>(); const {params} = useRoute<RouteProp<WorkoutsPageParams, 'EditWorkout'>>();
@ -52,10 +53,10 @@ export default function EditWorkout() {
await updateSetName(params.value.name, name); await updateSetName(params.value.name, name);
await updateWorkouts(params.value.name, name); await updateWorkouts(params.value.name, name);
} }
if (uri) await updateSetImage(params.value.name, uri); if (uri || removeImage) await updateSetImage(params.value.name, uri || '');
if (steps) await updateSteps(params.value.name, steps); if (steps) await updateSteps(params.value.name, steps);
navigation.goBack(); navigation.goBack();
}, [navigation, params.value.name, name, uri, steps]); }, [navigation, params.value.name, name, uri, steps, removeImage]);
const add = useCallback(async () => { const add = useCallback(async () => {
await addSet({name, reps: 0, weight: 0, hidden: true, image: uri} as Set); await addSet({name, reps: 0, weight: 0, hidden: true, image: uri} as Set);
@ -76,13 +77,21 @@ export default function EditWorkout() {
if (fileCopyUri) setUri(fileCopyUri); if (fileCopyUri) setUri(fileCopyUri);
}, []); }, []);
const onRemoveImage = useCallback(async () => {
setUri('');
setRemoveImage(true);
}, []);
return ( return (
<View style={{padding: PADDING}}> <View style={{padding: PADDING}}>
<ScrollView style={{height: '90%'}}> <ScrollView style={{height: '90%'}}>
{uri ? ( {uri ? (
<Pressable style={{marginBottom: MARGIN}} onPress={changeImage}> <>
<Card.Cover source={{uri}} /> <Pressable style={{marginBottom: MARGIN}} onPress={changeImage}>
</Pressable> <Card.Cover source={{uri}} />
</Pressable>
<Button onPress={onRemoveImage}>Remove image</Button>
</>
) : ( ) : (
<Button <Button
style={{marginBottom: MARGIN}} style={{marginBottom: MARGIN}}