Add search bar to SettingsPage

This commit is contained in:
Brandon Presley 2022-08-23 12:04:52 +12:00
parent 35fd648ad3
commit 5d9a458ccd
1 changed files with 107 additions and 61 deletions

View File

@ -1,5 +1,11 @@
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
import React, {useCallback, useEffect, useState} from 'react'; import React, {
ReactNode,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { import {
NativeModules, NativeModules,
StyleSheet, StyleSheet,
@ -7,7 +13,7 @@ import {
ToastAndroid, ToastAndroid,
View, View,
} from 'react-native'; } from 'react-native';
import {TextInput} from 'react-native-paper'; import {Searchbar, TextInput} from 'react-native-paper';
import ConfirmDialog from './ConfirmDialog'; import ConfirmDialog from './ConfirmDialog';
import MassiveSwitch from './MassiveSwitch'; import MassiveSwitch from './MassiveSwitch';
@ -22,6 +28,7 @@ export default function SettingsPage() {
const [predictive, setPredictive] = useState<boolean>(false); const [predictive, setPredictive] = useState<boolean>(false);
const [battery, setBattery] = useState(false); const [battery, setBattery] = useState(false);
const [ignoring, setIgnoring] = useState(false); const [ignoring, setIgnoring] = useState(false);
const [search, setSearch] = useState('');
const refresh = useCallback(async () => { const refresh = useCallback(async () => {
setMinutes((await getItem('minutes')) || ''); setMinutes((await getItem('minutes')) || '');
@ -57,46 +64,6 @@ export default function SettingsPage() {
[setPredictive], [setPredictive],
); );
const textInputs = (
<>
<TextInput
label="Rest minutes"
value={minutes}
keyboardType="numeric"
placeholder="3"
onChangeText={text => {
setMinutes(text);
setItem('minutes', text);
}}
style={styles.text}
selectTextOnFocus
/>
<TextInput
label="Rest seconds"
value={seconds}
keyboardType="numeric"
placeholder="30"
onChangeText={s => {
setSeconds(s);
setItem('seconds', s);
}}
style={styles.text}
selectTextOnFocus
/>
<TextInput
label="Sets per workout"
value={maxSets}
keyboardType="numeric"
onChangeText={value => {
setMaxSets(value);
setItem('maxSets', value);
}}
style={styles.text}
selectTextOnFocus
/>
</>
);
const changeVibrate = useCallback( const changeVibrate = useCallback(
(value: boolean) => { (value: boolean) => {
setVibrate(value); setVibrate(value);
@ -105,21 +72,106 @@ export default function SettingsPage() {
[setVibrate], [setVibrate],
); );
const items: {name: string; element: ReactNode}[] = [
{
name: 'Sets per workout',
element: (
<TextInput
label="Sets per workout"
value={maxSets}
keyboardType="numeric"
onChangeText={value => {
setMaxSets(value);
setItem('maxSets', value);
}}
style={styles.text}
selectTextOnFocus
/>
),
},
{
name: 'Rest seconds',
element: (
<TextInput
label="Rest seconds"
value={seconds}
keyboardType="numeric"
placeholder="30"
onChangeText={s => {
setSeconds(s);
setItem('seconds', s);
}}
style={styles.text}
selectTextOnFocus
/>
),
},
{
name: 'Rest minutes',
element: (
<TextInput
label="Rest minutes"
value={minutes}
keyboardType="numeric"
placeholder="3"
onChangeText={text => {
setMinutes(text);
setItem('minutes', text);
}}
style={styles.text}
selectTextOnFocus
/>
),
},
{
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: 'Predictive sets',
element: (
<>
<Text style={styles.text}>Predictive sets</Text>
<MassiveSwitch
style={[styles.text, {alignSelf: 'flex-start'}]}
value={predictive}
onValueChange={changePredictive}
/>
</>
),
},
];
return ( return (
<View style={styles.container}> <View style={styles.container}>
{textInputs} <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
<Text style={styles.text}>Rest timers</Text> {items
<MassiveSwitch .filter(item => item.name.toLowerCase().includes(search.toLowerCase()))
style={[styles.text, {alignSelf: 'flex-start'}]} .map(item => (
value={alarm} <React.Fragment key={item.name}>{item.element}</React.Fragment>
onValueChange={changeAlarmEnabled} ))}
/>
<Text style={styles.text}>Vibrate</Text>
<MassiveSwitch
style={[styles.text, {alignSelf: 'flex-start'}]}
value={vibrate}
onValueChange={changeVibrate}
/>
<ConfirmDialog <ConfirmDialog
title="Battery optimizations" title="Battery optimizations"
show={battery} show={battery}
@ -130,12 +182,6 @@ export default function SettingsPage() {
}}> }}>
Disable battery optimizations for Massive to use rest timers. Disable battery optimizations for Massive to use rest timers.
</ConfirmDialog> </ConfirmDialog>
<Text style={styles.text}>Predictive sets</Text>
<MassiveSwitch
style={[styles.text, {alignSelf: 'flex-start'}]}
value={predictive}
onValueChange={changePredictive}
/>
</View> </View>
); );
} }