Add react-hook-form for settings page

This seems to have improved performance.

Related to #135.

SettingsPage.tsx

@@ -19,6 +19,7 @@ import Settings from './settings'
 import Switch from './Switch'
 import {toast} from './toast'
 import {useTheme} from './use-theme'
+import {useForm} from 'react-hook-form'
 
 const twelveHours = ['P', 'Pp', 'ccc p', 'p', 'yyyy-MM-d', 'yyyy.MM.d']
 const twentyFours = ['P', 'P, k:m', 'ccc k:m', 'k:m', 'yyyy-MM-d', 'yyyy.MM.d']
@@ -28,15 +29,18 @@ export default function SettingsPage() {
   const [term, setTerm] = useState('')
   const [formatOptions, setFormatOptions] = useState<string[]>(twelveHours)
   const [importing, setImporting] = useState(false)
-  const [settings, setSettings] = useState(new Settings())
   const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
   const today = new Date()
 
+  const {watch, setValue} = useForm<Settings>({
+    defaultValues: () => settingsRepo.findOne({where: {}}),
+  })
+  const settings = watch()
+
   const {theme, setTheme, lightColor, setLightColor, darkColor, setDarkColor} =
     useTheme()
 
   useEffect(() => {
-    settingsRepo.findOne({where: {}}).then(setSettings)
     NativeModules.SettingsModule.ignoringBattery(setIgnoring)
     NativeModules.SettingsModule.is24().then((is24: boolean) => {
       console.log(`${SettingsPage.name}.focus:`, {is24})
@@ -57,10 +61,10 @@ export default function SettingsPage() {
       copyTo: 'documentDirectory',
     })
     if (!fileCopyUri) return
-    const updated = await settingsRepo.save({...settings, sound: fileCopyUri})
-    setSettings(updated)
+    await settingsRepo.save({...settings, sound: fileCopyUri})
+    setValue('sound', fileCopyUri)
     toast('Sound will play after rest timers.')
-  }, [settings])
+  }, [settings, setValue])
 
   const switches: Input<boolean>[] = [
     {name: 'Rest timers', value: settings.alarm, key: 'alarm'},
@@ -75,8 +79,8 @@ export default function SettingsPage() {
 
   const changeString = useCallback(
     async (key: keyof Settings, value: string) => {
-      const updated = await settingsRepo.save({...settings, [key]: value})
-      setSettings(updated)
+      await settingsRepo.save({...settings, [key]: value})
+      setValue(key, value)
       switch (key) {
         case 'date':
           return toast('Changed date format')
@@ -98,13 +102,13 @@ export default function SettingsPage() {
           return
       }
     },
-    [settings, setTheme, setDarkColor, setLightColor],
+    [settings, setTheme, setDarkColor, setLightColor, setValue],
   )
 
   const changeBoolean = useCallback(
     async (key: keyof Settings, value: boolean) => {
-      const updated = await settingsRepo.save({...settings, [key]: value})
-      setSettings(updated)
+      await settingsRepo.save({...settings, [key]: value})
+      setValue(key, value)
       switch (key) {
         case 'alarm':
           if (value) toast('Timers will now run after each set.')
@@ -141,7 +145,7 @@ export default function SettingsPage() {
           return
       }
     },
-    [settings, ignoring],
+    [settings, ignoring, setValue],
   )
 
   const renderSwitch = useCallback(

package.json

@@ -30,6 +30,7 @@
     "eslint-plugin-flowtype": "^8.0.3",
     "jest": "^29.2.2",
     "react": "^18.2.0",
+    "react-hook-form": "^7.41.2",
     "react-native": "^0.70.5",
     "react-native-document-picker": "^8.1.2",
     "react-native-file-access": "^2.5.0",

yarn.lock

@@ -7295,6 +7295,7 @@ __metadata:
     jest: ^29.2.2
     metro-react-native-babel-preset: ^0.73.3
     react: ^18.2.0
+    react-hook-form: ^7.41.2
     react-native: ^0.70.5
     react-native-document-picker: ^8.1.2
     react-native-file-access: ^2.5.0
@@ -8751,6 +8752,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hook-form@npm:^7.41.2":
+  version: 7.41.2
+  resolution: "react-hook-form@npm:7.41.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17 || ^18
+  checksum: bc923b74018d55289838f820d49e32043dbc683d97ea2f93a6f3b75ff58fea9ee4536d6487adcb02912b4bc90a09ea07a63c4c24f930ec59f598bdafd5e8c8d3
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0, react-is@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"