Make plans use stack navigation

App.tsx

@@ -26,7 +26,7 @@ export type DrawerParamList = {
   Home: {};
   Settings: {};
   Best: {};
-  Plan: {};
+  Plans: {};
 };
 
 export const DatabaseContext = React.createContext<SQLiteDatabase>({} as any);
@@ -83,7 +83,7 @@ const App = () => {
                     />
                   ),
                 }}
-                name="Plan"
+                name="Plans"
                 component={PlanPage}
               />
               <Drawer.Screen

EditPlan.tsx

@@ -1,23 +1,36 @@
+import {
+  RouteProp,
+  useFocusEffect,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
 import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {Button, Dialog, Portal, Switch} from 'react-native-paper';
+import {Button, IconButton, Switch} from 'react-native-paper';
 import {DatabaseContext} from './App';
-import {Plan} from './plan';
+import {PlanPageParams} from './PlanPage';
 import {DAYS} from './time';
 
-export default function EditPlan({
-  plan,
-  onSave,
-  setPlan,
-}: {
-  onSave: () => void;
-  plan?: Plan;
-  setPlan: (plan?: Plan) => void;
-}) {
-  const [days, setDays] = useState<string[]>([]);
-  const [workouts, setWorkouts] = useState<string[]>([]);
+export default function EditPlan() {
+  const {params} = useRoute<RouteProp<PlanPageParams, 'EditPlan'>>();
+  const [days, setDays] = useState<string[]>(params.plan.days.split(','));
+  const [workouts, setWorkouts] = useState<string[]>(
+    params.plan.workouts.split(','),
+  );
   const [names, setNames] = useState<string[]>([]);
   const db = useContext(DatabaseContext);
+  const navigation = useNavigation();
+
+  useFocusEffect(
+    useCallback(() => {
+      navigation.getParent()?.setOptions({
+        headerLeft: () => (
+          <IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
+        ),
+        title: 'Plan',
+      });
+    }, []),
+  );
 
   useEffect(() => {
     const refresh = async () => {
@@ -26,19 +39,16 @@ export default function EditPlan({
       );
       if (!namesResult.rows.length) return setNames([]);
       setNames(namesResult.rows.raw().map(({name}) => name));
-      if (!plan) return;
-      if (plan.days) setDays(plan.days.split(','));
-      if (plan.workouts) setWorkouts(plan.workouts.split(','));
     };
     refresh();
-  }, [plan, db]);
+  }, [db]);
 
   const save = useCallback(async () => {
-    console.log(`${EditPlan.name}.save`, {days, workouts, plan});
+    console.log(`${EditPlan.name}.save`, {days, workouts, params});
     if (!days || !workouts) return;
     const newWorkouts = workouts.filter(workout => workout).join(',');
     const newDays = days.filter(day => day).join(',');
-    if (!plan?.id)
+    if (!params.plan.id)
       await db.executeSql(`INSERT INTO plans(days, workouts) VALUES (?, ?)`, [
         newDays,
         newWorkouts,
@@ -46,11 +56,10 @@ export default function EditPlan({
     else
       await db.executeSql(
         `UPDATE plans SET days = ?, workouts = ? WHERE id = ?`,
-        [newDays, newWorkouts, plan.id],
+        [newDays, newWorkouts, params.plan.id],
       );
-    setPlan(undefined);
-    onSave();
-  }, [days, workouts, db, onSave, plan, setPlan]);
+    navigation.goBack();
+  }, [days, workouts, db, params.plan]);
 
   const toggleWorkout = useCallback(
     (on: boolean, name: string) => {
@@ -75,60 +84,49 @@ export default function EditPlan({
   );
 
   return (
-    <Portal>
-      <Dialog visible={!!plan} onDismiss={() => setPlan(undefined)}>
-        <Dialog.Title>
-          {plan?.days ? `Edit "${days.slice(0, 2).join(', ')}"` : 'Add a plan'}
-        </Dialog.Title>
-        <Dialog.ScrollArea>
-          <ScrollView
-            style={{height: '80%'}}
-            contentContainerStyle={{paddingHorizontal: 24}}>
-            <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>
-            ))}
-            <Text style={[styles.title, {marginTop: 10}]}>Workouts</Text>
-            {names.length === 0 && (
-              <Text style={{maxWidth: '80%'}}>
-                No sets found. Try going to the home page and adding some
-                workouts first.
-              </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>
-            ))}
-          </ScrollView>
-        </Dialog.ScrollArea>
-        <Dialog.Actions>
-          <Button icon="close" onPress={() => setPlan(undefined)}>
-            Cancel
-          </Button>
-          <Button mode="contained" icon="save" onPress={save}>
-            Save
-          </Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
+    <View style={{padding: 10}}>
+      <ScrollView style={{height: '90%'}}>
+        <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>
+        ))}
+        <Text style={[styles.title, {marginTop: 10}]}>Workouts</Text>
+        {names.length === 0 && (
+          <Text style={{maxWidth: '80%'}}>
+            No sets found. Try going to the home page and adding some workouts
+            first.
+          </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>
+        ))}
+      </ScrollView>
+      <Button
+        style={{marginTop: 10}}
+        mode="contained"
+        icon="save"
+        onPress={save}>
+        Save
+      </Button>
+    </View>
   );
 }
 

