Split up state for SettingsPage

This improved performance when visually
toggling an option

SettingsPage.tsx

@@ -1,6 +1,6 @@
 import {Picker} from '@react-native-picker/picker'
 import {useFocusEffect} from '@react-navigation/native'
-import {useCallback, useEffect, useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {DeviceEventEmitter, NativeModules, ScrollView} from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import {Button} from 'react-native-paper'
@@ -12,35 +12,45 @@ import DrawerHeader from './DrawerHeader'
 import Input from './input'
 import Page from './Page'
 import Select from './Select'
-import Settings from './settings'
 import Switch from './Switch'
 import {toast} from './toast'
+import {useTheme} from './use-theme'
 
 export default function SettingsPage() {
   const [battery, setBattery] = useState(false)
   const [ignoring, setIgnoring] = useState(false)
   const [term, setTerm] = useState('')
-  const [settings, setSettings] = useState<Settings>({} as Settings)
+  const [vibrate, setVibrate] = useState(false)
-
+  const [alarm, setAlarm] = useState(false)
-  useEffect(() => {
+  const [sound, setSound] = useState('')
-    console.log(`${SettingsPage.name}.useEffect:`, {settings})
+  const [notify, setNotify] = useState(false)
-  }, [settings])
+  const [images, setImages] = useState(false)
+  const [showUnit, setShowUnit] = useState(false)
+  const [steps, setSteps] = useState(false)
+  const [date, setDate] = useState('%Y-%m-%d %H:%M')
+  const {theme, setTheme, color, setColor} = useTheme()
+  const [showDate, setShowDate] = useState(false)
+  const [showSets, setShowSets] = useState(false)
+  const [noSound, setNoSound] = useState(false)
 
   useFocusEffect(
     useCallback(() => {
       NativeModules.AlarmModule.ignoringBattery(setIgnoring)
-      settingsRepo.findOne({where: {}}).then(setSettings)
+      settingsRepo.findOne({where: {}}).then(settings => {
+        setAlarm(settings.alarm)
+        setVibrate(settings.vibrate)
+        setSound(settings.sound)
+        setNotify(settings.notify)
+        setImages(settings.images)
+        setShowUnit(settings.showUnit)
+        setSteps(settings.steps)
+        setDate(settings.date)
+        setShowDate(settings.showDate)
+        setShowSets(settings.showSets)
+      })
     }, []),
   )
 
-  const update = useCallback(
-    (value: boolean, field: keyof Settings) => {
-      settingsRepo.update({}, {[field]: value})
-      setSettings({...settings, [field]: value})
-    },
-    [settings, setSettings],
-  )
-
   const changeAlarmEnabled = useCallback(
     (enabled: boolean) => {
       if (enabled)
@@ -50,19 +60,18 @@ export default function SettingsPage() {
         })
       else toast('Stopped timers running after each set.')
       if (enabled && !ignoring) setBattery(true)
-      update(enabled, 'alarm')
+      setAlarm(enabled)
+      settingsRepo.update({}, {alarm: enabled})
     },
-    [setBattery, ignoring, update],
+    [setBattery, ignoring],
   )
 
-  const changeVibrate = useCallback(
+  const changeVibrate = useCallback((enabled: boolean) => {
-    (enabled: boolean) => {
+    if (enabled) toast('When a timer completes, vibrate your phone.')
-      if (enabled) toast('When a timer completes, vibrate your phone.')
+    else toast('Stop vibrating at the end of timers.')
-      else toast('Stop vibrating at the end of timers.')
+    setVibrate(enabled)
-      update(enabled, 'vibrate')
+    settingsRepo.update({}, {vibrate: enabled})
-    },
+  }, [])
-    [update],
-  )
 
   const changeSound = useCallback(async () => {
     const {fileCopyUri} = await DocumentPicker.pickSingle({
@@ -71,124 +80,96 @@ export default function SettingsPage() {
     })
     if (!fileCopyUri) return
     settingsRepo.update({}, {sound: fileCopyUri})
-    setSettings({...settings, sound: fileCopyUri})
+    setSound(fileCopyUri)
     toast('This song will now play after rest timers complete.')
-  }, [setSettings, settings])
+  }, [])
 
