Massive/SettingsPage.tsx

231 lines
6.5 KiB
TypeScript
Raw Normal View History

import {
NavigationProp,
useFocusEffect,
useNavigation,
} from '@react-navigation/native'
import {format} from 'date-fns'
import {useCallback, useEffect, useMemo, useState} from 'react'
import {Controller, useForm} from 'react-hook-form'
2022-12-24 06:49:43 +00:00
import {NativeModules, Platform, View} from 'react-native'
2022-10-31 04:22:08 +00:00
import DocumentPicker from 'react-native-document-picker'
import {Dirs, FileSystem} from 'react-native-file-access'
2022-11-30 02:15:19 +00:00
import {Button, Subheading} from 'react-native-paper'
import ConfirmDialog from './ConfirmDialog'
import {ITEM_PADDING, MARGIN, toSentenceCase} from './constants'
import {AppDataSource} from './data-source'
import {setRepo, settingsRepo} from './db'
import {DrawerParamList} from './drawer-param-list'
2022-10-31 04:22:08 +00:00
import DrawerHeader from './DrawerHeader'
2022-12-24 06:49:43 +00:00
import LabelledButton from './LabelledButton'
2022-12-01 02:45:18 +00:00
import {darkOptions, lightOptions, themeOptions} from './options'
2022-10-31 04:22:08 +00:00
import Page from './Page'
2022-11-01 03:06:25 +00:00
import Select from './Select'
import Settings from './settings'
2022-10-31 04:22:08 +00:00
import Switch from './Switch'
import {toast} from './toast'
import {useTheme} from './use-theme'
2022-07-08 03:45:24 +00:00
2022-11-21 05:15:43 +00:00
const defaultFormats = ['P', 'Pp', 'ccc p', 'p']
export default function SettingsPage() {
const {control, watch} = useForm<Settings>({
defaultValues: async () => settingsRepo.findOne({where: {}}),
})
const settings = watch()
2022-10-31 04:22:08 +00:00
const [term, setTerm] = useState('')
const [sound, setSound] = useState('')
const {setTheme, setLightColor, setDarkColor} = useTheme()
2022-11-21 05:15:43 +00:00
const [formatOptions, setFormatOptions] = useState<string[]>(defaultFormats)
const [importing, setImporting] = useState(false)
const [ignoring, setIgnoring] = useState(false)
const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
useEffect(() => {
if (Object.keys(settings).length === 0) return
2022-12-24 06:49:43 +00:00
console.log(`${SettingsPage.name}.update`, {settings})
settingsRepo.update({}, settings)
setLightColor(settings.lightColor)
setDarkColor(settings.darkColor)
setTheme(settings.theme)
if (!settings.alarm || ignoring) return
NativeModules.SettingsModule.ignoreBattery()
setIgnoring(true)
}, [settings, setDarkColor, setLightColor, setTheme, ignoring])
useFocusEffect(
useCallback(() => {
if (Platform.OS !== 'android') return
2022-11-21 05:15:43 +00:00
NativeModules.SettingsModule.ignoringBattery(setIgnoring)
NativeModules.SettingsModule.is24().then((is24: boolean) => {
console.log(`${SettingsPage.name}.focus:`, {is24})
if (is24) setFormatOptions(['P', 'P, k:m', 'ccc k:m', 'k:m'])
else setFormatOptions(defaultFormats)
})
}, []),
2022-10-31 04:22:08 +00:00
)
2022-07-03 01:50:01 +00:00
const changeSound = useCallback(async () => {
const {fileCopyUri} = await DocumentPicker.pickSingle({
type: 'audio/*',
copyTo: 'documentDirectory',
2022-10-31 04:22:08 +00:00
})
if (!fileCopyUri) return
settingsRepo.update({}, {sound: fileCopyUri})
setSound(fileCopyUri)
toast('This song will now play after rest timers complete.')
}, [])
const soundString = useMemo(() => {
if (!sound) return null
const split = sound.split('/')
2022-11-30 02:19:31 +00:00
return split.pop()
}, [sound])
2022-12-01 02:45:18 +00:00
const renderSwitch = useCallback(
(key: keyof Settings) => (
2022-12-24 06:49:43 +00:00
<Switch control={control} name={key}>
{toSentenceCase(key)}
</Switch>
),
[control],
)
const switches: (keyof Settings)[] = [
'alarm',
'vibrate',
'noSound',
'notify',
'images',
'showUnit',
'steps',
'showDate',
]
const selects: (keyof Settings)[] = [
'theme',
'darkColor',
'lightColor',
'date',
]
const getItems = useCallback(
(key: keyof Settings) => {
const today = new Date()
switch (key) {
case 'theme':
return themeOptions
case 'darkColor':
return lightOptions
case 'lightColor':
return darkOptions
case 'date':
return formatOptions.map(option => ({
label: format(today, option),
value: option,
}))
default:
return []
}
2022-12-01 02:45:18 +00:00
},
[formatOptions],
)
2022-12-01 02:45:18 +00:00
const renderSelect = useCallback(
(key: keyof Settings) => (
<Controller
key={key}
name={key}
control={control}
render={({field: {onChange, value}}) => (
<Select
value={value as string}
onChange={onChange}
items={getItems(key)}
label={toSentenceCase(key)}
/>
)}
2022-12-01 02:45:18 +00:00
/>
),
[control, getItems],
2022-12-01 02:45:18 +00:00
)
const confirmImport = useCallback(async () => {
setImporting(false)
await AppDataSource.destroy()
const result = await DocumentPicker.pickSingle()
await FileSystem.cp(result.uri, Dirs.DatabaseDir + '/massive.db')
await AppDataSource.initialize()
await setRepo.createQueryBuilder().update().set({image: null}).execute()
await settingsRepo
.createQueryBuilder()
.update()
2022-12-10 09:22:51 +00:00
.set({sound: null})
.execute()
reset({index: 0, routes: [{name: 'Settings'}]})
}, [reset])
const exportDatabase = useCallback(async () => {
const path = Dirs.DatabaseDir + '/massive.db'
await FileSystem.cpExternal(path, 'massive.db', 'downloads')
toast('Database exported. Check downloads.')
}, [])
2022-12-24 06:49:43 +00:00
const buttons = [
{
name: 'Alarm sound',
element: (
<LabelledButton label="Alarm sound" onPress={changeSound}>
{soundString || 'Default'}
</LabelledButton>
),
},
{
name: 'Export database',
element: (
<Button style={{alignSelf: 'flex-start'}} onPress={exportDatabase}>
Export database
</Button>
),
},
{
name: 'Import database',
element: (
<Button
style={{alignSelf: 'flex-start'}}
onPress={() => setImporting(true)}>
Import database
</Button>
),
},
]
2022-12-24 00:36:11 +00:00
return (
<>
<DrawerHeader name="Settings" />
<Page term={term} search={setTerm} style={{flexGrow: 0}}>
<View style={{marginTop: MARGIN}}>
{switches
.filter(s => s.toLowerCase().includes(term.toLowerCase()))
.map(s => renderSwitch(s))}
{selects
.filter(s => s.toLowerCase().includes(term.toLowerCase()))
.map(key => renderSelect(key))}
2022-12-24 00:36:11 +00:00
{buttons
.filter(b => b.name.includes(term.toLowerCase()))
.map(b => b.element)}
</View>
</Page>
<ConfirmDialog
title="Are you sure?"
onOk={confirmImport}
setShow={setImporting}
show={importing}>
Importing a database overwrites your current data. This action cannot be
reversed!
</ConfirmDialog>
</>
2022-10-31 04:22:08 +00:00
)
2022-07-03 01:50:01 +00:00
}