2022-07-11 00:28:30 +00:00
|
|
|
import {
|
2022-08-28 08:54:07 +00:00
|
|
|
NavigationProp,
|
2022-07-11 00:28:30 +00:00
|
|
|
RouteProp,
|
|
|
|
useNavigation,
|
|
|
|
useRoute,
|
|
|
|
} from '@react-navigation/native';
|
2022-10-28 05:36:47 +00:00
|
|
|
import {useCallback, useEffect, useState} from 'react';
|
2022-09-25 05:11:50 +00:00
|
|
|
import {ScrollView, StyleSheet, View} from 'react-native';
|
2022-10-23 06:13:58 +00:00
|
|
|
import {Button, Text} from 'react-native-paper';
|
2022-09-16 09:07:02 +00:00
|
|
|
import {MARGIN, PADDING} from './constants';
|
2022-09-24 06:47:31 +00:00
|
|
|
import {DrawerParamList} from './drawer-param-list';
|
2022-09-24 07:09:22 +00:00
|
|
|
import {PlanPageParams} from './plan-page-params';
|
2022-09-16 09:07:02 +00:00
|
|
|
import {addPlan, updatePlan} from './plan.service';
|
2022-09-04 04:56:46 +00:00
|
|
|
import {getNames} from './set.service';
|
2022-10-23 06:13:58 +00:00
|
|
|
import StackHeader from './StackHeader';
|
2022-09-26 03:10:13 +00:00
|
|
|
import Switch from './Switch';
|
2022-09-25 05:11:50 +00:00
|
|
|
import {DAYS} from './time';
|
2022-07-06 05:40:53 +00:00
|
|
|
|
2022-07-11 00:28:30 +00:00
|
|
|
export default function EditPlan() {
|
|
|
|
const {params} = useRoute<RouteProp<PlanPageParams, 'EditPlan'>>();
|
2022-09-18 06:45:05 +00:00
|
|
|
const {plan} = params;
|
|
|
|
const [days, setDays] = useState<string[]>(
|
|
|
|
plan.days ? plan.days.split(',') : [],
|
|
|
|
);
|
2022-07-11 00:28:30 +00:00
|
|
|
const [workouts, setWorkouts] = useState<string[]>(
|
2022-09-18 06:45:05 +00:00
|
|
|
plan.workouts ? plan.workouts.split(',') : [],
|
2022-07-11 00:28:30 +00:00
|
|
|
);
|
2022-07-06 06:26:43 +00:00
|
|
|
const [names, setNames] = useState<string[]>([]);
|
2022-08-28 08:54:07 +00:00
|
|
|
const navigation = useNavigation<NavigationProp<DrawerParamList>>();
|
2022-07-11 00:28:30 +00:00
|
|
|
|
2022-07-06 05:40:53 +00:00
|
|
|
useEffect(() => {
|
2022-09-04 05:33:05 +00:00
|
|
|
getNames().then(n => {
|
|
|
|
console.log(EditPlan.name, {n});
|
|
|
|
setNames(n);
|
|
|
|
});
|
2022-09-04 02:05:25 +00:00
|
|
|
}, []);
|
2022-07-06 05:40:53 +00:00
|
|
|
|
2022-07-09 23:51:52 +00:00
|
|
|
const save = useCallback(async () => {
|
2022-09-18 06:45:05 +00:00
|
|
|
console.log(`${EditPlan.name}.save`, {days, workouts, plan});
|
2022-07-06 05:40:53 +00:00
|
|
|
if (!days || !workouts) return;
|
2022-07-07 04:17:55 +00:00
|
|
|
const newWorkouts = workouts.filter(workout => workout).join(',');
|
|
|
|
const newDays = days.filter(day => day).join(',');
|
2022-09-20 23:50:20 +00:00
|
|
|
if (typeof plan.id === 'undefined')
|
|
|
|
await addPlan({days: newDays, workouts: newWorkouts});
|
2022-07-06 05:40:53 +00:00
|
|
|
else
|
2022-09-16 09:07:02 +00:00
|
|
|
await updatePlan({
|
|
|
|
days: newDays,
|
|
|
|
workouts: newWorkouts,
|
2022-09-18 06:45:05 +00:00
|
|
|
id: plan.id,
|
2022-09-16 09:07:02 +00:00
|
|
|
});
|
2022-07-11 00:28:30 +00:00
|
|
|
navigation.goBack();
|
2022-09-18 06:45:05 +00:00
|
|
|
}, [days, workouts, plan, navigation]);
|
2022-07-06 05:40:53 +00:00
|
|
|
|
2022-07-09 23:51:52 +00:00
|
|
|
const toggleWorkout = useCallback(
|
|
|
|
(on: boolean, name: string) => {
|
|
|
|
if (on) {
|
|
|
|
setWorkouts([...workouts, name]);
|
|
|
|
} else {
|
|
|
|
setWorkouts(workouts.filter(workout => workout !== name));
|
|
|
|
}
|
|
|
|
},
|
2022-07-09 23:54:23 +00:00
|
|
|
[setWorkouts, workouts],
|
2022-07-09 23:51:52 +00:00
|
|
|
);
|
2022-07-06 06:26:43 +00:00
|
|
|
|
2022-07-09 23:51:52 +00:00
|
|
|
const toggleDay = useCallback(
|
|
|
|
(on: boolean, day: string) => {
|
|
|
|
if (on) {
|
|
|
|
setDays([...days, day]);
|
|
|
|
} else {
|
|
|
|
setDays(days.filter(d => d !== day));
|
|
|
|
}
|
|
|
|
},
|
2022-07-09 23:54:23 +00:00
|
|
|
[setDays, days],
|
2022-07-09 23:51:52 +00:00
|
|
|
);
|
2022-07-06 05:40:53 +00:00
|
|
|
|
|
|
|
return (
|
2022-10-23 06:13:58 +00:00
|
|
|
<>
|
|
|
|
<StackHeader title="Edit plan" />
|
|
|
|
<View style={{padding: PADDING, flex: 1}}>
|
|
|
|
<ScrollView style={{flex: 1}}>
|
|
|
|
<Text style={styles.title}>Days</Text>
|
|
|
|
{DAYS.map(day => (
|
2022-09-26 03:10:13 +00:00
|
|
|
<Switch
|
2022-10-23 06:13:58 +00:00
|
|
|
key={day}
|
|
|
|
onValueChange={value => toggleDay(value, day)}
|
|
|
|
onPress={() => toggleDay(!days.includes(day), day)}
|
|
|
|
value={days.includes(day)}>
|
|
|
|
{day}
|
2022-09-26 03:10:13 +00:00
|
|
|
</Switch>
|
2022-10-23 06:13:58 +00:00
|
|
|
))}
|
|
|
|
<Text style={[styles.title, {marginTop: MARGIN}]}>Workouts</Text>
|
|
|
|
{names.length === 0 ? (
|
|
|
|
<View>
|
|
|
|
<Text>No workouts found.</Text>
|
|
|
|
</View>
|
|
|
|
) : (
|
|
|
|
names.map(name => (
|
|
|
|
<Switch
|
|
|
|
key={name}
|
|
|
|
onValueChange={value => toggleWorkout(value, name)}
|
|
|
|
value={workouts.includes(name)}
|
|
|
|
onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
|
|
|
{name}
|
|
|
|
</Switch>
|
|
|
|
))
|
|
|
|
)}
|
|
|
|
</ScrollView>
|
|
|
|
{names.length === 0 ? (
|
|
|
|
<Button
|
|
|
|
disabled={workouts.length === 0 && days.length === 0}
|
|
|
|
mode="contained"
|
|
|
|
onPress={() => {
|
|
|
|
navigation.goBack();
|
|
|
|
navigation.navigate('Workouts', {
|
|
|
|
screen: 'EditWorkout',
|
|
|
|
params: {value: {name: ''}},
|
|
|
|
});
|
|
|
|
}}>
|
|
|
|
Add workout
|
|
|
|
</Button>
|
|
|
|
) : (
|
|
|
|
<Button
|
|
|
|
disabled={workouts.length === 0 && days.length === 0}
|
|
|
|
style={{marginTop: MARGIN}}
|
|
|
|
mode="contained"
|
|
|
|
icon="save"
|
|
|
|
onPress={save}>
|
|
|
|
Save
|
|
|
|
</Button>
|
2022-09-26 03:10:13 +00:00
|
|
|
)}
|
2022-10-23 06:13:58 +00:00
|
|
|
</View>
|
|
|
|
</>
|
2022-07-06 05:40:53 +00:00
|
|
|
);
|
|
|
|
}
|
2022-07-07 04:17:55 +00:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
title: {
|
|
|
|
fontSize: 20,
|
2022-09-16 09:07:02 +00:00
|
|
|
marginBottom: MARGIN,
|
2022-07-07 04:17:55 +00:00
|
|
|
},
|
|
|
|
});
|