Factor out list menu

ListMenu.tsx

@@ -0,0 +1,93 @@
+import {useState} from 'react'
+import {Divider, IconButton, Menu} from 'react-native-paper'
+import ConfirmDialog from './ConfirmDialog'
+import useDark from './use-dark'
+
+export default function ListMenu({
+  onEdit,
+  onCopy,
+  onClear,
+  onDelete,
+  ids,
+}: {
+  onEdit: () => void
+  onCopy: () => void
+  onClear: () => void
+  onDelete: () => void
+  ids?: number[]
+}) {
+  const [showMenu, setShowMenu] = useState(false)
+  const [showRemove, setShowRemove] = useState(false)
+  const dark = useDark()
+
+  const edit = () => {
+    setShowMenu(false)
+    onEdit()
+  }
+
+  const copy = () => {
+    setShowMenu(false)
+    onCopy()
+  }
+
+  const clear = () => {
+    setShowMenu(false)
+    onClear()
+  }
+
+  const remove = () => {
+    setShowMenu(false)
+    setShowRemove(false)
+    onDelete()
+  }
+
+  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"
+        show={showRemove}
+        setShow={setShowRemove}
+        onOk={remove}
+        onCancel={() => setShowMenu(false)}>
+        {ids?.length === 0 ? (
+          <>This irreversibly deletes records from the app. Are you sure?</>
+        ) : (
+          <>This will delete {ids?.length} record(s). Are you sure?</>
+        )}
+      </ConfirmDialog>
+    </Menu>
+  )
+}

PlanList.tsx

@@ -5,24 +5,20 @@ import {
 } from '@react-navigation/native'
 import {useCallback, useState} from 'react'
 import {FlatList} from 'react-native'
-import {Divider, IconButton, List, Menu} from 'react-native-paper'
+import {List} from 'react-native-paper'
 import {Like} from 'typeorm'
-import ConfirmDialog from './ConfirmDialog'
 import {planRepo} from './db'
 import DrawerHeader from './DrawerHeader'
+import ListMenu from './ListMenu'
 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) => {
@@ -58,14 +54,12 @@ export default function PlanList() {
     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()},
     })
@@ -75,77 +69,25 @@ export default function PlanList() {
   }, [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">
-        <Menu
+        <ListMenu
-          visible={showMenu}
+          onClear={clear}
-          onDismiss={() => setShowMenu(false)}
+          onCopy={copy}
-          anchor={
+          onDelete={remove}
-            <IconButton
+          onEdit={edit}
-              color={dark ? 'white' : 'white'}
+          ids={ids}
-              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 ? (

SetList.tsx

@@ -5,17 +5,16 @@ import {
 } from '@react-navigation/native'
 import {useCallback, useState} from 'react'
 import {FlatList} from 'react-native'
-import {Divider, IconButton, List, Menu} from 'react-native-paper'
+import {List} 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'
 import {HomePageParams} from './home-page-params'
+import ListMenu from './ListMenu'
 import Page from './Page'
 import SetItem from './SetItem'
 import Settings from './settings'
-import useDark from './use-dark'
 
 const limit = 15
 
@@ -26,9 +25,6 @@ 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) => {
@@ -104,13 +100,11 @@ export default function SetList() {
   )
 
   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()},
     })
@@ -121,77 +115,25 @@ export default function SetList() {
   }, [ids, navigation])
 
   const clear = useCallback(() => {
-    setShowMenu(false)
     setIds([])
   }, [])
 
   const remove = useCallback(async () => {
     setIds([])
-    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">
-        <Menu
+        <ListMenu
-          visible={showMenu}
+          onClear={clear}
-          onDismiss={() => setShowMenu(false)}
+          onCopy={copy}
-          anchor={
+          onDelete={remove}
-            <IconButton
+          onEdit={edit}
-              color={dark ? 'white' : 'white'}
+          ids={ids}
-              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}>