From 052d000e12b8d014301ebe309e05615fe132da31 Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Fri, 16 Sep 2022 21:07:02 +1200
Subject: [PATCH] Make padding & margin consistent everywhere.

---
 BestList.tsx        | 18 +++++-------------
 Chart.tsx           |  5 +++--
 EditPlan.tsx        | 17 +++++++++++------
 EditSet.tsx         |  7 ++++---
 EditWorkout.tsx     | 15 ++++++++-------
 MassiveInput.tsx    |  3 ++-
 MassiveSwitch.tsx   |  3 ++-
 Page.tsx            | 33 +++++++++++++++++++++++++++++++++
 PlanList.tsx        | 33 ++++++++-------------------------
 SetForm.tsx         |  3 ++-
 SetList.tsx         | 20 +++++---------------
 SettingsPage.tsx    | 28 ++++++++++------------------
 ViewBest.tsx        |  3 ++-
 WorkoutList.tsx     | 22 ++++++----------------
 constants.ts        |  2 ++
 plan.service.ts     |  4 ++--
 set.service.ts      |  6 +++---
 settings.service.ts | 23 ++++++-----------------
 18 files changed, 114 insertions(+), 131 deletions(-)
 create mode 100644 Page.tsx
 create mode 100644 constants.ts

diff --git a/BestList.tsx b/BestList.tsx
index fe9ed5e..94c4aff 100644
--- a/BestList.tsx
+++ b/BestList.tsx
@@ -4,10 +4,11 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
-import {List, Searchbar} from 'react-native-paper';
+import {FlatList} from 'react-native';
+import {List} from 'react-native-paper';
 import {getBestReps, getBestWeights} from './best.service';
 import {BestPageParams} from './BestPage';
