diff --git a/.eslintrc.js b/.eslintrc.js index b31c8dc..b5ae89a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,6 +14,7 @@ module.exports = { curly: 'off', 'react/react-in-jsx-scope': 'off', 'react-native/no-inline-styles': 'off', + 'no-spaced-func': 'off', }, }, ], diff --git a/App.tsx b/App.tsx index 32bc2f1..e53e39d 100644 --- a/App.tsx +++ b/App.tsx @@ -16,9 +16,8 @@ import {lightColors} from './colors' import {AppDataSource} from './data-source' import {settingsRepo} from './db' import Routes from './Routes' -import Settings from './settings' import {TOAST} from './toast' -import {defaultSettings, SettingsContext} from './use-settings' +import {ThemeContext} from './use-theme' export const CombinedDefaultTheme = { ...NavigationDefaultTheme, @@ -44,19 +43,20 @@ const App = () => { const isDark = useColorScheme() === 'dark' const [initialized, setInitialized] = useState(false) const [snackbar, setSnackbar] = useState('') + const [theme, setTheme] = useState('system') - const [settings, setSettings] = useState({ - ...defaultSettings, - color: isDark + const [color, setColor] = useState( + isDark ? CombinedDarkTheme.colors.primary : CombinedDefaultTheme.colors.primary, - }) + ) useEffect(() => { AppDataSource.initialize().then(async () => { - const gotSettings = await settingsRepo.findOne({where: {}}) - console.log(`${App.name}.useEffect:`, {gotSettings}) - setSettings(gotSettings) + const settings = await settingsRepo.findOne({where: {}}) + console.log(`${App.name}.useEffect:`, {gotSettings: settings}) + setTheme(settings.theme) + setColor(settings.color) setInitialized(true) }) DeviceEventEmitter.addListener(TOAST, ({value}: {value: string}) => { @@ -65,48 +65,43 @@ const App = () => { }) }, []) - const theme = useMemo(() => { - const darkTheme = settings?.color + const paperTheme = useMemo(() => { + const darkTheme = color ? { ...CombinedDarkTheme, - colors: {...CombinedDarkTheme.colors, primary: settings.color}, + colors: {...CombinedDarkTheme.colors, primary: color}, } : CombinedDarkTheme - const lightTheme = settings?.color + const lightTheme = color ? { ...CombinedDefaultTheme, - colors: {...CombinedDefaultTheme.colors, primary: settings.color}, + colors: {...CombinedDefaultTheme.colors, primary: color}, } : CombinedDefaultTheme let value = isDark ? darkTheme : lightTheme - if (settings?.theme === 'dark') value = darkTheme - else if (settings?.theme === 'light') value = lightTheme + if (theme === 'dark') value = darkTheme + else if (theme === 'light') value = lightTheme return value - }, [isDark, settings?.theme, settings?.color]) - - const settingsContext = useMemo( - () => ({settings, setSettings}), - [settings, setSettings], - ) + }, [isDark, theme, color]) const action = useMemo( () => ({ label: 'Close', onPress: () => setSnackbar(''), - color: theme.colors.primary, + color: paperTheme.colors.primary, }), - [theme.colors.primary], + [paperTheme.colors.primary], ) return ( }}> - + {initialized && ( - + - + )} diff --git a/BestList.tsx b/BestList.tsx index 3846d4d..6118c3e 100644 --- a/BestList.tsx +++ b/BestList.tsx @@ -7,17 +7,23 @@ import {useCallback, useState} from 'react' import {FlatList, Image} from 'react-native' import {List} from 'react-native-paper' import {BestPageParams} from './BestPage' -import {setRepo} from './db' +import {setRepo, settingsRepo} from './db' import DrawerHeader from './DrawerHeader' import GymSet from './gym-set' import Page from './Page' -import {useSettings} from './use-settings' +import Settings from './settings' export default function BestList() { const [bests, setBests] = useState() const [term, setTerm] = useState('') const navigation = useNavigation>() - const {settings} = useSettings() + const [settings, setSettings] = useState() + + useFocusEffect( + useCallback(() => { + settingsRepo.findOne({where: {}}).then(setSettings) + }, []), + ) const refresh = useCallback(async (value: string) => { const weights = await setRepo diff --git a/EditSet.tsx b/EditSet.tsx index a3f8f6a..6a8e73a 100644 --- a/EditSet.tsx +++ b/EditSet.tsx @@ -1,20 +1,31 @@ -import {RouteProp, useNavigation, useRoute} from '@react-navigation/native' -import {useCallback} from 'react' +import { + RouteProp, + useFocusEffect, + useNavigation, + useRoute, +} from '@react-navigation/native' +import {useCallback, useState} from 'react' import {NativeModules, View} from 'react-native' import {PADDING} from './constants' -import {setRepo} from './db' +import {setRepo, settingsRepo} from './db' import GymSet from './gym-set' import {HomePageParams} from './home-page-params' import SetForm from './SetForm' +import Settings from './settings' import StackHeader from './StackHeader' import {toast} from './toast' -import {useSettings} from './use-settings' export default function EditSet() { const {params} = useRoute>() const {set} = params const navigation = useNavigation() - const {settings} = useSettings() + const [settings, setSettings] = useState() + + useFocusEffect( + useCallback(() => { + settingsRepo.findOne({where: {}}).then(setSettings) + }, []), + ) const startTimer = useCallback( async (name: string) => { @@ -23,9 +34,9 @@ export default function EditSet() { const milliseconds = (minutes ?? 3) * 60 * 1000 + (seconds ?? 0) * 1000 NativeModules.AlarmModule.timer( milliseconds, - !!settings.vibrate, + settings.vibrate, settings.sound, - !!settings.noSound, + settings.noSound, ) }, [settings], @@ -60,7 +71,7 @@ export default function EditSet() { <> - + {settings && } ) diff --git a/EditWorkout.tsx b/EditWorkout.tsx index 006bfe9..f92f92d 100644 --- a/EditWorkout.tsx +++ b/EditWorkout.tsx @@ -1,15 +1,20 @@ -import {RouteProp, useNavigation, useRoute} from '@react-navigation/native' +import { + RouteProp, + useFocusEffect, + useNavigation, + useRoute, +} from '@react-navigation/native' 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 ConfirmDialog from './ConfirmDialog' import {MARGIN, PADDING} from './constants' -import {getNow, planRepo, setRepo} from './db' +import {getNow, planRepo, setRepo, settingsRepo} from './db' import MassiveInput from './MassiveInput' +import Settings from './settings' import StackHeader from './StackHeader' import {toast} from './toast' -import {useSettings} from './use-settings' import {WorkoutsPageParams} from './WorkoutsPage' export default function EditWorkout() { @@ -31,7 +36,13 @@ export default function EditWorkout() { const stepsRef = useRef(null) const minutesRef = useRef(null) const secondsRef = useRef(null) - const {settings} = useSettings() + const [settings, setSettings] = useState() + + useFocusEffect( + useCallback(() => { + settingsRepo.findOne({where: {}}).then(setSettings) + }, []), + ) const update = async () => { await setRepo.update( @@ -119,7 +130,7 @@ export default function EditWorkout() { onChangeText={handleName} onSubmitEditing={submitName} /> - {!!settings.steps && ( + {settings.steps && ( setsRef.current?.focus()} /> )} - {!!settings.showSets && ( + {settings.showSets && ( minutesRef.current?.focus()} /> )} - {!!settings.alarm && ( + {settings.alarm && ( <> )} - {!!settings.images && uri && ( + {settings.images && uri && ( )} - {!!settings.images && !uri && ( + {settings.images && !uri && (