Combine several state operations in SettingsPage
This commit is contained in:
parent
2b302bab73
commit
a3138c48b5
210
SettingsPage.tsx
210
SettingsPage.tsx
|
@ -50,27 +50,6 @@ export default function SettingsPage() {
|
||||||
return split.pop()
|
return split.pop()
|
||||||
}, [settings.sound])
|
}, [settings.sound])
|
||||||
|
|
||||||
const changeAlarmEnabled = useCallback(
|
|
||||||
async (enabled: boolean) => {
|
|
||||||
if (enabled) toast('Timers will now run after each set.')
|
|
||||||
else toast('Stopped timers running after each set.')
|
|
||||||
if (enabled && !ignoring) NativeModules.SettingsModule.ignoreBattery()
|
|
||||||
const updated = await settingsRepo.save({...settings, alarm: enabled})
|
|
||||||
setSettings(updated)
|
|
||||||
},
|
|
||||||
[settings, ignoring],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeVibrate = useCallback(
|
|
||||||
async (enabled: boolean) => {
|
|
||||||
if (enabled) toast('When a timer completes, vibrate your phone.')
|
|
||||||
else toast('Stop vibrating at the end of timers.')
|
|
||||||
const updated = await settingsRepo.save({...settings, vibrate: enabled})
|
|
||||||
setSettings(updated)
|
|
||||||
},
|
|
||||||
[settings],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeSound = useCallback(async () => {
|
const changeSound = useCallback(async () => {
|
||||||
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
||||||
type: 'audio/*',
|
type: 'audio/*',
|
||||||
|
@ -82,157 +61,136 @@ export default function SettingsPage() {
|
||||||
toast('Sound will play after rest timers.')
|
toast('Sound will play after rest timers.')
|
||||||
}, [settings])
|
}, [settings])
|
||||||
|
|
||||||
const changeNotify = useCallback(
|
|
||||||
async (enabled: boolean) => {
|
|
||||||
const updated = await settingsRepo.save({...settings, notify: enabled})
|
|
||||||
setSettings(updated)
|
|
||||||
if (enabled) toast('Show when a set is a new record.')
|
|
||||||
else toast('Stopped showing notifications for new records.')
|
|
||||||
},
|
|
||||||
[settings],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeImages = useCallback(
|
|
||||||
async (enabled: boolean) => {
|
|
||||||
const updated = await settingsRepo.save({...settings, images: enabled})
|
|
||||||
setSettings(updated)
|
|
||||||
if (enabled) toast('Show images for sets.')
|
|
||||||
else toast('Stopped showing images for sets.')
|
|
||||||
},
|
|
||||||
[settings],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeUnit = useCallback(
|
|
||||||
async (enabled: boolean) => {
|
|
||||||
const updated = await settingsRepo.save({...settings, showUnit: enabled})
|
|
||||||
setSettings(updated)
|
|
||||||
if (enabled) toast('Show option to select unit for sets.')
|
|
||||||
else toast('Hid unit option for sets.')
|
|
||||||
},
|
|
||||||
[settings],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeSteps = useCallback(
|
|
||||||
async (enabled: boolean) => {
|
|
||||||
const updated = await settingsRepo.save({...settings, steps: enabled})
|
|
||||||
setSettings(updated)
|
|
||||||
if (enabled) toast('Show steps for a workout.')
|
|
||||||
else toast('Stopped showing steps for workouts.')
|
|
||||||
},
|
|
||||||
[settings],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeShowDate = useCallback(
|
|
||||||
async (enabled: boolean) => {
|
|
||||||
const updated = await settingsRepo.save({...settings, showDate: enabled})
|
|
||||||
setSettings(updated)
|
|
||||||
if (enabled) toast('Show date for sets by default.')
|
|
||||||
else toast('Stopped showing date for sets by default.')
|
|
||||||
},
|
|
||||||
[settings],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeNoSound = useCallback(
|
|
||||||
async (enabled: boolean) => {
|
|
||||||
const updated = await settingsRepo.save({...settings, noSound: enabled})
|
|
||||||
setSettings(updated)
|
|
||||||
if (enabled) toast('Disable sound on rest timer alarms.')
|
|
||||||
else toast('Enabled sound for rest timer alarms.')
|
|
||||||
},
|
|
||||||
[settings],
|
|
||||||
)
|
|
||||||
|
|
||||||
const switches: Input<boolean>[] = [
|
const switches: Input<boolean>[] = [
|
||||||
{name: 'Rest timers', value: settings.alarm, onChange: changeAlarmEnabled},
|
{name: 'Rest timers', value: settings.alarm, key: 'alarm'},
|
||||||
{name: 'Vibrate', value: settings.vibrate, onChange: changeVibrate},
|
{name: 'Vibrate', value: settings.vibrate, key: 'vibrate'},
|
||||||
{name: 'Disable sound', value: settings.noSound, onChange: changeNoSound},
|
{name: 'Disable sound', value: settings.noSound, key: 'noSound'},
|
||||||
{name: 'Notifications', value: settings.notify, onChange: changeNotify},
|
{name: 'Notifications', value: settings.notify, key: 'notify'},
|
||||||
{name: 'Show images', value: settings.images, onChange: changeImages},
|
{name: 'Show images', value: settings.images, key: 'images'},
|
||||||
{name: 'Show unit', value: settings.showUnit, onChange: changeUnit},
|
{name: 'Show unit', value: settings.showUnit, key: 'showUnit'},
|
||||||
{name: 'Show steps', value: settings.steps, onChange: changeSteps},
|
{name: 'Show steps', value: settings.steps, key: 'steps'},
|
||||||
{name: 'Show date', value: settings.showDate, onChange: changeShowDate},
|
{name: 'Show date', value: settings.showDate, key: 'showDate'},
|
||||||
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
|
]
|
||||||
|
|
||||||
const changeTheme = useCallback(
|
const changeString = useCallback(
|
||||||
(value: string) => {
|
async (key: keyof Settings, value: string) => {
|
||||||
settingsRepo.update({}, {theme: value})
|
const updated = await settingsRepo.save({...settings, [key]: value})
|
||||||
setTheme(value)
|
|
||||||
},
|
|
||||||
[setTheme],
|
|
||||||
)
|
|
||||||
|
|
||||||
const changeDate = useCallback(
|
|
||||||
async (value: string) => {
|
|
||||||
const updated = await settingsRepo.save({...settings, date: value})
|
|
||||||
setSettings(updated)
|
setSettings(updated)
|
||||||
toast('Changed date format.')
|
switch (key) {
|
||||||
},
|
case 'date':
|
||||||
[settings],
|
return toast('Changed date format')
|
||||||
)
|
case 'darkColor':
|
||||||
|
|
||||||
const changeDarkColor = useCallback(
|
|
||||||
(value: string) => {
|
|
||||||
setDarkColor(value)
|
setDarkColor(value)
|
||||||
settingsRepo.update({}, {darkColor: value})
|
return toast('Set primary color for dark mode.')
|
||||||
toast('Set primary color for dark mode.')
|
case 'lightColor':
|
||||||
|
setLightColor(value)
|
||||||
|
return toast('Set primary color for light mode.')
|
||||||
|
case 'vibrate':
|
||||||
|
return toast('Set primary color for light mode.')
|
||||||
|
case 'sound':
|
||||||
|
return toast('Sound will play after rest timers.')
|
||||||
|
case 'theme':
|
||||||
|
setTheme(value as string)
|
||||||
|
if (value === 'dark') toast('Theme will always be dark.')
|
||||||
|
else if (value === 'light') toast('Theme will always be light.')
|
||||||
|
else if (value === 'system') toast('Theme will follow system.')
|
||||||
|
return
|
||||||
|
}
|
||||||
},
|
},
|
||||||
[setDarkColor],
|
[settings, setTheme, setDarkColor, setLightColor],
|
||||||
)
|
)
|
||||||
|
|
||||||
const changeLightColor = useCallback(
|
const changeBoolean = useCallback(
|
||||||
(value: string) => {
|
async (key: keyof Settings, value: boolean) => {
|
||||||
setLightColor(value)
|
const updated = await settingsRepo.save({...settings, [key]: value})
|
||||||
settingsRepo.update({}, {lightColor: value})
|
setSettings(updated)
|
||||||
toast('Set primary color for light mode.')
|
switch (key) {
|
||||||
|
case 'alarm':
|
||||||
|
if (value) toast('Timers will now run after each set.')
|
||||||
|
else toast('Stopped timers running after each set.')
|
||||||
|
if (value && !ignoring) NativeModules.SettingsModule.ignoreBattery()
|
||||||
|
return
|
||||||
|
case 'vibrate':
|
||||||
|
if (value) toast('Alarms will now vibrate.')
|
||||||
|
else toast('Alarms will no longer vibrate.')
|
||||||
|
return
|
||||||
|
case 'notify':
|
||||||
|
if (value) toast('Show notifications for new records.')
|
||||||
|
else toast('Stopped notifications for new records.')
|
||||||
|
return
|
||||||
|
case 'images':
|
||||||
|
if (value) toast('Show images for sets.')
|
||||||
|
else toast('Hid images for sets.')
|
||||||
|
return
|
||||||
|
case 'showUnit':
|
||||||
|
if (value) toast('Show option to select unit for sets.')
|
||||||
|
else toast('Hid unit option for sets.')
|
||||||
|
return
|
||||||
|
case 'steps':
|
||||||
|
if (value) toast('Show steps for a workout.')
|
||||||
|
else toast('Hid steps for workouts.')
|
||||||
|
return
|
||||||
|
case 'showDate':
|
||||||
|
if (value) toast('Show date for sets.')
|
||||||
|
else toast('Hid date on sets.')
|
||||||
|
return
|
||||||
|
case 'noSound':
|
||||||
|
if (value) toast('Disable sound on rest timer alarms.')
|
||||||
|
else toast('Enabled sound for rest timer alarms.')
|
||||||
|
return
|
||||||
|
}
|
||||||
},
|
},
|
||||||
[setLightColor],
|
[settings, ignoring],
|
||||||
)
|
)
|
||||||
|
|
||||||
const renderSwitch = useCallback(
|
const renderSwitch = useCallback(
|
||||||
(item: Input<boolean>) => (
|
(item: Input<boolean>) => (
|
||||||
<Switch key={item.name} value={item.value} onChange={item.onChange}>
|
<Switch
|
||||||
|
key={item.name}
|
||||||
|
value={item.value}
|
||||||
|
onChange={value => changeBoolean(item.key, value)}>
|
||||||
{item.name}
|
{item.name}
|
||||||
</Switch>
|
</Switch>
|
||||||
),
|
),
|
||||||
[],
|
[changeBoolean],
|
||||||
)
|
)
|
||||||
|
|
||||||
const selects: Input<string>[] = [
|
const selects: Input<string>[] = [
|
||||||
{name: 'Theme', value: theme, onChange: changeTheme, items: themeOptions},
|
{name: 'Theme', value: theme, items: themeOptions, key: 'theme'},
|
||||||
{
|
{
|
||||||
name: 'Dark color',
|
name: 'Dark color',
|
||||||
value: darkColor,
|
value: darkColor,
|
||||||
onChange: changeDarkColor,
|
|
||||||
items: lightOptions,
|
items: lightOptions,
|
||||||
|
key: 'darkColor',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Light color',
|
name: 'Light color',
|
||||||
value: lightColor,
|
value: lightColor,
|
||||||
onChange: changeLightColor,
|
|
||||||
items: darkOptions,
|
items: darkOptions,
|
||||||
|
key: 'lightColor',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Date format',
|
name: 'Date format',
|
||||||
value: settings.date,
|
value: settings.date,
|
||||||
onChange: changeDate,
|
|
||||||
items: formatOptions.map(option => ({
|
items: formatOptions.map(option => ({
|
||||||
label: format(today, option),
|
label: format(today, option),
|
||||||
value: option,
|
value: option,
|
||||||
})),
|
})),
|
||||||
|
key: 'date',
|
||||||
},
|
},
|
||||||
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
|
]
|
||||||
|
|
||||||
const renderSelect = useCallback(
|
const renderSelect = useCallback(
|
||||||
(item: Input<string>) => (
|
(item: Input<string>) => (
|
||||||
<Select
|
<Select
|
||||||
key={item.name}
|
key={item.name}
|
||||||
value={item.value}
|
value={item.value}
|
||||||
onChange={item.onChange}
|
onChange={value => changeString(item.key, value)}
|
||||||
label={item.name}
|
label={item.name}
|
||||||
items={item.items}
|
items={item.items}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
[],
|
[changeString],
|
||||||
)
|
)
|
||||||
|
|
||||||
const confirmImport = useCallback(async () => {
|
const confirmImport = useCallback(async () => {
|
||||||
|
|
3
input.ts
3
input.ts
|
@ -1,8 +1,9 @@
|
||||||
|
import Settings from './settings'
|
||||||
import {Item} from './Select'
|
import {Item} from './Select'
|
||||||
|
|
||||||
export default interface Input<T> {
|
export default interface Input<T> {
|
||||||
name: string
|
name: string
|
||||||
|
key: keyof Settings
|
||||||
value?: T
|
value?: T
|
||||||
onChange: (value: T) => void
|
|
||||||
items?: Item[]
|
items?: Item[]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user