Reduce redundancy of SettingsPage

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"