Start simplifying Switch.tsx

LabelledButton.tsx

@@ -0,0 +1,25 @@
+import {View} from 'react-native'
+import {ITEM_PADDING} from './constants'
+import {Button, Subheading} from 'react-native-paper'
+
+export default function LabelledButton({
+  label,
+  onPress,
+  children,
+}: {
+  label?: string
+  onPress: () => void
+  children: string
+}) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: ITEM_PADDING,
+      }}>
+      <Subheading style={{width: 100}}>{label}</Subheading>
+      <Button onPress={onPress}>{children}</Button>
+    </View>
+  )
+}

SettingsPage.tsx

@@ -6,7 +6,7 @@ import {
 import {format} from 'date-fns'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 import {Controller, useForm} from 'react-hook-form'
-import {DeviceEventEmitter, NativeModules, Platform, View} from 'react-native'
+import {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'
@@ -16,6 +16,7 @@ import {AppDataSource} from './data-source'
 import {setRepo, settingsRepo} from './db'
 import {DrawerParamList} from './drawer-param-list'
 import DrawerHeader from './DrawerHeader'
+import LabelledButton from './LabelledButton'
 import {darkOptions, lightOptions, themeOptions} from './options'
 import Page from './Page'
 import Select from './Select'
@@ -41,16 +42,12 @@ export default function SettingsPage() {
 
   useEffect(() => {
     if (Object.keys(settings).length === 0) return
-    console.log(`${SettingsPage.name}.update`)
+    console.log(`${SettingsPage.name}.update`, {settings})
     settingsRepo.update({}, settings)
     setLightColor(settings.lightColor)
     setDarkColor(settings.darkColor)
     setTheme(settings.theme)
     if (!settings.alarm || ignoring) return
-    DeviceEventEmitter.emit('toast', {
-      value: 'Timers will now run after each set',
-      timeout: 4000,
-    })
     NativeModules.SettingsModule.ignoreBattery()
     setIgnoring(true)
   }, [settings, setDarkColor, setLightColor, setTheme, ignoring])
@@ -86,21 +83,9 @@ export default function SettingsPage() {
 
   const renderSwitch = useCallback(
     (key: keyof Settings) => (
-      <Controller
+      <Switch control={control} name={key}>
-        key={key}
+        {toSentenceCase(key)}
-        name={key}
+      </Switch>
-        control={control}
-        render={({field: {onChange, value}}) => (
-          <Switch
-            value={value as boolean}
-            onPress={() => {
-              onChange(!value)
-            }}
-            onChange={onChange}>
-            {toSentenceCase(key)}
-          </Switch>
-        )}
-      />
     ),
     [control],
   )
@@ -185,48 +170,34 @@ export default function SettingsPage() {
     toast('Database exported. Check downloads.')
   }, [])
 
-  const buttons = useMemo(
+  const buttons = [
-    () => [
+    {
-      {
+      name: 'Alarm sound',
-        name: 'Alarm sound',
+      element: (
-        element: (
+        <LabelledButton label="Alarm sound" onPress={changeSound}>
-          <View
+          {soundString || 'Default'}
-            key="alarm-sound"
+        </LabelledButton>
-            style={{
+      ),
-              flexDirection: 'row',
+    },
-              alignItems: 'center',
+    {
-              paddingLeft: ITEM_PADDING,
+      name: 'Export database',
-            }}>
+      element: (
-            <Subheading style={{width: 100}}>Alarm sound</Subheading>
+        <Button style={{alignSelf: 'flex-start'}} onPress={exportDatabase}>
-            <Button onPress={changeSound}>{soundString || 'Default'}</Button>
+          Export database
-          </View>
+        </Button>
-        ),
+      ),
-      },
+    },
-      {
+    {
-        name: 'Export database',
+      name: 'Import database',
-        element: (
+      element: (
-          <Button
+        <Button
-            key="export-db"
+          style={{alignSelf: 'flex-start'}}
-            style={{alignSelf: 'flex-start'}}
+          onPress={() => setImporting(true)}>
-            onPress={exportDatabase}>
+          Import database
-            Export database
+        </Button>
-          </Button>
+      ),
-        ),
+    },
-      },
+  ]
-      {
-        name: 'Import database',
-        element: (
-          <Button
-            key="import-db"
-            style={{alignSelf: 'flex-start'}}
-            onPress={() => setImporting(true)}>
-            Import database
-          </Button>
-        ),
-      },
-    ],
-    [changeSound, exportDatabase, soundString],
-  )
 
   return (
     <>

Switch.tsx

@@ -1,36 +1,41 @@
+import {Control, Controller} from 'react-hook-form'
 import {Platform, Pressable} from 'react-native'
 import {Switch as PaperSwitch, Text, useTheme} from 'react-native-paper'
 import {MARGIN} from './constants'
 
 export default function Switch({
-  value,
+  control,
-  onChange,
+  name,
-  onPress,
   children,
 }: {
-  value?: boolean
+  name: string
-  onChange: (value: boolean) => void
+  control: Control<any, any>
-  onPress: () => void
   children: string
 }) {
   const {colors} = useTheme()
 
   return (
-    <Pressable
+    <Controller
-      onPress={onPress}
+      name={name}
-      style={{
+      control={control}
-        flexDirection: 'row',
+      render={({field: {onChange, value}}) => (
-        flexWrap: 'wrap',
+        <Pressable
-        alignItems: 'center',
+          onPress={() => onChange(!value)}
-        marginBottom: Platform.OS === 'ios' ? MARGIN : null,
+          style={{
-      }}>
+            flexDirection: 'row',
-      <PaperSwitch
+            flexWrap: 'wrap',
-        color={colors.primary}
+            alignItems: 'center',
-        style={{marginRight: MARGIN}}
+            marginBottom: Platform.OS === 'ios' ? MARGIN : null,
-        value={value}
+          }}>
-        onValueChange={onChange}
+          <PaperSwitch
-      />
+            color={colors.primary}
-      <Text>{children}</Text>
+            style={{marginRight: MARGIN}}
-    </Pressable>
+            value={value}
+            onValueChange={onChange}
+          />
+          <Text>{children}</Text>
+        </Pressable>
+      )}
+    />
   )
 }