From f9e357ff80b0c509485af00d258af0569cb85fdd Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Wed, 21 Dec 2022 13:02:53 +1300
Subject: [PATCH] Factor out list menu

---
 ListMenu.tsx | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 PlanList.tsx | 76 +++++-------------------------------------
 SetList.tsx  | 76 +++++-------------------------------------
 3 files changed, 111 insertions(+), 134 deletions(-)
 create mode 100644 ListMenu.tsx

diff --git a/ListMenu.tsx b/ListMenu.tsx
new file mode 100644
index 0000000..488ec7d
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/PlanList.tsx b/PlanList.tsx
index 0b4ec35..2629010 100644
--- a/PlanList.tsx
+++ b/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
-          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>
+        <ListMenu
+          onClear={clear}
+          onCopy={copy}
+          onDelete={remove}
+          onEdit={edit}
+          ids={ids}
+        />
       </DrawerHeader>
       <Page onAdd={onAdd} term={term} search={search}>
         {plans?.length === 0 ? (
diff --git a/SetList.tsx b/SetList.tsx
index a08b212..f971fcb 100644
--- a/SetList.tsx
+++ b/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
-          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>
+        <ListMenu
+          onClear={clear}
+          onCopy={copy}
+          onDelete={remove}
+          onEdit={edit}
+          ids={ids}
+        />
       </DrawerHeader>
 
       <Page onAdd={onAdd} term={term} search={search}>