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}
-        name={key}
-        control={control}
-        render={({field: {onChange, value}}) => (
-          <Switch
-            value={value as boolean}
-            onPress={() => {
-              onChange(!value)
-            }}
-            onChange={onChange}>
         {toSentenceCase(key)}
       </Switch>
-        )}
-      />
     ),
     [control],
   )
@@ -185,30 +170,19 @@ export default function SettingsPage() {
     toast('Database exported. Check downloads.')
   }, [])
 
-  const buttons = useMemo(
+  const buttons = [
-    () => [
     {
       name: 'Alarm sound',
       element: (
-          <View
+        <LabelledButton label="Alarm sound" onPress={changeSound}>
-            key="alarm-sound"
+          {soundString || 'Default'}
-            style={{
+        </LabelledButton>
-              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
+        <Button style={{alignSelf: 'flex-start'}} onPress={exportDatabase}>
-            key="export-db"
-            style={{alignSelf: 'flex-start'}}
-            onPress={exportDatabase}>
           Export database
         </Button>
       ),
@@ -217,16 +191,13 @@ export default function SettingsPage() {
       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,23 +1,26 @@
+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 (
+    <Controller
+      name={name}
+      control={control}
+      render={({field: {onChange, value}}) => (
         <Pressable
-      onPress={onPress}
+          onPress={() => onChange(!value)}
           style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
@@ -32,5 +35,7 @@ export default function Switch({
           />
           <Text>{children}</Text>
         </Pressable>
+      )}
+    />
   )
 }