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 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>
)}

View File

@ -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'

View File

@ -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'

View File

@ -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[] = [
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

View File

@ -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>

View File

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

View File

@ -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])

View File

@ -12,4 +12,4 @@ module.exports = {
plugins: ['transform-remove-console'],
},
},
};
}

View File

@ -11,4 +11,4 @@ module.exports = {
'./node_modules/react-native-gesture-handler/jestSetup',
'./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'
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<{