+import Page from './Page';
 import Set from './set';
 
 export default function BestList() {
@@ -49,8 +50,7 @@ export default function BestList() {
   );
 
   return (
-    <View style={styles.container}>
-      <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
+    <Page search={search} setSearch={setSearch}>
       <FlatList
         ListEmptyComponent={
           <List.Item
@@ -61,14 +61,6 @@ export default function BestList() {
         renderItem={renderItem}
         data={bests}
       />
-    </View>
+    </Page>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-    flexGrow: 1,
-    paddingBottom: '10%',
-  },
-});
diff --git a/Chart.tsx b/Chart.tsx
index 12fdcbd..204cc07 100644
--- a/Chart.tsx
+++ b/Chart.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {useColorScheme, View} from 'react-native';
 import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
 import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
+import {MARGIN, PADDING} from './constants';
 import Set from './set';
 
 export default function Chart({
@@ -23,7 +24,7 @@ export default function Chart({
 
   return (
     <>
-      <View style={{height: 300, padding: 20, flexDirection: 'row'}}>
+      <View style={{height: 300, padding: PADDING, flexDirection: 'row'}}>
         <YAxis
           data={yData}
           style={{marginBottom: xAxisHeight}}
@@ -31,7 +32,7 @@ export default function Chart({
           svg={axesSvg}
           formatLabel={yFormat}
         />
-        <View style={{flex: 1, marginLeft: 10}}>
+        <View style={{flex: 1, marginLeft: MARGIN}}>
           <LineChart
             style={{flex: 1}}
             data={yData}
diff --git a/EditPlan.tsx b/EditPlan.tsx
index 09aabd0..ab32730 100644
--- a/EditPlan.tsx
+++ b/EditPlan.tsx
@@ -9,8 +9,9 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet, Text, View} from 'react-native';
 import {Button, IconButton} from 'react-native-paper';
 import {DrawerParamList} from './App';
+import {MARGIN, PADDING} from './constants';
 import MassiveSwitch from './MassiveSwitch';
-import {addPlan, setPlan} from './plan.service';
+import {addPlan, updatePlan} from './plan.service';
 import {PlanPageParams} from './PlanPage';
 import {getNames} from './set.service';
 import {DAYS} from './time';
@@ -50,7 +51,11 @@ export default function EditPlan() {
     const newDays = days.filter(day => day).join(',');
     if (!params.plan.id) await addPlan({days: newDays, workouts: newWorkouts});
     else
-      await setPlan({days: newDays, workouts: newWorkouts, id: params.plan.id});
+      await updatePlan({
+        days: newDays,
+        workouts: newWorkouts,
+        id: params.plan.id,
+      });
     navigation.goBack();
   }, [days, workouts, params, navigation]);
 
@@ -77,7 +82,7 @@ export default function EditPlan() {
   );
 
   return (
-    <View style={{padding: 10}}>
+    <View style={{padding: PADDING}}>
       <ScrollView style={{height: '90%'}}>
         <Text style={styles.title}>Days</Text>
         {DAYS.map(day => (
@@ -91,7 +96,7 @@ export default function EditPlan() {
             </Text>
           </View>
         ))}
-        <Text style={[styles.title, {marginTop: 10}]}>Workouts</Text>
+        <Text style={[styles.title, {marginTop: MARGIN}]}>Workouts</Text>
         {names.length === 0 && (
           <View>
             <Text>No workouts found.</Text>
@@ -123,7 +128,7 @@ export default function EditPlan() {
         </Button>
       ) : (
         <Button
-          style={{marginTop: 10}}
+          style={{marginTop: MARGIN}}
           mode="contained"
           icon="save"
           onPress={save}>
@@ -137,7 +142,7 @@ export default function EditPlan() {
 const styles = StyleSheet.create({
   title: {
     fontSize: 20,
-    marginBottom: 10,
+    marginBottom: MARGIN,
   },
   row: {
     flexDirection: 'row',
diff --git a/EditSet.tsx b/EditSet.tsx
index f6cf1ab..23e182f 100644
--- a/EditSet.tsx
+++ b/EditSet.tsx
@@ -7,10 +7,11 @@ import {
 import React, {useCallback, useContext} from 'react';
 import {NativeModules, View} from 'react-native';
 import {IconButton} from 'react-native-paper';
+import {PADDING} from './constants';
 import {HomePageParams} from './HomePage';
 import {SnackbarContext} from './MassiveSnack';
 import Set from './set';
-import {addSet, setSet} from './set.service';
+import {addSet, updateSet} from './set.service';
 import SetForm from './SetForm';
 import {getSettings} from './settings.service';
 
@@ -45,7 +46,7 @@ export default function EditSet() {
   const update = useCallback(
     async (set: Set) => {
       console.log(`${EditSet.name}.update`, set);
-      await setSet(set);
+      await updateSet(set);
       navigation.goBack();
     },
     [navigation],
@@ -76,7 +77,7 @@ export default function EditSet() {
   );
 
   return (
-    <View style={{padding: 10}}>
+    <View style={{padding: PADDING}}>
       <SetForm save={save} set={params.set} workouts={params.workouts} />
     </View>
   );
diff --git a/EditWorkout.tsx b/EditWorkout.tsx
index 9f98b0f..fd79520 100644
--- a/EditWorkout.tsx
+++ b/EditWorkout.tsx
@@ -8,10 +8,11 @@ import React, {useCallback, useState} from 'react';
 import {Image, ScrollView, View} from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import {Button, IconButton} from 'react-native-paper';
+import {PADDING} from './constants';
 import MassiveInput from './MassiveInput';
-import {setWorkouts} from './plan.service';
+import {updateWorkouts} from './plan.service';
 import Set from './set';
-import {addSet, getSets, setSetImage, setSetName} from './set.service';
+import {addSet, getSets, updateSetImage, updateSetName} from './set.service';
 import {WorkoutsPageParams} from './WorkoutsPage';
 
 export default function EditWorkout() {
@@ -42,10 +43,10 @@ export default function EditWorkout() {
       uri,
     });
     if (name) {
-      await setSetName(params.value.name, name);
-      await setWorkouts(params.value.name, name);
+      await updateSetName(params.value.name, name);
+      await updateWorkouts(params.value.name, name);
     }
-    if (uri) await setSetImage(params.value.name, uri);
+    if (uri) await updateSetImage(params.value.name, uri);
     navigation.goBack();
   }, [navigation, params.value.name, name, uri]);
 
@@ -68,7 +69,7 @@ export default function EditWorkout() {
   }, []);
 
   return (
-    <ScrollView style={{padding: 10, height: '90%'}}>
+    <ScrollView style={{padding: PADDING}}>
       {params.value.name ? (
         <>
           <MassiveInput
@@ -77,7 +78,7 @@ export default function EditWorkout() {
             value={name}
             onChangeText={setName}
           />
-          <View style={{flexDirection: 'row', paddingBottom: 10}}>
+          <View style={{flexDirection: 'row', paddingBottom: PADDING}}>
             {uri && <Image source={{uri}} style={{height: 75, width: 75}} />}
             <Button onPress={changeImage} icon="image">
               Image
diff --git a/MassiveInput.tsx b/MassiveInput.tsx
index 4246180..1dbb79c 100644
--- a/MassiveInput.tsx
+++ b/MassiveInput.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {useColorScheme} from 'react-native';
 import {TextInput} from 'react-native-paper';
 import {CombinedDefaultTheme} from './App';
+import {MARGIN} from './constants';
 
 export default function MassiveInput(
   props: Partial<React.ComponentProps<typeof TextInput>> & {
@@ -14,7 +15,7 @@ export default function MassiveInput(
     <TextInput
       selectionColor={dark ? '#2A2A2A' : CombinedDefaultTheme.colors.border}
       mode="outlined"
-      style={{marginBottom: 10, minWidth: 100}}
+      style={{marginBottom: MARGIN, minWidth: 100}}
       selectTextOnFocus
       ref={props.innerRef}
       {...props}
diff --git a/MassiveSwitch.tsx b/MassiveSwitch.tsx
index c8c36fb..e8033d5 100644
--- a/MassiveSwitch.tsx
+++ b/MassiveSwitch.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {useColorScheme} from 'react-native';
 import {Switch} from 'react-native-paper';
 import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
+import {MARGIN} from './constants';
 
 export default function MassiveSwitch(
   props: Partial<React.ComponentProps<typeof Switch>>,
@@ -15,7 +16,7 @@ export default function MassiveSwitch(
           ? CombinedDarkTheme.colors.primary
           : CombinedDefaultTheme.colors.primary
       }
-      style={{marginRight: 5}}
+      style={{marginRight: MARGIN}}
       {...props}
     />
   );
diff --git a/Page.tsx b/Page.tsx
new file mode 100644
index 0000000..7a9623c
--- /dev/null
+++ b/Page.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Searchbar} from 'react-native-paper';
+import {PADDING} from './constants';
+import MassiveFab from './MassiveFab';
+
+export default function Page({
+  onAdd,
+  children,
+  search,
+  setSearch,
+}: {
+  children: JSX.Element | JSX.Element[];
+  onAdd?: () => void;
+  search: string;
+  setSearch: (value: string) => void;
+}) {
+  return (
+    <View style={styles.container}>
+      <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
+      {children}
+      {onAdd && <MassiveFab onPress={onAdd} />}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    padding: PADDING,
+    paddingBottom: '10%',
+  },
+});
diff --git a/PlanList.tsx b/PlanList.tsx
index ca1bac8..198b723 100644
--- a/PlanList.tsx
+++ b/PlanList.tsx
@@ -4,10 +4,10 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
-import {List, Searchbar} from 'react-native-paper';
+import {FlatList} from 'react-native';
+import {List} from 'react-native-paper';
 import DrawerMenu from './DrawerMenu';
-import MassiveFab from './MassiveFab';
+import Page from './Page';
 import {Plan} from './plan';
 import {getPlans} from './plan.service';
 import PlanItem from './PlanItem';
@@ -42,9 +42,11 @@ export default function PlanList() {
     [refresh],
   );
 
+  const onAdd = () =>
+    navigation.navigate('EditPlan', {plan: {days: '', workouts: '', id: 0}});
+
   return (
-    <View style={styles.container}>
-      <Searchbar value={search} onChangeText={setSearch} placeholder="Search" />
+    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
       <FlatList
         style={{height: '100%'}}
         data={plans}
@@ -57,25 +59,6 @@ export default function PlanList() {
           />
         }
       />
-
-      <MassiveFab
-        onPress={() =>
-          navigation.navigate('EditPlan', {
-            plan: {days: '', workouts: '', id: 0},
-          })
-        }
-      />
-    </View>
+    </Page>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    padding: 10,
-    paddingBottom: '10%',
-  },
-  progress: {
-    marginTop: 10,
-  },
-});
diff --git a/SetForm.tsx b/SetForm.tsx
index 442bb24..27013c8 100644
--- a/SetForm.tsx
+++ b/SetForm.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {ScrollView} from 'react-native';
 import {Button, Text} from 'react-native-paper';
+import {MARGIN} from './constants';
 import MassiveInput from './MassiveInput';
 import Set from './set';
 import {getSets} from './set.service';
@@ -83,7 +84,7 @@ export default function SetForm({
           onChangeText={setUnit}
           onSubmitEditing={handleSubmit}
         />
-        <Text style={{marginBottom: 10}}>
+        <Text style={{marginBottom: MARGIN}}>
           {workouts?.map((workout, index) => (
             <React.Fragment key={workout}>
               <Text
diff --git a/SetList.tsx b/SetList.tsx
index 7438c47..37bccef 100644
--- a/SetList.tsx
+++ b/SetList.tsx
@@ -4,12 +4,12 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
-import {List, Searchbar} from 'react-native-paper';
+import {FlatList} from 'react-native';
+import {List} from 'react-native-paper';
 import {getBestSet} from './best.service';
 import DrawerMenu from './DrawerMenu';
 import {HomePageParams} from './HomePage';
-import MassiveFab from './MassiveFab';
+import Page from './Page';
 import {getTodaysPlan} from './plan.service';
 import Set from './set';
 import {defaultSet, getSets, getTodaysSets} from './set.service';
@@ -122,8 +122,7 @@ export default function SetList() {
   }, [navigation, set, workouts]);
 
   return (
-    <View style={styles.container}>
-      <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
+    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
       <FlatList
         data={sets}
         style={{height: '100%'}}
@@ -137,15 +136,6 @@ export default function SetList() {
         keyExtractor={s => s.id!.toString()}
         onEndReached={next}
       />
-      <MassiveFab onPress={onAdd} />
-    </View>
+    </Page>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    padding: 10,
-    paddingBottom: '10%',
-  },
-});
diff --git a/SettingsPage.tsx b/SettingsPage.tsx
index ca4668e..2b51df1 100644
--- a/SettingsPage.tsx
+++ b/SettingsPage.tsx
@@ -1,12 +1,14 @@
 import React, {useCallback, useContext, useEffect, useState} from 'react';
-import {NativeModules, ScrollView, StyleSheet, View} from 'react-native';
+import {NativeModules, ScrollView, StyleSheet} from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
-import {Button, Searchbar, Text} from 'react-native-paper';
+import {Button, Text} from 'react-native-paper';
 import ConfirmDialog from './ConfirmDialog';
+import {MARGIN} from './constants';
 import MassiveInput from './MassiveInput';
 import {SnackbarContext} from './MassiveSnack';
 import MassiveSwitch from './MassiveSwitch';
-import {getSettings, setSettings} from './settings.service';
+import Page from './Page';
+import {getSettings, updateSettings} from './settings.service';
 
 interface Input<T> {
   name: string;
@@ -49,7 +51,7 @@ export default function SettingsPage() {
   }, [refresh]);
 
   useEffect(() => {
-    setSettings({
+    updateSettings({
       vibrate: +vibrate,
       minutes: +minutes,
       seconds: +seconds,
@@ -125,14 +127,8 @@ export default function SettingsPage() {
   ];
 
   return (
-    <View style={styles.container}>
-      <Searchbar
-        style={{marginBottom: 10}}
-        placeholder="Search"
-        value={search}
-        onChangeText={setSearch}
-      />
-      <ScrollView>
+    <Page search={search} setSearch={setSearch}>
+      <ScrollView style={{marginTop: MARGIN}}>
         {inputs
           .filter(input =>
             input.name.toLowerCase().includes(search.toLowerCase()),
@@ -179,16 +175,12 @@ export default function SettingsPage() {
         }}>
         Disable battery optimizations for Massive to use rest timers.
       </ConfirmDialog>
-    </View>
+    </Page>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-    flex: 1,
-  },
   text: {
-    marginBottom: 10,
+    marginBottom: MARGIN,
   },
 });
diff --git a/ViewBest.tsx b/ViewBest.tsx
index 701e64a..9d1ba78 100644
--- a/ViewBest.tsx
+++ b/ViewBest.tsx
@@ -13,6 +13,7 @@ import ViewShot from 'react-native-view-shot';
 import {getVolumes, getWeightsBy} from './best.service';
 import {BestPageParams} from './BestPage';
 import Chart from './Chart';
+import {PADDING} from './constants';
 import {Metrics} from './metrics';
 import {Periods} from './periods';
 import Set from './set';
@@ -67,7 +68,7 @@ export default function ViewBest() {
   }, [params.best.name, metric, period]);
 
   return (
-    <ViewShot style={{padding: 10}} ref={viewShot}>
+    <ViewShot style={{padding: PADDING}} ref={viewShot}>
       <RNPickerSelect
         onValueChange={setMetric}
         items={[
diff --git a/WorkoutList.tsx b/WorkoutList.tsx
index ed4db7a..ed02e71 100644
--- a/WorkoutList.tsx
+++ b/WorkoutList.tsx
@@ -4,9 +4,9 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
-import {List, Searchbar} from 'react-native-paper';
-import MassiveFab from './MassiveFab';
+import {FlatList} from 'react-native';
+import {List} from 'react-native-paper';
+import Page from './Page';
 import {getWorkouts} from './set.service';
 import SetList from './SetList';
 import Workout from './workout';
@@ -78,11 +78,10 @@ export default function WorkoutList() {
   }, [navigation]);
 
   return (
-    <View style={styles.container}>
-      <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
+    <Page onAdd={onAdd} search={search} setSearch={setSearch}>
       <FlatList
         data={workouts}
-        style={{height: '95%', paddingBottom: 10}}
+        style={{height: '100%'}}
         ListEmptyComponent={
           <List.Item
             title="No workouts yet."
@@ -93,15 +92,6 @@ export default function WorkoutList() {
         keyExtractor={w => w.name}
         onEndReached={next}
       />
-      <MassiveFab onPress={onAdd} />
-    </View>
+    </Page>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    padding: 10,
-    paddingBottom: '10%',
-  },
-});
diff --git a/constants.ts b/constants.ts
new file mode 100644
index 0000000..ae645e4
--- /dev/null
+++ b/constants.ts
@@ -0,0 +1,2 @@
+export const MARGIN = 10;
+export const PADDING = 10;
diff --git a/plan.service.ts b/plan.service.ts
index 85fb6d4..03981c7 100644
--- a/plan.service.ts
+++ b/plan.service.ts
@@ -20,7 +20,7 @@ export const getTodaysPlan = async (): Promise<Plan[]> => {
   return result.rows.raw();
 };
 
-export const setWorkouts = async (oldName: string, newName: string) => {
+export const updateWorkouts = async (oldName: string, newName: string) => {
   const update = `
     UPDATE plans SET workouts = REPLACE(workouts, ?, ?) 
       WHERE workouts LIKE ?
@@ -28,7 +28,7 @@ export const setWorkouts = async (oldName: string, newName: string) => {
   return db.executeSql(update, [oldName, newName, `%${oldName}%`]);
 };
 
-export const setPlan = async (value: Plan) => {
+export const updatePlan = async (value: Plan) => {
   const update = `UPDATE plans SET days = ?, workouts = ? WHERE id = ?`;
   return db.executeSql(update, [value.days, value.workouts, value.id]);
 };
diff --git a/set.service.ts b/set.service.ts
index abbdd41..283b17f 100644
--- a/set.service.ts
+++ b/set.service.ts
@@ -2,7 +2,7 @@ import {db} from './db';
 import Set from './set';
 import Workout from './workout';
 
-export const setSet = async (value: Set) => {
+export const updateSet = async (value: Set) => {
   const update = `
     UPDATE sets 
     SET name = ?, reps = ?, weight = ?, unit = ? 
@@ -90,12 +90,12 @@ export const defaultSet = {
   unit: 'kg',
 };
 
-export const setSetName = async (oldName: string, newName: string) => {
+export const updateSetName = async (oldName: string, newName: string) => {
   const update = `UPDATE sets SET name = ? WHERE name = ?`;
   return db.executeSql(update, [newName, oldName]);
 };
 
-export const setSetImage = async (name: string, image: string) => {
+export const updateSetImage = async (name: string, image: string) => {
   const update = `UPDATE sets SET image = ? WHERE name = ?`;
   return db.executeSql(update, [image, name]);
 };
diff --git a/settings.service.ts b/settings.service.ts
index 34a907f..e3ad5ac 100644
--- a/settings.service.ts
+++ b/settings.service.ts
@@ -7,21 +7,10 @@ export const getSettings = async () => {
   return settings;
 };
 
-export const setSettings = async (value: Settings) => {
-  const update = `
-    UPDATE settings 
-    SET vibrate=?,minutes=?,sets=?,seconds=?,alarm=?,
-      predict=?,sound=?,notify=?,images=?
-  `;
-  return db.executeSql(update, [
-    value.vibrate,
-    value.minutes,
-    value.sets,
-    value.seconds,
-    value.alarm,
-    value.predict,
-    value.sound,
-    value.notify,
-    value.images,
-  ]);
+export const updateSettings = async (value: Settings) => {
+  const keys = Object.keys(value) as (keyof Settings)[];
+  const sets = keys.map(key => `${key}=?`).join(',');
+  const update = `UPDATE settings SET ${sets}`;
+  const values = keys.map(key => value[key]);
+  return db.executeSql(update, values);
 };