Reduce redundancy of SettingsPage
This commit is contained in:
parent
0f9ed2257b
commit
1a83b20069
181
SettingsPage.tsx
181
SettingsPage.tsx
|
@ -1,10 +1,4 @@
|
||||||
import React, {
|
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||||
ReactNode,
|
|
||||||
useCallback,
|
|
||||||
useContext,
|
|
||||||
useEffect,
|
|
||||||
useState,
|
|
||||||
} from 'react';
|
|
||||||
import {NativeModules, ScrollView, StyleSheet, View} from 'react-native';
|
import {NativeModules, ScrollView, StyleSheet, View} from 'react-native';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import {Button, Searchbar, Text} from 'react-native-paper';
|
import {Button, Searchbar, Text} from 'react-native-paper';
|
||||||
|
@ -14,10 +8,16 @@ import MassiveInput from './MassiveInput';
|
||||||
import MassiveSwitch from './MassiveSwitch';
|
import MassiveSwitch from './MassiveSwitch';
|
||||||
import {getSettings, setSettings} from './settings.service';
|
import {getSettings, setSettings} from './settings.service';
|
||||||
|
|
||||||
|
interface Input<T> {
|
||||||
|
name: string;
|
||||||
|
value?: T;
|
||||||
|
onChange: (value: T) => void;
|
||||||
|
}
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const [vibrate, setVibrate] = useState(true);
|
const [vibrate, setVibrate] = useState(true);
|
||||||
const [minutes, setMinutes] = useState<string>('');
|
const [minutes, setMinutes] = useState<string>('');
|
||||||
const [sets, setMaxSets] = useState<string>('3');
|
const [sets, setSets] = useState<string>('3');
|
||||||
const [seconds, setSeconds] = useState<string>('');
|
const [seconds, setSeconds] = useState<string>('');
|
||||||
const [alarm, setAlarm] = useState(false);
|
const [alarm, setAlarm] = useState(false);
|
||||||
const [predict, setPredict] = useState(false);
|
const [predict, setPredict] = useState(false);
|
||||||
|
@ -36,7 +36,7 @@ export default function SettingsPage() {
|
||||||
setSeconds(settings.seconds.toString());
|
setSeconds(settings.seconds.toString());
|
||||||
setAlarm(!!settings.alarm);
|
setAlarm(!!settings.alarm);
|
||||||
setPredict(!!settings.predict);
|
setPredict(!!settings.predict);
|
||||||
setMaxSets(settings.sets.toString());
|
setSets(settings.sets.toString());
|
||||||
setVibrate(!!settings.vibrate);
|
setVibrate(!!settings.vibrate);
|
||||||
setSound(settings.sound);
|
setSound(settings.sound);
|
||||||
setNotify(!!settings.notify);
|
setNotify(!!settings.notify);
|
||||||
|
@ -103,121 +103,18 @@ export default function SettingsPage() {
|
||||||
[toast],
|
[toast],
|
||||||
);
|
);
|
||||||
|
|
||||||
const items: {name: string; element: ReactNode}[] = [
|
const inputs: Input<string>[] = [
|
||||||
{
|
{name: 'Sets per workout', value: sets, onChange: setSets},
|
||||||
name: 'Sets per workout',
|
{name: 'Rest minutes', value: minutes, onChange: setMinutes},
|
||||||
element: (
|
{name: 'Rest seconds', value: seconds, onChange: setSeconds},
|
||||||
<MassiveInput
|
];
|
||||||
label="Sets per workout"
|
|
||||||
value={sets}
|
const switches: Input<boolean>[] = [
|
||||||
keyboardType="numeric"
|
{name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
|
||||||
onChangeText={value => {
|
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
|
||||||
setMaxSets(value);
|
{name: 'Predict sets', value: predict, onChange: changePredict},
|
||||||
}}
|
{name: 'Record notifications', value: notify, onChange: changeNotify},
|
||||||
/>
|
{name: 'Show images', value: images, onChange: setImages},
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Rest minutes Rest seconds',
|
|
||||||
element: (
|
|
||||||
<View style={{flexDirection: 'row', marginBottom: 10}}>
|
|
||||||
<MassiveInput
|
|
||||||
style={{width: 125, marginRight: 10}}
|
|
||||||
label="Rest minutes"
|
|
||||||
value={minutes}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="3"
|
|
||||||
onChangeText={text => {
|
|
||||||
setMinutes(text);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<MassiveInput
|
|
||||||
style={{width: 125}}
|
|
||||||
label="Rest seconds"
|
|
||||||
value={seconds}
|
|
||||||
keyboardType="numeric"
|
|
||||||
placeholder="30"
|
|
||||||
onChangeText={s => {
|
|
||||||
setSeconds(s);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Rest timers',
|
|
||||||
element: (
|
|
||||||
<>
|
|
||||||
<Text style={styles.text}>Rest timers</Text>
|
|
||||||
<MassiveSwitch
|
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
|
||||||
value={alarm}
|
|
||||||
onValueChange={changeAlarmEnabled}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Vibrate',
|
|
||||||
element: (
|
|
||||||
<>
|
|
||||||
<Text style={styles.text}>Vibrate</Text>
|
|
||||||
<MassiveSwitch
|
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
|
||||||
value={vibrate}
|
|
||||||
onValueChange={changeVibrate}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Predict sets',
|
|
||||||
element: (
|
|
||||||
<>
|
|
||||||
<Text style={styles.text}>Predict sets</Text>
|
|
||||||
<MassiveSwitch
|
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
|
||||||
value={predict}
|
|
||||||
onValueChange={changePredict}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Record notifications',
|
|
||||||
element: (
|
|
||||||
<>
|
|
||||||
<Text style={styles.text}>Record notifications</Text>
|
|
||||||
<MassiveSwitch
|
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
|
||||||
value={notify}
|
|
||||||
onValueChange={changeNotify}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Show images',
|
|
||||||
element: (
|
|
||||||
<>
|
|
||||||
<Text style={styles.text}>Show images</Text>
|
|
||||||
<MassiveSwitch
|
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
|
||||||
value={images}
|
|
||||||
onValueChange={setImages}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Alarm sound',
|
|
||||||
element: (
|
|
||||||
<Button onPress={changeSound}>
|
|
||||||
Alarm sound
|
|
||||||
{sound ? ': ' + sound.split('/')[sound.split('/').length - 1] : null}
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -229,13 +126,37 @@ export default function SettingsPage() {
|
||||||
onChangeText={setSearch}
|
onChangeText={setSearch}
|
||||||
/>
|
/>
|
||||||
<ScrollView>
|
<ScrollView>
|
||||||
{items
|
{inputs
|
||||||
.filter(item =>
|
.filter(input => input.name.toLowerCase().includes(search))
|
||||||
item.name.toLowerCase().includes(search.toLowerCase()),
|
.map(input => (
|
||||||
)
|
<MassiveInput
|
||||||
.map(item => (
|
key={input.name}
|
||||||
<React.Fragment key={item.name}>{item.element}</React.Fragment>
|
label={input.name}
|
||||||
|
value={input.value}
|
||||||
|
keyboardType="numeric"
|
||||||
|
onChangeText={input.onChange}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
|
{switches
|
||||||
|
.filter(input => input.name.toLowerCase().includes(search))
|
||||||
|
.map(input => (
|
||||||
|
<React.Fragment key={input.name}>
|
||||||
|
<Text style={styles.text}>{input.name}</Text>
|
||||||
|
<MassiveSwitch
|
||||||
|
style={[styles.text, {alignSelf: 'flex-start'}]}
|
||||||
|
value={input.value}
|
||||||
|
onValueChange={input.onChange}
|
||||||
|
/>
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
{'alarm sound'.includes(search) && (
|
||||||
|
<Button onPress={changeSound}>
|
||||||
|
Alarm sound
|
||||||
|
{sound
|
||||||
|
? ': ' + sound.split('/')[sound.split('/').length - 1]
|
||||||
|
: null}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
title="Battery optimizations"
|
title="Battery optimizations"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user