Use switches for plan editing

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<string[]>([]);
+  const [workouts, setWorkouts] = useState<string[]>([]);
   const [names, setNames] = useState<string[]>([]);
   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 (
     <Portal>
       <Dialog visible={show} onDismiss={() => setShow(false)}>
-        <Dialog.Title>{plan ? `Edit "${days}"` : 'Add a plan'}</Dialog.Title>
-        <Dialog.Content>
-          {days.split(',').map((day, index) => (
-            <DayMenu
-              index={index}
-              onDelete={() => removeDay(index)}
-              onSelect={option => selectDay(option, index)}
-              onAdd={() => setDays(days + ',Monday')}
-              selected={day}
-              key={index}
-            />
-          ))}
-          <Button icon="add" onPress={() => setDays(days + ',Monday')}>
-            Add day
-          </Button>
-          {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}
-            />
-          ))}
-          <Button icon="add" onPress={() => setWorkouts(workouts + ',')}>
-            Add workout
-          </Button>
+        <Dialog.Title>
+          {plan ? `Edit "${days.join(', ')}"` : 'Add a plan'}
+        </Dialog.Title>
+        <Dialog.Content style={[styles.row, {justifyContent: 'space-between'}]}>
+          <View>
+            <Text style={styles.title}>Days</Text>
+            {DAYS.map(day => (
+              <View key={day} style={[styles.row, {alignItems: 'center'}]}>
+                <Switch
+                  value={days.includes(day)}
+                  style={{marginRight: 5}}
+                  onValueChange={value => toggleDay(value, day)}
+                />
+                <Text onPress={() => toggleDay(!days.includes(day), day)}>
+                  {day}
+                </Text>
+              </View>
+            ))}
+          </View>
+          <View>
+            <Text style={styles.title}>Workouts</Text>
+            {names.map(name => (
+              <View key={name} style={[styles.row, {alignItems: 'center'}]}>
+                <Switch
+                  value={workouts.includes(name)}
+                  style={{marginRight: 5}}
+                  onValueChange={value => toggleWorkout(value, name)}
+                />
+                <Text
+                  onPress={() => toggleWorkout(!workouts.includes(name), name)}>
+                  {name}
+                </Text>
+              </View>
+            ))}
+          </View>
         </Dialog.Content>
         <Dialog.Actions>
           <Button icon="close" onPress={() => setShow(false)}>
@@ -119,3 +128,13 @@ export default function EditPlan({
     </Portal>
   );
 }
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 20,
+    marginBottom: 10,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+});

PlanItem.tsx

@@ -30,8 +30,8 @@ export default function PlanItem({
           setPlan(item);
           setShowEdit(true);
         }}
-        title={item.days}
-        description={item.workouts}
+        title={item.days.replace(/,/g, ', ')}
+        description={item.workouts.replace(/,/g, ', ')}
         onLongPress={() => setShow(true)}
         right={() => (
           <Menu

package.json

@@ -21,7 +21,6 @@
     "react": "18.0.0",
     "react-devtools": "^4.24.7",
     "react-native": "0.69.1",
-    "react-native-document-picker": "^8.1.1",
     "react-native-gesture-handler": "^2.5.0",
     "react-native-pager-view": "^5.4.24",
     "react-native-paper": "^4.12.2",
@@ -62,4 +61,4 @@
       "node"
     ]
   }
-}
+}

yarn.lock

@@ -1603,6 +1603,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.2.0.tgz#7d6d789ae8edf73dc9bed1246cd48277edea8066"
   integrity sha512-o6aam+0Ug1xGK3ABYmBm0B1YuEKfM/5kaoZO0eHbZwSpw9UzDX4G5y4Nx/K20FHqUmJHkZmLvOUFYwN4N+HqKA==
 
+"@react-native-picker/picker@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.4.2.tgz#2925eb8e76ff6b584c80529adc251df963be9141"
+  integrity sha512-0nY8638h1J3wKz6P3IJMpOoxJDdOj7Dk/K2hP/xpqP3KnIY0lmoqYlhyNihuyVPocDGajf6SA7LFFsFepQ56ag==
+
 "@react-native/assets@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"