From d938ec775a44acc218e904d4358e6d4d73931e3a Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Wed, 6 Jul 2022 18:26:43 +1200
Subject: [PATCH] Fix new plan not showing workouts

---
 DayMenu.tsx     |  5 +++--
 EditPlan.tsx    | 42 +++++++++++++++++++++++++++++--------
 Plans.tsx       |  4 ++--
 WorkoutMenu.tsx | 55 +++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 93 insertions(+), 13 deletions(-)
 create mode 100644 WorkoutMenu.tsx

diff --git a/DayMenu.tsx b/DayMenu.tsx
index ca527a9..c87830b 100644
--- a/DayMenu.tsx
+++ b/DayMenu.tsx
@@ -43,12 +43,13 @@ export default function DayMenu({
       onDismiss={() => setShow(false)}
       anchor={
         <Button icon="today" onPress={() => setShow(true)}>
-          {selected}
+          {selected || 'Pick a day'}
         </Button>
       }>
       {days.map(day => (
         <Menu.Item
-          icon={selected === day ? 'checkmark' : ''}
+          key={day}
+          icon={selected === day ? 'checkmark-circle' : 'ellipse'}
           onPress={() => select(day)}
           title={day}
         />
diff --git a/EditPlan.tsx b/EditPlan.tsx
index b0bedf1..1c04ae4 100644
--- a/EditPlan.tsx
+++ b/EditPlan.tsx
@@ -1,11 +1,10 @@
-import {setDay} from 'date-fns';
 import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {Button, Modal, Portal, TextInput} from 'react-native-paper';
 import DayMenu from './DayMenu';
+import WorkoutMenu from './WorkoutMenu';
 import {getDb} from './db';
 import {Plan} from './plan';
-import Set from './set';
 
 export default function EditPlan({
   id,
@@ -22,10 +21,17 @@ export default function EditPlan({
 }) {
   const [days, setDays] = useState('');
   const [workouts, setWorkouts] = useState('');
+  const [names, setNames] = useState<string[]>([]);
 
   useEffect(() => {
-    if (!id) return;
     getDb().then(async db => {
+      const [namesResult] = await db.executeSql(
+        'SELECT DISTINCT name FROM sets',
+      );
+      if (!namesResult.rows.length) return;
+      setNames(namesResult.rows.raw().map(({name}) => name));
+      if (!id) return;
+      console.log('Getting plans...');
       const [result] = await db.executeSql(`SELECT * FROM plans WHERE id = ?`, [
         id,
       ]);
@@ -59,6 +65,18 @@ export default function EditPlan({
     setDays(newDays.join(','));
   };
 
+  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];
@@ -83,13 +101,18 @@ export default function EditPlan({
               key={index}
             />
           ))}
+          {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}
+            />
+          ))}
         </View>
-        <TextInput
-          style={styles.text}
-          label="Workouts *"
-          value={workouts}
-          onChangeText={setWorkouts}
-        />
         <View style={styles.bottom}>
           <Button mode="contained" icon="save" onPress={save}>
             Save
@@ -118,6 +141,7 @@ const styles = StyleSheet.create({
   },
   bottom: {
     flexDirection: 'row',
+    marginTop: 10,
   },
   title: {
     fontSize: 20,
diff --git a/Plans.tsx b/Plans.tsx
index bbc315b..8016880 100644
--- a/Plans.tsx
+++ b/Plans.tsx
@@ -14,8 +14,8 @@ export default function Plans() {
   const [showEdit, setShowEdit] = useState(false);
 
   const refresh = async () => {
-    const [result] = await getPlans({search});
-    setPlans(result.rows.raw());
+    const [plansResult] = await getPlans({search});
+    setPlans(plansResult.rows.raw());
   };
 
   useEffect(() => {
diff --git a/WorkoutMenu.tsx b/WorkoutMenu.tsx
new file mode 100644
index 0000000..26b6990
--- /dev/null
+++ b/WorkoutMenu.tsx
@@ -0,0 +1,55 @@
+import {useState} from 'react';
+import React from 'react';
+import {Button, Divider, Menu} from 'react-native-paper';
+
+export default function DayMenu({
+  onSelect,
+  onDelete,
+  onAdd,
+  selected,
+  index,
+  names,
+}: {
+  onSelect: (option: string) => void;
+  onDelete: () => void;
+  onAdd: () => void;
+  selected: string;
+  index: number;
+  names: string[];
+}) {
+  const [show, setShow] = useState(false);
+
+  const add = () => {
+    onAdd();
+    setShow(false);
+  };
+
+  const select = (day: string) => {
+    onSelect(day);
+    setShow(false);
+  };
+
+  return (
+    <Menu
+      visible={show}
+      onDismiss={() => setShow(false)}
+      anchor={
+        <Button icon="barbell" onPress={() => setShow(true)}>
+          {selected || 'Pick a workout'}
+        </Button>
+      }>
+      {names.map(name => (
+        <Menu.Item
+          key={name}
+          icon={selected === name ? 'checkmark-circle' : 'ellipse'}
+          onPress={() => select(name)}
+          title={name}
+        />
+      ))}
+      <Menu.Item icon="add" title="Add" onPress={add} />
+      {index > 0 && (
+        <Menu.Item icon="trash" title="Delete" onPress={onDelete} />
+      )}
+    </Menu>
+  );
+}