Refactor DrawerMenu

Closes #132

DrawerHeader.tsx

@@ -2,17 +2,14 @@ import {DrawerNavigationProp} from '@react-navigation/drawer'
 import {useNavigation} from '@react-navigation/native'
 import {Appbar, IconButton} from 'react-native-paper'
 import {DrawerParamList} from './drawer-param-list'
-import DrawerMenu from './DrawerMenu'
 import useDark from './use-dark'
 
 export default function DrawerHeader({
   name,
-  ids,
-  setIds,
+  children,
 }: {
   name: keyof DrawerParamList
-  ids?: number[]
-  setIds?: (values: number[]) => void
+  children?: JSX.Element | JSX.Element[]
 }) {
   const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>()
   const dark = useDark()
@@ -25,7 +22,7 @@ export default function DrawerHeader({
         onPress={navigation.openDrawer}
       />
       <Appbar.Content title={name} />
-      <DrawerMenu name={name} ids={ids} setIds={setIds} />
+      {children}
     </Appbar.Header>
   )
 }

DrawerMenu.tsx

@@ -1,122 +0,0 @@
-import {NavigationProp, useNavigation} from '@react-navigation/native'
-import {useCallback, useState} from 'react'
-import {Divider, IconButton, Menu} from 'react-native-paper'
-import ConfirmDialog from './ConfirmDialog'
-import {planRepo, setRepo} from './db'
-import {DrawerParamList} from './drawer-param-list'
-import {HomePageParams} from './home-page-params'
-import {PlanPageParams} from './plan-page-params'
-import useDark from './use-dark'
-
-export default function DrawerMenu({
-  name,
-  ids,
-  setIds,
-}: {
-  name: keyof DrawerParamList
-  ids?: number[]
-  setIds?: (values: number[]) => void
-}) {
-  const [showMenu, setShowMenu] = useState(false)
-  const [showRemove, setShowRemove] = useState(false)
-  const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
-  const home = useNavigation<NavigationProp<HomePageParams>>()
-  const plans = useNavigation<NavigationProp<PlanPageParams>>()
-  const dark = useDark()
-
-  const remove = useCallback(async () => {
-    setShowMenu(false)
-    setShowRemove(false)
-    if (name === 'Home') await setRepo.delete(ids.length > 0 ? ids : {})
-    else if (name === 'Plans') await planRepo.delete(ids.length > 0 ? ids : {})
-    reset({index: 0, routes: [{name}]})
-  }, [reset, name, ids])
-
-  const edit = useCallback(async () => {
-    setShowMenu(false)
-    if (name === 'Home') home.navigate('EditSets', {ids})
-    else if (name === 'Plans') {
-      const plan = await planRepo.findOne({where: {id: ids[0]}})
-      plans.navigate('EditPlan', {plan})
-    }
-    setIds([])
-  }, [ids, home, name, plans, setIds])
-
-  const copy = useCallback(async () => {
-    if (name === 'Home') {
-      const set = await setRepo.findOne({
-        where: {id: ids.pop()},
-      })
-      delete set.id
-      home.navigate('EditSet', {set})
-    } else if (name === 'Plans') {
-      const plan = await planRepo.findOne({
-        where: {id: ids.pop()},
-      })
-      delete plan.id
-      plans.navigate('EditPlan', {plan})
-    }
-    setShowMenu(false)
-    setIds([])
-  }, [name, home, plans, setIds, ids])
-
-  const clear = useCallback(() => {
-    setShowMenu(false)
-    setIds([])
-  }, [setIds])
-
-  if (name === 'Home' || name === 'Plans')
-    return (
-      <Menu
-        visible={showMenu}
-        onDismiss={() => setShowMenu(false)}
-        anchor={
-          <IconButton
-            color={dark ? 'white' : 'white'}
-            onPress={() => setShowMenu(true)}
-            icon="more-vert"
-          />
-        }>
-        <Menu.Item
-          icon="edit"
-          title="Edit"
-          onPress={edit}
-          disabled={ids?.length === 0}
-        />
-        <Menu.Item
-          icon="content-copy"
-          title="Copy"
-          onPress={copy}
-          disabled={ids?.length === 0}
-        />
-        <Menu.Item
-          icon="clear"
-          title="Clear"
-          onPress={clear}
-          disabled={ids?.length === 0}
-        />
-        <Divider />
-
-        <Menu.Item
-          icon="delete"
-          onPress={() => setShowRemove(true)}
-          title="Delete"
-        />
-
-        <ConfirmDialog
-          title="Delete all data"
-          show={showRemove}
-          setShow={setShowRemove}
-          onOk={remove}
-          onCancel={() => setShowMenu(false)}>
-          {ids?.length === 0 ? (
-            <>This irreversibly deletes all data from the app. Are you sure?</>
-          ) : (
-            <>This will delete {ids?.length} records. Are you sure?</>
-          )}
-        </ConfirmDialog>
-      </Menu>
-    )
-
-  return null
-}

EditSets.tsx

@@ -59,7 +59,7 @@ export default function EditSets() {
     if (weight) update.weight = Number(weight)
     if (unit) update.unit = unit
     if (newImage) update.image = newImage
-    await setRepo.update(ids, update)
+    if (Object.keys(update).length > 0) await setRepo.update(ids, update)
     navigation.goBack()
   }
 

PlanList.tsx

@@ -5,19 +5,24 @@ import {
 } from '@react-navigation/native'
 import {useCallback, useState} from 'react'
 import {FlatList} from 'react-native'
-import {List} from 'react-native-paper'
+import {Divider, IconButton, List, Menu} from 'react-native-paper'
 import {Like} from 'typeorm'
+import ConfirmDialog from './ConfirmDialog'
 import {planRepo} from './db'
 import DrawerHeader from './DrawerHeader'
 import Page from './Page'
 import {Plan} from './plan'
 import {PlanPageParams} from './plan-page-params'
 import PlanItem from './PlanItem'
+import useDark from './use-dark'
 
 export default function PlanList() {
   const [term, setTerm] = useState('')
   const [plans, setPlans] = useState<Plan[]>()
   const [ids, setIds] = useState<number[]>([])
+  const [showMenu, setShowMenu] = useState(false)
+  const [showRemove, setShowRemove] = useState(false)
+  const dark = useDark()
   const navigation = useNavigation<NavigationProp<PlanPageParams>>()
 
   const refresh = useCallback(async (value: string) => {
@@ -52,9 +57,96 @@ export default function PlanList() {
   const onAdd = () =>
     navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}})
 
+  const edit = useCallback(async () => {
+    setShowMenu(false)
+    const plan = await planRepo.findOne({where: {id: ids.pop()}})
+    navigation.navigate('EditPlan', {plan})
+    setIds([])
+  }, [ids, navigation])
+
+  const copy = useCallback(async () => {
+    setShowMenu(false)
+    const plan = await planRepo.findOne({
+      where: {id: ids.pop()},
+    })
+    delete plan.id
+    navigation.navigate('EditPlan', {plan})
+    setIds([])
+  }, [ids, navigation])
+
+  const clear = useCallback(() => {
+    setShowMenu(false)
+    setIds([])
+  }, [])
+
+  const remove = useCallback(async () => {
+    setShowMenu(false)
+    setShowRemove(false)
+    await planRepo.delete(ids.length > 0 ? ids : {})
+    await refresh(term)
+    setIds([])
+  }, [ids, refresh, term])
+
+  const menuItems = (
+    <>
+      <Menu.Item
+        icon="edit"
+        title="Edit"
+        onPress={edit}
+        disabled={ids?.length === 0}
+      />
+      <Menu.Item
+        icon="content-copy"
+        title="Copy"
+        onPress={copy}
+        disabled={ids?.length === 0}
+      />
+      <Menu.Item
+        icon="clear"
+        title="Clear"
+        onPress={clear}
+        disabled={ids?.length === 0}
+      />
+      <Divider />
+      <Menu.Item
+        icon="delete"
+        onPress={() => setShowRemove(true)}
+        title="Delete"
+      />
+    </>
+  )
+
   return (
     <>
-      <DrawerHeader name="Plans" ids={ids} setIds={setIds} />
+      <DrawerHeader name="Plans">
+        <Menu
+          visible={showMenu}
+          onDismiss={() => setShowMenu(false)}
+          anchor={
+            <IconButton
+              color={dark ? 'white' : 'white'}
+              onPress={() => setShowMenu(true)}
+              icon="more-vert"
+            />
+          }>
+          {menuItems}
+
+          <ConfirmDialog
+            title="Delete plans"
+            show={showRemove}
+            setShow={setShowRemove}
+            onOk={remove}
+            onCancel={() => setShowMenu(false)}>
+            {ids?.length === 0 ? (
+              <>
+                This irreversibly deletes all plans from the app. Are you sure?
+              </>
+            ) : (
+              <>This will delete {ids?.length} plan(s). Are you sure?</>
+            )}
+          </ConfirmDialog>
+        </Menu>
+      </DrawerHeader>
       <Page onAdd={onAdd} term={term} search={search}>
         {plans?.length === 0 ? (
           <List.Item

SetList.tsx

@@ -5,8 +5,9 @@ import {
 } from '@react-navigation/native'
 import {useCallback, useState} from 'react'
 import {FlatList} from 'react-native'
-import {List} from 'react-native-paper'
+import {Divider, IconButton, List, Menu} from 'react-native-paper'
 import {Like} from 'typeorm'
+import ConfirmDialog from './ConfirmDialog'
 import {getNow, setRepo, settingsRepo} from './db'
 import DrawerHeader from './DrawerHeader'
 import GymSet, {defaultSet} from './gym-set'
@@ -14,6 +15,7 @@ import {HomePageParams} from './home-page-params'
 import Page from './Page'
 import SetItem from './SetItem'
 import Settings from './settings'
+import useDark from './use-dark'
 
 const limit = 15
 
@@ -24,16 +26,23 @@ export default function SetList() {
   const [end, setEnd] = useState(false)
   const [settings, setSettings] = useState<Settings>()
   const [ids, setIds] = useState<number[]>([])
+  const [showMenu, setShowMenu] = useState(false)
+  const [showRemove, setShowRemove] = useState(false)
+  const dark = useDark()
   const navigation = useNavigation<NavigationProp<HomePageParams>>()
 
   const refresh = useCallback(async (value: string) => {
-    console.log(`${SetList.name}.refresh:`, {value, limit})
     const newSets = await setRepo.find({
       where: {name: Like(`%${value}%`), hidden: 0 as any},
       take: limit,
       skip: 0,
       order: {created: 'DESC'},
     })
+    console.log(`${SetList.name}.refresh:`, {
+      value,
+      limit,
+      length: newSets.length,
+    })
     setSets(newSets)
     setOffset(0)
     setEnd(false)
@@ -94,9 +103,96 @@ export default function SetList() {
     [refresh],
   )
 
+  const edit = useCallback(() => {
+    setShowMenu(false)
+    navigation.navigate('EditSets', {ids})
+    setIds([])
+  }, [ids, navigation])
+
+  const copy = useCallback(async () => {
+    setShowMenu(false)
+    const set = await setRepo.findOne({
+      where: {id: ids.pop()},
+    })
+    delete set.id
+    delete set.created
+    navigation.navigate('EditSet', {set})
+    setIds([])
+  }, [ids, navigation])
+
+  const clear = useCallback(() => {
+    setShowMenu(false)
+    setIds([])
+  }, [])
+
+  const remove = useCallback(async () => {
+    setShowMenu(false)
+    setShowRemove(false)
+    await setRepo.delete(ids.length > 0 ? ids : {})
+    await refresh(term)
+  }, [ids, refresh, term])
+
+  const menuItems = (
+    <>
+      <Menu.Item
+        icon="edit"
+        title="Edit"
+        onPress={edit}
+        disabled={ids?.length === 0}
+      />
+      <Menu.Item
+        icon="content-copy"
+        title="Copy"
+        onPress={copy}
+        disabled={ids?.length === 0}
+      />
+      <Menu.Item
+        icon="clear"
+        title="Clear"
+        onPress={clear}
+        disabled={ids?.length === 0}
+      />
+      <Divider />
+      <Menu.Item
+        icon="delete"
+        onPress={() => setShowRemove(true)}
+        title="Delete"
+      />
+    </>
+  )
+
   return (
     <>
-      <DrawerHeader name="Home" ids={ids} setIds={setIds} />
+      <DrawerHeader name="Home">
+        <Menu
+          visible={showMenu}
+          onDismiss={() => setShowMenu(false)}
+          anchor={
+            <IconButton
+              color={dark ? 'white' : 'white'}
+              onPress={() => setShowMenu(true)}
+              icon="more-vert"
+            />
+          }>
+          {menuItems}
+
+          <ConfirmDialog
+            title="Delete all"
+            show={showRemove}
+            setShow={setShowRemove}
+            onOk={remove}
+            onCancel={() => setShowMenu(false)}>
+            {ids?.length === 0 ? (
+              <>
+                This irreversibly deletes all sets from the app. Are you sure?
+              </>
+            ) : (
+              <>This will delete {ids?.length} set(s). Are you sure?</>
+            )}
+          </ConfirmDialog>
+        </Menu>
+      </DrawerHeader>
+
       <Page onAdd={onAdd} term={term} search={search}>
         {sets?.length === 0 ? (
           <List.Item