Add search bar to SettingsPage

SettingsPage.tsx

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