2022-07-07 02:18:38 +00:00
|
|
|
import React, {useContext, useEffect, useState} from 'react';
|
|
|
|
import {Button, Dialog, Portal} from 'react-native-paper';
|
|
|
|
import {DatabaseContext} from './App';
|
2022-07-06 05:40:53 +00:00
|
|
|
import DayMenu from './DayMenu';
|
|
|
|
import {Plan} from './plan';
|
2022-07-07 02:18:38 +00:00
|
|
|
import WorkoutMenu from './WorkoutMenu';
|
2022-07-06 05:40:53 +00:00
|
|
|
|
|
|
|
export default function EditPlan({
|
2022-07-07 03:13:44 +00:00
|
|
|
plan,
|
2022-07-06 05:40:53 +00:00
|
|
|
onSave,
|
|
|
|
show,
|
|
|
|
setShow,
|
|
|
|
}: {
|
|
|
|
onSave: () => void;
|
|
|
|
show: boolean;
|
|
|
|
setShow: (visible: boolean) => void;
|
2022-07-07 03:13:44 +00:00
|
|
|
plan?: Plan;
|
2022-07-06 05:40:53 +00:00
|
|
|
}) {
|
|
|
|
const [days, setDays] = useState('');
|
|
|
|
const [workouts, setWorkouts] = useState('');
|
2022-07-06 06:26:43 +00:00
|
|
|
const [names, setNames] = useState<string[]>([]);
|
2022-07-07 02:18:38 +00:00
|
|
|
const db = useContext(DatabaseContext);
|
|
|
|
|
|
|
|
const refresh = async () => {
|
|
|
|
const [namesResult] = await db.executeSql('SELECT DISTINCT name FROM sets');
|
|
|
|
if (!namesResult.rows.length) return;
|
|
|
|
setNames(namesResult.rows.raw().map(({name}) => name));
|
2022-07-07 03:13:44 +00:00
|
|
|
if (!plan) return;
|
|
|
|
setDays(plan.days);
|
|
|
|
setWorkouts(plan.workouts);
|
2022-07-07 02:18:38 +00:00
|
|
|
};
|
2022-07-06 05:40:53 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
2022-07-07 02:18:38 +00:00
|
|
|
refresh();
|
2022-07-07 03:13:44 +00:00
|
|
|
}, [plan]);
|
2022-07-06 05:40:53 +00:00
|
|
|
|
|
|
|
const save = async () => {
|
|
|
|
if (!days || !workouts) return;
|
2022-07-07 03:13:44 +00:00
|
|
|
if (!plan)
|
2022-07-06 05:40:53 +00:00
|
|
|
await db.executeSql(`INSERT INTO plans(days, workouts) VALUES (?, ?)`, [
|
|
|
|
days,
|
|
|
|
workouts,
|
|
|
|
]);
|
|
|
|
else
|
|
|
|
await db.executeSql(
|
|
|
|
`UPDATE plans SET days = ?, workouts = ? WHERE id = ?`,
|
2022-07-07 03:13:44 +00:00
|
|
|
[days, workouts, plan.id],
|
2022-07-06 05:40:53 +00:00
|
|
|
);
|
|
|
|
setShow(false);
|
|
|
|
onSave();
|
|
|
|
};
|
|
|
|
|
|
|
|
const selectDay = (day: string, index: number) => {
|
|
|
|
const newDays = days.split(',');
|
|
|
|
newDays[index] = day;
|
|
|
|
setDays(newDays.join(','));
|
|
|
|
};
|
|
|
|
|
2022-07-06 06:26:43 +00:00
|
|
|
const selectWorkout = (workout: string, index: number) => {
|
|
|
|
const newWorkouts = workouts.split(',');
|
|
|
|
newWorkouts[index] = workout;
|
|
|
|
setWorkouts(newWorkouts.join(','));
|
|
|
|
};
|
|
|
|
|
|
|
|
const removeWorkout = (index: number) => {
|
|
|
|
const newWorkouts = workouts.split(',');
|
|
|
|
delete newWorkouts[index];
|
|
|
|
setWorkouts(newWorkouts.filter(day => day).join(','));
|
|
|
|
};
|
|
|
|
|
2022-07-06 05:40:53 +00:00
|
|
|
const removeDay = (index: number) => {
|
|
|
|
const newDays = days.split(',');
|
|
|
|
delete newDays[index];
|
|
|
|
setDays(newDays.filter(day => day).join(','));
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Portal>
|
2022-07-06 09:03:56 +00:00
|
|
|
<Dialog visible={show} onDismiss={() => setShow(false)}>
|
2022-07-07 03:13:44 +00:00
|
|
|
<Dialog.Title>{plan ? `Edit "${days}"` : 'Add a plan'}</Dialog.Title>
|
2022-07-07 00:45:45 +00:00
|
|
|
<Dialog.Content>
|
2022-07-06 05:40:53 +00:00
|
|
|
{days.split(',').map((day, index) => (
|
|
|
|
<DayMenu
|
|
|
|
index={index}
|
|
|
|
onDelete={() => removeDay(index)}
|
|
|
|
onSelect={option => selectDay(option, index)}
|
|
|
|
onAdd={() => setDays(days + ',Monday')}
|
|
|
|
selected={day}
|
|
|
|
key={index}
|
|
|
|
/>
|
|
|
|
))}
|
2022-07-06 10:02:43 +00:00
|
|
|
<Button icon="add" onPress={() => setDays(days + ',Monday')}>
|
|
|
|
Add day
|
|
|
|
</Button>
|
2022-07-06 06:26:43 +00:00
|
|
|
{workouts.split(',').map((workout, index) => (
|
|
|
|
<WorkoutMenu
|
|
|
|
index={index}
|
|
|
|
selected={workout}
|
|
|
|
onAdd={() => setWorkouts(workouts + ',')}
|
|
|
|
onSelect={option => selectWorkout(option, index)}
|
|
|
|
onDelete={() => removeWorkout(index)}
|
|
|
|
names={names}
|
|
|
|
key={index}
|
|
|
|
/>
|
|
|
|
))}
|
2022-07-06 10:02:43 +00:00
|
|
|
<Button icon="add" onPress={() => setWorkouts(workouts + ',')}>
|
|
|
|
Add workout
|
|
|
|
</Button>
|
2022-07-06 09:03:56 +00:00
|
|
|
</Dialog.Content>
|
|
|
|
<Dialog.Actions>
|
2022-07-06 05:40:53 +00:00
|
|
|
<Button icon="close" onPress={() => setShow(false)}>
|
|
|
|
Cancel
|
|
|
|
</Button>
|
2022-07-06 10:02:43 +00:00
|
|
|
<Button mode="contained" icon="save" onPress={save}>
|
|
|
|
Save
|
|
|
|
</Button>
|
2022-07-06 09:03:56 +00:00
|
|
|
</Dialog.Actions>
|
|
|
|
</Dialog>
|
2022-07-06 05:40:53 +00:00
|
|
|
</Portal>
|
|
|
|
);
|
|
|
|
}
|