EditSet.tsx

@@ -1,17 +1,22 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import {RouteProp, useNavigation, useRoute} from '@react-navigation/native';
+import {
+  RouteProp,
+  useFocusEffect,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
 import React, {useCallback, useContext, useEffect, useState} from 'react';
-import {NativeModules, ScrollView, StyleSheet} from 'react-native';
+import {NativeModules, ScrollView, StyleSheet, View} from 'react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import {Button, TextInput} from 'react-native-paper';
+import {Button, IconButton, TextInput} from 'react-native-paper';
 import {DatabaseContext} from './App';
-import {StackParams} from './HomePage';
+import {HomePageParams} from './HomePage';
 import {Plan} from './plan';
 import Set from './set';
 import {DAYS, format} from './time';
 
 export default function EditSet() {
-  const {params} = useRoute<RouteProp<StackParams, 'EditSet'>>();
+  const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>();
   const [name, setName] = useState(params.set.name);
   const [reps, setReps] = useState(params.set.reps.toString());
   const [weight, setWeight] = useState(params.set.weight.toString());
@@ -21,6 +26,17 @@ export default function EditSet() {
   const db = useContext(DatabaseContext);
   const navigation = useNavigation();
 
+  useFocusEffect(
+    useCallback(() => {
+      navigation.getParent()?.setOptions({
+        headerLeft: () => (
+          <IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
+        ),
+        title: 'Set',
+      });
+    }, []),
+  );
+
   const getTodaysPlan = useCallback(async (): Promise<Plan[]> => {
     const today = DAYS[new Date().getDay()];
     const [result] = await db.executeSql(
@@ -113,55 +129,57 @@ export default function EditSet() {
   }, [update, add, params.set.id]);
 
   return (
-    <ScrollView style={{padding: 10}}>
-      <TextInput
-        style={styles.marginBottom}
-        autoFocus
-        label="Name *"
-        value={name}
-        onChangeText={setName}
-        autoCorrect={false}
-      />
-      <TextInput
-        style={styles.marginBottom}
-        label="Reps *"
-        keyboardType="numeric"
-        value={reps}
-        onChangeText={setReps}
-      />
-      <TextInput
-        style={styles.marginBottom}
-        label="Weight *"
-        keyboardType="numeric"
-        value={weight}
-        onChangeText={setWeight}
-        onSubmitEditing={save}
-      />
-      <TextInput
-        style={styles.marginBottom}
-        label="Unit (kg)"
-        value={unit}
-        onChangeText={setUnit}
-        onSubmitEditing={save}
-      />
+    <View style={{padding: 10}}>
+      <ScrollView style={{height: '90%'}}>
+        <TextInput
+          style={styles.marginBottom}
+          autoFocus
+          label="Name *"
+          value={name}
+          onChangeText={setName}
+          autoCorrect={false}
+        />
+        <TextInput
+          style={styles.marginBottom}
+          label="Reps *"
+          keyboardType="numeric"
+          value={reps}
+          onChangeText={setReps}
+        />
+        <TextInput
+          style={styles.marginBottom}
+          label="Weight *"
+          keyboardType="numeric"
+          value={weight}
+          onChangeText={setWeight}
+          onSubmitEditing={save}
+        />
+        <TextInput
+          style={styles.marginBottom}
+          label="Unit (kg)"
+          value={unit}
+          onChangeText={setUnit}
+          onSubmitEditing={save}
+        />
 
-      <Button
-        style={styles.marginBottom}
-        icon="calendar-outline"
-        onPress={() => setShowDate(true)}>
-        {format(created)}
-      </Button>
-      <DateTimePickerModal
-        isVisible={showDate}
-        mode="datetime"
-        onConfirm={onConfirm}
-        onCancel={() => setShowDate(false)}
-        date={created}
-      />
+        <Button
+          style={styles.marginBottom}
+          icon="calendar-outline"
+          onPress={() => setShowDate(true)}>
+          {format(created)}
+        </Button>
+        <DateTimePickerModal
+          isVisible={showDate}
+          mode="datetime"
+          onConfirm={onConfirm}
+          onCancel={() => setShowDate(false)}
+          date={created}
+        />
+      </ScrollView>
       <Button mode="contained" icon="save" onPress={save}>
         Save
       </Button>
-    </ScrollView>
+    </View>
   );
 }
 

HomePage.tsx

@@ -8,8 +8,8 @@ import EditSet from './EditSet';
 import Set from './set';
 import SetList from './SetList';
 
-const Stack = createStackNavigator<StackParams>();
-export type StackParams = {
+const Stack = createStackNavigator<HomePageParams>();
+export type HomePageParams = {
   Sets: {};
   EditSet: {
     set: Set;
@@ -27,14 +27,6 @@ export default function HomePage() {
         name="EditSet"
         component={EditSet}
         listeners={{
-          focus: () => {
-            navigation.setOptions({
-              headerLeft: () => (
-                <IconButton icon="arrow-back" onPress={navigation.goBack} />
-              ),
-              title: 'Set',
-            });
-          },
           beforeRemove: () => {
             navigation.setOptions({
               headerLeft: () => (

PlanItem.tsx

@@ -1,21 +1,22 @@
+import {NavigationProp, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useContext, useState} from 'react';
 import {GestureResponderEvent} from 'react-native';
 import {List, Menu} from 'react-native-paper';
 import {DatabaseContext} from './App';
 import {Plan} from './plan';
+import {PlanPageParams} from './PlanPage';
 
 export default function PlanItem({
   item,
-  setPlan,
   onRemove,
 }: {
   item: Plan;
-  setPlan: (plan: Plan) => void;
   onRemove: () => void;
 }) {
   const [show, setShow] = useState(false);
   const [anchor, setAnchor] = useState({x: 0, y: 0});
   const db = useContext(DatabaseContext);
+  const navigation = useNavigation<NavigationProp<PlanPageParams>>();
 
   const remove = useCallback(async () => {
     await db.executeSql(`DELETE FROM plans WHERE id = ?`, [item.id]);
@@ -34,7 +35,7 @@ export default function PlanItem({
   return (
     <>
       <List.Item
-        onPress={() => setPlan(item)}
+        onPress={() => navigation.navigate('EditPlan', {plan: item})}
         title={item.days.replace(/,/g, ', ')}
         description={item.workouts.replace(/,/g, ', ')}
         onLongPress={longPress}

PlanList.tsx

@@ -0,0 +1,92 @@
+import {
+  NavigationProp,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
+import {FlatList, StyleSheet, View} from 'react-native';
+import {List, Searchbar} from 'react-native-paper';
+import {DatabaseContext} from './App';
+import MassiveFab from './MassiveFab';
+import {Plan} from './plan';
+import PlanItem from './PlanItem';
+import {PlanPageParams} from './PlanPage';
+
+export default function PlanList() {
+  const [search, setSearch] = useState('');
+  const [plans, setPlans] = useState<Plan[]>([]);
+  const [refreshing, setRefresing] = useState(false);
+  const db = useContext(DatabaseContext);
+  const navigation = useNavigation<NavigationProp<PlanPageParams>>();
+
+  const refresh = useCallback(async () => {
+    const selectPlans = `
+      SELECT * from plans
+      WHERE days LIKE ? OR workouts LIKE ?
+    `;
+    const getPlans = ({s}: {s: string}) =>
+      db.executeSql(selectPlans, [`%${s}%`, `%${s}%`]);
+    const [plansResult] = await getPlans({s: search});
+    setPlans(plansResult.rows.raw());
+  }, [search, db]);
+
+  useFocusEffect(
+    useCallback(() => {
+      refresh();
+    }, [refresh]),
+  );
+
+  useEffect(() => {
+    if (!search) return;
+    refresh();
+  }, [search, refresh]);
+
+  const renderItem = useCallback(
+    ({item}: {item: Plan}) => (
+      <PlanItem item={item} key={item.id} onRemove={refresh} />
+    ),
+    [refresh],
+  );
+
+  return (
+    <View style={styles.container}>
+      <Searchbar value={search} onChangeText={setSearch} placeholder="Search" />
+      <FlatList
+        style={{height: '100%'}}
+        data={plans}
+        renderItem={renderItem}
+        keyExtractor={set => set.id.toString()}
+        refreshing={refreshing}
+        onRefresh={() => {
+          setRefresing(true);
+          refresh().finally(() => setRefresing(false));
+        }}
+        ListEmptyComponent={
+          <List.Item
+            title="No plans yet"
+            description="A plan is a list of workouts for certain days."
+          />
+        }
+      />
+
+      <MassiveFab
+        onPress={() =>
+          navigation.navigate('EditPlan', {
+            plan: {days: '', workouts: '', id: 0},
+          })
+        }
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    padding: 10,
+    paddingBottom: '10%',
+  },
+  progress: {
+    marginTop: 10,
+  },
+});

PlanPage.tsx

@@ -1,85 +1,42 @@
-import React, {useCallback, useContext, useEffect, useState} from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
-import {List, Searchbar} from 'react-native-paper';
-import {DatabaseContext} from './App';
+import {DrawerNavigationProp} from '@react-navigation/drawer';
+import {useNavigation} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import React from 'react';
+import {IconButton} from 'react-native-paper';
+import {DrawerParamList} from './App';
 import EditPlan from './EditPlan';
-import MassiveFab from './MassiveFab';
 import {Plan} from './plan';
-import PlanItem from './PlanItem';
+import PlanList from './PlanList';
+
+const Stack = createStackNavigator<PlanPageParams>();
+export type PlanPageParams = {
+  PlanList: {};
+  EditPlan: {
+    plan: Plan;
+  };
+};
 
 export default function PlanPage() {
-  const [search, setSearch] = useState('');
-  const [plans, setPlans] = useState<Plan[]>([]);
-  const [refreshing, setRefresing] = useState(false);
-  const [plan, setPlan] = useState<Plan>();
-  const db = useContext(DatabaseContext);
-
-  const refresh = useCallback(async () => {
-    const selectPlans = `
-      SELECT * from plans
-      WHERE days LIKE ? OR workouts LIKE ?
-    `;
-    const getPlans = ({s}: {s: string}) =>
-      db.executeSql(selectPlans, [`%${s}%`, `%${s}%`]);
-    const [plansResult] = await getPlans({s: search});
-    setPlans(plansResult.rows.raw());
-  }, [search, db]);
-
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
-
-  const renderItem = useCallback(
-    ({item}: {item: Plan}) => (
-      <PlanItem
-        item={item}
-        key={item.id}
-        setPlan={setPlan}
-        onRemove={refresh}
-      />
-    ),
-    [setPlan, refresh],
-  );
+  const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
 
   return (
-    <View style={styles.container}>
-      <Searchbar value={search} onChangeText={setSearch} placeholder="Search" />
-      <FlatList
-        style={{height: '100%'}}
-        data={plans}
-        renderItem={renderItem}
-        keyExtractor={set => set.id.toString()}
-        refreshing={refreshing}
-        onRefresh={() => {
-          setRefresing(true);
-          refresh().finally(() => setRefresing(false));
-        }}
-        ListEmptyComponent={
-          <List.Item
-            title="No plans yet"
-            description="A plan is a list of workouts for certain days."
-          />
-        }
-      />
-
-      <EditPlan setPlan={setPlan} onSave={refresh} plan={plan} />
-
-      <MassiveFab
-        onPress={() => {
-          setPlan({} as Plan);
+    <Stack.Navigator
+      screenOptions={{headerShown: false, animationEnabled: false}}>
+      <Stack.Screen name="PlanList" component={PlanList} />
+      <Stack.Screen
+        name="EditPlan"
+        component={EditPlan}
+        listeners={{
+          beforeRemove: () => {
+            navigation.setOptions({
+              headerLeft: () => (
+                <IconButton icon="menu" onPress={navigation.openDrawer} />
+              ),
+              title: 'Plans',
+            });
+          },
         }}
       />
-    </View>
+    </Stack.Navigator>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    padding: 10,
-    paddingBottom: '10%',
-  },
-  progress: {
-    marginTop: 10,
-  },
-});

SetItem.tsx

@@ -3,7 +3,7 @@ import React, {useCallback, useContext, useState} from 'react';
 import {GestureResponderEvent} from 'react-native';
 import {List, Menu} from 'react-native-paper';
 import {DatabaseContext} from './App';
-import {StackParams} from './HomePage';
+import {HomePageParams} from './HomePage';
 import Set from './set';
 
 export default function SetItem({
@@ -16,7 +16,7 @@ export default function SetItem({
   const [showMenu, setShowMenu] = useState(false);
   const [anchor, setAnchor] = useState({x: 0, y: 0});
   const db = useContext(DatabaseContext);
-  const navigation = useNavigation<NavigationProp<StackParams>>();
+  const navigation = useNavigation<NavigationProp<HomePageParams>>();
 
   const remove = useCallback(async () => {
     await db.executeSql(`DELETE FROM sets WHERE id = ?`, [item.id]);

SetList.tsx

@@ -7,7 +7,7 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {FlatList, StyleSheet, View} from 'react-native';
 import {List, Searchbar} from 'react-native-paper';
 import {DatabaseContext} from './App';
-import {StackParams} from './HomePage';
+import {HomePageParams} from './HomePage';
 import MassiveFab from './MassiveFab';
 import Set from './set';
 import SetItem from './SetItem';
@@ -21,7 +21,7 @@ export default function SetList() {
   const [refreshing, setRefreshing] = useState(false);
   const [end, setEnd] = useState(false);
   const db = useContext(DatabaseContext);
-  const navigation = useNavigation<NavigationProp<StackParams>>();
+  const navigation = useNavigation<NavigationProp<HomePageParams>>();
 
   const selectSets = `
     SELECT * from sets