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, {
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {NativeModules, ScrollView, StyleSheet, View} from 'react-native';
|
||||
import DocumentPicker from 'react-native-document-picker';
|
||||
import {Button, Searchbar, Text} from 'react-native-paper';
|
||||
|
@ -14,10 +8,16 @@ import MassiveInput from './MassiveInput';
|
|||
import MassiveSwitch from './MassiveSwitch';
|
||||
import {getSettings, setSettings} from './settings.service';
|
||||
|
||||
interface Input<T> {
|
||||
name: string;
|
||||
value?: T;
|
||||
onChange: (value: T) => void;
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [vibrate, setVibrate] = useState(true);
|
||||
const [minutes, setMinutes] = useState<string>('');
|
||||
const [sets, setMaxSets] = useState<string>('3');
|
||||
const [sets, setSets] = useState<string>('3');
|
||||
const [seconds, setSeconds] = useState<string>('');
|
||||
const [alarm, setAlarm] = useState(false);
|
||||
const [predict, setPredict] = useState(false);
|
||||
|
@ -36,7 +36,7 @@ export default function SettingsPage() {
|
|||
setSeconds(settings.seconds.toString());
|
||||
setAlarm(!!settings.alarm);
|
||||
setPredict(!!settings.predict);
|
||||
setMaxSets(settings.sets.toString());
|
||||
setSets(settings.sets.toString());
|
||||
setVibrate(!!settings.vibrate);
|
||||
setSound(settings.sound);
|
||||
setNotify(!!settings.notify);
|
||||
|
@ -103,121 +103,18 @@ export default function SettingsPage() {
|
|||
[toast],
|
||||
);
|
||||
|
||||
const items: {name: string; element: ReactNode}[] = [
|
||||
{
|
||||
name: 'Sets per workout',
|
||||
element: (
|
||||
<MassiveInput
|
||||
label="Sets per workout"
|
||||
value={sets}
|
||||
keyboardType="numeric"
|
||||
onChangeText={value => {
|
||||
setMaxSets(value);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
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>
|
||||
),
|
||||
},
|
||||
const inputs: Input<string>[] = [
|
||||
{name: 'Sets per workout', value: sets, onChange: setSets},
|
||||
{name: 'Rest minutes', value: minutes, onChange: setMinutes},
|
||||
{name: 'Rest seconds', value: seconds, onChange: setSeconds},
|
||||
];
|
||||
|
||||
const switches: Input<boolean>[] = [
|
||||
{name: 'Rest timers', value: alarm, onChange: changeAlarmEnabled},
|
||||
{name: 'Vibrate', value: vibrate, onChange: changeVibrate},
|
||||
{name: 'Predict sets', value: predict, onChange: changePredict},
|
||||
{name: 'Record notifications', value: notify, onChange: changeNotify},
|
||||
{name: 'Show images', value: images, onChange: setImages},
|
||||
];
|
||||
|
||||
return (
|
||||
|
@ -229,13 +126,37 @@ export default function SettingsPage() {
|
|||
onChangeText={setSearch}
|
||||
/>
|
||||
<ScrollView>
|
||||
{items
|
||||
.filter(item =>
|
||||
item.name.toLowerCase().includes(search.toLowerCase()),
|
||||
)
|
||||
.map(item => (
|
||||
<React.Fragment key={item.name}>{item.element}</React.Fragment>
|
||||
{inputs
|
||||
.filter(input => input.name.toLowerCase().includes(search))
|
||||
.map(input => (
|
||||
<MassiveInput
|
||||
key={input.name}
|
||||
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>
|
||||
<ConfirmDialog
|
||||
title="Battery optimizations"
|
||||
|
|
Loading…
Reference in New Issue
Block a user