Use hidden drawer routes instead of drawer + stack

Closes #68

BestList.tsx

@@ -1,74 +0,0 @@
-import {
-  NavigationProp,
-  useFocusEffect,
-  useNavigation,
-} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState} from 'react';
-import {FlatList, Image} from 'react-native';
-import {List} from 'react-native-paper';
-import {getBestReps, getBestWeights} from './best.service';
-import {BestPageParams} from './BestPage';
-import Page from './Page';
-import Set from './set';
-import {settings} from './settings.service';
-
-export default function BestList() {
-  const [bests, setBests] = useState<Set[]>([]);
-  const [search, setSearch] = useState('');
-  const navigation = useNavigation<NavigationProp<BestPageParams>>();
-
-  const refresh = useCallback(async () => {
-    const weights = await getBestWeights(search);
-    console.log(`${BestList.name}.refresh:`, {length: weights.length});
-    let newBest: Set[] = [];
-    for (const set of weights) {
-      const reps = await getBestReps(set.name, set.weight);
-      newBest.push(...reps);
-    }
-    setBests(newBest);
-  }, [search]);
-
-  useFocusEffect(
-    useCallback(() => {
-      refresh();
-      navigation.getParent()?.setOptions({
-        headerRight: () => null,
-      });
-    }, [refresh, navigation]),
-  );
-
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
-
-  const renderItem = ({item}: {item: Set}) => (
-    <List.Item
-      key={item.name}
-      title={item.name}
-      description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
-      onPress={() => navigation.navigate('ViewBest', {best: item})}
-      left={() =>
-        (settings.images && item.image && (
-          <Image source={{uri: item.image}} style={{height: 75, width: 75}} />
-        )) ||
-        null
-      }
-    />
-  );
-
-  return (
-    <Page search={search} setSearch={setSearch}>
-      <FlatList
-        style={{height: '99%'}}
-        ListEmptyComponent={
-          <List.Item
-            title="No exercises yet"
-            description="Once sets have been added, this will highlight your personal bests."
-          />
-        }
-        renderItem={renderItem}
-        data={bests}
-      />
-    </Page>
-  );
-}

BestPage.tsx

@@ -1,42 +1,74 @@
-import {DrawerNavigationProp} from '@react-navigation/drawer';
+import {
-import {useNavigation} from '@react-navigation/native';
+  NavigationProp,
-import {createStackNavigator} from '@react-navigation/stack';
+  useFocusEffect,
-import React from 'react';
+  useNavigation,
-import {IconButton} from 'react-native-paper';
+} from '@react-navigation/native';
-import BestList from './BestList';
+import {default as React, useCallback, useEffect, useState} from 'react';
+import {FlatList, Image} from 'react-native';
+import {List} from 'react-native-paper';
+import {getBestReps, getBestWeights} from './best.service';
 import {DrawerParamList} from './drawer-param-list';
+import Page from './Page';
 import Set from './set';
-import ViewBest from './ViewBest';
+import {settings} from './settings.service';
-
-const Stack = createStackNavigator<BestPageParams>();
-export type BestPageParams = {
-  BestList: {};
-  ViewBest: {
-    best: Set;
-  };
-};
 
 export default function BestPage() {
-  const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
+  const [bests, setBests] = useState<Set[]>([]);
+  const [search, setSearch] = useState('');
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
+
+  const refresh = useCallback(async () => {
+    const weights = await getBestWeights(search);
+    console.log(`${BestPage.name}.refresh:`, {length: weights.length});
+    let newBest: Set[] = [];
+    for (const set of weights) {
+      const reps = await getBestReps(set.name, set.weight);
+      newBest.push(...reps);
+    }
+    setBests(newBest);
+  }, [search]);
+
+  useFocusEffect(
+    useCallback(() => {
+      refresh();
+      navigation.getParent()?.setOptions({
+        headerRight: () => null,
+      });
+    }, [refresh, navigation]),
+  );
+
+  useEffect(() => {
+    refresh();
+  }, [search, refresh]);
+
+  const renderItem = ({item}: {item: Set}) => (
+    <List.Item
+      key={item.name}
+      title={item.name}
+      description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
+      onPress={() => navigation.navigate('View best', {best: item})}
+      left={() =>
+        (settings.images && item.image && (
+          <Image source={{uri: item.image}} style={{height: 75, width: 75}} />
+        )) ||
+        null
+      }
+    />
+  );
 
   return (
-    <Stack.Navigator
+    <Page search={search} setSearch={setSearch}>
-      screenOptions={{headerShown: false, animationEnabled: false}}>
+      <FlatList
-      <Stack.Screen name="BestList" component={BestList} />
+        style={{height: '99%'}}
-      <Stack.Screen
+        ListEmptyComponent={
-        name="ViewBest"
+          <List.Item
-        component={ViewBest}
+            title="No exercises yet"
-        listeners={{
+            description="Once sets have been added, this will highlight your personal bests."
-          beforeRemove: () => {
+          />
-            navigation.setOptions({
+        }
-              headerLeft: () => (
+        renderItem={renderItem}
-                <IconButton icon="menu" onPress={navigation.openDrawer} />
+        data={bests}
-              ),
-              title: 'Best',
-            });
-          },
-        }}
       />
-    </Stack.Navigator>
+    </Page>
   );
 }

