Optimize root context

.eslintrc.js

@@ -13,4 +13,4 @@ module.exports = {
       },
     },
   ],
-};
+}

App.tsx

@@ -42,6 +42,7 @@ export const CombinedDarkTheme = {
 
 const App = () => {
   const isDark = useColorScheme() === 'dark'
+  const [initialized, setInitialized] = useState(false)
   const [settings, setSettings] = useState<Settings>()
   const [color, setColor] = useState(
     isDark
@@ -55,6 +56,7 @@ const App = () => {
       console.log(`${App.name}.useEffect:`, {gotSettings})
       setSettings(gotSettings)
       if (gotSettings.color) setColor(gotSettings.color)
+      setInitialized(true)
     })
   }, [setColor])
 
@@ -73,15 +75,22 @@ const App = () => {
     return value
   }, [color, isDark, settings])
 
+  const settingsContext = useMemo(
+    () => ({settings, setSettings}),
+    [settings, setSettings],
+  )
+
+  const colorContext = useMemo(() => ({color, setColor}), [color, setColor])
+
   return (
-    <Color.Provider value={{color, setColor}}>
+    <Color.Provider value={colorContext}>
       <PaperProvider
         theme={theme}
         settings={{icon: props => <MaterialIcon {...props} />}}>
         <NavigationContainer theme={theme}>
           <MassiveSnack>
-            {settings && (
-              <SettingsContext.Provider value={{settings, setSettings}}>
+            {initialized && (
+              <SettingsContext.Provider value={settingsContext}>
                 <Routes />
               </SettingsContext.Provider>
             )}

EditWorkout.tsx

@@ -3,7 +3,6 @@ import {useCallback, useRef, useState} from 'react'
 import {ScrollView, TextInput, View} from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import {Button, Card, TouchableRipple} from 'react-native-paper'
-import {Like} from 'typeorm'
 import ConfirmDialog from './ConfirmDialog'
 import {MARGIN, PADDING} from './constants'
 import {getNow, planRepo, setRepo} from './db'

PlanItem.tsx

@@ -6,7 +6,6 @@ import {
 import {useCallback, useMemo, useState} from 'react'
 import {GestureResponderEvent, Text} from 'react-native'
 import {Divider, List, Menu} from 'react-native-paper'
-import {getBestSet} from './best.service'
 import {planRepo} from './db'
 import {Plan} from './plan'
 import {PlanPageParams} from './plan-page-params'

Routes.tsx

@@ -1,4 +1,5 @@
 import {createDrawerNavigator} from '@react-navigation/drawer'
+import {useMemo} from 'react'
 import {IconButton} from 'react-native-paper'
 import BestPage from './BestPage'
 import {DrawerParamList} from './drawer-param-list'
@@ -14,13 +15,16 @@ const Drawer = createDrawerNavigator<DrawerParamList>()
 export default function Routes() {
   const dark = useDark()
 
-  const routes: Route[] = [
-    {name: 'Home', component: HomePage, icon: 'home'},
-    {name: 'Plans', component: PlanPage, icon: 'event'},
-    {name: 'Best', component: BestPage, icon: 'insights'},
-    {name: 'Workouts', component: WorkoutsPage, icon: 'fitness-center'},
-    {name: 'Settings', component: SettingsPage, icon: 'settings'},
-  ]
+  const routes: Route[] = useMemo(
+    () => [
+      {name: 'Home', component: HomePage, icon: 'home'},
+      {name: 'Plans', component: PlanPage, icon: 'event'},
+      {name: 'Best', component: BestPage, icon: 'insights'},
+      {name: 'Workouts', component: WorkoutsPage, icon: 'fitness-center'},
+      {name: 'Settings', component: SettingsPage, icon: 'settings'},
+    ],
+    [],
+  )
 
   return (
     <Drawer.Navigator

SettingsPage.tsx

@@ -1,6 +1,6 @@
 import {Picker} from '@react-native-picker/picker'
 import {useFocusEffect} from '@react-navigation/native'
-import {useCallback, useEffect, useState} from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {NativeModules, ScrollView} from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import {Button} from 'react-native-paper'
@@ -22,19 +22,6 @@ export default function SettingsPage() {
   const [ignoring, setIgnoring] = useState(false)
   const [term, setTerm] = useState('')
   const {settings, setSettings} = useSettings()
-  const {
-    vibrate,
-    sound,
-    notify,
-    images,
-    showUnit,
-    steps,
-    showDate,
-    showSets,
-    theme,
-    alarm,
-    noSound,
-  } = settings
   const {color, setColor} = useColor()
   const {toast} = useSnackbar()
 
@@ -150,15 +137,15 @@ export default function SettingsPage() {
   )
 
   const switches: Input<boolean>[] = [
-    {name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
-    {name: 'Vibrate', value: vibrate, onChange: changeVibrate},
-    {name: 'Disable sound', value: noSound, onChange: changeNoSound},
-    {name: 'Record notifications', value: notify, onChange: changeNotify},
-    {name: 'Show images', value: images, onChange: changeImages},
-    {name: 'Show unit', value: showUnit, onChange: changeUnit},
-    {name: 'Show steps', value: steps, onChange: changeSteps},
-    {name: 'Show date', value: showDate, onChange: changeShowDate},
-    {name: 'Show sets', value: showSets, onChange: changeShowSets},
+    {name: 'Rest timers', value: settings.alarm, onChange: changeAlarmEnabled},
+    {name: 'Vibrate', value: settings.vibrate, onChange: changeVibrate},
+    {name: 'Disable sound', value: settings.noSound, onChange: changeNoSound},
+    {name: 'Notifications', value: settings.notify, onChange: changeNotify},
+    {name: 'Show images', value: settings.images, onChange: changeImages},
+    {name: 'Show unit', value: settings.showUnit, onChange: changeUnit},
+    {name: 'Show steps', value: settings.steps, onChange: changeSteps},
+    {name: 'Show date', value: settings.showDate, onChange: changeShowDate},
+    {name: 'Show sets', value: settings.showSets, onChange: changeShowSets},
   ]
 
   const changeTheme = useCallback(
@@ -177,6 +164,27 @@ export default function SettingsPage() {
     [settings, setSettings],
   )
 
+  const sound = useMemo(() => {
+    if (!settings.sound) return null
+    const split = settings.sound.split('/')
+    return split.pop()
+  }, [settings.sound])
+
+  const theme = useMemo(() => {
+    if (!'theme'.includes(term.toLowerCase())) return null
+    return (
+      <Picker
+        style={{color}}
+        dropdownIconColor={color}
+        selectedValue={settings.theme}
+        onValueChange={changeTheme}>
+        <Picker.Item value="system" label="Follow system theme" />
+        <Picker.Item value="dark" label="Dark theme" />
+        <Picker.Item value="light" label="Light theme" />
+      </Picker>
+    )
+  }, [term, color, changeTheme, settings.theme])
+
   return (
     <>
       <DrawerHeader name="Settings" />
@@ -195,17 +203,7 @@ export default function SettingsPage() {
                 {input.name}
               </Switch>
             ))}
-          {'theme'.includes(term.toLowerCase()) && (
-            <Picker
-              style={{color}}
-              dropdownIconColor={color}
-              selectedValue={theme}
-              onValueChange={changeTheme}>
-              <Picker.Item value="system" label="Follow system theme" />
-              <Picker.Item value="dark" label="Dark theme" />
-              <Picker.Item value="light" label="Light theme" />
-            </Picker>
-          )}
+          {theme}
           {'color'.includes(term.toLowerCase()) && (
             <Picker
               style={{color, marginTop: -10}}
@@ -244,10 +242,7 @@ export default function SettingsPage() {
           )}
           {'alarm sound'.includes(term.toLowerCase()) && (
             <Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
-              Alarm sound
-              {sound
-                ? ': ' + sound.split('/')[sound.split('/').length - 1]
-                : null}
+              Alarm sound: {sound}
             </Button>
           )}
         </ScrollView>

StartPlan.tsx

@@ -86,7 +86,7 @@ export default function StartPlan() {
   useFocusEffect(
     useCallback(() => {
       refresh().then(newCounts => select(0, newCounts))
-    }, [refresh]),
+    }, [refresh, select]),
   )
 
   const handleSubmit = async () => {

ViewBest.tsx

@@ -56,9 +56,9 @@ export default function ViewBest() {
         builder
           .addSelect('MAX(weight / (1.0278 - 0.0278 * reps))', 'weight')
           .getRawMany()
-          .then(weights => {
-            console.log({weights})
-            setWeights(weights)
+          .then(newWeights => {
+            console.log({weights: newWeights})
+            setWeights(newWeights)
           })
     }
   }, [params.best.name, metric, period])

babel.config.js

@@ -2,8 +2,8 @@ module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
     '@babel/plugin-transform-flow-strip-types',
-    ['@babel/plugin-proposal-decorators', { legacy: true }],
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-decorators', {legacy: true}],
+    ['@babel/plugin-proposal-class-properties', {loose: true}],
     'react-native-reanimated/plugin',
     'react-native-paper/babel',
   ],
@@ -12,4 +12,4 @@ module.exports = {
       plugins: ['transform-remove-console'],
     },
   },
-};
+}

jest.config.js

@@ -11,4 +11,4 @@ module.exports = {
     './node_modules/react-native-gesture-handler/jestSetup',
     './jestSetup.ts',
   ],
-};
+}

metro.config.js

@@ -14,4 +14,4 @@ module.exports = {
       },
     }),
   },
-};
+}

use-settings.ts

@@ -2,19 +2,19 @@ import React, {useContext} from 'react'
 import Settings from './settings'
 
 export const defaultSettings: Settings = {
-  alarm: 0,
+  alarm: true,
   color: '',
   date: '',
-  images: 1,
-  notify: 0,
-  showDate: 0,
-  showSets: 1,
-  showUnit: 1,
+  images: true,
+  notify: false,
+  showDate: false,
+  showSets: true,
+  showUnit: true,
   sound: '',
-  steps: 0,
+  steps: false,
   theme: 'system',
-  vibrate: 1,
-  noSound: 0,
+  vibrate: true,
+  noSound: false,
 }
 
 export const SettingsContext = React.createContext<{