diff --git a/SettingsPage.tsx b/SettingsPage.tsx index 7ff92c4..10f2dda 100644 --- a/SettingsPage.tsx +++ b/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(twelveHours) const [importing, setImporting] = useState(false) - const [settings, setSettings] = useState(new Settings()) const {reset} = useNavigation>() const today = new Date() + const {watch, setValue} = useForm({ + 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[] = [ {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( diff --git a/package.json b/package.json index b2c0ab6..9c3c52f 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 6259514..40d4405 100644 --- a/yarn.lock +++ b/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"