Merge branch 'master' of gitea.presley.nz:brandon.presley/Massive

EditPlan.tsx

@@ -79,8 +79,7 @@ export default function EditPlan() {
           {DAYS.map(day => (
             <Switch
               key={day}
-              onValueChange={value => toggleDay(value, day)}
+              onChange={value => toggleDay(value, day)}
-              onPress={() => toggleDay(!days.includes(day), day)}
               value={days.includes(day)}>
               {day}
             </Switch>
@@ -94,9 +93,8 @@ export default function EditPlan() {
             names.map(name => (
               <Switch
                 key={name}
-                onValueChange={value => toggleWorkout(value, name)}
+                onChange={value => toggleWorkout(value, name)}
-                value={workouts.includes(name)}
+                value={workouts.includes(name)}>
-                onPress={() => toggleWorkout(!workouts.includes(name), name)}>
                 {name}
               </Switch>
             ))

ListMenu.tsx

@@ -0,0 +1,101 @@
+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,
+  onSelect,
+  ids,
+}: {
+  onEdit: () => void
+  onCopy: () => void
+  onClear: () => void
+  onDelete: () => void
+  onSelect: () => 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()
+  }
+
+  const select = () => {
+    setShowMenu(false)
+    onSelect()
+  }
+
+  return (
+    <Menu
+      visible={showMenu}
+      onDismiss={() => setShowMenu(false)}
+      anchor={
+        <IconButton
+          color={dark ? 'white' : 'white'}
+          onPress={() => setShowMenu(true)}
+          icon="more-vert"
+        />
+      }>
+      <Menu.Item icon="done-all" title="Select all" onPress={select} />
+      <Menu.Item
+        icon="clear"
+        title="Clear"
+        onPress={clear}
+        disabled={ids?.length === 0}
+      />
+      <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}
+      />
+      <Divider />
+      <Menu.Item
+        icon="delete"
+        onPress={() => setShowRemove(true)}
+        title="Delete"
+      />
+      <ConfirmDialog
+        title={ids?.length === 0 ? 'Delete all' : 'Delete selected'}
+        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,30 @@ 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 = (
+  const select = useCallback(() => {
-    <>
+    setIds(plans.map(plan => plan.id))
-      <Menu.Item
+  }, [plans])
-        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)}
+          onSelect={select}
-              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,30 @@ 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 = (
+  const select = useCallback(() => {
-    <>
+    setIds(sets.map(set => set.id))
-      <Menu.Item
+  }, [sets])
-        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)}
+          onSelect={select}
-              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}>

SettingsPage.tsx

@@ -5,13 +5,7 @@ import {
 } from '@react-navigation/native'
 import {format} from 'date-fns'
 import {useCallback, useMemo, useState} from 'react'
-import {
+import {DeviceEventEmitter, NativeModules, Platform, View} from 'react-native'
-  DeviceEventEmitter,
-  FlatList,
-  NativeModules,
-  Platform,
-  View,
-} from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import {Dirs, FileSystem} from 'react-native-file-access'
 import {Button, Subheading} from 'react-native-paper'
@@ -54,7 +48,6 @@ export default function SettingsPage() {
   useFocusEffect(
     useCallback(() => {
       settingsRepo.findOne({where: {}}).then(settings => {
-        console.log(`${SettingsPage.name}.focus:`, settings)
         setAlarm(settings.alarm)
         setVibrate(settings.vibrate)
         setSound(settings.sound)
@@ -198,12 +191,8 @@ export default function SettingsPage() {
   )
 
   const renderSwitch = useCallback(
-    ({item}: {item: Input<boolean>}) => (
+    (item: Input<boolean>) => (
-      <Switch
+      <Switch key={item.name} value={item.value} onChange={item.onChange}>
-        onPress={() => item.onChange(!item.value)}
-        key={item.name}
-        value={item.value}
-        onValueChange={item.onChange}>
         {item.name}
       </Switch>
     ),
@@ -236,8 +225,9 @@ export default function SettingsPage() {
   ].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
 
   const renderSelect = useCallback(
-    ({item}: {item: Input<string>}) => (
+    (item: Input<string>) => (
       <Select
+        key={item.name}
         value={item.value}
         onChange={item.onChange}
         label={item.name}
@@ -268,39 +258,60 @@ export default function SettingsPage() {
     toast('Database exported. Check downloads.')
   }, [])
 
+  const buttons = useMemo(
+    () =>
+      [
+        {
+          name: 'Alarm sound',
+          element: (
+            <View
+              key="alarm-sound"
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingLeft: ITEM_PADDING,
+              }}>
+              <Subheading style={{width: 100}}>Alarm sound</Subheading>
+              <Button onPress={changeSound}>{soundString || 'Default'}</Button>
+            </View>
+          ),
+        },
+        {
+          name: 'Export database',
+          element: (
+            <Button
+              key="export-db"
+              style={{alignSelf: 'flex-start'}}
+              onPress={exportDatabase}>
+              Export database
+            </Button>
+          ),
+        },
+        {
+          name: 'Import database',
+          element: (
+            <Button
+              key="import-db"
+              style={{alignSelf: 'flex-start'}}
+              onPress={() => setImporting(true)}>
+              Import database
+            </Button>
+          ),
+        },
+      ].filter(({name}) => name.toLowerCase().includes(term.toLowerCase())),
+    [changeSound, exportDatabase, soundString, term],
+  )
+
   return (
     <>
       <DrawerHeader name="Settings" />
+
       <Page term={term} search={setTerm} style={{flexGrow: 0}}>
-        <FlatList
+        <View style={{marginTop: MARGIN}}>
-          style={{marginTop: MARGIN}}
+          {switches.map(s => renderSwitch(s))}
-          data={switches}
+          {selects.map(s => renderSelect(s))}
-          renderItem={renderSwitch}
+          {buttons.map(b => b.element)}
-        />
+        </View>
-        <FlatList data={selects} renderItem={renderSelect} />
-        {'alarm sound'.includes(term.toLowerCase()) && (
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingLeft: ITEM_PADDING,
-            }}>
-            <Subheading style={{width: 100}}>Alarm sound</Subheading>
-            <Button onPress={changeSound}>{soundString || 'Default'}</Button>
-          </View>
-        )}
-        {'export database'.includes(term.toLowerCase()) && (
-          <Button style={{alignSelf: 'flex-start'}} onPress={exportDatabase}>
-            Export database
-          </Button>
-        )}
-        {'import database'.includes(term.toLowerCase()) && (
-          <Button
-            style={{alignSelf: 'flex-start'}}
-            onPress={() => setImporting(true)}>
-            Import database
-          </Button>
-        )}
       </Page>
 
       <ConfirmDialog

Switch.tsx

@@ -4,20 +4,18 @@ import {MARGIN} from './constants'
 
 export default function Switch({
   value,
-  onValueChange,
+  onChange,
-  onPress,
   children,
 }: {
   value?: boolean
-  onValueChange: (value: boolean) => void
+  onChange: (value: boolean) => void
-  onPress: () => void
   children: string
 }) {
   const {colors} = useTheme()
 
   return (
     <Pressable
-      onPress={onPress}
+      onPress={() => onChange(!value)}
       style={{
         flexDirection: 'row',
         flexWrap: 'wrap',
@@ -28,7 +26,7 @@ export default function Switch({
         color={colors.primary}
         style={{marginRight: MARGIN}}
         value={value}
-        onValueChange={onValueChange}
+        onValueChange={onChange}
       />
       <Text>{children}</Text>
     </Pressable>

android/app/build.gradle

@@ -41,8 +41,8 @@ android {
         missingDimensionStrategy "RNNotifications.reactNativeVersion", "reactNative60"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36122
+        versionCode 36125
-        versionName "1.96"
+        versionName "1.99"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "massive",
-  "version": "1.96",
+  "version": "1.99",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {