diff --git a/EditPlan.tsx b/EditPlan.tsx index daafbff..b6c3b99 100644 --- a/EditPlan.tsx +++ b/EditPlan.tsx @@ -1,9 +1,18 @@ import React, {useContext, useEffect, useState} from 'react'; -import {Button, Dialog, Portal} from 'react-native-paper'; +import {StyleSheet, Text, View} from 'react-native'; +import {Button, Dialog, Portal, Switch} from 'react-native-paper'; import {DatabaseContext} from './App'; -import DayMenu from './DayMenu'; import {Plan} from './plan'; -import WorkoutMenu from './WorkoutMenu'; + +const DAYS = [ + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', + 'Sunday', +]; export default function EditPlan({ plan, @@ -16,8 +25,8 @@ export default function EditPlan({ setShow: (visible: boolean) => void; plan?: Plan; }) { - const [days, setDays] = useState(''); - const [workouts, setWorkouts] = useState(''); + const [days, setDays] = useState([]); + const [workouts, setWorkouts] = useState([]); const [names, setNames] = useState([]); const db = useContext(DatabaseContext); @@ -26,8 +35,8 @@ export default function EditPlan({ if (!namesResult.rows.length) return; setNames(namesResult.rows.raw().map(({name}) => name)); if (!plan) return; - setDays(plan.days); - setWorkouts(plan.workouts); + setDays(plan.days.split(',')); + setWorkouts(plan.workouts.split(',')); }; useEffect(() => { @@ -36,76 +45,76 @@ export default function EditPlan({ const save = async () => { if (!days || !workouts) return; + const newWorkouts = workouts.filter(workout => workout).join(','); + const newDays = days.filter(day => day).join(','); if (!plan) await db.executeSql(`INSERT INTO plans(days, workouts) VALUES (?, ?)`, [ - days, - workouts, + newDays, + newWorkouts, ]); else await db.executeSql( `UPDATE plans SET days = ?, workouts = ? WHERE id = ?`, - [days, workouts, plan.id], + [newDays, newWorkouts, plan.id], ); setShow(false); onSave(); }; - const selectDay = (day: string, index: number) => { - const newDays = days.split(','); - newDays[index] = day; - setDays(newDays.join(',')); + const toggleWorkout = (on: boolean, name: string) => { + if (on) { + setWorkouts([...workouts, name]); + } else { + setWorkouts(workouts.filter(workout => workout !== name)); + } }; - 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(',')); - }; - - const removeDay = (index: number) => { - const newDays = days.split(','); - delete newDays[index]; - setDays(newDays.filter(day => day).join(',')); + const toggleDay = (on: boolean, day: string) => { + if (on) { + setDays([...days, day]); + } else { + setDays(days.filter(d => d !== day)); + } }; return ( setShow(false)}> - {plan ? `Edit "${days}"` : 'Add a plan'} - - {days.split(',').map((day, index) => ( - removeDay(index)} - onSelect={option => selectDay(option, index)} - onAdd={() => setDays(days + ',Monday')} - selected={day} - key={index} - /> - ))} - - {workouts.split(',').map((workout, index) => ( - setWorkouts(workouts + ',')} - onSelect={option => selectWorkout(option, index)} - onDelete={() => removeWorkout(index)} - names={names} - key={index} - /> - ))} - + + {plan ? `Edit "${days.join(', ')}"` : 'Add a plan'} + + + + Days + {DAYS.map(day => ( + + toggleDay(value, day)} + /> + toggleDay(!days.includes(day), day)}> + {day} + + + ))} + + + Workouts + {names.map(name => ( + + toggleWorkout(value, name)} + /> + toggleWorkout(!workouts.includes(name), name)}> + {name} + + + ))} +