-  const changeNotify = useCallback(
+  const changeNotify = useCallback((enabled: boolean) => {
-    (enabled: boolean) => {
+    setNotify(enabled)
-      update(enabled, 'notify')
+    settingsRepo.update({}, {notify: enabled})
-      if (enabled) toast('Show when a set is a new record.')
+    if (enabled) toast('Show when a set is a new record.')
-      else toast('Stopped showing notifications for new records.')
+    else toast('Stopped showing notifications for new records.')
-    },
+  }, [])
-    [update],
-  )
 
-  const changeImages = useCallback(
+  const changeImages = useCallback((enabled: boolean) => {
-    (enabled: boolean) => {
+    setImages(enabled)
-      update(enabled, 'images')
+    settingsRepo.update({}, {images: enabled})
-      if (enabled) toast('Show images for sets.')
+    if (enabled) toast('Show images for sets.')
-      else toast('Stopped showing images for sets.')
+    else toast('Stopped showing images for sets.')
-    },
+  }, [])
-    [update],
-  )
 
-  const changeUnit = useCallback(
+  const changeUnit = useCallback((enabled: boolean) => {
-    (enabled: boolean) => {
+    setShowUnit(enabled)
-      update(enabled, 'showUnit')
+    settingsRepo.update({}, {showUnit: enabled})
-      if (enabled) toast('Show option to select unit for sets.')
+    if (enabled) toast('Show option to select unit for sets.')
-      else toast('Hid unit option for sets.')
+    else toast('Hid unit option for sets.')
-    },
+  }, [])
-    [update],
-  )
 
-  const changeSteps = useCallback(
+  const changeSteps = useCallback((enabled: boolean) => {
-    (enabled: boolean) => {
+    setSteps(enabled)
-      update(enabled, 'steps')
+    settingsRepo.update({}, {steps: enabled})
-      if (enabled) toast('Show steps for a workout.')
+    if (enabled) toast('Show steps for a workout.')
-      else toast('Stopped showing steps for workouts.')
+    else toast('Stopped showing steps for workouts.')
-    },
+  }, [])
-    [update],
-  )
 
-  const changeShowDate = useCallback(
+  const changeShowDate = useCallback((enabled: boolean) => {
-    (enabled: boolean) => {
+    setShowDate(enabled)
-      update(enabled, 'showDate')
+    settingsRepo.update({}, {showDate: enabled})
-      if (enabled) toast('Show date for sets by default.')
+    if (enabled) toast('Show date for sets by default.')
-      else toast('Stopped showing date for sets by default.')
+    else toast('Stopped showing date for sets by default.')
-    },
+  }, [])
-    [update],
-  )
 
-  const changeShowSets = useCallback(
+  const changeShowSets = useCallback((enabled: boolean) => {
-    (enabled: boolean) => {
+    setShowSets(enabled)
-      update(enabled, 'showSets')
+    settingsRepo.update({}, {showSets: enabled})
-      if (enabled) toast('Show target sets for workouts.')
+    if (enabled) toast('Show target sets for workouts.')
-      else toast('Stopped showing target sets for workouts.')
+    else toast('Stopped showing target sets for workouts.')
-    },
+  }, [])
-    [update],
-  )
 
