From 3322289c171d16e7232f1e4454183a4444ddeadd Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Sun, 17 Jul 2022 13:45:31 +1200
Subject: [PATCH] Factor out MassiveSwitch

---
 EditPlan.tsx      | 13 +++----------
 MassiveSwitch.tsx | 18 ++++++++++++++++++
 SettingsPage.tsx  |  5 +++--
 3 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 MassiveSwitch.tsx

diff --git a/EditPlan.tsx b/EditPlan.tsx
index 01f92b60..155db7f5 100644
--- a/EditPlan.tsx
+++ b/EditPlan.tsx
@@ -10,6 +10,7 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet, Text, useColorScheme, View} from 'react-native';
 import {Button, IconButton, Switch} from 'react-native-paper';
 import {DatabaseContext} from './App';
+import MassiveSwitch from './MassiveSwitch';
 import {PlanPageParams} from './PlanPage';
 import {DAYS} from './time';
 
@@ -92,12 +93,8 @@ export default function EditPlan() {
         <Text style={styles.title}>Days</Text>
         {DAYS.map(day => (
           <View key={day} style={[styles.row, {alignItems: 'center'}]}>
-            <Switch
-              color={
-                dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
-              }
+            <MassiveSwitch
               value={days.includes(day)}
-              style={{marginRight: 5}}
               onValueChange={value => toggleDay(value, day)}
             />
             <Text onPress={() => toggleDay(!days.includes(day), day)}>
@@ -114,12 +111,8 @@ export default function EditPlan() {
         )}
         {names.map(name => (
           <View key={name} style={[styles.row, {alignItems: 'center'}]}>
-            <Switch
-              color={
-                dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
-              }
+            <MassiveSwitch
               value={workouts.includes(name)}
-              style={{marginRight: 5}}
               onValueChange={value => toggleWorkout(value, name)}
             />
             <Text onPress={() => toggleWorkout(!workouts.includes(name), name)}>
diff --git a/MassiveSwitch.tsx b/MassiveSwitch.tsx
new file mode 100644
index 00000000..ad4ccfe3
--- /dev/null
+++ b/MassiveSwitch.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {DarkTheme, DefaultTheme} from '@react-navigation/native';
+import {useColorScheme} from 'react-native';
+import {Switch} from 'react-native-paper';
+
+export default function MassiveSwitch(
+  props: Partial<React.ComponentProps<typeof Switch>>,
+) {
+  const dark = useColorScheme() === 'dark';
+
+  return (
+    <Switch
+      color={dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary}
+      style={{marginRight: 5}}
+      {...props}
+    />
+  );
+}
diff --git a/SettingsPage.tsx b/SettingsPage.tsx
index c64db9bf..89bc7785 100644
--- a/SettingsPage.tsx
+++ b/SettingsPage.tsx
@@ -13,6 +13,7 @@ import {DatabaseContext} from './App';
 import Set from './set';
 import DocumentPicker from 'react-native-document-picker';
 import ConfirmDialog from './ConfirmDialog';
+import MassiveSwitch from './MassiveSwitch';
 
 const {getItem, setItem} = AsyncStorage;
 
@@ -162,7 +163,7 @@ export default function SettingsPage() {
       />
 
       <Text style={styles.text}>Rest timers</Text>
-      <Switch
+      <MassiveSwitch
         style={[styles.text, {alignSelf: 'flex-start'}]}
         value={alarmEnabled}
         onValueChange={changeAlarmEnabled}
@@ -180,7 +181,7 @@ export default function SettingsPage() {
       </ConfirmDialog>
 
       <Text style={styles.text}>Predictive sets</Text>
-      <Switch
+      <MassiveSwitch
         style={[styles.text, {alignSelf: 'flex-start'}]}
         value={predictiveSets}
         onValueChange={changePredictive}