Add react-hook-form for settings page
This seems to have improved performance. Related to #135.
This commit is contained in:
parent
7f1513f0a5
commit
5e37490c2d
|
@ -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<string[]>(twelveHours)
|
||||
const [importing, setImporting] = useState(false)
|
||||
const [settings, setSettings] = useState(new Settings())
|
||||
const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
|
||||
const today = new Date()
|
||||
|
||||
const {watch, setValue} = useForm<Settings>({
|
||||
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<boolean>[] = [
|
||||
{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(
|
||||
|
|
|
@ -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",
|
||||
|
|
10
yarn.lock
10
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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user