-  const changeNoSound = useCallback(
+  const changeNoSound = useCallback((enabled: boolean) => {
-    (enabled: boolean) => {
+    setNoSound(enabled)
-      update(enabled, 'noSound')
+    settingsRepo.update({}, {noSound: enabled})
-      if (enabled) toast('Disable sound on rest timer alarms.')
+    if (enabled) toast('Disable sound on rest timer alarms.')
-      else toast('Enabled sound for rest timer alarms.')
+    else toast('Enabled sound for rest timer alarms.')
-    },
+  }, [])
-    [update],
-  )
 
   const switches: Input<boolean>[] = [
-    {name: 'Rest timers', value: settings.alarm, onChange: changeAlarmEnabled},
+    {name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
-    {name: 'Vibrate', value: settings.vibrate, onChange: changeVibrate},
+    {name: 'Vibrate', value: vibrate, onChange: changeVibrate},
-    {name: 'Disable sound', value: settings.noSound, onChange: changeNoSound},
+    {name: 'Disable sound', value: noSound, onChange: changeNoSound},
-    {name: 'Notifications', value: settings.notify, onChange: changeNotify},
+    {name: 'Notifications', value: notify, onChange: changeNotify},
-    {name: 'Show images', value: settings.images, onChange: changeImages},
+    {name: 'Show images', value: images, onChange: changeImages},
-    {name: 'Show unit', value: settings.showUnit, onChange: changeUnit},
+    {name: 'Show unit', value: showUnit, onChange: changeUnit},
-    {name: 'Show steps', value: settings.steps, onChange: changeSteps},
+    {name: 'Show steps', value: steps, onChange: changeSteps},
-    {name: 'Show date', value: settings.showDate, onChange: changeShowDate},
+    {name: 'Show date', value: showDate, onChange: changeShowDate},
-    {name: 'Show sets', value: settings.showSets, onChange: changeShowSets},
+    {name: 'Show sets', value: showSets, onChange: changeShowSets},
   ]
 
   const changeTheme = useCallback(
     (value: string) => {
       settingsRepo.update({}, {theme: value})
-      setSettings({...settings, theme: value})
+      setTheme(value)
     },
-    [settings, setSettings],
+    [setTheme],
   )
 
-  const changeDate = useCallback(
+  const changeDate = useCallback((value: string) => {
-    (value: string) => {
+    settingsRepo.update({}, {date: value})
-      settingsRepo.update({}, {date: value})
+    setDate(value)
-      setSettings({...settings, date: value as any})
+  }, [])
-    },
-    [settings, setSettings],
-  )
 
-  const sound = useMemo(() => {
+  const soundString = useMemo(() => {
-    if (!settings.sound) return null
+    if (!sound) return null
-    const split = settings.sound.split('/')
+    const split = sound.split('/')
     return ': ' + split.pop()
-  }, [settings.sound])
+  }, [sound])
-
-  const theme = useMemo(() => {
-    if (!'theme'.includes(term.toLowerCase())) return null
-    return (
-      <Select value={settings.theme} onChange={changeTheme}>
-        <Picker.Item value="system" label="Follow system theme" />
-        <Picker.Item value="dark" label="Dark theme" />
-        <Picker.Item value="light" label="Light theme" />
-      </Select>
-    )
-  }, [term, changeTheme, settings.theme])
 
   const changeColor = useCallback(
     (value: string) => {
-      setSettings({...settings, color: value})
+      setColor(value)
       settingsRepo.update({}, {color: value})
     },
-    [setSettings, settings],
+    [setColor],
   )
 
   return (
@@ -209,9 +190,15 @@ export default function SettingsPage() {
                 {input.name}
               </Switch>
             ))}
-          {theme}
+          {'theme'.includes(term.toLowerCase()) && (
+            <Select value={theme} onChange={changeTheme}>
+              <Picker.Item value="system" label="Follow system theme" />
+              <Picker.Item value="dark" label="Dark theme" />
+              <Picker.Item value="light" label="Light theme" />
+            </Select>
+          )}
           {'color'.includes(term.toLowerCase()) && (
-            <Select value={settings.color} onChange={changeColor}>
+            <Select value={color} onChange={changeColor}>
               {lightColors.concat(darkColors).map(colorOption => (
                 <Picker.Item
                   key={colorOption.hex}
@@ -223,7 +210,7 @@ export default function SettingsPage() {
             </Select>
           )}
           {'date format'.includes(term.toLowerCase()) && (
-            <Select value={settings.date} onChange={changeDate}>
+            <Select value={date} onChange={changeDate}>
               <Picker.Item value="%Y-%m-%d %H:%M" label="1990-12-24 15:05" />
               <Picker.Item value="%Y-%m-%d" label="1990-12-24" />
               <Picker.Item value="%d/%m" label="24/12 (dd/MM)" />
@@ -240,7 +227,7 @@ export default function SettingsPage() {
           )}
           {'alarm sound'.includes(term.toLowerCase()) && (
             <Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
-              Alarm sound{sound}
+              Alarm sound{soundString}
             </Button>
           )}
         </ScrollView>