Factor out massive switch

EditPlan.tsx

@@ -10,10 +10,10 @@ import {ScrollView, StyleSheet, View} from 'react-native';
 import {Button, IconButton, Text} from 'react-native-paper';
 import {MARGIN, PADDING} from './constants';
 import {DrawerParamList} from './drawer-param-list';
-import MassiveSwitch from './MassiveSwitch';
 import {PlanPageParams} from './plan-page-params';
 import {addPlan, updatePlan} from './plan.service';
 import {getNames} from './set.service';
+import Switch from './Switch';
 import {DAYS} from './time';
 
 export default function EditPlan() {
@@ -91,33 +91,28 @@ export default function EditPlan() {
       <ScrollView style={{height: '90%'}}>
         <Text style={styles.title}>Days</Text>
         {DAYS.map(day => (
-          <View key={day} style={[styles.row, {alignItems: 'center'}]}>
+          <Switch
-            <MassiveSwitch
+            onValueChange={value => toggleDay(value, day)}
-              value={days.includes(day)}
+            onPress={() => toggleDay(!days.includes(day), day)}
-              onValueChange={value => toggleDay(value, day)}
+            value={days.includes(day)}>
-            />
+            {day}
-            <Text onPress={() => toggleDay(!days.includes(day), day)}>
+          </Switch>
-              {day}
-            </Text>
-          </View>
         ))}
         <Text style={[styles.title, {marginTop: MARGIN}]}>Workouts</Text>
-        {names.length === 0 && (
+        {names.length === 0 ? (
           <View>
             <Text>No workouts found.</Text>
           </View>
-        )}
+        ) : (
-        {names.map(name => (
+          names.map(name => (
-          <View key={name} style={[styles.row, {alignItems: 'center'}]}>
+            <Switch
-            <MassiveSwitch
-              value={workouts.includes(name)}
               onValueChange={value => toggleWorkout(value, name)}
-            />
+              value={workouts.includes(name)}
-            <Text onPress={() => toggleWorkout(!workouts.includes(name), name)}>
+              onPress={() => toggleWorkout(!workouts.includes(name), name)}>
               {name}
-            </Text>
+            </Switch>
-          </View>
+          ))
-        ))}
+        )}
       </ScrollView>
       {names.length === 0 ? (
         <Button
@@ -151,8 +146,4 @@ const styles = StyleSheet.create({
     fontSize: 20,
     marginBottom: MARGIN,
   },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
 });

MassiveSwitch.tsx

@@ -1,12 +0,0 @@
-import React, {useContext} from 'react';
-import {Switch} from 'react-native-paper';
-import {CustomTheme} from './App';
-import {MARGIN} from './constants';
-
-export default function MassiveSwitch(
-  props: Partial<React.ComponentProps<typeof Switch>>,
-) {
-  const {color} = useContext(CustomTheme);
-
-  return <Switch color={color} style={{marginRight: MARGIN}} {...props} />;
-}

SettingsPage.tsx

@@ -1,18 +1,18 @@
 import {Picker} from '@react-native-picker/picker';
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useContext, useEffect, useState} from 'react';
-import {NativeModules, Pressable, ScrollView, StyleSheet} from 'react-native';
+import {NativeModules, ScrollView} from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
-import {Button, Text} from 'react-native-paper';
+import {Button} from 'react-native-paper';
 import {CustomTheme} from './App';
 import {darkColors, lightColors} from './colors';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN} from './constants';
 import Input from './input';
 import {SnackbarContext} from './MassiveSnack';
-import MassiveSwitch from './MassiveSwitch';
 import Page from './Page';
 import {getSettings, settings, updateSettings} from './settings.service';
+import Switch from './Switch';
 
 export default function SettingsPage() {
   const [battery, setBattery] = useState(false);
@@ -165,21 +165,13 @@ export default function SettingsPage() {
             input.name.toLowerCase().includes(search.toLowerCase()),
           )
           .map(input => (
-            <Pressable
+            <Switch
               onPress={() => input.onChange(!input.value)}
-              style={{
+              key={input.name}
-                flexDirection: 'row',
+              value={input.value}
-                justifyContent: 'space-between',
+              onValueChange={input.onChange}>
-                alignItems: 'center',
+              {input.name}
-              }}
+            </Switch>
-              key={input.name}>
-              <Text style={styles.item}>{input.name}</Text>
-              <MassiveSwitch
-                style={styles.item}
-                value={input.value}
-                onValueChange={input.onChange}
-              />
-            </Pressable>
           ))}
         {'theme'.includes(search.toLowerCase()) && (
           <Picker
@@ -219,11 +211,3 @@ export default function SettingsPage() {
     </Page>
   );
 }
-
-const styles = StyleSheet.create({
-  item: {
-    alignSelf: 'flex-start',
-    marginBottom: MARGIN,
-    marginLeft: MARGIN,
-  },
-});

Switch.tsx

@@ -0,0 +1,37 @@
+import React, {useContext} from 'react';
+import {Pressable} from 'react-native';
+import {Switch as PaperSwitch, Text} from 'react-native-paper';
+import {CustomTheme} from './App';
+import {MARGIN} from './constants';
+
+export default function Switch({
+  value,
+  onValueChange,
+  onPress,
+  children,
+}: {
+  value?: boolean;
+  onValueChange: (value: boolean) => void;
+  onPress: () => void;
+  children: string;
+}) {
+  const {color} = useContext(CustomTheme);
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={{
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+      }}>
+      <PaperSwitch
+        color={color}
+        style={{marginRight: MARGIN}}
+        value={value}
+        onValueChange={onValueChange}
+      />
+      <Text>{children}</Text>
+    </Pressable>
+  );
+}

set.service.ts

@@ -75,15 +75,6 @@ export const getSets = async ({
   return result.rows.raw();
 };
 
-export const getTodaysSets = async (): Promise<Set[]> => {
-  const today = new Date().toISOString().split('T')[0];
-  const [result] = await db.executeSql(
-    `SELECT * FROM sets WHERE created LIKE ? ORDER BY created DESC`,
-    [`${today}%`],
-  );
-  return result.rows.raw();
-};
-
 export const defaultSet: Set = {
   name: '',
   reps: 10,