2022-09-24 01:57:51 +00:00
|
|
|
import {Picker} from '@react-native-picker/picker';
|
2022-09-21 01:48:45 +00:00
|
|
|
import {useFocusEffect} from '@react-navigation/native';
|
2022-10-14 04:27:19 +00:00
|
|
|
import React, {useCallback, useEffect, useState} from 'react';
|
2022-09-26 03:10:13 +00:00
|
|
|
import {NativeModules, ScrollView} from 'react-native';
|
2022-08-26 01:54:51 +00:00
|
|
|
import DocumentPicker from 'react-native-document-picker';
|
2022-09-26 03:10:13 +00:00
|
|
|
import {Button} from 'react-native-paper';
|
2022-10-14 04:24:02 +00:00
|
|
|
import {useColor} from './color';
|
2022-09-25 04:32:49 +00:00
|
|
|
import {darkColors, lightColors} from './colors';
|
2022-07-10 23:26:45 +00:00
|
|
|
import ConfirmDialog from './ConfirmDialog';
|
2022-09-16 09:07:02 +00:00
|
|
|
import {MARGIN} from './constants';
|
2022-10-23 06:13:58 +00:00
|
|
|
import DrawerHeader from './DrawerHeader';
|
2022-09-25 04:32:49 +00:00
|
|
|
import Input from './input';
|
2022-10-14 04:27:19 +00:00
|
|
|
import {useSnackbar} from './MassiveSnack';
|
2022-09-16 09:07:02 +00:00
|
|
|
import Page from './Page';
|
2022-10-18 08:43:46 +00:00
|
|
|
import Settings from './settings';
|
|
|
|
import {updateSettings} from './settings.service';
|
2022-09-26 03:10:13 +00:00
|
|
|
import Switch from './Switch';
|
2022-10-01 03:01:07 +00:00
|
|
|
import {useSettings} from './use-settings';
|
2022-07-08 03:45:24 +00:00
|
|
|
|
2022-07-08 03:20:03 +00:00
|
|
|
export default function SettingsPage() {
|
2022-08-20 04:37:59 +00:00
|
|
|
const [battery, setBattery] = useState(false);
|
2022-07-07 00:45:45 +00:00
|
|
|
const [ignoring, setIgnoring] = useState(false);
|
2022-08-23 00:04:52 +00:00
|
|
|
const [search, setSearch] = useState('');
|
2022-10-01 03:01:07 +00:00
|
|
|
const {settings, setSettings} = useSettings();
|
2022-10-18 08:43:46 +00:00
|
|
|
const {
|
|
|
|
vibrate,
|
|
|
|
sound,
|
|
|
|
notify,
|
|
|
|
images,
|
|
|
|
showUnit,
|
|
|
|
steps,
|
|
|
|
showDate,
|
|
|
|
showSets,
|
|
|
|
theme,
|
|
|
|
alarm,
|
|
|
|
} = settings;
|
2022-10-14 04:24:02 +00:00
|
|
|
const {color, setColor} = useColor();
|
2022-10-14 04:27:19 +00:00
|
|
|
const {toast} = useSnackbar();
|
2022-07-03 01:50:01 +00:00
|
|
|
|
2022-10-18 08:43:46 +00:00
|
|
|
useEffect(() => {
|
|
|
|
console.log(`${SettingsPage.name}.useEffect:`, {settings});
|
|
|
|
}, [settings]);
|
|
|
|
|
2022-09-21 01:48:45 +00:00
|
|
|
useFocusEffect(
|
|
|
|
useCallback(() => {
|
|
|
|
NativeModules.AlarmModule.ignoringBattery(setIgnoring);
|
|
|
|
}, []),
|
|
|
|
);
|
2022-07-03 01:50:01 +00:00
|
|
|
|
2022-10-18 08:43:46 +00:00
|
|
|
const update = useCallback(
|
|
|
|
(value: boolean, field: keyof Settings) => {
|
|
|
|
updateSettings({...settings, [field]: +value});
|
|
|
|
setSettings({...settings, [field]: +value});
|
|
|
|
},
|
|
|
|
[settings, setSettings],
|
|
|
|
);
|
2022-08-24 00:01:39 +00:00
|
|
|
|
2022-07-09 07:39:11 +00:00
|
|
|
const changeAlarmEnabled = useCallback(
|
|
|
|
(enabled: boolean) => {
|
2022-09-11 03:35:20 +00:00
|
|
|
if (enabled) toast('Timers will now run after each set.', 4000);
|
|
|
|
else toast('Stopped timers running after each set.', 4000);
|
2022-08-20 04:37:59 +00:00
|
|
|
if (enabled && !ignoring) setBattery(true);
|
2022-10-18 08:43:46 +00:00
|
|
|
update(enabled, 'alarm');
|
2022-07-09 07:39:11 +00:00
|
|
|
},
|
2022-10-18 08:43:46 +00:00
|
|
|
[setBattery, ignoring, toast, update],
|
2022-07-09 07:39:11 +00:00
|
|
|
);
|
2022-07-06 09:03:56 +00:00
|
|
|
|
2022-08-20 04:37:59 +00:00
|
|
|
const changeVibrate = useCallback(
|
2022-09-11 03:35:20 +00:00
|
|
|
(enabled: boolean) => {
|
|
|
|
if (enabled) toast('When a timer completes, vibrate your phone.', 4000);
|
|
|
|
else toast('Stop vibrating at the end of timers.', 4000);
|
2022-10-18 08:43:46 +00:00
|
|
|
update(enabled, 'vibrate');
|
2022-08-20 04:37:59 +00:00
|
|
|
},
|
2022-10-18 08:43:46 +00:00
|
|
|
[toast, update],
|
2022-08-20 04:37:59 +00:00
|
|
|
);
|
2022-07-10 07:03:07 +00:00
|
|
|
|
2022-08-25 08:41:01 +00:00
|
|
|
const changeSound = useCallback(async () => {
|
|
|
|
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
|
|
|
type: 'audio/*',
|
|
|
|
copyTo: 'documentDirectory',
|
|
|
|
});
|
2022-09-11 03:35:20 +00:00
|
|
|
if (!fileCopyUri) return;
|
2022-10-18 08:43:46 +00:00
|
|
|
updateSettings({sound: fileCopyUri} as Settings);
|
|
|
|
setSettings({...settings, sound: fileCopyUri});
|
2022-09-11 03:35:20 +00:00
|
|
|
toast('This song will now play after rest timers complete.', 4000);
|
2022-10-18 08:43:46 +00:00
|
|
|
}, [toast, setSettings, settings]);
|
2022-08-25 08:41:01 +00:00
|
|
|
|
2022-08-27 06:08:23 +00:00
|
|
|
const changeNotify = useCallback(
|
2022-09-11 03:35:20 +00:00
|
|
|
(enabled: boolean) => {
|
2022-10-18 08:43:46 +00:00
|
|
|
update(enabled, 'notify');
|
2022-09-11 03:35:20 +00:00
|
|
|
if (enabled) toast('Show when a set is a new record.', 4000);
|
|
|
|
else toast('Stopped showing notifications for new records.', 4000);
|
2022-08-27 06:08:23 +00:00
|
|
|
},
|
2022-10-18 08:43:46 +00:00
|
|
|
[toast, update],
|
2022-08-27 06:08:23 +00:00
|
|
|
);
|
|
|
|
|
2022-09-16 09:38:37 +00:00
|
|
|
const changeImages = useCallback(
|
|
|
|
(enabled: boolean) => {
|
2022-10-18 08:43:46 +00:00
|
|
|
update(enabled, 'images');
|
2022-09-16 09:38:37 +00:00
|
|
|
if (enabled) toast('Show images for sets.', 4000);
|
|
|
|
else toast('Stopped showing images for sets.', 4000);
|
|
|
|
},
|
2022-10-18 08:43:46 +00:00
|
|
|
[toast, update],
|
2022-09-16 09:38:37 +00:00
|
|
|
);
|
|
|
|
|
2022-09-21 01:48:45 +00:00
|
|
|
const changeUnit = useCallback(
|
|
|
|
(enabled: boolean) => {
|
2022-10-18 08:43:46 +00:00
|
|
|
update(enabled, 'showUnit');
|
2022-09-21 01:48:45 +00:00
|
|
|
if (enabled) toast('Show option to select unit for sets.', 4000);
|
2022-09-24 05:29:52 +00:00
|
|
|
else toast('Hid unit option for sets.', 4000);
|
2022-09-21 01:48:45 +00:00
|
|
|
},
|
2022-10-18 08:43:46 +00:00
|
|
|
[toast, update],
|
2022-09-21 01:48:45 +00:00
|
|
|
);
|
|
|
|
|
2022-09-24 05:29:52 +00:00
|
|
|
const changeSteps = useCallback(
|
|
|
|
(enabled: boolean) => {
|
2022-10-18 08:43:46 +00:00
|
|
|
update(enabled, 'steps');
|
2022-09-24 05:29:52 +00:00
|
|
|
if (enabled) toast('Show steps for a workout.', 4000);
|
|
|
|
else toast('Stopped showing steps for workouts.', 4000);
|
2022-09-24 05:23:15 +00:00
|
|
|
},
|
2022-10-18 08:43:46 +00:00
|
|
|
[toast, update],
|
2022-09-24 05:23:15 +00:00
|
|
|
);
|
|
|
|
|
2022-10-02 05:07:43 +00:00
|
|
|
const changeShowDate = useCallback(
|
|
|
|
(enabled: boolean) => {
|
2022-10-18 08:43:46 +00:00
|
|
|
update(enabled, 'showDate');
|
2022-10-02 05:07:43 +00:00
|
|
|
if (enabled) toast('Show date for sets by default.', 4000);
|
|
|
|
else toast('Stopped showing date for sets by default.', 4000);
|
|
|
|
},
|
2022-10-18 08:43:46 +00:00
|
|
|
[toast, update],
|
2022-10-02 05:07:43 +00:00
|
|
|
);
|
|
|
|
|
2022-10-16 03:54:20 +00:00
|
|
|
const changeShowSets = useCallback(
|
|
|
|
(enabled: boolean) => {
|
2022-10-18 08:43:46 +00:00
|
|
|
update(enabled, 'showSets');
|
2022-10-16 03:54:20 +00:00
|
|
|
if (enabled) toast('Show maximum sets for workouts.', 4000);
|
|
|
|
else toast('Stopped showing maximum sets for workouts.', 4000);
|
|
|
|
},
|
2022-10-18 08:43:46 +00:00
|
|
|
[toast, update],
|
2022-10-16 03:54:20 +00:00
|
|
|
);
|
|
|
|
|
2022-09-11 03:22:18 +00:00
|
|
|
const switches: Input<boolean>[] = [
|
2022-10-18 08:43:46 +00:00
|
|
|
{name: 'Rest timers', value: !!alarm, onChange: changeAlarmEnabled},
|
|
|
|
{name: 'Vibrate', value: !!vibrate, onChange: changeVibrate},
|
|
|
|
{name: 'Record 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},
|
|
|
|
{name: 'Show sets', value: !!showSets, onChange: changeShowSets},
|
2022-08-23 00:04:52 +00:00
|
|
|
];
|
|
|
|
|
2022-10-18 08:43:46 +00:00
|
|
|
const changeTheme = useCallback(
|
|
|
|
(value: string) => {
|
|
|
|
updateSettings({...settings, theme: value as any});
|
|
|
|
setSettings({...settings, theme: value as any});
|
|
|
|
},
|
|
|
|
[settings, setSettings],
|
|
|
|
);
|
|
|
|
|
|
|
|
const changeDate = useCallback(
|
|
|
|
(value: string) => {
|
|
|
|
updateSettings({...settings, date: value as any});
|
|
|
|
setSettings({...settings, date: value as any});
|
|
|
|
},
|
|
|
|
[settings, setSettings],
|
|
|
|
);
|
|
|
|
|
2022-08-20 04:37:59 +00:00
|
|
|
return (
|
2022-10-22 23:35:58 +00:00
|
|
|
<>
|
2022-10-23 06:13:58 +00:00
|
|
|
<DrawerHeader name="Settings" />
|
2022-10-22 23:35:58 +00:00
|
|
|
<Page search={search} setSearch={setSearch}>
|
|
|
|
<ScrollView style={{marginTop: MARGIN}}>
|
|
|
|
{switches
|
|
|
|
.filter(input =>
|
|
|
|
input.name.toLowerCase().includes(search.toLowerCase()),
|
|
|
|
)
|
|
|
|
.map(input => (
|
|
|
|
<Switch
|
|
|
|
onPress={() => input.onChange(!input.value)}
|
|
|
|
key={input.name}
|
|
|
|
value={input.value}
|
|
|
|
onValueChange={input.onChange}>
|
|
|
|
{input.name}
|
|
|
|
</Switch>
|
|
|
|
))}
|
|
|
|
{'theme'.includes(search.toLowerCase()) && (
|
|
|
|
<Picker
|
|
|
|
style={{color}}
|
|
|
|
dropdownIconColor={color}
|
|
|
|
selectedValue={theme}
|
|
|
|
onValueChange={changeTheme}>
|
|
|
|
<Picker.Item value="system" label="Follow system theme" />
|
|
|
|
<Picker.Item value="dark" label="Dark theme" />
|
|
|
|
<Picker.Item value="light" label="Light theme" />
|
|
|
|
</Picker>
|
|
|
|
)}
|
|
|
|
{'color'.includes(search.toLowerCase()) && (
|
|
|
|
<Picker
|
|
|
|
style={{color, marginTop: -10}}
|
|
|
|
dropdownIconColor={color}
|
|
|
|
selectedValue={color}
|
|
|
|
onValueChange={value => setColor(value)}>
|
|
|
|
{lightColors.concat(darkColors).map(colorOption => (
|
|
|
|
<Picker.Item
|
|
|
|
key={colorOption.hex}
|
|
|
|
value={colorOption.hex}
|
|
|
|
label="Primary color"
|
|
|
|
color={colorOption.hex}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Picker>
|
|
|
|
)}
|
|
|
|
{'date format'.includes(search.toLowerCase()) && (
|
|
|
|
<Picker
|
|
|
|
style={{color, marginTop: -10}}
|
|
|
|
dropdownIconColor={color}
|
|
|
|
selectedValue={settings.date}
|
|
|
|
onValueChange={changeDate}>
|
2022-10-22 23:24:39 +00:00
|
|
|
<Picker.Item
|
2022-10-22 23:35:58 +00:00
|
|
|
value="%Y-%m-%d %H:%M"
|
|
|
|
label="Format date as 1990-12-24 15:05"
|
2022-10-22 23:24:39 +00:00
|
|
|
/>
|
2022-10-22 23:35:58 +00:00
|
|
|
<Picker.Item
|
|
|
|
value="%Y-%m-%d"
|
|
|
|
label="Format date as 1990-12-24 (YYYY-MM-dd)"
|
|
|
|
/>
|
|
|
|
<Picker.Item value="%d/%m" label="Format date as 24/12 (dd/MM)" />
|
|
|
|
<Picker.Item value="%H:%M" label="Format date as 15:05 (HH:MM)" />
|
|
|
|
</Picker>
|
|
|
|
)}
|
|
|
|
{'alarm sound'.includes(search.toLowerCase()) && (
|
|
|
|
<Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
|
|
|
|
Alarm sound
|
|
|
|
{sound
|
|
|
|
? ': ' + sound.split('/')[sound.split('/').length - 1]
|
|
|
|
: null}
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
</ScrollView>
|
|
|
|
<ConfirmDialog
|
|
|
|
title="Battery optimizations"
|
|
|
|
show={battery}
|
|
|
|
setShow={setBattery}
|
|
|
|
onOk={() => {
|
|
|
|
NativeModules.AlarmModule.ignoreBattery();
|
|
|
|
setBattery(false);
|
|
|
|
}}>
|
|
|
|
Disable battery optimizations for Massive to use rest timers.
|
|
|
|
</ConfirmDialog>
|
|
|
|
</Page>
|
|
|
|
</>
|
2022-07-03 01:50:01 +00:00
|
|
|
);
|
|
|
|
}
|