Factor out list menu
This commit is contained in:
parent
75f2a8269a
commit
f9e357ff80
93
ListMenu.tsx
Normal file
93
ListMenu.tsx
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
76
PlanList.tsx
76
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 ? (
|
||||
|
|
76
SetList.tsx
76
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}>
|
||||
|
|
Loading…
Reference in New Issue
Block a user