Use single settings object for state
Since all this state was being set at the same time, on load, it makes more sense to have it as a single state. Also they are all connected to the same table so it makes more sense this way. Also, I removed the use focus effect in favor of just a use effect which runs on mount. The things being refreshed here weren't very important to be updated frequently, and focus effect has a cost on performance.
This commit is contained in:
parent
596b695c5b
commit
41ed9464c9
178
SettingsPage.tsx
178
SettingsPage.tsx
|
@ -1,11 +1,7 @@
|
||||||
import {
|
import {NavigationProp, useNavigation} from '@react-navigation/native'
|
||||||
NavigationProp,
|
|
||||||
useFocusEffect,
|
|
||||||
useNavigation,
|
|
||||||
} from '@react-navigation/native'
|
|
||||||
import {format} from 'date-fns'
|
import {format} from 'date-fns'
|
||||||
import {useCallback, useMemo, useState} from 'react'
|
import {useCallback, useEffect, useMemo, useState} from 'react'
|
||||||
import {DeviceEventEmitter, NativeModules, Platform, View} from 'react-native'
|
import {NativeModules, View} from 'react-native'
|
||||||
import DocumentPicker from 'react-native-document-picker'
|
import DocumentPicker from 'react-native-document-picker'
|
||||||
import {Dirs, FileSystem} from 'react-native-file-access'
|
import {Dirs, FileSystem} from 'react-native-file-access'
|
||||||
import {Button, Subheading} from 'react-native-paper'
|
import {Button, Subheading} from 'react-native-paper'
|
||||||
|
@ -19,6 +15,7 @@ import Input from './input'
|
||||||
import {darkOptions, lightOptions, themeOptions} from './options'
|
import {darkOptions, lightOptions, themeOptions} from './options'
|
||||||
import Page from './Page'
|
import Page from './Page'
|
||||||
import Select from './Select'
|
import Select from './Select'
|
||||||
|
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'
|
||||||
|
@ -28,76 +25,50 @@ const defaultFormats = ['P', 'Pp', 'ccc p', 'p']
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const [ignoring, setIgnoring] = useState(false)
|
const [ignoring, setIgnoring] = useState(false)
|
||||||
const [term, setTerm] = useState('')
|
const [term, setTerm] = useState('')
|
||||||
const [vibrate, setVibrate] = useState(false)
|
|
||||||
const [alarm, setAlarm] = useState(false)
|
|
||||||
const [sound, setSound] = useState('')
|
|
||||||
const [notify, setNotify] = useState(false)
|
|
||||||
const [images, setImages] = useState(false)
|
|
||||||
const [showUnit, setShowUnit] = useState(false)
|
|
||||||
const [steps, setSteps] = useState(false)
|
|
||||||
const [date, setDate] = useState('P')
|
|
||||||
const {theme, setTheme, lightColor, setLightColor, darkColor, setDarkColor} =
|
const {theme, setTheme, lightColor, setLightColor, darkColor, setDarkColor} =
|
||||||
useTheme()
|
useTheme()
|
||||||
const [showDate, setShowDate] = useState(false)
|
|
||||||
const [noSound, setNoSound] = useState(false)
|
|
||||||
const [formatOptions, setFormatOptions] = useState<string[]>(defaultFormats)
|
const [formatOptions, setFormatOptions] = useState<string[]>(defaultFormats)
|
||||||
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()
|
||||||
|
|
||||||
useFocusEffect(
|
useEffect(() => {
|
||||||
useCallback(() => {
|
settingsRepo.findOne({where: {}}).then(setSettings)
|
||||||
settingsRepo.findOne({where: {}}).then(settings => {
|
NativeModules.SettingsModule.ignoringBattery(setIgnoring)
|
||||||
setAlarm(settings.alarm)
|
|
||||||
setVibrate(settings.vibrate)
|
|
||||||
setSound(settings.sound)
|
|
||||||
setNotify(settings.notify)
|
|
||||||
setImages(settings.images)
|
|
||||||
setShowUnit(settings.showUnit)
|
|
||||||
setSteps(settings.steps)
|
|
||||||
setDate(settings.date)
|
|
||||||
setShowDate(settings.showDate)
|
|
||||||
setNoSound(settings.noSound)
|
|
||||||
NativeModules.SettingsModule.ignoringBattery((isIgnoring: boolean) => {
|
|
||||||
if (!isIgnoring && settings.alarm) setAlarm(false)
|
|
||||||
setIgnoring(isIgnoring)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
NativeModules.SettingsModule.is24().then((is24: boolean) => {
|
NativeModules.SettingsModule.is24().then((is24: boolean) => {
|
||||||
console.log(`${SettingsPage.name}.focus:`, {is24})
|
console.log(`${SettingsPage.name}.focus:`, {is24})
|
||||||
if (is24) setFormatOptions(['P', 'P, k:m', 'ccc k:m', 'k:m'])
|
if (is24) setFormatOptions(['P', 'P, k:m', 'ccc k:m', 'k:m'])
|
||||||
else setFormatOptions(defaultFormats)
|
else setFormatOptions(defaultFormats)
|
||||||
})
|
})
|
||||||
}, []),
|
}, [])
|
||||||
)
|
|
||||||
|
|
||||||
const soundString = useMemo(() => {
|
const soundString = useMemo(() => {
|
||||||
if (!sound) return null
|
if (!settings.sound) return null
|
||||||
const split = sound.split('/')
|
const split = settings.sound.split('/')
|
||||||
return split.pop()
|
return split.pop()
|
||||||
}, [sound])
|
}, [settings.sound])
|
||||||
|
|
||||||
const changeAlarmEnabled = useCallback(
|
const changeAlarmEnabled = useCallback(
|
||||||
(enabled: boolean) => {
|
async (enabled: boolean) => {
|
||||||
if (enabled)
|
if (enabled) toast('Timers will now run after each set.')
|
||||||
DeviceEventEmitter.emit('toast', {
|
|
||||||
value: 'Timers will now run after each set',
|
|
||||||
timeout: 4000,
|
|
||||||
})
|
|
||||||
else toast('Stopped timers running after each set.')
|
else toast('Stopped timers running after each set.')
|
||||||
if (enabled && !ignoring) NativeModules.SettingsModule.ignoreBattery()
|
if (enabled && !ignoring) NativeModules.SettingsModule.ignoreBattery()
|
||||||
setAlarm(enabled)
|
const updated = await settingsRepo.save({...settings, alarm: enabled})
|
||||||
settingsRepo.update({}, {alarm: enabled})
|
setSettings(updated)
|
||||||
},
|
},
|
||||||
[ignoring],
|
[settings, ignoring],
|
||||||
)
|
)
|
||||||
|
|
||||||
const changeVibrate = useCallback((enabled: boolean) => {
|
const changeVibrate = useCallback(
|
||||||
|
async (enabled: boolean) => {
|
||||||
if (enabled) toast('When a timer completes, vibrate your phone.')
|
if (enabled) toast('When a timer completes, vibrate your phone.')
|
||||||
else toast('Stop vibrating at the end of timers.')
|
else toast('Stop vibrating at the end of timers.')
|
||||||
setVibrate(enabled)
|
const updated = await settingsRepo.save({...settings, vibrate: enabled})
|
||||||
settingsRepo.update({}, {vibrate: enabled})
|
setSettings(updated)
|
||||||
}, [])
|
},
|
||||||
|
[settings],
|
||||||
|
)
|
||||||
|
|
||||||
const changeSound = useCallback(async () => {
|
const changeSound = useCallback(async () => {
|
||||||
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
||||||
|
@ -105,62 +76,80 @@ export default function SettingsPage() {
|
||||||
copyTo: 'documentDirectory',
|
copyTo: 'documentDirectory',
|
||||||
})
|
})
|
||||||
if (!fileCopyUri) return
|
if (!fileCopyUri) return
|
||||||
settingsRepo.update({}, {sound: fileCopyUri})
|
const updated = await settingsRepo.save({...settings, sound: fileCopyUri})
|
||||||
setSound(fileCopyUri)
|
setSettings(updated)
|
||||||
toast('Sound will play after rest timers.')
|
toast('Sound will play after rest timers.')
|
||||||
}, [])
|
}, [settings])
|
||||||
|
|
||||||
const changeNotify = useCallback((enabled: boolean) => {
|
const changeNotify = useCallback(
|
||||||
setNotify(enabled)
|
async (enabled: boolean) => {
|
||||||
settingsRepo.update({}, {notify: enabled})
|
const updated = await settingsRepo.save({...settings, notify: enabled})
|
||||||
|
setSettings(updated)
|
||||||
if (enabled) toast('Show when a set is a new record.')
|
if (enabled) toast('Show when a set is a new record.')
|
||||||
else toast('Stopped showing notifications for new records.')
|
else toast('Stopped showing notifications for new records.')
|
||||||
}, [])
|
},
|
||||||
|
[settings],
|
||||||
|
)
|
||||||
|
|
||||||
const changeImages = useCallback((enabled: boolean) => {
|
const changeImages = useCallback(
|
||||||
setImages(enabled)
|
async (enabled: boolean) => {
|
||||||
settingsRepo.update({}, {images: enabled})
|
const updated = await settingsRepo.save({...settings, images: enabled})
|
||||||
|
setSettings(updated)
|
||||||
if (enabled) toast('Show images for sets.')
|
if (enabled) toast('Show images for sets.')
|
||||||
else toast('Stopped showing images for sets.')
|
else toast('Stopped showing images for sets.')
|
||||||
}, [])
|
},
|
||||||
|
[settings],
|
||||||
|
)
|
||||||
|
|
||||||
const changeUnit = useCallback((enabled: boolean) => {
|
const changeUnit = useCallback(
|
||||||
setShowUnit(enabled)
|
async (enabled: boolean) => {
|
||||||
settingsRepo.update({}, {showUnit: enabled})
|
const updated = await settingsRepo.save({...settings, showUnit: enabled})
|
||||||
|
setSettings(updated)
|
||||||
if (enabled) toast('Show option to select unit for sets.')
|
if (enabled) toast('Show option to select unit for sets.')
|
||||||
else toast('Hid unit option for sets.')
|
else toast('Hid unit option for sets.')
|
||||||
}, [])
|
},
|
||||||
|
[settings],
|
||||||
|
)
|
||||||
|
|
||||||
const changeSteps = useCallback((enabled: boolean) => {
|
const changeSteps = useCallback(
|
||||||
setSteps(enabled)
|
async (enabled: boolean) => {
|
||||||
settingsRepo.update({}, {steps: enabled})
|
const updated = await settingsRepo.save({...settings, steps: enabled})
|
||||||
|
setSettings(updated)
|
||||||
if (enabled) toast('Show steps for a workout.')
|
if (enabled) toast('Show steps for a workout.')
|
||||||
else toast('Stopped showing steps for workouts.')
|
else toast('Stopped showing steps for workouts.')
|
||||||
}, [])
|
},
|
||||||
|
[settings],
|
||||||
|
)
|
||||||
|
|
||||||
const changeShowDate = useCallback((enabled: boolean) => {
|
const changeShowDate = useCallback(
|
||||||
setShowDate(enabled)
|
async (enabled: boolean) => {
|
||||||
settingsRepo.update({}, {showDate: enabled})
|
const updated = await settingsRepo.save({...settings, showDate: enabled})
|
||||||
|
setSettings(updated)
|
||||||
if (enabled) toast('Show date for sets by default.')
|
if (enabled) toast('Show date for sets by default.')
|
||||||
else toast('Stopped showing date for sets by default.')
|
else toast('Stopped showing date for sets by default.')
|
||||||
}, [])
|
},
|
||||||
|
[settings],
|
||||||
|
)
|
||||||
|
|
||||||
const changeNoSound = useCallback((enabled: boolean) => {
|
const changeNoSound = useCallback(
|
||||||
setNoSound(enabled)
|
async (enabled: boolean) => {
|
||||||
settingsRepo.update({}, {noSound: enabled})
|
const updated = await settingsRepo.save({...settings, noSound: enabled})
|
||||||
|
setSettings(updated)
|
||||||
if (enabled) toast('Disable sound on rest timer alarms.')
|
if (enabled) toast('Disable sound on rest timer alarms.')
|
||||||
else toast('Enabled sound for rest timer alarms.')
|
else toast('Enabled sound for rest timer alarms.')
|
||||||
}, [])
|
},
|
||||||
|
[settings],
|
||||||
|
)
|
||||||
|
|
||||||
const switches: Input<boolean>[] = [
|
const switches: Input<boolean>[] = [
|
||||||
{name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
|
{name: 'Rest timers', value: settings.alarm, onChange: changeAlarmEnabled},
|
||||||
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
|
{name: 'Vibrate', value: settings.vibrate, onChange: changeVibrate},
|
||||||
{name: 'Disable sound', value: noSound, onChange: changeNoSound},
|
{name: 'Disable sound', value: settings.noSound, onChange: changeNoSound},
|
||||||
{name: 'Notifications', value: notify, onChange: changeNotify},
|
{name: 'Notifications', value: settings.notify, onChange: changeNotify},
|
||||||
{name: 'Show images', value: images, onChange: changeImages},
|
{name: 'Show images', value: settings.images, onChange: changeImages},
|
||||||
{name: 'Show unit', value: showUnit, onChange: changeUnit},
|
{name: 'Show unit', value: settings.showUnit, onChange: changeUnit},
|
||||||
{name: 'Show steps', value: steps, onChange: changeSteps},
|
{name: 'Show steps', value: settings.steps, onChange: changeSteps},
|
||||||
{name: 'Show date', value: showDate, onChange: changeShowDate},
|
{name: 'Show date', value: settings.showDate, onChange: changeShowDate},
|
||||||
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
|
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
|
||||||
|
|
||||||
const changeTheme = useCallback(
|
const changeTheme = useCallback(
|
||||||
|
@ -171,11 +160,14 @@ export default function SettingsPage() {
|
||||||
[setTheme],
|
[setTheme],
|
||||||
)
|
)
|
||||||
|
|
||||||
const changeDate = useCallback((value: string) => {
|
const changeDate = useCallback(
|
||||||
settingsRepo.update({}, {date: value})
|
async (value: string) => {
|
||||||
setDate(value)
|
const updated = await settingsRepo.save({...settings, date: value})
|
||||||
|
setSettings(updated)
|
||||||
toast('Changed date format.')
|
toast('Changed date format.')
|
||||||
}, [])
|
},
|
||||||
|
[settings],
|
||||||
|
)
|
||||||
|
|
||||||
const changeDarkColor = useCallback(
|
const changeDarkColor = useCallback(
|
||||||
(value: string) => {
|
(value: string) => {
|
||||||
|
@ -220,7 +212,7 @@ export default function SettingsPage() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Date format',
|
name: 'Date format',
|
||||||
value: date,
|
value: settings.date,
|
||||||
onChange: changeDate,
|
onChange: changeDate,
|
||||||
items: formatOptions.map(option => ({
|
items: formatOptions.map(option => ({
|
||||||
label: format(today, option),
|
label: format(today, option),
|
||||||
|
|
Loading…
Reference in New Issue
Block a user