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 Switch from './Switch'
|
||||||
import {toast} from './toast'
|
import {toast} from './toast'
|
||||||
import {useTheme} from './use-theme'
|
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 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']
|
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 [term, setTerm] = useState('')
|
||||||
const [formatOptions, setFormatOptions] = useState<string[]>(twelveHours)
|
const [formatOptions, setFormatOptions] = useState<string[]>(twelveHours)
|
||||||
const [importing, setImporting] = useState(false)
|
const [importing, setImporting] = useState(false)
|
||||||
const [settings, setSettings] = useState(new Settings())
|
|
||||||
const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
|
const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
|
||||||
const today = new Date()
|
const today = new Date()
|
||||||
|
|
||||||
|
const {watch, setValue} = useForm<Settings>({
|
||||||
|
defaultValues: () => settingsRepo.findOne({where: {}}),
|
||||||
|
})
|
||||||
|
const settings = watch()
|
||||||
|
|
||||||
const {theme, setTheme, lightColor, setLightColor, darkColor, setDarkColor} =
|
const {theme, setTheme, lightColor, setLightColor, darkColor, setDarkColor} =
|
||||||
useTheme()
|
useTheme()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
settingsRepo.findOne({where: {}}).then(setSettings)
|
|
||||||
NativeModules.SettingsModule.ignoringBattery(setIgnoring)
|
NativeModules.SettingsModule.ignoringBattery(setIgnoring)
|
||||||
NativeModules.SettingsModule.is24().then((is24: boolean) => {
|
NativeModules.SettingsModule.is24().then((is24: boolean) => {
|
||||||
console.log(`${SettingsPage.name}.focus:`, {is24})
|
console.log(`${SettingsPage.name}.focus:`, {is24})
|
||||||
|
@ -57,10 +61,10 @@ export default function SettingsPage() {
|
||||||
copyTo: 'documentDirectory',
|
copyTo: 'documentDirectory',
|
||||||
})
|
})
|
||||||
if (!fileCopyUri) return
|
if (!fileCopyUri) return
|
||||||
const updated = await settingsRepo.save({...settings, sound: fileCopyUri})
|
await settingsRepo.save({...settings, sound: fileCopyUri})
|
||||||
setSettings(updated)
|
setValue('sound', fileCopyUri)
|
||||||
toast('Sound will play after rest timers.')
|
toast('Sound will play after rest timers.')
|
||||||
}, [settings])
|
}, [settings, setValue])
|
||||||
|
|
||||||
const switches: Input<boolean>[] = [
|
const switches: Input<boolean>[] = [
|
||||||
{name: 'Rest timers', value: settings.alarm, key: 'alarm'},
|
{name: 'Rest timers', value: settings.alarm, key: 'alarm'},
|
||||||
|
@ -75,8 +79,8 @@ export default function SettingsPage() {
|
||||||
|
|
||||||
const changeString = useCallback(
|
const changeString = useCallback(
|
||||||
async (key: keyof Settings, value: string) => {
|
async (key: keyof Settings, value: string) => {
|
||||||
const updated = await settingsRepo.save({...settings, [key]: value})
|
await settingsRepo.save({...settings, [key]: value})
|
||||||
setSettings(updated)
|
setValue(key, value)
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'date':
|
case 'date':
|
||||||
return toast('Changed date format')
|
return toast('Changed date format')
|
||||||
|
@ -98,13 +102,13 @@ export default function SettingsPage() {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[settings, setTheme, setDarkColor, setLightColor],
|
[settings, setTheme, setDarkColor, setLightColor, setValue],
|
||||||
)
|
)
|
||||||
|
|
||||||
const changeBoolean = useCallback(
|
const changeBoolean = useCallback(
|
||||||
async (key: keyof Settings, value: boolean) => {
|
async (key: keyof Settings, value: boolean) => {
|
||||||
const updated = await settingsRepo.save({...settings, [key]: value})
|
await settingsRepo.save({...settings, [key]: value})
|
||||||
setSettings(updated)
|
setValue(key, value)
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'alarm':
|
case 'alarm':
|
||||||
if (value) toast('Timers will now run after each set.')
|
if (value) toast('Timers will now run after each set.')
|
||||||
|
@ -141,7 +145,7 @@ export default function SettingsPage() {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[settings, ignoring],
|
[settings, ignoring, setValue],
|
||||||
)
|
)
|
||||||
|
|
||||||
const renderSwitch = useCallback(
|
const renderSwitch = useCallback(
|
||||||
|
|
|
@ -30,6 +30,7 @@
|
||||||
"eslint-plugin-flowtype": "^8.0.3",
|
"eslint-plugin-flowtype": "^8.0.3",
|
||||||
"jest": "^29.2.2",
|
"jest": "^29.2.2",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
|
"react-hook-form": "^7.41.2",
|
||||||
"react-native": "^0.70.5",
|
"react-native": "^0.70.5",
|
||||||
"react-native-document-picker": "^8.1.2",
|
"react-native-document-picker": "^8.1.2",
|
||||||
"react-native-file-access": "^2.5.0",
|
"react-native-file-access": "^2.5.0",
|
||||||
|
|
10
yarn.lock
10
yarn.lock
|
@ -7295,6 +7295,7 @@ __metadata:
|
||||||
jest: ^29.2.2
|
jest: ^29.2.2
|
||||||
metro-react-native-babel-preset: ^0.73.3
|
metro-react-native-babel-preset: ^0.73.3
|
||||||
react: ^18.2.0
|
react: ^18.2.0
|
||||||
|
react-hook-form: ^7.41.2
|
||||||
react-native: ^0.70.5
|
react-native: ^0.70.5
|
||||||
react-native-document-picker: ^8.1.2
|
react-native-document-picker: ^8.1.2
|
||||||
react-native-file-access: ^2.5.0
|
react-native-file-access: ^2.5.0
|
||||||
|
@ -8751,6 +8752,15 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"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
|
version: 18.2.0
|
||||||
resolution: "react-is@npm:18.2.0"
|
resolution: "react-is@npm:18.2.0"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user