Compare commits

...

5 Commits

Author SHA1 Message Date
Brandon Presley 667b96ec33 Start simplifying Switch.tsx 2022-12-24 19:49:43 +13:00
Brandon Presley d088cf313b Remove log from SettingsPage 2022-12-24 19:35:20 +13:00
Brandon Presley c2f98046cc Add update log to SettingsPage 2022-12-24 19:32:14 +13:00
Brandon Presley b47115204a Remove log from App.tsx 2022-12-24 19:32:06 +13:00
Brandon Presley a69bfd62a6 Use react-hook-forms on SettingsPage
This greatly reduces our lines of code.
Also I thought it might improve performance
to address #135 but it didn't make any difference.
2022-12-24 18:19:35 +13:00
9 changed files with 188 additions and 243 deletions

View File

@ -55,7 +55,6 @@ const App = () => {
const init = async () => {
if (!AppDataSource.isInitialized) await AppDataSource.initialize()
const settings = await settingsRepo.findOne({where: {}})
console.log(`${App.name}.useEffect:`, {gotSettings: settings})
setTheme(settings.theme)
if (settings.lightColor) setLightColor(settings.lightColor)
if (settings.darkColor) setDarkColor(settings.darkColor)

View File

@ -79,7 +79,7 @@ export default function EditPlan() {
{DAYS.map(day => (
<Switch
key={day}
onValueChange={value => toggleDay(value, day)}
onChange={value => toggleDay(value, day)}
onPress={() => toggleDay(!days.includes(day), day)}
value={days.includes(day)}>
{day}
@ -94,7 +94,7 @@ export default function EditPlan() {
names.map(name => (
<Switch
key={name}
onValueChange={value => toggleWorkout(value, name)}
onChange={value => toggleWorkout(value, name)}
value={workouts.includes(name)}
onPress={() => toggleWorkout(!workouts.includes(name), name)}>
{name}

25
LabelledButton.tsx Normal file
View File

@ -0,0 +1,25 @@
import {View} from 'react-native'
import {ITEM_PADDING} from './constants'
import {Button, Subheading} from 'react-native-paper'
export default function LabelledButton({
label,
onPress,
children,
}: {
label?: string
onPress: () => void
children: string
}) {
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: ITEM_PADDING,
}}>
<Subheading style={{width: 100}}>{label}</Subheading>
<Button onPress={onPress}>{children}</Button>
</View>
)
}

View File

@ -4,21 +4,23 @@ import {
useNavigation,
} from '@react-navigation/native'
import {format} from 'date-fns'
import {useCallback, useMemo, useState} from 'react'
import {DeviceEventEmitter, NativeModules, Platform, View} from 'react-native'
import {useCallback, useEffect, useMemo, useState} from 'react'
import {Controller, useForm} from 'react-hook-form'
import {NativeModules, Platform, View} from 'react-native'
import DocumentPicker from 'react-native-document-picker'
import {Dirs, FileSystem} from 'react-native-file-access'
import {Button, Subheading} from 'react-native-paper'
import ConfirmDialog from './ConfirmDialog'
import {ITEM_PADDING, MARGIN} from './constants'
import {ITEM_PADDING, MARGIN, toSentenceCase} from './constants'
import {AppDataSource} from './data-source'
import {setRepo, settingsRepo} from './db'
import {DrawerParamList} from './drawer-param-list'
import DrawerHeader from './DrawerHeader'
import Input from './input'
import LabelledButton from './LabelledButton'
import {darkOptions, lightOptions, themeOptions} from './options'
import Page from './Page'
import Select from './Select'
import Settings from './settings'
import Switch from './Switch'
import {toast} from './toast'
import {useTheme} from './use-theme'
@ -26,39 +28,32 @@ import {useTheme} from './use-theme'
const defaultFormats = ['P', 'Pp', 'ccc p', 'p']
export default function SettingsPage() {
const [ignoring, setIgnoring] = useState(false)
const {control, watch} = useForm<Settings>({
defaultValues: async () => settingsRepo.findOne({where: {}}),
})
const settings = watch()
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} =
useTheme()
const [showDate, setShowDate] = useState(false)
const [noSound, setNoSound] = useState(false)
const {setTheme, setLightColor, setDarkColor} = useTheme()
const [formatOptions, setFormatOptions] = useState<string[]>(defaultFormats)
const [importing, setImporting] = useState(false)
const [ignoring, setIgnoring] = useState(false)
const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
const today = new Date()
useEffect(() => {
if (Object.keys(settings).length === 0) return
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(() => {
settingsRepo.findOne({where: {}}).then(settings => {
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)
})
if (Platform.OS !== 'android') return
NativeModules.SettingsModule.ignoringBattery(setIgnoring)
NativeModules.SettingsModule.is24().then((is24: boolean) => {
@ -69,28 +64,6 @@ export default function SettingsPage() {
}, []),
)
const changeAlarmEnabled = useCallback(
(enabled: boolean) => {
if (enabled)
DeviceEventEmitter.emit('toast', {
value: 'Timers will now run after each set',
timeout: 4000,
})
else toast('Stopped timers running after each set.')
if (enabled && !ignoring) NativeModules.SettingsModule.ignoreBattery()
setAlarm(enabled)
settingsRepo.update({}, {alarm: enabled})
},
[ignoring],
)
const changeVibrate = useCallback((enabled: boolean) => {
if (enabled) toast('When a timer completes, vibrate your phone.')
else toast('Stop vibrating at the end of timers.')
setVibrate(enabled)
settingsRepo.update({}, {vibrate: enabled})
}, [])
const changeSound = useCallback(async () => {
const {fileCopyUri} = await DocumentPicker.pickSingle({
type: 'audio/*',
@ -102,143 +75,78 @@ export default function SettingsPage() {
toast('This song will now play after rest timers complete.')
}, [])
const changeNotify = useCallback((enabled: boolean) => {
setNotify(enabled)
settingsRepo.update({}, {notify: enabled})
if (enabled) toast('Show when a set is a new record.')
else toast('Stopped showing notifications for new records.')
}, [])
const changeImages = useCallback((enabled: boolean) => {
setImages(enabled)
settingsRepo.update({}, {images: enabled})
if (enabled) toast('Show images for sets.')
else toast('Stopped showing images for sets.')
}, [])
const changeUnit = useCallback((enabled: boolean) => {
setShowUnit(enabled)
settingsRepo.update({}, {showUnit: enabled})
if (enabled) toast('Show option to select unit for sets.')
else toast('Hid unit option for sets.')
}, [])
const changeSteps = useCallback((enabled: boolean) => {
setSteps(enabled)
settingsRepo.update({}, {steps: enabled})
if (enabled) toast('Show steps for a workout.')
else toast('Stopped showing steps for workouts.')
}, [])
const changeShowDate = useCallback((enabled: boolean) => {
setShowDate(enabled)
settingsRepo.update({}, {showDate: enabled})
if (enabled) toast('Show date for sets by default.')
else toast('Stopped showing date for sets by default.')
}, [])
const changeNoSound = useCallback((enabled: boolean) => {
setNoSound(enabled)
settingsRepo.update({}, {noSound: enabled})
if (enabled) toast('Disable sound on rest timer alarms.')
else toast('Enabled sound for rest timer alarms.')
}, [])
const switches: Input<boolean>[] = [
{name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
{name: 'Disable sound', value: noSound, onChange: changeNoSound},
{name: 'Notifications', value: notify, onChange: changeNotify},
{name: 'Show images', value: images, onChange: changeImages},
{name: 'Show unit', value: showUnit, onChange: changeUnit},
{name: 'Show steps', value: steps, onChange: changeSteps},
{name: 'Show date', value: showDate, onChange: changeShowDate},
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
const changeTheme = useCallback(
(value: string) => {
settingsRepo.update({}, {theme: value})
setTheme(value)
},
[setTheme],
)
const changeDate = useCallback((value: string) => {
settingsRepo.update({}, {date: value})
setDate(value)
}, [])
const soundString = useMemo(() => {
if (!sound) return null
const split = sound.split('/')
return split.pop()
}, [sound])
const changeDarkColor = useCallback(
(value: string) => {
setDarkColor(value)
settingsRepo.update({}, {darkColor: value})
},
[setDarkColor],
)
const changeLightColor = useCallback(
(value: string) => {
setLightColor(value)
settingsRepo.update({}, {lightColor: value})
},
[setLightColor],
)
const renderSwitch = useCallback(
(item: Input<boolean>) => (
<Switch
onPress={() => item.onChange(!item.value)}
key={item.name}
value={item.value}
onValueChange={item.onChange}>
{item.name}
(key: keyof Settings) => (
<Switch control={control} name={key}>
{toSentenceCase(key)}
</Switch>
),
[],
[control],
)
const selects: Input<string>[] = [
{name: 'Theme', value: theme, onChange: changeTheme, items: themeOptions},
{
name: 'Dark color',
value: darkColor,
onChange: changeDarkColor,
items: lightOptions,
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 []
}
},
{
name: 'Light color',
value: lightColor,
onChange: changeLightColor,
items: darkOptions,
},
{
name: 'Date format',
value: date,
onChange: changeDate,
items: formatOptions.map(option => ({
label: format(today, option),
value: option,
})),
},
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase()))
[formatOptions],
)
const renderSelect = useCallback(
(item: Input<string>) => (
<Select
key={item.name}
value={item.value}
onChange={item.onChange}
label={item.name}
items={item.items}
(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)}
/>
)}
/>
),
[],
[control, getItems],
)
const confirmImport = useCallback(async () => {
@ -262,48 +170,34 @@ export default function SettingsPage() {
toast('Database exported. Check downloads.')
}, [])
const buttons = useMemo(
() => [
{
name: 'Alarm sound',
element: (
<View
key="alarm-sound"
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: ITEM_PADDING,
}}>
<Subheading style={{width: 100}}>Alarm sound</Subheading>
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
</View>
),
},
{
name: 'Export database',
element: (
<Button
key="export-db"
style={{alignSelf: 'flex-start'}}
onPress={exportDatabase}>
Export database
</Button>
),
},
{
name: 'Import database',
element: (
<Button
key="import-db"
style={{alignSelf: 'flex-start'}}
onPress={() => setImporting(true)}>
Import database
</Button>
),
},
],
[changeSound, exportDatabase, soundString],
)
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>
),
},
]
return (
<>
@ -311,8 +205,12 @@ export default function SettingsPage() {
<Page term={term} search={setTerm} style={{flexGrow: 0}}>
<View style={{marginTop: MARGIN}}>
{switches.map(s => renderSwitch(s))}
{selects.map(s => renderSelect(s))}
{switches
.filter(s => s.toLowerCase().includes(term.toLowerCase()))
.map(s => renderSwitch(s))}
{selects
.filter(s => s.toLowerCase().includes(term.toLowerCase()))
.map(key => renderSelect(key))}
{buttons
.filter(b => b.name.includes(term.toLowerCase()))
.map(b => b.element)}

View File

@ -1,36 +1,41 @@
import {Control, Controller} from 'react-hook-form'
import {Platform, Pressable} from 'react-native'
import {Switch as PaperSwitch, Text, useTheme} from 'react-native-paper'
import {MARGIN} from './constants'
export default function Switch({
value,
onValueChange,
onPress,
control,
name,
children,
}: {
value?: boolean
onValueChange: (value: boolean) => void
onPress: () => void
name: string
control: Control<any, any>
children: string
}) {
const {colors} = useTheme()
return (
<Pressable
onPress={onPress}
style={{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
marginBottom: Platform.OS === 'ios' ? MARGIN : null,
}}>
<PaperSwitch
color={colors.primary}
style={{marginRight: MARGIN}}
value={value}
onValueChange={onValueChange}
/>
<Text>{children}</Text>
</Pressable>
<Controller
name={name}
control={control}
render={({field: {onChange, value}}) => (
<Pressable
onPress={() => onChange(!value)}
style={{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
marginBottom: Platform.OS === 'ios' ? MARGIN : null,
}}>
<PaperSwitch
color={colors.primary}
style={{marginRight: MARGIN}}
value={value}
onValueChange={onChange}
/>
<Text>{children}</Text>
</Pressable>
)}
/>
)
}

View File

@ -3,3 +3,11 @@ export const PADDING = 10
export const ITEM_PADDING = 8
export const DARK_RIPPLE = '#444444'
export const LIGHT_RIPPLE = '#c2c2c2'
export const toSentenceCase = (camelCase: string) => {
if (camelCase) {
const result = camelCase.replace(/([A-Z])/g, ' $1')
return result[0].toUpperCase() + result.substring(1).toLowerCase()
}
return ''
}

View File

@ -1,8 +1,7 @@
import {Item} from './Select'
export default interface Input<T> {
key: keyof T
name: string
value?: T
onChange: (value: T) => void
items?: Item[]
}

View File

@ -31,6 +31,7 @@
"eslint-plugin-flowtype": "^8.0.3",
"jest": "^29.2.2",
"react": "^18.2.0",
"react-hook-form": "^7.41.1",
"react-native": "^0.70.5",
"react-native-document-picker": "^8.1.2",
"react-native-file-access": "^2.5.0",

View File

@ -7306,6 +7306,7 @@ __metadata:
jest: ^29.2.2
metro-react-native-babel-preset: ^0.73.3
react: ^18.2.0
react-hook-form: ^7.41.1
react-native: ^0.70.5
react-native-document-picker: ^8.1.2
react-native-file-access: ^2.5.0
@ -8762,6 +8763,15 @@ __metadata:
languageName: node
linkType: hard
"react-hook-form@npm:^7.41.1":
version: 7.41.1
resolution: "react-hook-form@npm:7.41.1"
peerDependencies:
react: ^16.8.0 || ^17 || ^18
checksum: 30f7ea67e29c3527d25f87b9ea8789f6722780759adf0718a0dadc6160227ae763c68ddedf63d8311f0902e4ce27225eff37b93a82eac868fc5e0a0d00dbbd14
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"