Optimize root context

This commit is contained in:
Brandon Presley 2022-10-31 21:00:10 +13:00
parent b782d66bf2
commit bdb27894f7
12 changed files with 75 additions and 69 deletions

View File

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

15
App.tsx
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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