EditPlan.tsx

@@ -10,14 +10,13 @@ import {ScrollView, StyleSheet, View} from 'react-native';
 import {Button, IconButton, Text} from 'react-native-paper';
 import {MARGIN, PADDING} from './constants';
 import {DrawerParamList} from './drawer-param-list';
-import {PlanPageParams} from './plan-page-params';
 import {addPlan, updatePlan} from './plan.service';
 import {getNames} from './set.service';
 import Switch from './Switch';
 import {DAYS} from './time';
 
 export default function EditPlan() {
-  const {params} = useRoute<RouteProp<PlanPageParams, 'EditPlan'>>();
+  const {params} = useRoute<RouteProp<DrawerParamList, 'Edit plan'>>();
   const {plan} = params;
   const [days, setDays] = useState<string[]>(
     plan.days ? plan.days.split(',') : [],

EditSet.tsx

@@ -6,9 +6,8 @@ import {
 } from '@react-navigation/native';
 import React, {useCallback, useContext} from 'react';
 import {NativeModules, View} from 'react-native';
-import {IconButton} from 'react-native-paper';
 import {PADDING} from './constants';
-import {HomePageParams} from './home-page-params';
+import {DrawerParamList} from './drawer-param-list';
 import {SnackbarContext} from './MassiveSnack';
 import Set from './set';
 import {addSet, updateSet} from './set.service';
@@ -16,7 +15,7 @@ import SetForm from './SetForm';
 import {getSettings, settings, updateSettings} from './settings.service';
 
 export default function EditSet() {
-  const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>();
+  const {params} = useRoute<RouteProp<DrawerParamList, 'Edit set'>>();
   const {set, count, workouts} = params;
   const navigation = useNavigation();
   const {toast} = useContext(SnackbarContext);
@@ -28,11 +27,7 @@ export default function EditSet() {
       if (typeof set.id === 'number') title = 'Edit set';
       else if (Number(set.sets) > 0)
         title = `${set.name} (${count + 1} / ${set.sets})`;
-      navigation.getParent()?.setOptions({
+      navigation.setOptions({
-        headerLeft: () => (
-          <IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
-        ),
-        headerRight: null,
         title,
       });
     }, [navigation, set, count]),

EditWorkout.tsx

@@ -10,15 +10,15 @@ import DocumentPicker from 'react-native-document-picker';
 import {Button, Card, IconButton, TouchableRipple} from 'react-native-paper';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN, PADDING} from './constants';
+import {DrawerParamList} from './drawer-param-list';
 import MassiveInput from './MassiveInput';
 import {SnackbarContext} from './MassiveSnack';
 import {updatePlanWorkouts} from './plan.service';
 import {addSet, updateManySet, updateSetImage} from './set.service';
 import {settings} from './settings.service';
-import {WorkoutsPageParams} from './WorkoutsPage';
 
 export default function EditWorkout() {
-  const {params} = useRoute<RouteProp<WorkoutsPageParams, 'EditWorkout'>>();
+  const {params} = useRoute<RouteProp<DrawerParamList, 'Edit workout'>>();
   const [removeImage, setRemoveImage] = useState(false);
   const [showRemove, setShowRemove] = useState(false);
   const [name, setName] = useState(params.value.name);

HomePage.tsx

@@ -1,36 +1,135 @@
-import {DrawerNavigationProp} from '@react-navigation/drawer';
+import {
-import {useNavigation} from '@react-navigation/native';
+  NavigationProp,
-import {createStackNavigator} from '@react-navigation/stack';
+  useFocusEffect,
-import React from 'react';
+  useNavigation,
-import {IconButton} from 'react-native-paper';
+} from '@react-navigation/native';
+import {default as React, useCallback, useEffect, useState} from 'react';
+import {FlatList} from 'react-native';
+import {List} from 'react-native-paper';
+import {getBestSet} from './best.service';
 import {DrawerParamList} from './drawer-param-list';
-import EditSet from './EditSet';
+import Page from './Page';
-import {HomePageParams} from './home-page-params';
+import {getTodaysPlan} from './plan.service';
-import SetList from './SetList';
+import Set from './set';
+import {countToday, defaultSet, getSets, getToday} from './set.service';
+import SetItem from './SetItem';
+import {settings} from './settings.service';
 
-const Stack = createStackNavigator<HomePageParams>();
+const limit = 15;
 
 export default function HomePage() {
-  const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
+  const [sets, setSets] = useState<Set[]>();
+  const [set, setSet] = useState<Set>();
+  const [count, setCount] = useState(0);
+  const [workouts, setWorkouts] = useState<string[]>([]);
+  const [offset, setOffset] = useState(0);
+  const [search, setSearch] = useState('');
+  const [end, setEnd] = useState(false);
+  const [dates, setDates] = useState(false);
+  const [images, setImages] = useState(true);
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
+
+  const predict = useCallback(async () => {
+    setCount(0);
+    setSet({...defaultSet});
+    if (!settings.predict) return;
+    const todaysPlan = await getTodaysPlan();
+    console.log(`${HomePage.name}.predict:`, {todaysPlan});
+    if (todaysPlan.length === 0) return;
+    const todaysWorkouts = todaysPlan[0].workouts.split(',');
+    setWorkouts(todaysWorkouts);
+    let best = await getBestSet(todaysWorkouts[0]);
+    const todaysSet = await getToday();
+    if (!todaysSet || !todaysWorkouts.includes(todaysSet.name))
+      return setSet({...best});
+    let _count = await countToday(todaysSet.name);
+    best = await getBestSet(todaysSet.name);
+    const index = todaysWorkouts.indexOf(todaysSet.name) + 1;
+    if (_count >= Number(best.sets)) {
+      best = await getBestSet(todaysWorkouts[index]);
+      _count = 0;
+    }
+    if (best.name === '') setCount(0);
+    else setCount(_count);
+    setSet({...best});
+  }, []);
+
+  const refresh = useCallback(async () => {
+    predict();
+    const newSets = await getSets({search: `%${search}%`, limit, offset: 0});
+    console.log(`${HomePage.name}.refresh:`, {first: newSets[0]});
+    if (newSets.length === 0) return setSets([]);
+    setSets(newSets);
+    setOffset(0);
+    setEnd(false);
+  }, [search, predict]);
+
+  useFocusEffect(
+    useCallback(() => {
+      refresh();
+      setImages(!!settings.images);
+    }, [refresh]),
+  );
+
+  useEffect(() => {
+    refresh();
+  }, [search, refresh]);
+
+  const renderItem = useCallback(
+    ({item}: {item: Set}) => (
+      <SetItem
+        dates={dates}
+        setDates={setDates}
+        images={images}
+        setImages={setImages}
+        item={item}
+        key={item.id}
+        onRemove={refresh}
+      />
+    ),
+    [refresh, dates, setDates, images, setImages],
+  );
+
+  const next = useCallback(async () => {
+    if (end) return;
+    const newOffset = offset + limit;
+    console.log(`${HomePage.name}.next:`, {offset, newOffset, search});
+    const newSets = await getSets({
+      search: `%${search}%`,
+      limit,
+      offset: newOffset,
+    });
+    if (newSets.length === 0) return setEnd(true);
+    if (!sets) return;
+    setSets([...sets, ...newSets]);
+    if (newSets.length < limit) return setEnd(true);
+    setOffset(newOffset);
+  }, [search, end, offset, sets]);
+
+  const onAdd = useCallback(async () => {
+    console.log(`${HomePage.name}.onAdd`, {set, workouts});
+    navigation.navigate('Edit set', {
+      set: set || {...defaultSet},
+      workouts,
+      count,
+    });
+  }, [navigation, set, workouts, count]);
 
   return (
-    <Stack.Navigator
+    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      screenOptions={{headerShown: false, animationEnabled: false}}>
+      <FlatList
-      <Stack.Screen name="Sets" component={SetList} />
+        data={sets}
-      <Stack.Screen
+        style={{height: '99%'}}
-        name="EditSet"
+        ListEmptyComponent={
-        component={EditSet}
+          <List.Item
-        listeners={{
+            title="No sets yet"
-          beforeRemove: () => {
+            description="A set is a group of repetitions. E.g. 8 reps of Squats."
-            navigation.setOptions({
+          />
-              headerLeft: () => (
+        }
-                <IconButton icon="menu" onPress={navigation.openDrawer} />
+        renderItem={renderItem}
-              ),
+        keyExtractor={s => s.id!.toString()}
-              title: 'Home',
+        onEndReached={next}
-            });
-          },
-        }}
       />
-    </Stack.Navigator>
+    </Page>
   );
 }

PlanItem.tsx

@@ -2,8 +2,8 @@ import {NavigationProp, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useState} from 'react';
 import {GestureResponderEvent} from 'react-native';
 import {List, Menu} from 'react-native-paper';
+import {DrawerParamList} from './drawer-param-list';
 import {Plan} from './plan';
-import {PlanPageParams} from './plan-page-params';
 import {deletePlan} from './plan.service';
 
 export default function PlanItem({
@@ -15,7 +15,7 @@ export default function PlanItem({
 }) {
   const [show, setShow] = useState(false);
   const [anchor, setAnchor] = useState({x: 0, y: 0});
-  const navigation = useNavigation<NavigationProp<PlanPageParams>>();
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
 
   const remove = useCallback(async () => {
     if (typeof item.id === 'number') await deletePlan(item.id);
@@ -34,7 +34,7 @@ export default function PlanItem({
   return (
     <>
       <List.Item
-        onPress={() => navigation.navigate('EditPlan', {plan: item})}
+        onPress={() => navigation.navigate('Edit plan', {plan: item})}
         title={
           item.days
             ? item.days.replace(/,/g, ', ')

PlanList.tsx

@@ -1,64 +0,0 @@
-import {
-  NavigationProp,
-  useFocusEffect,
-  useNavigation,
-} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState} from 'react';
-import {FlatList} from 'react-native';
-import {List} from 'react-native-paper';
-import DrawerMenu from './DrawerMenu';
-import Page from './Page';
-import {Plan} from './plan';
-import {PlanPageParams} from './plan-page-params';
-import {getPlans} from './plan.service';
-import PlanItem from './PlanItem';
-
-export default function PlanList() {
-  const [search, setSearch] = useState('');
-  const [plans, setPlans] = useState<Plan[]>([]);
-  const navigation = useNavigation<NavigationProp<PlanPageParams>>();
-
-  const refresh = useCallback(async () => {
-    getPlans(search).then(setPlans);
-  }, [search]);
-
-  useFocusEffect(
-    useCallback(() => {
-      refresh();
-      navigation.getParent()?.setOptions({
-        headerRight: () => <DrawerMenu name="Plans" />,
-      });
-    }, [refresh, navigation]),
-  );
-
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
-
-  const renderItem = useCallback(
-    ({item}: {item: Plan}) => (
-      <PlanItem item={item} key={item.id} onRemove={refresh} />
-    ),
-    [refresh],
-  );
-
-  const onAdd = () =>
-    navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}});
-
-  return (
-    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
-        style={{height: '99%'}}
-        data={plans}
-        renderItem={renderItem}
-        keyExtractor={set => set.id?.toString() || ''}
-        ListEmptyComponent={
-          <List.Item
-            title="No plans yet"
-            description="A plan is a list of workouts for certain days."
-          />
-        }
-      />
-    </Page>
-  );
-}

PlanPage.tsx

@@ -1,36 +1,64 @@
-import {DrawerNavigationProp} from '@react-navigation/drawer';
+import {
-import {useNavigation} from '@react-navigation/native';
+  NavigationProp,
-import {createStackNavigator} from '@react-navigation/stack';
+  useFocusEffect,
-import React from 'react';
+  useNavigation,
-import {IconButton} from 'react-native-paper';
+} from '@react-navigation/native';
+import {default as React, useCallback, useEffect, useState} from 'react';
+import {FlatList} from 'react-native';
+import {List} from 'react-native-paper';
 import {DrawerParamList} from './drawer-param-list';
-import EditPlan from './EditPlan';
+import DrawerMenu from './DrawerMenu';
-import {PlanPageParams} from './plan-page-params';
+import Page from './Page';
-import PlanList from './PlanList';
+import {Plan} from './plan';
-
+import {getPlans} from './plan.service';
-const Stack = createStackNavigator<PlanPageParams>();
+import PlanItem from './PlanItem';
 
 export default function PlanPage() {
-  const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
+  const [search, setSearch] = useState('');
+  const [plans, setPlans] = useState<Plan[]>([]);
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
+
+  const refresh = useCallback(async () => {
+    getPlans(search).then(setPlans);
+  }, [search]);
+
+  useFocusEffect(
+    useCallback(() => {
+      refresh();
+      navigation.getParent()?.setOptions({
+        headerRight: () => <DrawerMenu name="Plans" />,
+      });
+    }, [refresh, navigation]),
+  );
+
+  useEffect(() => {
+    refresh();
+  }, [search, refresh]);
+
+  const renderItem = useCallback(
+    ({item}: {item: Plan}) => (
+      <PlanItem item={item} key={item.id} onRemove={refresh} />
+    ),
+    [refresh],
+  );
+
+  const onAdd = () =>
+    navigation.navigate('Edit plan', {plan: {days: '', workouts: ''}});
 
   return (
-    <Stack.Navigator
+    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      screenOptions={{headerShown: false, animationEnabled: false}}>
+      <FlatList
-      <Stack.Screen name="PlanList" component={PlanList} />
+        style={{height: '99%'}}
-      <Stack.Screen
+        data={plans}
-        name="EditPlan"
+        renderItem={renderItem}
-        component={EditPlan}
+        keyExtractor={set => set.id?.toString() || ''}
-        listeners={{
+        ListEmptyComponent={
-          beforeRemove: () => {
+          <List.Item
-            navigation.setOptions({
+            title="No plans yet"
-              headerLeft: () => (
+            description="A plan is a list of workouts for certain days."
-                <IconButton icon="menu" onPress={navigation.openDrawer} />
+          />
-              ),
+        }
-              title: 'Plans',
-            });
-          },
-        }}
       />
-    </Stack.Navigator>
+    </Page>
   );
 }

Routes.tsx

@@ -1,4 +1,5 @@
 import {createDrawerNavigator} from '@react-navigation/drawer';
+import {useNavigation} from '@react-navigation/native';
 import React, {useContext, useEffect, useState} from 'react';
 import {useColorScheme} from 'react-native';
 import {IconButton} from 'react-native-paper';
@@ -6,11 +7,16 @@ import {CustomTheme} from './App';
 import BestPage from './BestPage';
 import {runMigrations} from './db';
 import {DrawerParamList} from './drawer-param-list';
+import DrawerMenu from './DrawerMenu';
+import EditPlan from './EditPlan';
+import EditSet from './EditSet';
+import EditWorkout from './EditWorkout';
 import HomePage from './HomePage';
 import PlanPage from './PlanPage';
 import Route from './route';
 import {getSettings, settings} from './settings.service';
 import SettingsPage from './SettingsPage';
+import ViewBest from './ViewBest';
 import WorkoutsPage from './WorkoutsPage';
 
 const Drawer = createDrawerNavigator<DrawerParamList>();
@@ -19,6 +25,7 @@ export default function Routes() {
   const [migrated, setMigrated] = useState(false);
   const dark = useColorScheme() === 'dark';
   const {setColor} = useContext(CustomTheme);
+  const navigation = useNavigation();
 
   useEffect(() => {
     runMigrations()
@@ -39,6 +46,13 @@ export default function Routes() {
     {name: 'Settings', component: SettingsPage, icon: 'settings'},
   ];
 
+  const hiddenRoutes: Route[] = [
+    {name: 'Edit set', component: EditSet},
+    {name: 'Edit plan', component: EditPlan},
+    {name: 'Edit workout', component: EditWorkout},
+    {name: 'View best', component: ViewBest},
+  ];
+
   return (
     <Drawer.Navigator
       screenOptions={{
@@ -51,7 +65,24 @@ export default function Routes() {
           name={route.name}
           component={route.component}
           options={{
-            drawerIcon: () => <IconButton icon={route.icon} />,
+            drawerIcon: () => <IconButton icon={route.icon || ''} />,
+            headerRight: () => <DrawerMenu name={route.name} />,
+          }}
+        />
+      ))}
+      {hiddenRoutes.map(route => (
+        <Drawer.Screen
+          key={route.name}
+          name={route.name}
+          component={route.component}
+          options={{
+            drawerItemStyle: {height: 0},
+            headerLeft: () => (
+              <IconButton
+                icon="arrow-back"
+                onPress={() => navigation.goBack()}
+              />
+            ),
           }}
         />
       ))}

SetForm.tsx

@@ -31,12 +31,16 @@ export default function SetForm({
   const unitRef = useRef<any>(null);
 
   useEffect(() => {
-    console.log('SetForm.useEffect:', {uri, name: set.name});
+    console.log('SetForm.useEffect:', {uri, set, name, reps, unit});
+    setName(set.name);
+    setReps(set.reps.toString());
+    setWeight(set.weight.toString());
+    setUnit(set.unit);
     if (!uri)
       getSets({search: set.name, limit: 1, offset: 0}).then(([s]) =>
         setUri(s?.image),
       );
-  }, [uri, set.name]);
+  }, [uri, set, name, reps, unit]);
 
   const handleSubmit = () => {
     if (!name) return;
@@ -109,7 +113,7 @@ export default function SetForm({
         {workouts.length > 0 && !!settings.workouts && (
           <View style={{flexDirection: 'row'}}>
             {workouts.map((workout, index) => (
-              <Text>
+              <Text key={workout}>
                 <Text
                   style={
                     workout === name

SetItem.tsx

@@ -2,7 +2,7 @@ import {NavigationProp, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useState} from 'react';
 import {GestureResponderEvent, Image} from 'react-native';
 import {Divider, List, Menu, Text} from 'react-native-paper';
-import {HomePageParams} from './home-page-params';
+import {DrawerParamList} from './drawer-param-list';
 import Set from './set';
 import {deleteSet} from './set.service';
 
@@ -23,7 +23,7 @@ export default function SetItem({
 }) {
   const [showMenu, setShowMenu] = useState(false);
   const [anchor, setAnchor] = useState({x: 0, y: 0});
-  const navigation = useNavigation<NavigationProp<HomePageParams>>();
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
 
   const remove = useCallback(async () => {
     if (typeof item.id === 'number') await deleteSet(item.id);
@@ -35,7 +35,7 @@ export default function SetItem({
     const set: Set = {...item};
     delete set.id;
     setShowMenu(false);
-    navigation.navigate('EditSet', {set, workouts: [], count: 0});
+    navigation.navigate('Edit set', {set, workouts: [], count: 0});
   }, [navigation, item]);
 
   const longPress = useCallback(
@@ -60,7 +60,7 @@ export default function SetItem({
     <>
       <List.Item
         onPress={() =>
-          navigation.navigate('EditSet', {set: item, workouts: [], count: 0})
+          navigation.navigate('Edit set', {set: item, workouts: [], count: 0})
         }
         title={item.name}
         description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}

SetList.tsx

@@ -1,140 +0,0 @@
-import {
-  NavigationProp,
-  useFocusEffect,
-  useNavigation,
-} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState} from 'react';
-import {FlatList} from 'react-native';
-import {List} from 'react-native-paper';
-import {getBestSet} from './best.service';
-import DrawerMenu from './DrawerMenu';
-import {HomePageParams} from './home-page-params';
-import Page from './Page';
-import {getTodaysPlan} from './plan.service';
-import Set from './set';
-import {countToday, defaultSet, getSets, getToday} from './set.service';
-import SetItem from './SetItem';
-import {settings} from './settings.service';
-
-const limit = 15;
-
-export default function SetList() {
-  const [sets, setSets] = useState<Set[]>();
-  const [set, setSet] = useState<Set>();
-  const [count, setCount] = useState(0);
-  const [workouts, setWorkouts] = useState<string[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [search, setSearch] = useState('');
-  const [end, setEnd] = useState(false);
-  const [dates, setDates] = useState(false);
-  const [images, setImages] = useState(true);
-  const navigation = useNavigation<NavigationProp<HomePageParams>>();
-
-  const predict = useCallback(async () => {
-    setCount(0);
-    setSet({...defaultSet});
-    if (!settings.predict) return;
-    const todaysPlan = await getTodaysPlan();
-    if (todaysPlan.length === 0) return;
-    const todaysWorkouts = todaysPlan[0].workouts.split(',');
-    setWorkouts(todaysWorkouts);
-    let workout = todaysWorkouts[0];
-    let best = await getBestSet(workout);
-    const todaysSet = await getToday();
-    if (!todaysSet || !todaysWorkouts.includes(todaysSet.name))
-      return setSet(best);
-    let _count = await countToday(todaysSet.name);
-    workout = todaysSet.name;
-    best = await getBestSet(workout);
-    const index = todaysWorkouts.indexOf(todaysSet.name) + 1;
-    if (_count >= Number(best.sets)) {
-      best = await getBestSet(todaysWorkouts[index]);
-      _count = 0;
-    }
-    if (best.name === '') setCount(0);
-    else setCount(_count);
-    setSet(best);
-  }, []);
-
-  const refresh = useCallback(async () => {
-    predict();
-    const newSets = await getSets({search: `%${search}%`, limit, offset: 0});
-    console.log(`${SetList.name}.refresh:`, {first: newSets[0]});
-    if (newSets.length === 0) return setSets([]);
-    setSets(newSets);
-    setOffset(0);
-    setEnd(false);
-  }, [search, predict]);
-
-  useFocusEffect(
-    useCallback(() => {
-      refresh();
-      navigation.getParent()?.setOptions({
-        headerRight: () => <DrawerMenu name="Home" />,
-      });
-      setImages(!!settings.images);
-    }, [refresh, navigation]),
-  );
-
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
-
-  const renderItem = useCallback(
-    ({item}: {item: Set}) => (
-      <SetItem
-        dates={dates}
-        setDates={setDates}
-        images={images}
-        setImages={setImages}
-        item={item}
-        key={item.id}
-        onRemove={refresh}
-      />
-    ),
-    [refresh, dates, setDates, images, setImages],
-  );
-
-  const next = useCallback(async () => {
-    if (end) return;
-    const newOffset = offset + limit;
-    console.log(`${SetList.name}.next:`, {offset, newOffset, search});
-    const newSets = await getSets({
-      search: `%${search}%`,
-      limit,
-      offset: newOffset,
-    });
-    if (newSets.length === 0) return setEnd(true);
-    if (!sets) return;
-    setSets([...sets, ...newSets]);
-    if (newSets.length < limit) return setEnd(true);
-    setOffset(newOffset);
-  }, [search, end, offset, sets]);
-
-  const onAdd = useCallback(async () => {
-    console.log(`${SetList.name}.onAdd`, {set, defaultSet, workouts});
-    navigation.navigate('EditSet', {
-      set: set || {...defaultSet},
-      workouts,
-      count,
-    });
-  }, [navigation, set, workouts, count]);
-
-  return (
-    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
-        data={sets}
-        style={{height: '99%'}}
-        ListEmptyComponent={
-          <List.Item
-            title="No sets yet"
-            description="A set is a group of repetitions. E.g. 8 reps of Squats."
-          />
-        }
-        renderItem={renderItem}
-        keyExtractor={s => s.id!.toString()}
-        onEndReached={next}
-      />
-    </Page>
-  );
-}

ViewBest.tsx

@@ -12,9 +12,9 @@ import {IconButton} from 'react-native-paper';
 import Share from 'react-native-share';
 import {captureScreen} from 'react-native-view-shot';
 import {getVolumes, getWeightsBy} from './best.service';
-import {BestPageParams} from './BestPage';
 import Chart from './Chart';
 import {PADDING} from './constants';
+import {DrawerParamList} from './drawer-param-list';
 import {Metrics} from './metrics';
 import {Periods} from './periods';
 import Set from './set';
@@ -22,7 +22,7 @@ import {formatMonth} from './time';
 import Volume from './volume';
 
 export default function ViewBest() {
-  const {params} = useRoute<RouteProp<BestPageParams, 'ViewBest'>>();
+  const {params} = useRoute<RouteProp<DrawerParamList, 'View best'>>();
   const dark = useColorScheme() === 'dark';
   const [weights, setWeights] = useState<Set[]>([]);
   const [volumes, setVolumes] = useState<Volume[]>([]);

WorkoutItem.tsx

@@ -3,9 +3,9 @@ import React, {useCallback, useState} from 'react';
 import {GestureResponderEvent, Image} from 'react-native';
 import {List, Menu, Text} from 'react-native-paper';
 import ConfirmDialog from './ConfirmDialog';
+import {DrawerParamList} from './drawer-param-list';
 import Set from './set';
 import {deleteSetsBy} from './set.service';
-import {WorkoutsPageParams} from './WorkoutsPage';
 
 export default function WorkoutItem({
   item,
@@ -17,7 +17,7 @@ export default function WorkoutItem({
   const [showMenu, setShowMenu] = useState(false);
   const [anchor, setAnchor] = useState({x: 0, y: 0});
   const [showRemove, setShowRemove] = useState('');
-  const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>();
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
 
   const remove = useCallback(async () => {
     await deleteSetsBy(item.name);
@@ -39,7 +39,7 @@ export default function WorkoutItem({
   return (
     <>
       <List.Item
-        onPress={() => navigation.navigate('EditWorkout', {value: item})}
+        onPress={() => navigation.navigate('Edit workout', {value: item})}
         title={item.name}
         description={`${item.sets} sets ${minutes}:${seconds} rest`}
         onLongPress={longPress}

WorkoutList.tsx

@@ -1,98 +0,0 @@
-import {
-  NavigationProp,
-  useFocusEffect,
-  useNavigation,
-} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState} from 'react';
-import {FlatList} from 'react-native';
-import {List} from 'react-native-paper';
-import Page from './Page';
-import Set from './set';
-import {getDistinctSets} from './set.service';
-import SetList from './SetList';
-import WorkoutItem from './WorkoutItem';
-import {WorkoutsPageParams} from './WorkoutsPage';
-
-const limit = 15;
-
-export default function WorkoutList() {
-  const [workouts, setWorkouts] = useState<Set[]>();
-  const [offset, setOffset] = useState(0);
-  const [search, setSearch] = useState('');
-  const [end, setEnd] = useState(false);
-  const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>();
-
-  const refresh = useCallback(async () => {
-    const newWorkouts = await getDistinctSets({
-      search: `%${search}%`,
-      limit,
-      offset: 0,
-    });
-    console.log(`${WorkoutList.name}`, {newWorkout: newWorkouts[0]});
-    setWorkouts(newWorkouts);
-    setOffset(0);
-    setEnd(false);
-  }, [search]);
-
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
-
-  useFocusEffect(
-    useCallback(() => {
-      refresh();
-    }, [refresh]),
-  );
-
-  const renderItem = useCallback(
-    ({item}: {item: Set}) => (
-      <WorkoutItem item={item} key={item.name} onRemoved={refresh} />
-    ),
-    [refresh],
-  );
-
-  const next = useCallback(async () => {
-    if (end) return;
-    const newOffset = offset + limit;
-    console.log(`${SetList.name}.next:`, {
-      offset,
-      limit,
-      newOffset,
-      search,
-    });
-    const newWorkouts = await getDistinctSets({
-      search: `%${search}%`,
-      limit,
-      offset: newOffset,
-    });
-    if (newWorkouts.length === 0) return setEnd(true);
-    if (!workouts) return;
-    setWorkouts([...workouts, ...newWorkouts]);
-    if (newWorkouts.length < limit) return setEnd(true);
-    setOffset(newOffset);
-  }, [search, end, offset, workouts]);
-
-  const onAdd = useCallback(async () => {
-    navigation.navigate('EditWorkout', {
-      value: {name: '', sets: 3, image: '', steps: '', reps: 0, weight: 0},
-    });
-  }, [navigation]);
-
-  return (
-    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      <FlatList
-        data={workouts}
-        style={{height: '99%'}}
-        ListEmptyComponent={
-          <List.Item
-            title="No workouts yet."
-            description="A workout is something you do at the gym. For example Deadlifts are a workout."
-          />
-        }
-        renderItem={renderItem}
-        keyExtractor={w => w.name}
-        onEndReached={next}
-      />
-    </Page>
-  );
-}

WorkoutsPage.tsx

@@ -1,43 +1,97 @@
-import {DrawerNavigationProp} from '@react-navigation/drawer';
+import {
-import {useNavigation} from '@react-navigation/native';
+  NavigationProp,
-import {createStackNavigator} from '@react-navigation/stack';
+  useFocusEffect,
-import React from 'react';
+  useNavigation,
-import {IconButton} from 'react-native-paper';
+} from '@react-navigation/native';
+import React, {useCallback, useEffect, useState} from 'react';
+import {FlatList} from 'react-native';
+import {List} from 'react-native-paper';
 import {DrawerParamList} from './drawer-param-list';
-import EditWorkout from './EditWorkout';
+import Page from './Page';
 import Set from './set';
-import WorkoutList from './WorkoutList';
+import {getDistinctSets} from './set.service';
+import WorkoutItem from './WorkoutItem';
 
-export type WorkoutsPageParams = {
+const limit = 15;
-  WorkoutList: {};
-  EditWorkout: {
-    value: Set;
-  };
-};
-
-const Stack = createStackNavigator<WorkoutsPageParams>();
 
 export default function WorkoutsPage() {
-  const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
+  const [workouts, setWorkouts] = useState<Set[]>();
+  const [offset, setOffset] = useState(0);
+  const [search, setSearch] = useState('');
+  const [end, setEnd] = useState(false);
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>();
+
+  const refresh = useCallback(async () => {
+    const newWorkouts = await getDistinctSets({
+      search: `%${search}%`,
+      limit,
+      offset: 0,
+    });
+    console.log(`${WorkoutsPage.name}`, {newWorkout: newWorkouts[0]});
+    setWorkouts(newWorkouts);
+    setOffset(0);
+    setEnd(false);
+  }, [search]);
+
+  useEffect(() => {
+    refresh();
+  }, [search, refresh]);
+
+  useFocusEffect(
+    useCallback(() => {
+      refresh();
+    }, [refresh]),
+  );
+
+  const renderItem = useCallback(
+    ({item}: {item: Set}) => (
+      <WorkoutItem item={item} key={item.name} onRemoved={refresh} />
+    ),
+    [refresh],
+  );
+
+  const next = useCallback(async () => {
+    if (end) return;
+    const newOffset = offset + limit;
+    console.log(`${WorkoutsPage.name}.next:`, {
+      offset,
+      limit,
+      newOffset,
+      search,
+    });
+    const newWorkouts = await getDistinctSets({
+      search: `%${search}%`,
+      limit,
+      offset: newOffset,
+    });
+    if (newWorkouts.length === 0) return setEnd(true);
+    if (!workouts) return;
+    setWorkouts([...workouts, ...newWorkouts]);
+    if (newWorkouts.length < limit) return setEnd(true);
+    setOffset(newOffset);
+  }, [search, end, offset, workouts]);
+
+  const onAdd = useCallback(async () => {
+    navigation.navigate('Edit workout', {
+      value: {name: '', sets: 3, image: '', steps: '', reps: 0, weight: 0},
+    });
+  }, [navigation]);
 
   return (
-    <Stack.Navigator
+    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
-      screenOptions={{headerShown: false, animationEnabled: false}}>
+      <FlatList
-      <Stack.Screen name="WorkoutList" component={WorkoutList} />
+        data={workouts}
-      <Stack.Screen
+        style={{height: '99%'}}
-        name="EditWorkout"
+        ListEmptyComponent={
-        component={EditWorkout}
+          <List.Item
-        listeners={{
+            title="No workouts yet."
-          beforeRemove: () => {
+            description="A workout is something you do at the gym. For example Deadlifts are a workout."
-            navigation.setOptions({
+          />
-              headerLeft: () => (
+        }
-                <IconButton icon="menu" onPress={navigation.openDrawer} />
+        renderItem={renderItem}
-              ),
+        keyExtractor={w => w.name}
-              title: 'Workouts',
+        onEndReached={next}
-            });
-          },
-        }}
       />
-    </Stack.Navigator>
+    </Page>
   );
 }

drawer-param-list.ts

@@ -1,7 +1,24 @@
+import {Plan} from './plan';
+import Set from './set';
+
 export type DrawerParamList = {
   Home: {};
   Settings: {};
   Best: {};
   Plans: {};
   Workouts: {};
+  'Edit set': {
+    set: Set;
+    workouts: string[];
+    count: number;
+  };
+  'Edit plan': {
+    plan: Plan;
+  };
+  'Edit workout': {
+    value: Set;
+  };
+  'View best': {
+    best: Set;
+  };
 };

home-page-params.ts

@@ -1,10 +0,0 @@
-import Set from './set';
-
-export type HomePageParams = {
-  Sets: {};
-  EditSet: {
-    set: Set;
-    workouts: string[];
-    count: number;
-  };
-};

package.json

@@ -16,7 +16,6 @@
     "@react-native-picker/picker": "^2.4.4",
     "@react-navigation/drawer": "^6.5.0",
     "@react-navigation/native": "^6.0.13",
-    "@react-navigation/stack": "^6.3.0",
     "@types/d3-shape": "^3.1.0",
     "@types/react-native-sqlite-storage": "^5.0.2",
     "@types/react-native-svg-charts": "^5.0.12",

plan-page-params.ts

@@ -1,8 +0,0 @@
-import {Plan} from './plan';
-
-export type PlanPageParams = {
-  PlanList: {};
-  EditPlan: {
-    plan: Plan;
-  };
-};

route.ts

@@ -3,5 +3,5 @@ import {DrawerParamList} from './drawer-param-list';
 export default interface Route {
   name: keyof DrawerParamList;
   component: React.ComponentType<any>;
-  icon: string;
+  icon?: string;
 }

yarn.lock

@@ -2393,24 +2393,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-navigation/stack@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "@react-navigation/stack@npm:6.3.0"
-  dependencies:
-    "@react-navigation/elements": ^1.3.6
-    color: ^4.2.3
-    warn-once: ^0.1.0
-  peerDependencies:
-    "@react-navigation/native": ^6.0.0
-    react: "*"
-    react-native: "*"
-    react-native-gesture-handler: ">= 1.0.0"
-    react-native-safe-area-context: ">= 3.0.0"
-    react-native-screens: ">= 3.0.0"
-  checksum: fac540297b827249317e1383b6b4d47b3f356e6d20f8e9acadfb5ce5973faf63e56b74b18846837031c15264fc37518701aae16efcf9b8131d22b66f47c19d14
-  languageName: node
-  linkType: hard
-
 "@sideway/address@npm:^4.1.3":
   version: 4.1.4
   resolution: "@sideway/address@npm:4.1.4"
@@ -6434,7 +6416,6 @@ __metadata:
     "@react-native-picker/picker": ^2.4.4
     "@react-navigation/drawer": ^6.5.0
     "@react-navigation/native": ^6.0.13
-    "@react-navigation/stack": ^6.3.0
     "@types/d3-shape": ^3.1.0
     "@types/react-native": ^0.69.0
     "@types/react-native-sqlite-storage": ^5.0.2