Pause upgrading react-native

Got to the point where I can build + run it
but I'm getting the following error at runtime:

03-03 18:17:39.092  3602  3602 E AndroidRuntime: java.lang.RuntimeException: Unable to instantiate application com.massive.MainApplication package com.massive: java.lang.ClassNotFoundException: Didn't find class "com.massive.MainApplication" on path: DexPathList[[zip file "/data/app/~~eX7muEXu_SHk8LVSAcbWTg==/com.massive-vH0P5ufFnkS84blAZek3Dw==/base.apk"],nativeLibraryDirectories=[/data/app/~~eX7muEXu_SHk8LVSAcbWTg==/com.massive-vH0P5ufFnkS84blAZek3Dw==/lib/arm64, /data/app/~~eX7muEXu_SHk8LVSAcbWTg==/com.massive-vH0P5ufFnkS84blAZek3Dw==/base.apk!/lib/arm64-v8a, /system/lib64, /system_ext/lib64]]

.buckconfig

@@ -1,6 +0,0 @@
-
-[android]
-  target = Google Inc.:Google APIs:23
-
-[maven_repositories]
-  central = https://repo1.maven.org/maven2

.eslintrc.js

@@ -1,12 +1,12 @@
 module.exports = {
   root: true,
-  extends: '@react-native',
+  extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
   overrides: [
     {
       files: ['*.ts', '*.tsx', '*.js'],
       rules: {
-        'jsx-quotes': 0,
-        'prettier/prettier': 0,
         '@typescript-eslint/no-shadow': ['error'],
         'no-shadow': 'off',
         'no-undef': 'off',
@@ -18,5 +18,5 @@ module.exports = {
       },
     },
   ],
-  ignorePatterns: ['coverage/', 'mock-providers.tsx'],
+  ignorePatterns: ['coverage/'],
 }

.gitignore

@@ -37,12 +37,6 @@ node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the

.node-version

@@ -0,0 +1 @@
+18

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  semi: false,
+};

.ruby-version

@@ -1 +1 @@
-2.7.5
+2.7.6

App.tsx

@@ -2,21 +2,21 @@ import {
   DarkTheme as NavigationDarkTheme,
   DefaultTheme as NavigationDefaultTheme,
   NavigationContainer,
-} from "@react-navigation/native";
-import React, { useEffect, useMemo, useState } from "react";
-import { DeviceEventEmitter, useColorScheme } from "react-native";
+} from '@react-navigation/native'
+import React, {useEffect, useMemo, useState} from 'react'
+import {DeviceEventEmitter, useColorScheme} from 'react-native'
 import {
-  MD3DarkTheme as PaperDarkTheme,
-  MD3LightTheme as PaperDefaultTheme,
+  DarkTheme as PaperDarkTheme,
+  DefaultTheme as PaperDefaultTheme,
   Provider as PaperProvider,
   Snackbar,
-} from "react-native-paper";
-import MaterialIcon from "react-native-vector-icons/MaterialIcons";
-import { AppDataSource } from "./data-source";
-import { settingsRepo } from "./db";
-import Routes from "./Routes";
-import { TOAST } from "./toast";
-import { ThemeContext } from "./use-theme";
+} from 'react-native-paper'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import {AppDataSource} from './data-source'
+import {settingsRepo} from './db'
+import Routes from './Routes'
+import {TOAST} from './toast'
+import {ThemeContext} from './use-theme'
 
 export const CombinedDefaultTheme = {
   ...NavigationDefaultTheme,
@@ -25,7 +25,7 @@ export const CombinedDefaultTheme = {
     ...NavigationDefaultTheme.colors,
     ...PaperDefaultTheme.colors,
   },
-};
+}
 
 export const CombinedDarkTheme = {
   ...NavigationDarkTheme,
@@ -34,39 +34,40 @@ export const CombinedDarkTheme = {
     ...NavigationDarkTheme.colors,
     ...PaperDarkTheme.colors,
   },
-};
+}
 
 const App = () => {
-  const phoneTheme = useColorScheme();
-  const [initialized, setInitialized] = useState(false);
-  const [snackbar, setSnackbar] = useState("");
-  const [appTheme, setAppTheme] = useState("system");
+  const isDark = useColorScheme() === 'dark'
+  const [initialized, setInitialized] = useState(false)
+  const [snackbar, setSnackbar] = useState('')
+  const [theme, setTheme] = useState('system')
 
   const [lightColor, setLightColor] = useState<string>(
-    CombinedDefaultTheme.colors.primary
-  );
+    CombinedDefaultTheme.colors.primary,
+  )
 
   const [darkColor, setDarkColor] = useState<string>(
-    CombinedDarkTheme.colors.primary
-  );
+    CombinedDarkTheme.colors.primary,
+  )
 
   useEffect(() => {
-    (async () => {
-      if (!AppDataSource.isInitialized) await AppDataSource.initialize();
-      const settings = await settingsRepo.findOne({ where: {} });
-      setAppTheme(settings.theme);
-      if (settings.lightColor) setLightColor(settings.lightColor);
-      if (settings.darkColor) setDarkColor(settings.darkColor);
-      setInitialized(true);
-    })();
+    const init = async () => {
+      if (!AppDataSource.isInitialized) await AppDataSource.initialize()
+      const settings = await settingsRepo.findOne({where: {}})
+      setTheme(settings.theme)
+      if (settings.lightColor) setLightColor(settings.lightColor)
+      if (settings.darkColor) setDarkColor(settings.darkColor)
+      setInitialized(true)
+    }
+    init()
     const description = DeviceEventEmitter.addListener(
       TOAST,
       ({value}: {value: string}) => {
-        setSnackbar(value);
-      }
-    );
-    return description.remove;
-  }, []);
+        setSnackbar(value)
+      },
+    )
+    return description.remove
+  }, [])
 
   const paperTheme = useMemo(() => {
     const darkTheme = lightColor
@@ -74,36 +75,43 @@ const App = () => {
           ...CombinedDarkTheme,
           colors: {...CombinedDarkTheme.colors, primary: darkColor},
         }
-      : CombinedDarkTheme;
+      : CombinedDarkTheme
     const lightTheme = lightColor
       ? {
           ...CombinedDefaultTheme,
           colors: {...CombinedDefaultTheme.colors, primary: lightColor},
         }
-      : CombinedDefaultTheme;
-    let value = phoneTheme === "dark" ? darkTheme : lightTheme;
-    if (appTheme === "dark") value = darkTheme;
-    else if (appTheme === "light") value = lightTheme;
-    return value;
-  }, [phoneTheme, appTheme, lightColor, darkColor]);
+      : CombinedDefaultTheme
+    let value = isDark ? darkTheme : lightTheme
+    if (theme === 'dark') value = darkTheme
+    else if (theme === 'light') value = lightTheme
+    return value
+  }, [isDark, theme, lightColor, darkColor])
+
+  const action = useMemo(
+    () => ({
+      label: 'Close',
+      onPress: () => setSnackbar(''),
+      color: paperTheme.colors.background,
+    }),
+    [paperTheme.colors.background],
+  )
 
   return (
     <PaperProvider
       theme={paperTheme}
-      settings={{ icon: (props) => <MaterialIcon {...props} /> }}
-    >
+      settings={{icon: props => <MaterialIcon {...props} />}}>
       <NavigationContainer theme={paperTheme}>
         {initialized && (
           <ThemeContext.Provider
             value={{
-              theme: appTheme,
-              setTheme: setAppTheme,
+              theme,
+              setTheme,
               lightColor,
               setLightColor,
               darkColor,
               setDarkColor,
-            }}
-          >
+            }}>
             <Routes />
           </ThemeContext.Provider>
         )}
@@ -111,18 +119,13 @@ const App = () => {
 
       <Snackbar
         duration={3000}
-        onDismiss={() => setSnackbar("")}
+        onDismiss={() => setSnackbar('')}
         visible={!!snackbar}
-        action={{
-          label: "Close",
-          onPress: () => setSnackbar(""),
-          textColor: paperTheme.colors.background,
-        }}
-      >
+        action={action}>
         {snackbar}
       </Snackbar>
     </PaperProvider>
-  );
-};
+  )
+}
 
-export default App;
+export default App

AppFab.tsx

@@ -1,18 +1,18 @@
-import { ComponentProps, useMemo } from "react";
-import { FAB, useTheme } from "react-native-paper";
-import { CombinedDarkTheme, CombinedDefaultTheme } from "./App";
-import { lightColors } from "./colors";
+import {ComponentProps, useMemo} from 'react'
+import {FAB, useTheme} from 'react-native-paper'
+import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
+import {lightColors} from './colors'
 
 export default function AppFab(props: Partial<ComponentProps<typeof FAB>>) {
-  const { colors } = useTheme();
+  const {colors} = useTheme()
 
   const fabColor = useMemo(
     () =>
-      lightColors.map((color) => color.hex).includes(colors.primary)
+      lightColors.map(color => color.hex).includes(colors.primary)
         ? CombinedDarkTheme.colors.background
         : CombinedDefaultTheme.colors.background,
-    [colors.primary]
-  );
+    [colors.primary],
+  )
 
   return (
     <FAB
@@ -20,12 +20,12 @@ export default function AppFab(props: Partial<ComponentProps<typeof FAB>>) {
       testID="add"
       color={fabColor}
       style={{
-        position: "absolute",
+        position: 'absolute',
         right: 20,
         bottom: 20,
         backgroundColor: colors.primary,
       }}
       {...props}
     />
-  );
+  )
 }

AppInput.tsx

@@ -1,26 +1,26 @@
-import React, { ComponentProps, Ref } from "react";
-import { TextInput } from "react-native-paper";
-import { CombinedDefaultTheme } from "./App";
-import { MARGIN } from "./constants";
-import useDark from "./use-dark";
+import React, {ComponentProps, Ref} from 'react'
+import {TextInput} from 'react-native-paper'
+import {CombinedDefaultTheme} from './App'
+import {MARGIN} from './constants'
+import useDark from './use-dark'
 
 function AppInput(
   props: Partial<ComponentProps<typeof TextInput>> & {
-    innerRef?: Ref<any>;
-  }
+    innerRef?: Ref<any>
+  },
 ) {
-  const dark = useDark();
+  const dark = useDark()
 
   return (
     <TextInput
-      selectionColor={dark ? "#2A2A2A" : CombinedDefaultTheme.colors.border}
+      selectionColor={dark ? '#2A2A2A' : CombinedDefaultTheme.colors.border}
       style={{marginBottom: MARGIN, minWidth: 100}}
       selectTextOnFocus
       ref={props.innerRef}
       blurOnSubmit={false}
       {...props}
     />
-  );
+  )
 }
 
-export default React.memo(AppInput);
+export default React.memo(AppInput)

BestList.tsx

@@ -0,0 +1,98 @@
+import {
+  NavigationProp,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native'
+import {useCallback, useState} from 'react'
+import {FlatList, Image} from 'react-native'
+import {List} from 'react-native-paper'
+import {BestPageParams} from './BestPage'
+import {setRepo, settingsRepo} from './db'
+import DrawerHeader from './DrawerHeader'
+import GymSet from './gym-set'
+import Page from './Page'
+import Settings from './settings'
+
+export default function BestList() {
+  const [bests, setBests] = useState<GymSet[]>()
+  const [term, setTerm] = useState('')
+  const navigation = useNavigation<NavigationProp<BestPageParams>>()
+  const [settings, setSettings] = useState<Settings>()
+
+  useFocusEffect(
+    useCallback(() => {
+      settingsRepo.findOne({where: {}}).then(setSettings)
+    }, []),
+  )
+
+  const refresh = useCallback(async (value: string) => {
+    const weights = await setRepo
+      .createQueryBuilder()
+      .select()
+      .addSelect('MAX(weight)', 'weight')
+      .where('name LIKE :name', {name: `%${value}%`})
+      .andWhere('NOT hidden')
+      .groupBy('name')
+      .getMany()
+    console.log(`${BestList.name}.refresh:`, {length: weights.length})
+    let newBest: GymSet[] = []
+    for (const set of weights) {
+      const reps = await setRepo
+        .createQueryBuilder()
+        .select()
+        .addSelect('MAX(reps)', 'reps')
+        .where('name = :name', {name: set.name})
+        .andWhere('weight = :weight', {weight: set.weight})
+        .andWhere('NOT hidden')
+        .groupBy('name')
+        .getMany()
+      newBest.push(...reps)
+    }
+    setBests(newBest)
+  }, [])
+
+  useFocusEffect(
+    useCallback(() => {
+      refresh(term)
+    }, [refresh, term]),
+  )
+
+  const search = useCallback(
+    (value: string) => {
+      setTerm(value)
+      refresh(value)
+    },
+    [refresh],
+  )
+
+  const renderItem = ({item}: {item: GymSet}) => (
+    <List.Item
+      key={item.name}
+      title={item.name}
+      description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
+      onPress={() => navigation.navigate('ViewBest', {best: item})}
+      left={() =>
+        (settings.images && item.image && (
+          <Image source={{uri: item.image}} style={{height: 75, width: 75}} />
+        )) ||
+        null
+      }
+    />
+  )
+
+  return (
+    <>
+      <DrawerHeader name="Best" />
+      <Page term={term} search={search}>
+        {bests?.length === 0 ? (
+          <List.Item
+            title="No exercises yet"
+            description="Once sets have been added, this will highlight your personal bests."
+          />
+        ) : (
+          <FlatList style={{flex: 1}} renderItem={renderItem} data={bests} />
+        )}
+      </Page>
+    </>
+  )
+}

BestPage.tsx

@@ -0,0 +1,22 @@
+import {createStackNavigator} from '@react-navigation/stack'
+import BestList from './BestList'
+import GymSet from './gym-set'
+import ViewBest from './ViewBest'
+
+const Stack = createStackNavigator<BestPageParams>()
+export type BestPageParams = {
+  BestList: {}
+  ViewBest: {
+    best: GymSet
+  }
+}
+
+export default function BestPage() {
+  return (
+    <Stack.Navigator
+      screenOptions={{headerShown: false, animationEnabled: false}}>
+      <Stack.Screen name="BestList" component={BestList} />
+      <Stack.Screen name="ViewBest" component={ViewBest} />
+    </Stack.Navigator>
+  )
+}

Chart.tsx

@@ -1,11 +1,11 @@
-import { useTheme } from "@react-navigation/native";
-import * as shape from "d3-shape";
-import { 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 GymSet from "./gym-set";
-import useDark from "./use-dark";
+import {useTheme} from '@react-navigation/native'
+import * as shape from 'd3-shape'
+import {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 GymSet from './gym-set'
+import useDark from './use-dark'
 
 export default function Chart({
   yData,
@@ -13,21 +13,21 @@ export default function Chart({
   xData,
   yFormat,
 }: {
-  yData: number[];
-  xData: GymSet[];
-  xFormat: (value: any, index: number) => string;
-  yFormat: (value: any) => string;
+  yData: number[]
+  xData: GymSet[]
+  xFormat: (value: any, index: number) => string
+  yFormat: (value: any) => string
 }) {
-  const { colors } = useTheme();
-  const dark = useDark();
+  const {colors} = useTheme()
+  const dark = useDark()
   const axesSvg = {
     fontSize: 10,
     fill: dark
       ? CombinedDarkTheme.colors.text
       : CombinedDefaultTheme.colors.text,
-  };
-  const verticalContentInset = { top: 10, bottom: 10 };
-  const xAxisHeight = 30;
+  }
+  const verticalContentInset = {top: 10, bottom: 10}
+  const xAxisHeight = 30
 
   return (
     <>
@@ -35,9 +35,8 @@ export default function Chart({
         style={{
           height: 300,
           padding: PADDING,
-          flexDirection: "row",
-        }}
-      >
+          flexDirection: 'row',
+        }}>
         <YAxis
           data={yData}
           style={{marginBottom: xAxisHeight}}
@@ -53,8 +52,7 @@ export default function Chart({
             curve={shape.curveBasis}
             svg={{
               stroke: colors.primary,
-            }}
-          >
+            }}>
             <Grid />
           </LineChart>
           <XAxis
@@ -66,5 +64,5 @@ export default function Chart({
         </View>
       </View>
     </>
-  );
+  )
 }

ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { Button, Dialog, Portal, Text } from "react-native-paper";
+import {Button, Dialog, Portal, Text} from 'react-native-paper'
 
 export default function ConfirmDialog({
   title,
@@ -8,17 +8,17 @@ export default function ConfirmDialog({
   setShow,
   onCancel,
 }: {
-  title: string;
-  children: JSX.Element | JSX.Element[] | string;
-  onOk: () => void;
-  show: boolean;
-  setShow: (show: boolean) => void;
-  onCancel?: () => void;
+  title: string
+  children: JSX.Element | JSX.Element[] | string
+  onOk: () => void
+  show: boolean
+  setShow: (show: boolean) => void
+  onCancel?: () => void
 }) {
   const cancel = () => {
-    setShow(false);
-    onCancel && onCancel();
-  };
+    setShow(false)
+    onCancel && onCancel()
+  }
 
   return (
     <Portal>
@@ -33,5 +33,5 @@ export default function ConfirmDialog({
         </Dialog.Actions>
       </Dialog>
     </Portal>
-  );
+  )
 }

DrawerHeader.tsx

@@ -1,22 +1,28 @@
-import { DrawerNavigationProp } from "@react-navigation/drawer";
-import { useNavigation } from "@react-navigation/native";
-import { Appbar, IconButton } from "react-native-paper";
-import { DrawerParamList } from "./drawer-param-list";
+import {DrawerNavigationProp} from '@react-navigation/drawer'
+import {useNavigation} from '@react-navigation/native'
+import {Appbar, IconButton} from 'react-native-paper'
+import {DrawerParamList} from './drawer-param-list'
+import useDark from './use-dark'
 
 export default function DrawerHeader({
   name,
   children,
 }: {
-  name: string;
-  children?: JSX.Element | JSX.Element[];
+  name: string
+  children?: JSX.Element | JSX.Element[]
 }) {
-  const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>();
+  const navigation = useNavigation<DrawerNavigationProp<DrawerParamList>>()
+  const dark = useDark()
 
   return (
     <Appbar.Header>
-      <IconButton icon="menu" onPress={navigation.openDrawer} />
+      <IconButton
+        color={dark ? 'white' : 'white'}
+        icon="menu"
+        onPress={navigation.openDrawer}
+      />
       <Appbar.Content title={name} />
       {children}
     </Appbar.Header>
-  );
+  )
 }

EditPlan.tsx

@@ -3,116 +3,86 @@ import {
   RouteProp,
   useNavigation,
   useRoute,
-} from "@react-navigation/native";
-import { useCallback, useEffect, useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import { Button, IconButton, Text } from "react-native-paper";
-import { MARGIN, PADDING } from "./constants";
-import { planRepo, setRepo } from "./db";
-import { defaultSet } from "./gym-set";
-import { PlanPageParams } from "./plan-page-params";
-import StackHeader from "./StackHeader";
-import Switch from "./Switch";
-import { DAYS } from "./time";
-import AppInput from "./AppInput";
+} from '@react-navigation/native'
+import {useCallback, useEffect, useState} from 'react'
+import {ScrollView, StyleSheet, View} from 'react-native'
+import {Button, Text} from 'react-native-paper'
+import {MARGIN, PADDING} from './constants'
+import {planRepo, setRepo} from './db'
+import {DrawerParamList} from './drawer-param-list'
+import {PlanPageParams} from './plan-page-params'
+import StackHeader from './StackHeader'
+import Switch from './Switch'
+import {DAYS} from './time'
 
 export default function EditPlan() {
-  const { params } = useRoute<RouteProp<PlanPageParams, "EditPlan">>();
-  const { plan } = params;
-  const [title, setTitle] = useState<string>(plan?.title);
+  const {params} = useRoute<RouteProp<PlanPageParams, 'EditPlan'>>()
+  const {plan} = params
   const [days, setDays] = useState<string[]>(
-    plan.days ? plan.days.split(",") : []
-  );
+    plan.days ? plan.days.split(',') : [],
+  )
   const [workouts, setWorkouts] = useState<string[]>(
-    plan.workouts ? plan.workouts.split(",") : []
-  );
-  const [names, setNames] = useState<string[]>([]);
-  const navigation = useNavigation<NavigationProp<PlanPageParams>>();
+    plan.workouts ? plan.workouts.split(',') : [],
+  )
+  const [names, setNames] = useState<string[]>([])
+  const navigation = useNavigation<NavigationProp<DrawerParamList>>()
 
   useEffect(() => {
     setRepo
       .createQueryBuilder()
-      .select("name")
+      .select('name')
       .distinct(true)
-      .orderBy("name")
+      .orderBy('name')
       .getRawMany()
-      .then((values) => {
-        console.log(EditPlan.name, { values });
-        setNames(values.map((value) => value.name));
-      });
-  }, []);
+      .then(values => {
+        console.log(EditPlan.name, {values})
+        setNames(values.map(value => value.name))
+      })
+  }, [])
 
   const save = useCallback(async () => {
-    console.log(`${EditPlan.name}.save`, { days, workouts, plan });
-    if (!days || !workouts) return;
-    const newWorkouts = workouts.filter((workout) => workout).join(",");
-    const newDays = days.filter((day) => day).join(",");
-    await planRepo.save({
-      title: title,
-      days: newDays,
-      workouts: newWorkouts,
-      id: plan.id,
-    });
-  }, [title, days, workouts, plan]);
+    console.log(`${EditPlan.name}.save`, {days, workouts, plan})
+    if (!days || !workouts) return
+    const newWorkouts = workouts.filter(workout => workout).join(',')
+    const newDays = days.filter(day => day).join(',')
+    await planRepo.save({days: newDays, workouts: newWorkouts, id: plan.id})
+    navigation.goBack()
+  }, [days, workouts, plan, navigation])
 
   const toggleWorkout = useCallback(
     (on: boolean, name: string) => {
       if (on) {
-        setWorkouts([...workouts, name]);
+        setWorkouts([...workouts, name])
       } else {
-        setWorkouts(workouts.filter((workout) => workout !== name));
+        setWorkouts(workouts.filter(workout => workout !== name))
       }
     },
-    [setWorkouts, workouts]
-  );
+    [setWorkouts, workouts],
+  )
 
   const toggleDay = useCallback(
     (on: boolean, day: string) => {
       if (on) {
-        setDays([...days, day]);
+        setDays([...days, day])
       } else {
-        setDays(days.filter((d) => d !== day));
+        setDays(days.filter(d => d !== day))
       }
     },
-    [setDays, days]
-  );
+    [setDays, days],
+  )
 
   return (
     <>
       <StackHeader
-        title={typeof plan.id === "number" ? "Edit plan" : "Add plan"}
-      >
-        {typeof plan.id === "number" && (
-          <IconButton
-            onPress={async () => {
-              await save();
-              const newPlan = await planRepo.findOne({
-                where: { id: plan.id },
-              });
-              let first = await setRepo.findOne({
-                where: { name: workouts[0] },
-                order: { created: "desc" },
-              });
-              if (!first) first = { ...defaultSet, name: workouts[0] };
-              delete first.id;
-              navigation.navigate("StartPlan", { plan: newPlan, first });
-            }}
-            icon="play-arrow"
+        title={typeof plan.id === 'number' ? 'Edit plan' : 'Add plan'}
       />
-        )}
-      </StackHeader>
       <View style={{padding: PADDING, flex: 1}}>
         <ScrollView style={{flex: 1}}>
-          <AppInput
-            label="Title"
-            value={title}
-            onChangeText={(value) => setTitle(value)}
-          />
           <Text style={styles.title}>Days</Text>
-          {DAYS.map((day) => (
+          {DAYS.map(day => (
             <Switch
               key={day}
-              onChange={(value) => toggleDay(value, day)}
+              onChange={value => toggleDay(value, day)}
               value={days.includes(day)}
               title={day}
             />
@@ -123,10 +93,10 @@ export default function EditPlan() {
               <Text>No workouts found.</Text>
             </View>
           ) : (
-            names.map((name) => (
+            names.map(name => (
               <Switch
                 key={name}
-                onChange={(value) => toggleWorkout(value, name)}
+                onChange={value => toggleWorkout(value, name)}
                 value={workouts.includes(name)}
                 title={name}
               />
@@ -137,18 +107,14 @@ export default function EditPlan() {
         <Button
           disabled={workouts.length === 0 && days.length === 0}
           style={styles.button}
-          mode="outlined"
+          mode="contained"
           icon="save"
-          onPress={async () => {
-            await save();
-            navigation.navigate("PlanList");
-          }}
-        >
+          onPress={save}>
           Save
         </Button>
       </View>
     </>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
@@ -157,4 +123,4 @@ const styles = StyleSheet.create({
     marginBottom: MARGIN,
   },
   button: {},
-});
+})

EditSet.tsx

@@ -1,148 +1,140 @@
-import { DateTimePickerAndroid } from "@react-native-community/datetimepicker";
+import {DateTimePickerAndroid} from '@react-native-community/datetimepicker'
 import {
   RouteProp,
   useFocusEffect,
   useNavigation,
   useRoute,
-} from "@react-navigation/native";
-import { format } from "date-fns";
-import { useCallback, useRef, useState } from "react";
-import { NativeModules, TextInput, View } from "react-native";
-import DocumentPicker from "react-native-document-picker";
-import { Button, Card, IconButton, TouchableRipple } from "react-native-paper";
-import AppInput from "./AppInput";
-import ConfirmDialog from "./ConfirmDialog";
-import { MARGIN, PADDING } from "./constants";
-import { getNow, setRepo, settingsRepo } from "./db";
-import GymSet from "./gym-set";
-import { HomePageParams } from "./home-page-params";
-import Settings from "./settings";
-import StackHeader from "./StackHeader";
-import { toast } from "./toast";
-import { fixNumeric } from "./fix-numeric";
+} from '@react-navigation/native'
+import {format} from 'date-fns'
+import {useCallback, useRef, useState} from 'react'
+import {NativeModules, TextInput, View} from 'react-native'
+import DocumentPicker from 'react-native-document-picker'
+import {Button, Card, TouchableRipple} from 'react-native-paper'
+import AppInput from './AppInput'
+import ConfirmDialog from './ConfirmDialog'
+import {MARGIN, PADDING} from './constants'
+import {getNow, setRepo, settingsRepo} from './db'
+import GymSet from './gym-set'
+import {HomePageParams} from './home-page-params'
+import Settings from './settings'
+import StackHeader from './StackHeader'
+import {toast} from './toast'
 
 export default function EditSet() {
-  const { params } = useRoute<RouteProp<HomePageParams, "EditSet">>();
-  const { set } = params;
-  const navigation = useNavigation();
-  const [settings, setSettings] = useState<Settings>({} as Settings);
-  const [name, setName] = useState(set.name);
-  const [reps, setReps] = useState(set.reps?.toString());
-  const [weight, setWeight] = useState(set.weight?.toString());
-  const [newImage, setNewImage] = useState(set.image);
-  const [unit, setUnit] = useState(set.unit);
-  const [created, setCreated] = useState<Date>(
-    set.created ? new Date(set.created) : new Date()
-  );
-  const [createdDirty, setCreatedDirty] = useState(false);
-  const [showRemove, setShowRemove] = useState(false);
-  const [removeImage, setRemoveImage] = useState(false);
-  const weightRef = useRef<TextInput>(null);
-  const repsRef = useRef<TextInput>(null);
-  const unitRef = useRef<TextInput>(null);
+  const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>()
+  const {set} = params
+  const navigation = useNavigation()
+  const [settings, setSettings] = useState<Settings>({} as Settings)
+  const [name, setName] = useState(set.name)
+  const [reps, setReps] = useState(set.reps?.toString())
+  const [weight, setWeight] = useState(set.weight?.toString())
+  const [newImage, setNewImage] = useState(set.image)
+  const [unit, setUnit] = useState(set.unit)
+  const [created, setCreated] = useState(
+    set.created ? new Date(set.created) : new Date(),
+  )
+  const [showRemove, setShowRemove] = useState(false)
+  const [removeImage, setRemoveImage] = useState(false)
+  const weightRef = useRef<TextInput>(null)
+  const repsRef = useRef<TextInput>(null)
+  const unitRef = useRef<TextInput>(null)
 
   const [selection, setSelection] = useState({
     start: 0,
     end: set.reps?.toString().length,
-  });
+  })
 
   useFocusEffect(
     useCallback(() => {
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-    }, [])
-  );
+      settingsRepo.findOne({where: {}}).then(setSettings)
+    }, []),
+  )
 
   const startTimer = useCallback(
     async (value: string) => {
-      if (!settings.alarm) return;
-      const first = await setRepo.findOne({ where: { name: value } });
+      if (!settings.alarm) return
+      const first = await setRepo.findOne({where: {name: value}})
       const milliseconds =
-        (first?.minutes ?? 3) * 60 * 1000 + (first?.seconds ?? 0) * 1000;
-      if (milliseconds) NativeModules.AlarmModule.timer(milliseconds);
+        (first?.minutes ?? 3) * 60 * 1000 + (first?.seconds ?? 0) * 1000
+      NativeModules.AlarmModule.timer(milliseconds)
     },
-    [settings]
-  );
+    [settings],
+  )
 
   const added = useCallback(
     async (value: GymSet) => {
-      startTimer(value.name);
-      console.log(`${EditSet.name}.add`, { set: value });
-      if (!settings.notify) return;
+      startTimer(value.name)
+      console.log(`${EditSet.name}.add`, {set: value})
+      if (!settings.notify) return
       if (
         value.weight > set.weight ||
         (value.reps > set.reps && value.weight === set.weight)
-      ) {
-        toast("Great work King! That's a new record.");
-      }
+      )
+        toast("Great work King! That's a new record.")
     },
-    [startTimer, set, settings]
-  );
+    [startTimer, set, settings],
+  )
 
   const handleSubmit = async () => {
-    if (!name) return;
+    console.log(`${EditSet.name}.handleSubmit:`, {set, uri: newImage, name})
+    if (!name) return
+    let image = newImage
+    if (!newImage && !removeImage)
+      image = await setRepo.findOne({where: {name}}).then(s => s?.image)
 
-    const newSet: Partial<GymSet> = {
+    console.log(`${EditSet.name}.handleSubmit:`, {image})
+    const now = await getNow()
+    const saved = await setRepo.save({
       id: set.id,
       name,
+      created: created?.toISOString() || now,
       reps: Number(reps),
       weight: Number(weight),
       unit,
+      image,
       minutes: Number(set.minutes ?? 3),
       seconds: Number(set.seconds ?? 30),
       sets: set.sets ?? 3,
       hidden: false,
-    };
-
-    newSet.image = newImage;
-    if (!newImage && !removeImage) {
-      newSet.image = await setRepo
-        .findOne({ where: { name } })
-        .then((s) => s?.image);
+    })
+    if (typeof set.id !== 'number') added(saved)
+    navigation.goBack()
   }
 
-    if (createdDirty) newSet.created = created.toISOString();
-    if (typeof set.id !== "number") newSet.created = await getNow();
-
-    const saved = await setRepo.save(newSet);
-    if (typeof set.id !== "number") added(saved);
-    navigation.goBack();
-  };
-
   const changeImage = useCallback(async () => {
     const {fileCopyUri} = await DocumentPicker.pickSingle({
       type: DocumentPicker.types.images,
-      copyTo: "documentDirectory",
-    });
-    if (fileCopyUri) setNewImage(fileCopyUri);
-  }, []);
+      copyTo: 'documentDirectory',
+    })
+    if (fileCopyUri) setNewImage(fileCopyUri)
+  }, [])
 
   const handleRemove = useCallback(async () => {
-    setNewImage("");
-    setRemoveImage(true);
-    setShowRemove(false);
-  }, []);
+    setNewImage('')
+    setRemoveImage(true)
+    setShowRemove(false)
+  }, [])
 
   const pickDate = useCallback(() => {
     DateTimePickerAndroid.open({
       value: created,
       onChange: (_, date) => {
-        if (date === created) return;
-        setCreated(date);
-        setCreatedDirty(true);
+        if (date === created) return
+        setCreated(date)
         DateTimePickerAndroid.open({
           value: date,
           onChange: (__, time) => setCreated(time),
-          mode: "time",
-        });
+          mode: 'time',
+        })
       },
-      mode: "date",
-    });
-  }, [created]);
+      mode: 'date',
+    })
+  }, [created])
 
   return (
     <>
       <StackHeader
-        title={typeof set.id === "number" ? "Edit set" : "Add set"}
+        title={typeof set.id === 'number' ? 'Edit set' : 'Add set'}
       />
 
       <View style={{padding: PADDING, flex: 1}}>
@@ -155,65 +147,26 @@ export default function EditSet() {
           onSubmitEditing={() => repsRef.current?.focus()}
         />
 
-        <View style={{ flexDirection: "row" }}>
         <AppInput
-            style={{
-              flex: 1,
-              marginBottom: MARGIN,
-            }}
           label="Reps"
           keyboardType="numeric"
           value={reps}
-            onChangeText={(newReps) => {
-              const fixed = fixNumeric(newReps);
-              setReps(fixed);
-              if (fixed.length !== newReps.length)
-                toast("Reps must be a number");
-            }}
+          onChangeText={setReps}
           onSubmitEditing={() => weightRef.current?.focus()}
           selection={selection}
-            onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
+          onSelectionChange={e => setSelection(e.nativeEvent.selection)}
+          autoFocus={!!name}
           innerRef={repsRef}
         />
-          <IconButton
-            icon="add"
-            onPress={() => setReps((Number(reps) + 1).toString())}
-          />
-          <IconButton
-            icon="remove"
-            onPress={() => setReps((Number(reps) - 1).toString())}
-          />
-        </View>
 
-        <View
-          style={{
-            flexDirection: "row",
-            marginBottom: MARGIN,
-          }}
-        >
         <AppInput
-            style={{ flex: 1 }}
           label="Weight"
           keyboardType="numeric"
           value={weight}
-            onChangeText={(newWeight) => {
-              const fixed = fixNumeric(newWeight);
-              setWeight(fixed);
-              if (fixed.length !== newWeight.length)
-                toast("Weight must be a number");
-            }}
+          onChangeText={setWeight}
           onSubmitEditing={handleSubmit}
           innerRef={weightRef}
         />
-          <IconButton
-            icon="add"
-            onPress={() => setWeight((Number(weight) + 2.5).toString())}
-          />
-          <IconButton
-            icon="remove"
-            onPress={() => setWeight((Number(weight) - 2.5).toString())}
-          />
-        </View>
 
         {settings.showUnit && (
           <AppInput
@@ -225,10 +178,10 @@ export default function EditSet() {
           />
         )}
 
-        {settings.showDate && (
+        {typeof set.id === 'number' && settings.showDate && (
           <AppInput
             label="Created"
-            value={format(created, settings.date || "P")}
+            value={format(created, settings.date || 'P')}
             onPressOut={pickDate}
           />
         )}
@@ -237,8 +190,7 @@ export default function EditSet() {
           <TouchableRipple
             style={{marginBottom: MARGIN}}
             onPress={changeImage}
-            onLongPress={() => setShowRemove(true)}
-          >
+            onLongPress={() => setShowRemove(true)}>
             <Card.Cover source={{uri: newImage}} />
           </TouchableRipple>
         )}
@@ -247,8 +199,7 @@ export default function EditSet() {
           <Button
             style={{marginBottom: MARGIN}}
             onPress={changeImage}
-            icon="add-photo-alternate"
-          >
+            icon="add-photo-alternate">
             Image
           </Button>
         )}
@@ -256,11 +207,10 @@ export default function EditSet() {
 
       <Button
         disabled={!name}
-        mode="outlined"
+        mode="contained"
         icon="save"
         style={{margin: MARGIN}}
-        onPress={handleSubmit}
-      >
+        onPress={handleSubmit}>
         Save
       </Button>
 
@@ -268,10 +218,9 @@ export default function EditSet() {
         title="Remove image"
         onOk={handleRemove}
         show={showRemove}
-        setShow={setShowRemove}
-      >
+        setShow={setShowRemove}>
         Are you sure you want to remove the image?
       </ConfirmDialog>
     </>
-  );
+  )
 }

EditSets.tsx

@@ -3,78 +3,78 @@ import {
   useFocusEffect,
   useNavigation,
   useRoute,
-} from "@react-navigation/native";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import DocumentPicker from "react-native-document-picker";
-import { Button, Card, IconButton, TouchableRipple } from "react-native-paper";
-import { In } from "typeorm";
-import AppInput from "./AppInput";
-import ConfirmDialog from "./ConfirmDialog";
-import { MARGIN, PADDING } from "./constants";
-import { setRepo, settingsRepo } from "./db";
-import GymSet from "./gym-set";
-import { HomePageParams } from "./home-page-params";
-import Settings from "./settings";
-import StackHeader from "./StackHeader";
+} from '@react-navigation/native'
+import {useCallback, useState} from 'react'
+import {View} from 'react-native'
+import DocumentPicker from 'react-native-document-picker'
+import {Button, Card, TouchableRipple} from 'react-native-paper'
+import {In} from 'typeorm'
+import AppInput from './AppInput'
+import ConfirmDialog from './ConfirmDialog'
+import {MARGIN, PADDING} from './constants'
+import {setRepo, settingsRepo} from './db'
+import GymSet from './gym-set'
+import {HomePageParams} from './home-page-params'
+import Settings from './settings'
+import StackHeader from './StackHeader'
 
 export default function EditSets() {
-  const { params } = useRoute<RouteProp<HomePageParams, "EditSets">>();
-  const { ids } = params;
-  const navigation = useNavigation();
-  const [settings, setSettings] = useState<Settings>({} as Settings);
-  const [name, setName] = useState("");
-  const [reps, setReps] = useState("");
-  const [weight, setWeight] = useState("");
-  const [newImage, setNewImage] = useState("");
-  const [unit, setUnit] = useState("");
-  const [showRemove, setShowRemove] = useState(false);
-  const [names, setNames] = useState("");
-  const [oldReps, setOldReps] = useState("");
-  const [weights, setWeights] = useState("");
-  const [units, setUnits] = useState("");
+  const {params} = useRoute<RouteProp<HomePageParams, 'EditSets'>>()
+  const {ids} = params
+  const navigation = useNavigation()
+  const [settings, setSettings] = useState<Settings>({} as Settings)
+  const [name, setName] = useState('')
+  const [reps, setReps] = useState('')
+  const [weight, setWeight] = useState('')
+  const [newImage, setNewImage] = useState('')
+  const [unit, setUnit] = useState('')
+  const [showRemove, setShowRemove] = useState(false)
+  const [names, setNames] = useState('')
+  const [oldReps, setOldReps] = useState('')
+  const [weights, setWeights] = useState('')
+  const [units, setUnits] = useState('')
 
   const [selection, setSelection] = useState({
     start: 0,
     end: 1,
-  });
+  })
 
   useFocusEffect(
     useCallback(() => {
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-      setRepo.find({ where: { id: In(ids) } }).then((sets) => {
-        setNames(sets.map((set) => set.name).join(", "));
-        setOldReps(sets.map((set) => set.reps).join(", "));
-        setWeights(sets.map((set) => set.weight).join(", "));
-        setUnits(sets.map((set) => set.unit).join(", "));
-      });
-    }, [ids])
-  );
+      settingsRepo.findOne({where: {}}).then(setSettings)
+      setRepo.find({where: {id: In(ids)}}).then(sets => {
+        setNames(sets.map(set => set.name).join(', '))
+        setOldReps(sets.map(set => set.reps).join(', '))
+        setWeights(sets.map(set => set.weight).join(', '))
+        setUnits(sets.map(set => set.unit).join(', '))
+      })
+    }, [ids]),
+  )
 
   const handleSubmit = async () => {
-    console.log(`${EditSets.name}.handleSubmit:`, { uri: newImage, name });
-    const update: Partial<GymSet> = {};
-    if (name) update.name = name;
-    if (reps) update.reps = Number(reps);
-    if (weight) update.weight = Number(weight);
-    if (unit) update.unit = unit;
-    if (newImage) update.image = newImage;
-    if (Object.keys(update).length > 0) await setRepo.update(ids, update);
-    navigation.goBack();
-  };
+    console.log(`${EditSets.name}.handleSubmit:`, {uri: newImage, name})
+    const update: Partial<GymSet> = {}
+    if (name) update.name = name
+    if (reps) update.reps = Number(reps)
+    if (weight) update.weight = Number(weight)
+    if (unit) update.unit = unit
+    if (newImage) update.image = newImage
+    if (Object.keys(update).length > 0) await setRepo.update(ids, update)
+    navigation.goBack()
+  }
 
   const changeImage = useCallback(async () => {
     const {fileCopyUri} = await DocumentPicker.pickSingle({
       type: DocumentPicker.types.images,
-      copyTo: "documentDirectory",
-    });
-    if (fileCopyUri) setNewImage(fileCopyUri);
-  }, []);
+      copyTo: 'documentDirectory',
+    })
+    if (fileCopyUri) setNewImage(fileCopyUri)
+  }, [])
 
   const handleRemove = useCallback(async () => {
-    setNewImage("");
-    setShowRemove(false);
-  }, []);
+    setNewImage('')
+    setShowRemove(false)
+  }, [])
 
   return (
     <>
@@ -89,57 +89,23 @@ export default function EditSets() {
           autoFocus={!name}
         />
 
-        <View
-          style={{
-            flexDirection: "row",
-            marginBottom: MARGIN,
-          }}
-        >
         <AppInput
-            style={{
-              flex: 1,
-            }}
           label={`Reps: ${oldReps}`}
           keyboardType="numeric"
           value={reps}
           onChangeText={setReps}
           selection={selection}
-            onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
+          onSelectionChange={e => setSelection(e.nativeEvent.selection)}
           autoFocus={!!name}
         />
-          <IconButton
-            icon="add"
-            onPress={() => setReps((Number(reps) + 1).toString())}
-          />
-          <IconButton
-            icon="remove"
-            onPress={() => setReps((Number(reps) - 1).toString())}
-          />
-        </View>
 
-        <View
-          style={{
-            flexDirection: "row",
-            marginBottom: MARGIN,
-          }}
-        >
         <AppInput
-            style={{ flex: 1 }}
           label={`Weights: ${weights}`}
           keyboardType="numeric"
           value={weight}
           onChangeText={setWeight}
           onSubmitEditing={handleSubmit}
         />
-          <IconButton
-            icon="add"
-            onPress={() => setWeight((Number(weight) + 2.5).toString())}
-          />
-          <IconButton
-            icon="remove"
-            onPress={() => setWeight((Number(weight) - 2.5).toString())}
-          />
-        </View>
 
         {settings.showUnit && (
           <AppInput
@@ -154,8 +120,7 @@ export default function EditSets() {
           <TouchableRipple
             style={{marginBottom: MARGIN}}
             onPress={changeImage}
-            onLongPress={() => setShowRemove(true)}
-          >
+            onLongPress={() => setShowRemove(true)}>
             <Card.Cover source={{uri: newImage}} />
           </TouchableRipple>
         )}
@@ -163,8 +128,7 @@ export default function EditSets() {
           title="Remove image"
           onOk={handleRemove}
           show={showRemove}
-          setShow={setShowRemove}
-        >
+          setShow={setShowRemove}>
           Are you sure you want to remove the image?
         </ConfirmDialog>
 
@@ -172,21 +136,19 @@ export default function EditSets() {
           <Button
             style={{marginBottom: MARGIN}}
             onPress={changeImage}
-            icon="add-photo-alternate"
-          >
+            icon="add-photo-alternate">
             Image
           </Button>
         )}
       </View>
 
       <Button
-        mode="outlined"
+        mode="contained"
         icon="save"
         style={{margin: MARGIN}}
-        onPress={handleSubmit}
-      >
+        onPress={handleSubmit}>
         Save
       </Button>
     </>
-  );
+  )
 }

EditWorkout.tsx

@@ -3,48 +3,46 @@ import {
   useFocusEffect,
   useNavigation,
   useRoute,
-} from "@react-navigation/native";
-import { useCallback, useRef, useState } from "react";
-import { ScrollView, TextInput, View } from "react-native";
-import DocumentPicker from "react-native-document-picker";
-import { Button, Card, TouchableRipple } from "react-native-paper";
-import AppInput from "./AppInput";
-import ConfirmDialog from "./ConfirmDialog";
-import { MARGIN, PADDING } from "./constants";
-import { getNow, planRepo, setRepo, settingsRepo } from "./db";
-import { fixNumeric } from "./fix-numeric";
-import { defaultSet } from "./gym-set";
-import Settings from "./settings";
-import StackHeader from "./StackHeader";
-import { toast } from "./toast";
-import { WorkoutsPageParams } from "./WorkoutsPage";
+} from '@react-navigation/native'
+import {useCallback, useRef, useState} from 'react'
+import {ScrollView, TextInput, View} from 'react-native'
+import DocumentPicker from 'react-native-document-picker'
+import {Button, Card, TouchableRipple} from 'react-native-paper'
+import AppInput from './AppInput'
+import ConfirmDialog from './ConfirmDialog'
+import {MARGIN, PADDING} from './constants'
+import {getNow, planRepo, setRepo, settingsRepo} from './db'
+import {defaultSet} from './gym-set'
+import Settings from './settings'
+import StackHeader from './StackHeader'
+import {WorkoutsPageParams} from './WorkoutsPage'
 
 export default function EditWorkout() {
-  const { params } = useRoute<RouteProp<WorkoutsPageParams, "EditWorkout">>();
-  const [removeImage, setRemoveImage] = useState(false);
-  const [showRemove, setShowRemove] = useState(false);
-  const [name, setName] = useState(params.value.name);
-  const [steps, setSteps] = useState(params.value.steps);
-  const [uri, setUri] = useState(params.value.image);
+  const {params} = useRoute<RouteProp<WorkoutsPageParams, 'EditWorkout'>>()
+  const [removeImage, setRemoveImage] = useState(false)
+  const [showRemove, setShowRemove] = useState(false)
+  const [name, setName] = useState(params.value.name)
+  const [steps, setSteps] = useState(params.value.steps)
+  const [uri, setUri] = useState(params.value.image)
   const [minutes, setMinutes] = useState(
-    params.value.minutes?.toString() ?? "3"
-  );
+    params.value.minutes?.toString() ?? '3',
+  )
   const [seconds, setSeconds] = useState(
-    params.value.seconds?.toString() ?? "30"
-  );
-  const [sets, setSets] = useState(params.value.sets?.toString() ?? "3");
-  const navigation = useNavigation();
-  const setsRef = useRef<TextInput>(null);
-  const stepsRef = useRef<TextInput>(null);
-  const minutesRef = useRef<TextInput>(null);
-  const secondsRef = useRef<TextInput>(null);
-  const [settings, setSettings] = useState<Settings>();
+    params.value.seconds?.toString() ?? '30',
+  )
+  const [sets, setSets] = useState(params.value.sets?.toString() ?? '3')
+  const navigation = useNavigation()
+  const setsRef = useRef<TextInput>(null)
+  const stepsRef = useRef<TextInput>(null)
+  const minutesRef = useRef<TextInput>(null)
+  const secondsRef = useRef<TextInput>(null)
+  const [settings, setSettings] = useState<Settings>()
 
   useFocusEffect(
     useCallback(() => {
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-    }, [])
-  );
+      settingsRepo.findOne({where: {}}).then(setSettings)
+    }, []),
+  )
 
   const update = async () => {
     await setRepo.update(
@@ -55,20 +53,20 @@ export default function EditWorkout() {
         minutes: +minutes,
         seconds: +seconds,
         steps,
-        image: removeImage ? "" : uri,
-      }
-    );
+        image: removeImage ? '' : uri,
+      },
+    )
     await planRepo.query(
       `UPDATE plans 
        SET workouts = REPLACE(workouts, $1, $2) 
        WHERE workouts LIKE $3`,
-      [params.value.name, name, `%${params.value.name}%`]
-    );
-    navigation.goBack();
-  };
+      [params.value.name, name, `%${params.value.name}%`],
+    )
+    navigation.goBack()
+  }
 
   const add = async () => {
-    const now = await getNow();
+    const now = await getNow()
     await setRepo.save({
       ...defaultSet,
       name,
@@ -79,37 +77,37 @@ export default function EditWorkout() {
       sets: sets ? +sets : 3,
       steps,
       created: now,
-    });
-    navigation.goBack();
-  };
+    })
+    navigation.goBack()
+  }
 
   const save = async () => {
-    if (params.value.name) return update();
-    return add();
-  };
+    if (params.value.name) return update()
+    return add()
+  }
 
   const changeImage = useCallback(async () => {
     const {fileCopyUri} = await DocumentPicker.pickSingle({
       type: DocumentPicker.types.images,
-      copyTo: "documentDirectory",
-    });
-    if (fileCopyUri) setUri(fileCopyUri);
-  }, []);
+      copyTo: 'documentDirectory',
+    })
+    if (fileCopyUri) setUri(fileCopyUri)
+  }, [])
 
   const handleRemove = useCallback(async () => {
-    setUri("");
-    setRemoveImage(true);
-    setShowRemove(false);
-  }, []);
+    setUri('')
+    setRemoveImage(true)
+    setShowRemove(false)
+  }, [])
 
   const submitName = () => {
-    if (settings.steps) stepsRef.current?.focus();
-    else setsRef.current?.focus();
-  };
+    if (settings.steps) stepsRef.current?.focus()
+    else setsRef.current?.focus()
+  }
 
   return (
     <>
-      <StackHeader title={params.value.name ? "Edit workout" : "Add workout"} />
+      <StackHeader title={params.value.name ? 'Edit workout' : 'Add workout'} />
       <View style={{padding: PADDING, flex: 1}}>
         <ScrollView style={{flex: 1}}>
           <AppInput
@@ -133,12 +131,7 @@ export default function EditWorkout() {
           <AppInput
             innerRef={setsRef}
             value={sets}
-            onChangeText={(newSets) => {
-              const fixed = fixNumeric(newSets);
-              setSets(fixed);
-              if (fixed.length !== newSets.length)
-                toast("Sets must be a number");
-            }}
+            onChangeText={setSets}
             label="Sets per workout"
             keyboardType="numeric"
             onSubmitEditing={() => minutesRef.current?.focus()}
@@ -149,12 +142,7 @@ export default function EditWorkout() {
                 innerRef={minutesRef}
                 onSubmitEditing={() => secondsRef.current?.focus()}
                 value={minutes}
-                onChangeText={(newMinutes) => {
-                  const fixed = fixNumeric(newMinutes);
-                  setMinutes(fixed);
-                  if (fixed.length !== newMinutes.length)
-                    toast("Reps must be a number");
-                }}
+                onChangeText={setMinutes}
                 label="Rest minutes"
                 keyboardType="numeric"
               />
@@ -172,8 +160,7 @@ export default function EditWorkout() {
             <TouchableRipple
               style={{marginBottom: MARGIN}}
               onPress={changeImage}
-              onLongPress={() => setShowRemove(true)}
-            >
+              onLongPress={() => setShowRemove(true)}>
               <Card.Cover source={{uri}} />
             </TouchableRipple>
           )}
@@ -181,24 +168,22 @@ export default function EditWorkout() {
             <Button
               style={{marginBottom: MARGIN}}
               onPress={changeImage}
-              icon="add-photo-alternate"
-            >
+              icon="add-photo-alternate">
               Image
             </Button>
           )}
         </ScrollView>
-        <Button disabled={!name} mode="outlined" icon="save" onPress={save}>
+        <Button disabled={!name} mode="contained" icon="save" onPress={save}>
           Save
         </Button>
         <ConfirmDialog
           title="Remove image"
           onOk={handleRemove}
           show={showRemove}
-          setShow={setShowRemove}
-        >
+          setShow={setShowRemove}>
           Are you sure you want to remove the image?
         </ConfirmDialog>
       </View>
     </>
-  );
+  )
 }

Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby ">= 2.6.10"
+ruby File.read(File.join(__dir__, '.ruby-version')).strip
 
-gem 'cocoapods', '~> 1.12'
+gem 'cocoapods', '~> 1.11', '>= 1.11.3'

GraphsList.tsx

@@ -1,102 +0,0 @@
-import {
-  NavigationProp,
-  useFocusEffect,
-  useNavigation,
-} from "@react-navigation/native";
-import { useCallback, useState } from "react";
-import { FlatList, Image } from "react-native";
-import { List } from "react-native-paper";
-import { getBestSets } from "./best.service";
-import { LIMIT } from "./constants";
-import { settingsRepo } from "./db";
-import DrawerHeader from "./DrawerHeader";
-import { GraphsPageParams } from "./GraphsPage";
-import GymSet from "./gym-set";
-import Page from "./Page";
-import Settings from "./settings";
-
-export default function GraphsList() {
-  const [bests, setBests] = useState<GymSet[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [end, setEnd] = useState(false);
-  const [term, setTerm] = useState("");
-  const navigation = useNavigation<NavigationProp<GraphsPageParams>>();
-  const [settings, setSettings] = useState<Settings>();
-
-  useFocusEffect(
-    useCallback(() => {
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-    }, [])
-  );
-
-  const refresh = useCallback(async (value: string) => {
-    const result = await getBestSets({ term: value, offset: 0 });
-    setBests(result);
-    setOffset(0);
-  }, []);
-
-  useFocusEffect(
-    useCallback(() => {
-      refresh(term);
-    }, [refresh, term])
-  );
-
-  const next = useCallback(async () => {
-    if (end) return;
-    const newOffset = offset + LIMIT;
-    console.log(`${GraphsList.name}.next:`, { offset, newOffset, term });
-    const newBests = await getBestSets({ term, offset });
-    if (newBests.length === 0) return setEnd(true);
-    if (!bests) return;
-    setBests([...bests, ...newBests]);
-    if (newBests.length < LIMIT) return setEnd(true);
-    setOffset(newOffset);
-  }, [term, end, offset, bests]);
-
-  const search = useCallback(
-    (value: string) => {
-      setTerm(value);
-      refresh(value);
-    },
-    [refresh]
-  );
-
-  const renderItem = ({ item }: { item: GymSet }) => (
-    <List.Item
-      key={item.name}
-      title={item.name}
-      description={`${item.reps} x ${item.weight}${item.unit || "kg"}`}
-      onPress={() => navigation.navigate("ViewGraph", { best: item })}
-      left={() =>
-        (settings.images && item.image && (
-          <Image
-            source={{ uri: item.image }}
-            style={{ height: 75, width: 75 }}
-          />
-        )) ||
-        null
-      }
-    />
-  );
-
-  return (
-    <>
-      <DrawerHeader name="Graphs" />
-      <Page term={term} search={search}>
-        {bests?.length === 0 ? (
-          <List.Item
-            title="No exercises yet"
-            description="Once sets have been added, this will highlight your personal bests."
-          />
-        ) : (
-          <FlatList
-            style={{ flex: 1 }}
-            renderItem={renderItem}
-            data={bests}
-            onEndReached={next}
-          />
-        )}
-      </Page>
-    </>
-  );
-}

GraphsPage.tsx

@@ -1,23 +0,0 @@
-import { createStackNavigator } from "@react-navigation/stack";
-import GraphsList from "./GraphsList";
-import GymSet from "./gym-set";
-import ViewGraph from "./ViewGraph";
-
-const Stack = createStackNavigator<GraphsPageParams>();
-export type GraphsPageParams = {
-  GraphsList: {};
-  ViewGraph: {
-    best: GymSet;
-  };
-};
-
-export default function GraphsPage() {
-  return (
-    <Stack.Navigator
-      screenOptions={{ headerShown: false, animationEnabled: false }}
-    >
-      <Stack.Screen name="GraphsList" component={GraphsList} />
-      <Stack.Screen name="ViewGraph" component={ViewGraph} />
-    </Stack.Navigator>
-  );
-}

HomePage.tsx

@@ -1,19 +1,18 @@
-import { createStackNavigator } from "@react-navigation/stack";
-import EditSet from "./EditSet";
-import EditSets from "./EditSets";
-import { HomePageParams } from "./home-page-params";
-import SetList from "./SetList";
+import {createStackNavigator} from '@react-navigation/stack'
+import EditSet from './EditSet'
+import EditSets from './EditSets'
+import {HomePageParams} from './home-page-params'
+import SetList from './SetList'
 
-const Stack = createStackNavigator<HomePageParams>();
+const Stack = createStackNavigator<HomePageParams>()
 
 export default function HomePage() {
   return (
     <Stack.Navigator
-      screenOptions={{ headerShown: false, animationEnabled: false }}
-    >
+      screenOptions={{headerShown: false, animationEnabled: false}}>
       <Stack.Screen name="Sets" component={SetList} />
       <Stack.Screen name="EditSet" component={EditSet} />
       <Stack.Screen name="EditSets" component={EditSets} />
     </Stack.Navigator>
-  );
+  )
 }

ListMenu.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
-import { Divider, IconButton, Menu } from "react-native-paper";
-import ConfirmDialog from "./ConfirmDialog";
+import {useState} from 'react'
+import {Divider, IconButton, Menu} from 'react-native-paper'
+import ConfirmDialog from './ConfirmDialog'
+import useDark from './use-dark'
 
 export default function ListMenu({
   onEdit,
@@ -10,79 +11,84 @@ export default function ListMenu({
   onSelect,
   ids,
 }: {
-  onEdit: () => void;
-  onCopy: () => void;
-  onClear: () => void;
-  onDelete: () => void;
-  onSelect: () => void;
-  ids?: number[];
+  onEdit: () => void
+  onCopy: () => void
+  onClear: () => void
+  onDelete: () => void
+  onSelect: () => void
+  ids?: number[]
 }) {
-  const [showMenu, setShowMenu] = useState(false);
-  const [showRemove, setShowRemove] = useState(false);
+  const [showMenu, setShowMenu] = useState(false)
+  const [showRemove, setShowRemove] = useState(false)
+  const dark = useDark()
 
   const edit = () => {
-    setShowMenu(false);
-    onEdit();
-  };
+    setShowMenu(false)
+    onEdit()
+  }
 
   const copy = () => {
-    setShowMenu(false);
-    onCopy();
-  };
+    setShowMenu(false)
+    onCopy()
+  }
 
   const clear = () => {
-    setShowMenu(false);
-    onClear();
-  };
+    setShowMenu(false)
+    onClear()
+  }
 
   const remove = () => {
-    setShowMenu(false);
-    setShowRemove(false);
-    onDelete();
-  };
+    setShowMenu(false)
+    setShowRemove(false)
+    onDelete()
+  }
 
   const select = () => {
-    onSelect();
-  };
+    onSelect()
+  }
 
   return (
     <Menu
       visible={showMenu}
       onDismiss={() => setShowMenu(false)}
-      anchor={<IconButton onPress={() => setShowMenu(true)} icon="more-vert" />}
-    >
-      <Menu.Item leadingIcon="done-all" title="Select all" onPress={select} />
+      anchor={
+        <IconButton
+          color={dark ? 'white' : 'white'}
+          onPress={() => setShowMenu(true)}
+          icon="more-vert"
+        />
+      }>
+      <Menu.Item icon="done-all" title="Select all" onPress={select} />
       <Menu.Item
-        leadingIcon="clear"
+        icon="clear"
         title="Clear"
         onPress={clear}
         disabled={ids?.length === 0}
       />
       <Menu.Item
-        leadingIcon="edit"
+        icon="edit"
         title="Edit"
         onPress={edit}
         disabled={ids?.length === 0}
       />
       <Menu.Item
-        leadingIcon="content-copy"
+        icon="content-copy"
         title="Copy"
         onPress={copy}
         disabled={ids?.length === 0}
       />
       <Divider />
       <Menu.Item
-        leadingIcon="delete"
+        icon="delete"
         onPress={() => setShowRemove(true)}
         title="Delete"
       />
       <ConfirmDialog
-        title={ids?.length === 0 ? "Delete all" : "Delete selected"}
+        title={ids?.length === 0 ? 'Delete all' : 'Delete selected'}
         show={showRemove}
         setShow={setShowRemove}
         onOk={remove}
-        onCancel={() => setShowMenu(false)}
-      >
+        onCancel={() => setShowMenu(false)}>
         {ids?.length === 0 ? (
           <>This irreversibly deletes records from the app. Are you sure?</>
         ) : (
@@ -90,5 +96,5 @@ export default function ListMenu({
         )}
       </ConfirmDialog>
     </Menu>
-  );
+  )
 }

Page.tsx

@@ -1,7 +1,7 @@
-import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
-import { Searchbar } from "react-native-paper";
-import AppFab from "./AppFab";
-import { PADDING } from "./constants";
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {Searchbar} from 'react-native-paper'
+import AppFab from './AppFab'
+import {PADDING} from './constants'
 
 export default function Page({
   onAdd,
@@ -10,11 +10,11 @@ export default function Page({
   search,
   style,
 }: {
-  children: JSX.Element | JSX.Element[];
-  onAdd?: () => void;
-  term: string;
-  search: (value: string) => void;
-  style?: StyleProp<ViewStyle>;
+  children: JSX.Element | JSX.Element[]
+  onAdd?: () => void
+  term: string
+  search: (value: string) => void
+  style?: StyleProp<ViewStyle>
 }) {
   return (
     <View style={[styles.view, style]}>
@@ -28,7 +28,7 @@ export default function Page({
       {children}
       {onAdd && <AppFab onPress={onAdd} />}
     </View>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
@@ -36,4 +36,4 @@ const styles = StyleSheet.create({
     padding: PADDING,
     flexGrow: 1,
   },
-});
+})

PlanItem.tsx

@@ -2,98 +2,83 @@ import {
   NavigationProp,
   useFocusEffect,
   useNavigation,
-} from "@react-navigation/native";
-import { useCallback, useMemo, useState } from "react";
-import { Text } from "react-native";
-import { List } from "react-native-paper";
-import { DARK_RIPPLE, LIGHT_RIPPLE } from "./constants";
-import { setRepo } from "./db";
-import { defaultSet } from "./gym-set";
-import { Plan } from "./plan";
-import { PlanPageParams } from "./plan-page-params";
-import { DAYS } from "./time";
-import useDark from "./use-dark";
+} from '@react-navigation/native'
+import {useCallback, useMemo, useState} from 'react'
+import {Text} from 'react-native'
+import {List} from 'react-native-paper'
+import {getLast} from './best.service'
+import {DARK_RIPPLE, LIGHT_RIPPLE} from './constants'
+import {defaultSet} from './gym-set'
+import {Plan} from './plan'
+import {PlanPageParams} from './plan-page-params'
+import {DAYS} from './time'
+import useDark from './use-dark'
 
 export default function PlanItem({
   item,
   setIds,
   ids,
 }: {
-  item: Plan;
-  ids: number[];
-  setIds: (value: number[]) => void;
+  item: Plan
+  ids: number[]
+  setIds: (value: number[]) => void
 }) {
-  const [today, setToday] = useState<string>();
-  const dark = useDark();
-  const days = useMemo(() => item.days.split(","), [item.days]);
-  const navigation = useNavigation<NavigationProp<PlanPageParams>>();
+  const [today, setToday] = useState<string>()
+  const dark = useDark()
+  const days = useMemo(() => item.days.split(','), [item.days])
+  const navigation = useNavigation<NavigationProp<PlanPageParams>>()
 
   useFocusEffect(
     useCallback(() => {
-      const newToday = DAYS[new Date().getDay()];
-      setToday(newToday);
-    }, [])
-  );
+      const newToday = DAYS[new Date().getDay()]
+      setToday(newToday)
+    }, []),
+  )
 
   const start = useCallback(async () => {
-    const workout = item.workouts.split(",")[0];
-    let first = await setRepo.findOne({
-      where: { name: workout },
-      order: { created: "desc" },
-    });
-    if (!first) first = { ...defaultSet, name: workout };
-    delete first.id;
-    if (ids.length === 0) {
-      return navigation.navigate("StartPlan", { plan: item, first });
-    }
-    const removing = ids.find((id) => id === item.id);
-    if (removing) setIds(ids.filter((id) => id !== item.id));
-    else setIds([...ids, item.id]);
-  }, [ids, setIds, item, navigation]);
+    const workout = item.workouts.split(',')[0]
+    let first = await getLast(workout)
+    if (!first) first = {...defaultSet, name: workout}
+    delete first.id
+    if (ids.length === 0)
+      return navigation.navigate('StartPlan', {plan: item, first})
+    const removing = ids.find(id => id === item.id)
+    if (removing) setIds(ids.filter(id => id !== item.id))
+    else setIds([...ids, item.id])
+  }, [ids, setIds, item, navigation])
 
   const longPress = useCallback(() => {
-    if (ids.length > 0) return;
-    setIds([item.id]);
-  }, [ids.length, item.id, setIds]);
+    if (ids.length > 0) return
+    setIds([item.id])
+  }, [ids.length, item.id, setIds])
 
-  const currentDays = days.map((day, index) => (
+  const title = useMemo(
+    () =>
+      days.map((day, index) => (
         <Text key={day}>
           {day === today ? (
-        <Text
-          style={{
-            fontWeight: "bold",
-            textDecorationLine: "underline",
-          }}
-        >
+            <Text style={{fontWeight: 'bold', textDecorationLine: 'underline'}}>
               {day}
             </Text>
           ) : (
             day
           )}
-      {index === days.length - 1 ? "" : ", "}
+          {index === days.length - 1 ? '' : ', '}
         </Text>
-  ));
-
-  const title = useMemo(
-    () =>
-      item.title ? (
-        <Text style={{ fontWeight: "bold" }}>{item.title}</Text>
-      ) : (
-        currentDays
-      ),
-    [item.title, currentDays]
-  );
+      )),
+    [days, today],
+  )
 
   const description = useMemo(
-    () => (item.title ? currentDays : item.workouts.replace(/,/g, ", ")),
-    [item.title, currentDays, item.workouts]
-  );
+    () => item.workouts.replace(/,/g, ', '),
+    [item.workouts],
+  )
 
   const backgroundColor = useMemo(() => {
-    if (!ids.includes(item.id)) return;
-    if (dark) return DARK_RIPPLE;
-    return LIGHT_RIPPLE;
-  }, [dark, ids, item.id]);
+    if (!ids.includes(item.id)) return
+    if (dark) return DARK_RIPPLE
+    return LIGHT_RIPPLE
+  }, [dark, ids, item.id])
 
   return (
     <List.Item
@@ -103,5 +88,5 @@ export default function PlanItem({
       onLongPress={longPress}
       style={{backgroundColor}}
     />
-  );
+  )
 }

PlanList.tsx

@@ -2,95 +2,89 @@ import {
   NavigationProp,
   useFocusEffect,
   useNavigation,
-} from "@react-navigation/native";
-import { useCallback, useState } from "react";
-import { FlatList } from "react-native";
-import { List } from "react-native-paper";
-import { Like } from "typeorm";
-import { planRepo } from "./db";
-import DrawerHeader from "./DrawerHeader";
-import ListMenu from "./ListMenu";
-import Page from "./Page";
-import { Plan } from "./plan";
-import { PlanPageParams } from "./plan-page-params";
-import PlanItem from "./PlanItem";
+} from '@react-navigation/native'
+import {useCallback, useState} from 'react'
+import {FlatList} from 'react-native'
+import {List} from 'react-native-paper'
+import {Like} from 'typeorm'
+import {planRepo} from './db'
+import DrawerHeader from './DrawerHeader'
+import ListMenu from './ListMenu'
+import Page from './Page'
+import {Plan} from './plan'
+import {PlanPageParams} from './plan-page-params'
+import PlanItem from './PlanItem'
 
 export default function PlanList() {
-  const [term, setTerm] = useState("");
-  const [plans, setPlans] = useState<Plan[]>();
-  const [ids, setIds] = useState<number[]>([]);
-  const navigation = useNavigation<NavigationProp<PlanPageParams>>();
+  const [term, setTerm] = useState('')
+  const [plans, setPlans] = useState<Plan[]>()
+  const [ids, setIds] = useState<number[]>([])
+  const navigation = useNavigation<NavigationProp<PlanPageParams>>()
 
   const refresh = useCallback(async (value: string) => {
     planRepo
       .find({
-        where: [
-          { title: Like(`%${value.trim()}%`) },
-          { days: Like(`%${value.trim()}%`) },
-          { workouts: Like(`%${value.trim()}%`) },
-        ],
+        where: [{days: Like(`%${value}%`)}, {workouts: Like(`%${value}%`)}],
       })
-      .then(setPlans);
-  }, []);
+      .then(setPlans)
+  }, [])
 
   useFocusEffect(
     useCallback(() => {
-      refresh(term);
-    }, [refresh, term])
-  );
+      refresh(term)
+    }, [refresh, term]),
+  )
 
   const search = useCallback(
     (value: string) => {
-      setTerm(value);
-      refresh(value);
+      setTerm(value)
+      refresh(value)
     },
-    [refresh]
-  );
+    [refresh],
+  )
 
   const renderItem = useCallback(
     ({item}: {item: Plan}) => (
       <PlanItem ids={ids} setIds={setIds} item={item} key={item.id} />
     ),
-    [ids]
-  );
+    [ids],
+  )
 
   const onAdd = () =>
-    navigation.navigate("EditPlan", {
-      plan: { title: "", days: "", workouts: "" },
-    });
+    navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}})
 
   const edit = useCallback(async () => {
-    const plan = await planRepo.findOne({ where: { id: ids.pop() } });
-    navigation.navigate("EditPlan", { plan });
-    setIds([]);
-  }, [ids, navigation]);
+    const plan = await planRepo.findOne({where: {id: ids.pop()}})
+    navigation.navigate('EditPlan', {plan})
+    setIds([])
+  }, [ids, navigation])
 
   const copy = useCallback(async () => {
     const plan = await planRepo.findOne({
       where: {id: ids.pop()},
-    });
-    delete plan.id;
-    navigation.navigate("EditPlan", { plan });
-    setIds([]);
-  }, [ids, navigation]);
+    })
+    delete plan.id
+    navigation.navigate('EditPlan', {plan})
+    setIds([])
+  }, [ids, navigation])
 
   const clear = useCallback(() => {
-    setIds([]);
-  }, []);
+    setIds([])
+  }, [])
 
   const remove = useCallback(async () => {
-    await planRepo.delete(ids.length > 0 ? ids : {});
-    await refresh(term);
-    setIds([]);
-  }, [ids, refresh, term]);
+    await planRepo.delete(ids.length > 0 ? ids : {})
+    await refresh(term)
+    setIds([])
+  }, [ids, refresh, term])
 
   const select = useCallback(() => {
-    setIds(plans.map((plan) => plan.id));
-  }, [plans]);
+    setIds(plans.map(plan => plan.id))
+  }, [plans])
 
   return (
     <>
-      <DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : "Plans"}>
+      <DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : 'Plans'}>
         <ListMenu
           onClear={clear}
           onCopy={copy}
@@ -111,10 +105,10 @@ export default function PlanList() {
             style={{flex: 1}}
             data={plans}
             renderItem={renderItem}
-            keyExtractor={(set) => set.id?.toString() || ""}
+            keyExtractor={set => set.id?.toString() || ''}
           />
         )}
       </Page>
     </>
-  );
+  )
 }

PlanPage.tsx

@@ -1,21 +1,20 @@
-import { createStackNavigator } from "@react-navigation/stack";
-import EditPlan from "./EditPlan";
-import EditSet from "./EditSet";
-import { PlanPageParams } from "./plan-page-params";
-import PlanList from "./PlanList";
-import StartPlan from "./StartPlan";
+import {createStackNavigator} from '@react-navigation/stack'
+import EditPlan from './EditPlan'
+import EditSet from './EditSet'
+import {PlanPageParams} from './plan-page-params'
+import PlanList from './PlanList'
+import StartPlan from './StartPlan'
 
-const Stack = createStackNavigator<PlanPageParams>();
+const Stack = createStackNavigator<PlanPageParams>()
 
 export default function PlanPage() {
   return (
     <Stack.Navigator
-      screenOptions={{ headerShown: false, animationEnabled: false }}
-    >
+      screenOptions={{headerShown: false, animationEnabled: false}}>
       <Stack.Screen name="PlanList" component={PlanList} />
       <Stack.Screen name="EditPlan" component={EditPlan} />
       <Stack.Screen name="StartPlan" component={StartPlan} />
       <Stack.Screen name="EditSet" component={EditSet} />
     </Stack.Navigator>
-  );
+  )
 }

Routes.tsx

@@ -1,27 +1,26 @@
-import { createDrawerNavigator } from "@react-navigation/drawer";
-import { IconButton } from "react-native-paper";
-import GraphsPage from "./GraphsPage";
-import { DrawerParamList } from "./drawer-param-list";
-import HomePage from "./HomePage";
-import PlanPage from "./PlanPage";
-import SettingsPage from "./SettingsPage";
-import TimerPage from "./TimerPage";
-import useDark from "./use-dark";
-import WorkoutsPage from "./WorkoutsPage";
+import {createDrawerNavigator} from '@react-navigation/drawer'
+import {IconButton} from 'react-native-paper'
+import BestPage from './BestPage'
+import {DrawerParamList} from './drawer-param-list'
+import HomePage from './HomePage'
+import PlanPage from './PlanPage'
+import SettingsPage from './SettingsPage'
+import TimerPage from './TimerPage'
+import useDark from './use-dark'
+import WorkoutsPage from './WorkoutsPage'
 
-const Drawer = createDrawerNavigator<DrawerParamList>();
+const Drawer = createDrawerNavigator<DrawerParamList>()
 
 export default function Routes() {
-  const dark = useDark();
+  const dark = useDark()
 
   return (
     <Drawer.Navigator
       screenOptions={{
-        headerTintColor: dark ? "white" : "black",
+        headerTintColor: dark ? 'white' : 'black',
         swipeEdgeWidth: 1000,
         headerShown: false,
-      }}
-    >
+      }}>
       <Drawer.Screen
         name="Home"
         component={HomePage}
@@ -33,8 +32,8 @@ export default function Routes() {
         options={{drawerIcon: () => <IconButton icon="event" />}}
       />
       <Drawer.Screen
-        name="Graphs"
-        component={GraphsPage}
+        name="Best"
+        component={BestPage}
         options={{drawerIcon: () => <IconButton icon="insights" />}}
       />
       <Drawer.Screen
@@ -53,5 +52,5 @@ export default function Routes() {
         options={{drawerIcon: () => <IconButton icon="settings" />}}
       />
     </Drawer.Navigator>
-  );
+  )
 }

Select.tsx

@@ -1,12 +1,12 @@
-import React, { useCallback, useMemo, useState } from "react";
-import { View } from "react-native";
-import { Button, Menu, Subheading, useTheme } from "react-native-paper";
-import { ITEM_PADDING } from "./constants";
+import React, {useCallback, useMemo, useState} from 'react'
+import {View} from 'react-native'
+import {Button, Menu, Subheading, useTheme} from 'react-native-paper'
+import {ITEM_PADDING} from './constants'
 
 export interface Item {
-  value: string;
-  label: string;
-  color?: string;
+  value: string
+  label: string
+  color?: string
 }
 
 function Select({
@@ -15,35 +15,34 @@ function Select({
   items,
   label,
 }: {
-  value: string;
-  onChange: (value: string) => void;
-  items: Item[];
-  label?: string;
+  value: string
+  onChange: (value: string) => void
+  items: Item[]
+  label?: string
 }) {
-  const [show, setShow] = useState(false);
-  const { colors } = useTheme();
+  const [show, setShow] = useState(false)
+  const {colors} = useTheme()
 
   const selected = useMemo(
-    () => items.find((item) => item.value === value) || items[0],
-    [items, value]
-  );
+    () => items.find(item => item.value === value) || items[0],
+    [items, value],
+  )
 
   const handlePress = useCallback(
     (newValue: string) => {
-      onChange(newValue);
-      setShow(false);
+      onChange(newValue)
+      setShow(false)
     },
-    [onChange]
-  );
+    [onChange],
+  )
 
   return (
     <View
       style={{
-        flexDirection: "row",
-        alignItems: "center",
+        flexDirection: 'row',
+        alignItems: 'center',
         paddingLeft: ITEM_PADDING,
-      }}
-    >
+      }}>
       {label && <Subheading style={{width: 100}}>{label}</Subheading>}
       <Menu
         visible={show}
@@ -52,24 +51,22 @@ function Select({
           <Button
             onPress={() => setShow(true)}
             style={{
-              alignSelf: "flex-start",
-            }}
-          >
+              alignSelf: 'flex-start',
+            }}>
             {selected?.label}
           </Button>
-        }
-      >
-        {items.map((item) => (
+        }>
+        {items.map(item => (
           <Menu.Item
-            titleStyle={{ color: item.color || colors.onSurface }}
             key={item.value}
+            titleStyle={{color: item.color || colors.text}}
             title={item.label}
             onPress={() => handlePress(item.value)}
           />
         ))}
       </Menu>
     </View>
-  );
+  )
 }
 
-export default React.memo(Select);
+export default React.memo(Select)

SetItem.tsx

@@ -1,13 +1,13 @@
-import { NavigationProp, useNavigation } from "@react-navigation/native";
-import { format } from "date-fns";
-import { useCallback, useMemo } from "react";
-import { Image } from "react-native";
-import { List, Text } from "react-native-paper";
-import { DARK_RIPPLE, LIGHT_RIPPLE } from "./constants";
-import GymSet from "./gym-set";
-import { HomePageParams } from "./home-page-params";
-import Settings from "./settings";
-import useDark from "./use-dark";
+import {NavigationProp, useNavigation} from '@react-navigation/native'
+import {format} from 'date-fns'
+import {useCallback, useMemo} from 'react'
+import {Image} from 'react-native'
+import {List, Text} from 'react-native-paper'
+import {DARK_RIPPLE, LIGHT_RIPPLE} from './constants'
+import GymSet from './gym-set'
+import {HomePageParams} from './home-page-params'
+import Settings from './settings'
+import useDark from './use-dark'
 
 export default function SetItem({
   item,
@@ -15,63 +15,61 @@ export default function SetItem({
   ids,
   setIds,
 }: {
-  item: GymSet;
-  onRemove: () => void;
-  settings: Settings;
-  ids: number[];
-  setIds: (value: number[]) => void;
+  item: GymSet
+  onRemove: () => void
+  settings: Settings
+  ids: number[]
+  setIds: (value: number[]) => void
 }) {
-  const dark = useDark();
-  const navigation = useNavigation<NavigationProp<HomePageParams>>();
+  const dark = useDark()
+  const navigation = useNavigation<NavigationProp<HomePageParams>>()
 
   const longPress = useCallback(() => {
-    if (ids.length > 0) return;
-    setIds([item.id]);
-  }, [ids.length, item.id, setIds]);
+    if (ids.length > 0) return
+    setIds([item.id])
+  }, [ids.length, item.id, setIds])
 
   const press = useCallback(() => {
-    if (ids.length === 0) return navigation.navigate("EditSet", { set: item });
-    const removing = ids.find((id) => id === item.id);
-    if (removing) setIds(ids.filter((id) => id !== item.id));
-    else setIds([...ids, item.id]);
-  }, [ids, item, navigation, setIds]);
+    if (ids.length === 0) return navigation.navigate('EditSet', {set: item})
+    const removing = ids.find(id => id === item.id)
+    if (removing) setIds(ids.filter(id => id !== item.id))
+    else setIds([...ids, item.id])
+  }, [ids, item, navigation, setIds])
 
   const backgroundColor = useMemo(() => {
-    if (!ids.includes(item.id)) return;
-    if (dark) return DARK_RIPPLE;
-    return LIGHT_RIPPLE;
-  }, [dark, ids, item.id]);
-
-  const left = useCallback(() => {
-    if (!settings.images || !item.image) return null;
-    return (
-      <Image source={{ uri: item.image }} style={{ height: 75, width: 75 }} />
-    );
-  }, [item.image, settings.images]);
-
-  const right = useCallback(() => {
-    if (!settings.showDate) return null;
-    return (
-      <Text
-        style={{
-          alignSelf: "center",
-          color: dark ? "#909090ff" : "#717171ff",
-        }}
-      >
-        {format(new Date(item.created), settings.date || "P")}
-      </Text>
-    );
-  }, [settings.showDate, item.created, settings.date, dark]);
+    if (!ids.includes(item.id)) return
+    if (dark) return DARK_RIPPLE
+    return LIGHT_RIPPLE
+  }, [dark, ids, item.id])
 
   return (
+    <>
       <List.Item
         onPress={press}
         title={item.name}
-      description={`${item.reps} x ${item.weight}${item.unit || "kg"}`}
+        description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
         onLongPress={longPress}
         style={{backgroundColor}}
-      left={left}
-      right={right}
-    />
-  );
+        left={() =>
+          settings.images &&
+          item.image && (
+            <Image source={{uri: item.image}} style={{height: 75, width: 75}} />
+          )
+        }
+        right={() => (
+          <>
+            {settings.showDate && (
+              <Text
+                style={{
+                  alignSelf: 'center',
+                  color: dark ? '#909090ff' : '#717171ff',
+                }}>
+                {format(new Date(item.created), settings.date || 'P')}
+              </Text>
+            )}
+          </>
+        )}
+      />
+    </>
+  )
 }

SetList.tsx

@@ -2,49 +2,50 @@ import {
   NavigationProp,
   useFocusEffect,
   useNavigation,
-} from "@react-navigation/native";
-import { useCallback, useState } from "react";
-import { FlatList } from "react-native";
-import { List } from "react-native-paper";
-import { Like } from "typeorm";
-import { LIMIT } from "./constants";
-import { getNow, setRepo, settingsRepo } from "./db";
-import DrawerHeader from "./DrawerHeader";
-import GymSet, { defaultSet } from "./gym-set";
-import { HomePageParams } from "./home-page-params";
-import ListMenu from "./ListMenu";
-import Page from "./Page";
-import SetItem from "./SetItem";
-import Settings from "./settings";
+} from '@react-navigation/native'
+import {useCallback, useState} from 'react'
+import {FlatList} from 'react-native'
+import {List} from 'react-native-paper'
+import {Like} from 'typeorm'
+import {getNow, setRepo, settingsRepo} from './db'
+import DrawerHeader from './DrawerHeader'
+import GymSet, {defaultSet} from './gym-set'
+import {HomePageParams} from './home-page-params'
+import ListMenu from './ListMenu'
+import Page from './Page'
+import SetItem from './SetItem'
+import Settings from './settings'
+
+const limit = 15
 
 export default function SetList() {
-  const [sets, setSets] = useState<GymSet[]>([]);
-  const [offset, setOffset] = useState(0);
-  const [term, setTerm] = useState("");
-  const [end, setEnd] = useState(false);
-  const [settings, setSettings] = useState<Settings>();
-  const [ids, setIds] = useState<number[]>([]);
-  const navigation = useNavigation<NavigationProp<HomePageParams>>();
+  const [sets, setSets] = useState<GymSet[]>([])
+  const [offset, setOffset] = useState(0)
+  const [term, setTerm] = useState('')
+  const [end, setEnd] = useState(false)
+  const [settings, setSettings] = useState<Settings>()
+  const [ids, setIds] = useState<number[]>([])
+  const navigation = useNavigation<NavigationProp<HomePageParams>>()
 
   const refresh = useCallback(async (value: string) => {
     const newSets = await setRepo.find({
-      where: { name: Like(`%${value.trim()}%`), hidden: 0 as any },
-      take: LIMIT,
+      where: {name: Like(`%${value}%`), hidden: 0 as any},
+      take: limit,
       skip: 0,
-      order: { created: "DESC" },
-    });
-    console.log(`${SetList.name}.refresh:`, { value });
-    setSets(newSets);
-    setOffset(0);
-    setEnd(false);
-  }, []);
+      order: {created: 'DESC'},
+    })
+    console.log(`${SetList.name}.refresh:`, {value, limit})
+    setSets(newSets)
+    setOffset(0)
+    setEnd(false)
+  }, [])
 
   useFocusEffect(
     useCallback(() => {
-      refresh(term);
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-    }, [refresh, term])
-  );
+      refresh(term)
+      settingsRepo.findOne({where: {}}).then(setSettings)
+    }, [refresh, term]),
+  )
 
   const renderItem = useCallback(
     ({item}: {item: GymSet}) => (
@@ -57,75 +58,75 @@ export default function SetList() {
         setIds={setIds}
       />
     ),
-    [refresh, term, settings, ids]
-  );
+    [refresh, term, settings, ids],
+  )
 
   const next = useCallback(async () => {
-    if (end) return;
-    const newOffset = offset + LIMIT;
-    console.log(`${SetList.name}.next:`, { offset, newOffset, term });
+    if (end) return
+    const newOffset = offset + limit
+    console.log(`${SetList.name}.next:`, {offset, newOffset, term})
     const newSets = await setRepo.find({
       where: {name: Like(`%${term}%`), hidden: 0 as any},
-      take: LIMIT,
+      take: limit,
       skip: newOffset,
-      order: { created: "DESC" },
-    });
-    if (newSets.length === 0) return setEnd(true);
-    if (!sets) return;
-    setSets([...sets, ...newSets]);
-    if (newSets.length < LIMIT) return setEnd(true);
-    setOffset(newOffset);
-  }, [term, end, offset, sets]);
+      order: {created: 'DESC'},
+    })
+    if (newSets.length === 0) return setEnd(true)
+    if (!sets) return
+    setSets([...sets, ...newSets])
+    if (newSets.length < limit) return setEnd(true)
+    setOffset(newOffset)
+  }, [term, end, offset, sets])
 
   const onAdd = useCallback(async () => {
-    const now = await getNow();
-    let set = sets[0];
-    if (!set) set = { ...defaultSet };
-    set.created = now;
-    delete set.id;
-    navigation.navigate("EditSet", { set });
-  }, [navigation, sets]);
+    const now = await getNow()
+    let set = sets[0]
+    if (!set) set = {...defaultSet}
+    set.created = now
+    delete set.id
+    navigation.navigate('EditSet', {set})
+  }, [navigation, sets])
 
   const search = useCallback(
     (value: string) => {
-      setTerm(value);
-      refresh(value);
+      setTerm(value)
+      refresh(value)
     },
-    [refresh]
-  );
+    [refresh],
+  )
 
   const edit = useCallback(() => {
-    navigation.navigate("EditSets", { ids });
-    setIds([]);
-  }, [ids, navigation]);
+    navigation.navigate('EditSets', {ids})
+    setIds([])
+  }, [ids, navigation])
 
   const copy = useCallback(async () => {
     const set = await setRepo.findOne({
       where: {id: ids.pop()},
-    });
-    delete set.id;
-    delete set.created;
-    navigation.navigate("EditSet", { set });
-    setIds([]);
-  }, [ids, navigation]);
+    })
+    delete set.id
+    delete set.created
+    navigation.navigate('EditSet', {set})
+    setIds([])
+  }, [ids, navigation])
 
   const clear = useCallback(() => {
-    setIds([]);
-  }, []);
+    setIds([])
+  }, [])
 
   const remove = useCallback(async () => {
-    setIds([]);
-    await setRepo.delete(ids.length > 0 ? ids : {});
-    await refresh(term);
-  }, [ids, refresh, term]);
+    setIds([])
+    await setRepo.delete(ids.length > 0 ? ids : {})
+    await refresh(term)
+  }, [ids, refresh, term])
 
   const select = useCallback(() => {
-    setIds(sets.map((set) => set.id));
-  }, [sets]);
+    setIds(sets.map(set => set.id))
+  }, [sets])
 
   return (
     <>
-      <DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : "Home"}>
+      <DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : 'Home'}>
         <ListMenu
           onClear={clear}
           onCopy={copy}
@@ -154,5 +155,5 @@ export default function SetList() {
         )}
       </Page>
     </>
-  );
+  )
 }

SettingButton.tsx

@@ -1,33 +0,0 @@
-import { View } from "react-native";
-import { Button, Subheading } from "react-native-paper";
-import { ITEM_PADDING } from "./constants";
-
-export default function SettingButton({
-  name: text,
-  label,
-  onPress,
-}: {
-  name: string;
-  label?: string;
-  onPress: () => void;
-}) {
-  if (label) {
-    return (
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          paddingLeft: ITEM_PADDING,
-        }}
-      >
-        <Subheading style={{ width: 100 }}>{label}</Subheading>
-        <Button onPress={onPress}>{text}</Button>
-      </View>
-    );
-  }
-  return (
-    <Button style={{ alignSelf: "flex-start" }} onPress={onPress}>
-      {text}
-    </Button>
-  );
-}

SettingsPage.tsx

@@ -1,75 +1,52 @@
-import { NavigationProp, useNavigation } from "@react-navigation/native";
-import { format } from "date-fns";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import { NativeModules, ScrollView } from "react-native";
-import DocumentPicker from "react-native-document-picker";
-import { Dirs, FileSystem } from "react-native-file-access";
-import ConfirmDialog from "./ConfirmDialog";
-import { MARGIN } from "./constants";
-import { AppDataSource } from "./data-source";
-import { setRepo, settingsRepo } from "./db";
-import { DrawerParamList } from "./drawer-param-list";
-import DrawerHeader from "./DrawerHeader";
-import Input from "./input";
-import { darkOptions, lightOptions, themeOptions } from "./options";
-import Page from "./Page";
-import Select from "./Select";
-import SettingButton from "./SettingButton";
-import Settings from "./settings";
-import Switch from "./Switch";
-import { toast } from "./toast";
-import { useTheme } from "./use-theme";
+import {NavigationProp, useNavigation} from '@react-navigation/native'
+import {format} from 'date-fns'
+import {useCallback, useEffect, useMemo, useState} from 'react'
+import {useForm} from 'react-hook-form'
+import {NativeModules, ScrollView, View} from 'react-native'
+import DocumentPicker from 'react-native-document-picker'
+import {Dirs, FileSystem} from 'react-native-file-access'
+import {Button, Subheading} from 'react-native-paper'
+import ConfirmDialog from './ConfirmDialog'
+import {ITEM_PADDING, MARGIN} from './constants'
+import {AppDataSource} from './data-source'
+import {setRepo, settingsRepo} from './db'
+import {DrawerParamList} from './drawer-param-list'
+import DrawerHeader from './DrawerHeader'
+import Input from './input'
+import {darkOptions, lightOptions, themeOptions} from './options'
+import Page from './Page'
+import Select from './Select'
+import Settings from './settings'
+import Switch from './Switch'
+import {toast} from './toast'
+import {useTheme} from './use-theme'
 
-const twelveHours = [
-  "dd/LL/yyyy",
-  "dd/LL/yyyy, p",
-  "ccc p",
-  "p",
-  "yyyy-MM-d",
-  "yyyy-MM-d, p",
-  "yyyy.MM.d",
-];
-const twentyFours = [
-  "dd/LL/yyyy",
-  "dd/LL/yyyy, k:m",
-  "ccc k:m",
-  "k:m",
-  "yyyy-MM-d",
-  "yyyy-MM-d, k:m",
-  "yyyy.MM.d",
-];
+const twelveHours = ['P', 'Pp', 'ccc p', 'p', 'yyyy-MM-d', 'yyyy.MM.d']
+const twentyFours = ['P', 'P, k:m', 'ccc k:m', 'k:m', 'yyyy-MM-d', 'yyyy.MM.d']
 
 export default function SettingsPage() {
-  const [ignoring, setIgnoring] = useState(false);
-  const [term, setTerm] = useState("");
-  const [formatOptions, setFormatOptions] = useState<string[]>(twelveHours);
-  const [importing, setImporting] = useState(false);
-  const [deleting, setDeleting] = useState(false);
-  const { reset } = useNavigation<NavigationProp<DrawerParamList>>();
+  const [ignoring, setIgnoring] = useState(false)
+  const [term, setTerm] = useState('')
+  const [formatOptions, setFormatOptions] = useState<string[]>(twelveHours)
+  const [importing, setImporting] = useState(false)
+  const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
 
   const {watch, setValue} = useForm<Settings>({
     defaultValues: () => settingsRepo.findOne({where: {}}),
-  });
-  const settings = watch();
+  })
+  const settings = watch()
 
-  const {
-    theme,
-    setTheme,
-    lightColor,
-    setLightColor,
-    darkColor,
-    setDarkColor,
-  } = useTheme();
+  const {theme, setTheme, lightColor, setLightColor, darkColor, setDarkColor} =
+    useTheme()
 
   useEffect(() => {
-    NativeModules.SettingsModule.ignoringBattery(setIgnoring);
+    NativeModules.SettingsModule.ignoringBattery(setIgnoring)
     NativeModules.SettingsModule.is24().then((is24: boolean) => {
-      console.log(`${SettingsPage.name}.focus:`, { is24 });
-      if (is24) setFormatOptions(twentyFours);
-      else setFormatOptions(twelveHours);
-    });
-  }, []);
+      console.log(`${SettingsPage.name}.focus:`, {is24})
+      if (is24) setFormatOptions(twentyFours)
+      else setFormatOptions(twelveHours)
+    })
+  }, [])
 
   const update = useCallback((key: keyof Settings, value: unknown) => {
     return settingsRepo
@@ -77,244 +54,249 @@ export default function SettingsPage() {
       .update()
       .set({[key]: value})
       .printSql()
-      .execute();
-  }, []);
+      .execute()
+  }, [])
 
   const soundString = useMemo(() => {
-    if (!settings.sound) return null;
-    const split = settings.sound.split("/");
-    return split.pop();
-  }, [settings.sound]);
+    if (!settings.sound) return null
+    const split = settings.sound.split('/')
+    return split.pop()
+  }, [settings.sound])
 
   const changeSound = useCallback(async () => {
     const {fileCopyUri} = await DocumentPicker.pickSingle({
-      type: DocumentPicker.types.audio,
-      copyTo: "documentDirectory",
-    });
-    if (!fileCopyUri) return;
-    setValue("sound", fileCopyUri);
-    await update("sound", fileCopyUri);
-    toast("Sound will play after rest timers.");
-  }, [setValue, update]);
+      type: 'audio/*',
+      copyTo: 'documentDirectory',
+    })
+    if (!fileCopyUri) return
+    setValue('sound', fileCopyUri)
+    await update('sound', fileCopyUri)
+    toast('Sound will play after rest timers.')
+  }, [setValue, update])
 
   const switches: Input<boolean>[] = useMemo(
     () => [
-      { name: "Rest timers", value: settings.alarm, key: "alarm" },
-      { name: "Vibrate", value: settings.vibrate, key: "vibrate" },
-      { name: "Disable sound", value: settings.noSound, key: "noSound" },
-      { name: "Notifications", value: settings.notify, key: "notify" },
-      { name: "Show images", value: settings.images, key: "images" },
-      { name: "Show unit", value: settings.showUnit, key: "showUnit" },
-      { name: "Show steps", value: settings.steps, key: "steps" },
-      { name: "Show date", value: settings.showDate, key: "showDate" },
-      { name: "Automatic backup", value: settings.backup, key: "backup" },
+      {name: 'Rest timers', value: settings.alarm, key: 'alarm'},
+      {name: 'Vibrate', value: settings.vibrate, key: 'vibrate'},
+      {name: 'Disable sound', value: settings.noSound, key: 'noSound'},
+      {name: 'Notifications', value: settings.notify, key: 'notify'},
+      {name: 'Show images', value: settings.images, key: 'images'},
+      {name: 'Show unit', value: settings.showUnit, key: 'showUnit'},
+      {name: 'Show steps', value: settings.steps, key: 'steps'},
+      {name: 'Show date', value: settings.showDate, key: 'showDate'},
     ],
-    [settings]
-  );
+    [settings],
+  )
 
   const filter = useCallback(
     ({name}) => name.toLowerCase().includes(term.toLowerCase()),
-    [term]
-  );
+    [term],
+  )
 
   const changeBoolean = useCallback(
     async (key: keyof Settings, value: boolean) => {
-      setValue(key, value);
-      await update(key, value);
+      setValue(key, value)
+      await update(key, value)
       switch (key) {
-        case "alarm":
-          if (value) toast("Timers will now run after each set.");
-          else toast("Stopped timers running after each set.");
-          if (value && !ignoring) NativeModules.SettingsModule.ignoreBattery();
-          return;
-        case "vibrate":
-          if (value) toast("Alarms will now vibrate.");
-          else toast("Alarms will no longer vibrate.");
-          return;
-        case "notify":
-          if (value) toast("Show notifications for new records.");
-          else toast("Stopped notifications for new records.");
-          return;
-        case "images":
-          if (value) toast("Show images for sets.");
-          else toast("Hid images for sets.");
-          return;
-        case "showUnit":
-          if (value) toast("Show option to select unit for sets.");
-          else toast("Hid unit option for sets.");
-          return;
-        case "steps":
-          if (value) toast("Show steps for a workout.");
-          else toast("Hid steps for workouts.");
-          return;
-        case "showDate":
-          if (value) toast("Show date for sets.");
-          else toast("Hid date on sets.");
-          return;
-        case "noSound":
-          if (value) toast("Disable sound on rest timer alarms.");
-          else toast("Enabled sound for rest timer alarms.");
-          return;
-        case "backup":
-          if (value) {
-            const result = await DocumentPicker.pickDirectory();
-            toast("Backup database daily.");
-            NativeModules.BackupModule.start(result.uri);
-          } else {
-            toast("Stopped backing up daily");
-            NativeModules.BackupModule.stop();
-          }
-          return;
+        case 'alarm':
+          if (value) toast('Timers will now run after each set.')
+          else toast('Stopped timers running after each set.')
+          if (value && !ignoring) NativeModules.SettingsModule.ignoreBattery()
+          return
+        case 'vibrate':
+          if (value) toast('Alarms will now vibrate.')
+          else toast('Alarms will no longer vibrate.')
+          return
+        case 'notify':
+          if (value) toast('Show notifications for new records.')
+          else toast('Stopped notifications for new records.')
+          return
+        case 'images':
+          if (value) toast('Show images for sets.')
+          else toast('Hid images for sets.')
+          return
+        case 'showUnit':
+          if (value) toast('Show option to select unit for sets.')
+          else toast('Hid unit option for sets.')
+          return
+        case 'steps':
+          if (value) toast('Show steps for a workout.')
+          else toast('Hid steps for workouts.')
+          return
+        case 'showDate':
+          if (value) toast('Show date for sets.')
+          else toast('Hid date on sets.')
+          return
+        case 'noSound':
+          if (value) toast('Disable sound on rest timer alarms.')
+          else toast('Enabled sound for rest timer alarms.')
+          return
       }
     },
-    [ignoring, setValue, update]
-  );
+    [ignoring, setValue, update],
+  )
 
   const renderSwitch = useCallback(
     (item: Input<boolean>) => (
       <Switch
         key={item.name}
         value={item.value}
-        onChange={(value) => changeBoolean(item.key, value)}
+        onChange={value => changeBoolean(item.key, value)}
         title={item.name}
       />
     ),
-    [changeBoolean]
-  );
+    [changeBoolean],
+  )
 
   const switchesMarkup = useMemo(
-    () => switches.filter(filter).map((s) => renderSwitch(s)),
-    [filter, switches, renderSwitch]
-  );
+    () => switches.filter(filter).map(s => renderSwitch(s)),
+    [filter, switches, renderSwitch],
+  )
 
   const changeString = useCallback(
     async (key: keyof Settings, value: string) => {
-      setValue(key, value);
-      await update(key, value);
+      setValue(key, value)
+      await update(key, value)
       switch (key) {
-        case "date":
-          return toast("Changed date format");
-        case "darkColor":
-          setDarkColor(value);
-          return toast("Set primary color for dark mode.");
-        case "lightColor":
-          setLightColor(value);
-          return toast("Set primary color for light mode.");
-        case "vibrate":
-          return toast("Set primary color for light mode.");
-        case "sound":
-          return toast("Sound will play after rest timers.");
-        case "theme":
-          setTheme(value as string);
-          if (value === "dark") toast("Theme will always be dark.");
-          else if (value === "light") toast("Theme will always be light.");
-          else if (value === "system") toast("Theme will follow system.");
-          return;
+        case 'date':
+          return toast('Changed date format')
+        case 'darkColor':
+          setDarkColor(value)
+          return toast('Set primary color for dark mode.')
+        case 'lightColor':
+          setLightColor(value)
+          return toast('Set primary color for light mode.')
+        case 'vibrate':
+          return toast('Set primary color for light mode.')
+        case 'sound':
+          return toast('Sound will play after rest timers.')
+        case 'theme':
+          setTheme(value as string)
+          if (value === 'dark') toast('Theme will always be dark.')
+          else if (value === 'light') toast('Theme will always be light.')
+          else if (value === 'system') toast('Theme will follow system.')
+          return
       }
     },
-    [update, setTheme, setDarkColor, setLightColor, setValue]
-  );
+    [update, setTheme, setDarkColor, setLightColor, setValue],
+  )
 
   const selects: Input<string>[] = useMemo(() => {
-    const today = new Date();
+    const today = new Date()
     return [
-      { name: "Theme", value: theme, items: themeOptions, key: "theme" },
+      {name: 'Theme', value: theme, items: themeOptions, key: 'theme'},
       {
-        name: "Dark color",
+        name: 'Dark color',
         value: darkColor,
         items: lightOptions,
-        key: "darkColor",
+        key: 'darkColor',
       },
       {
-        name: "Light color",
+        name: 'Light color',
         value: lightColor,
         items: darkOptions,
-        key: "lightColor",
+        key: 'lightColor',
       },
       {
-        name: "Date format",
+        name: 'Date format',
         value: settings.date,
-        items: formatOptions.map((option) => ({
+        items: formatOptions.map(option => ({
           label: format(today, option),
           value: option,
         })),
-        key: "date",
+        key: 'date',
       },
-    ];
-  }, [settings, darkColor, formatOptions, theme, lightColor]);
+    ]
+  }, [settings.date, darkColor, formatOptions, theme, lightColor])
 
   const renderSelect = useCallback(
-    (input: Input<string>) => (
+    (item: Input<string>) => (
       <Select
-        key={input.name}
-        value={input.value}
-        onChange={(value) => changeString(input.key, value)}
-        label={input.name}
-        items={input.items}
+        key={item.name}
+        value={item.value}
+        onChange={value => changeString(item.key, value)}
+        label={item.name}
+        items={item.items}
       />
     ),
-    [changeString]
-  );
+    [changeString],
+  )
 
   const selectsMarkup = useMemo(
     () => selects.filter(filter).map(renderSelect),
-    [filter, selects, renderSelect]
-  );
-
-  const confirmDelete = useCallback(async () => {
-    setDeleting(false);
-    await AppDataSource.dropDatabase();
-    await AppDataSource.destroy();
-    await AppDataSource.initialize();
-    toast("Database deleted.");
-  }, []);
+    [filter, selects, renderSelect],
+  )
 
   const confirmImport = useCallback(async () => {
-    setImporting(false);
-    await AppDataSource.destroy();
-    const file = await DocumentPicker.pickSingle();
-    await FileSystem.cp(file.uri, Dirs.DatabaseDir + "/massive.db");
-    await AppDataSource.initialize();
-    await setRepo.createQueryBuilder().update().set({ image: null }).execute();
-    await update("sound", null);
-    const { alarm, backup } = await settingsRepo.findOne({ where: {} });
-    console.log({ backup });
-    const directory = await DocumentPicker.pickDirectory();
-    if (backup) NativeModules.BackupModule.start(directory.uri);
-    else NativeModules.BackupModule.stop();
-    NativeModules.SettingsModule.ignoringBattery((isIgnoring: boolean) => {
-      if (alarm && !isIgnoring) NativeModules.SettingsModule.ignoreBattery();
-      reset({ index: 0, routes: [{ name: "Settings" }] });
-    });
-  }, [reset, update]);
+    setImporting(false)
+    await AppDataSource.destroy()
+    const result = await DocumentPicker.pickSingle()
+    await FileSystem.cp(result.uri, Dirs.DatabaseDir + '/massive.db')
+    await AppDataSource.initialize()
+    await setRepo.createQueryBuilder().update().set({image: null}).execute()
+    await update('sound', null)
+    NativeModules.SettingsModule.ignoringBattery(
+      async (isIgnoring: boolean) => {
+        const {alarm} = await settingsRepo.findOne({where: {}})
+        if (alarm && !isIgnoring) NativeModules.SettingsModule.ignoreBattery()
+        reset({index: 0, routes: [{name: 'Settings'}]})
+      },
+    )
+  }, [reset, update])
 
   const exportDatabase = useCallback(async () => {
-    const path = Dirs.DatabaseDir + "/massive.db";
-    await FileSystem.cpExternal(path, "massive.db", "downloads");
-    toast("Database exported. Check downloads.");
-  }, []);
+    const path = Dirs.DatabaseDir + '/massive.db'
+    await FileSystem.cpExternal(path, 'massive.db', 'downloads')
+    toast('Database exported. Check downloads.')
+  }, [])
 
   const buttons = useMemo(
     () => [
       {
-        name: soundString || "Default",
-        onPress: changeSound,
-        label: "Alarm sound",
+        name: 'Alarm sound',
+        element: (
+          <View
+            key="alarm-sound"
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: ITEM_PADDING,
+            }}>
+            <Subheading style={{width: 100}}>Alarm sound</Subheading>
+            <Button onPress={changeSound}>{soundString || 'Default'}</Button>
+          </View>
+        ),
+      },
+      {
+        name: 'Export database',
+        element: (
+          <Button
+            key="export-db"
+            style={{alignSelf: 'flex-start'}}
+            onPress={exportDatabase}>
+            Export database
+          </Button>
+        ),
+      },
+      {
+        name: 'Import database',
+        element: (
+          <Button
+            key="import-db"
+            style={{alignSelf: 'flex-start'}}
+            onPress={() => setImporting(true)}>
+            Import database
+          </Button>
+        ),
       },
-      { name: "Export database", onPress: exportDatabase },
-      { name: "Import database", onPress: () => setImporting(true) },
-      { name: "Delete database", onPress: () => setDeleting(true) },
     ],
-    [changeSound, exportDatabase, soundString]
-  );
+    [changeSound, exportDatabase, soundString],
+  )
 
   const buttonsMarkup = useMemo(
-    () =>
-      buttons
-        .filter(filter)
-        .map((button) => <SettingButton {...button} key={button.name} />),
-    [buttons, filter]
-  );
+    () => buttons.filter(filter).map(b => b.element),
+    [buttons, filter],
+  )
 
   return (
     <>
@@ -332,21 +314,10 @@ export default function SettingsPage() {
         title="Are you sure?"
         onOk={confirmImport}
         setShow={setImporting}
-        show={importing}
-      >
+        show={importing}>
         Importing a database overwrites your current data. This action cannot be
         reversed!
       </ConfirmDialog>
-
-      <ConfirmDialog
-        title="Are you sure?"
-        onOk={confirmDelete}
-        setShow={setDeleting}
-        show={deleting}
-      >
-        Deleting your database wipes your current data. This action cannot be
-        reversed!
-      </ConfirmDialog>
     </>
-  );
+  )
 }

StackHeader.tsx

@@ -1,20 +1,36 @@
-import { useNavigation } from "@react-navigation/native";
-import { Appbar, IconButton } from "react-native-paper";
+import {useNavigation} from '@react-navigation/native'
+import {FileSystem} from 'react-native-file-access'
+import {Appbar, IconButton} from 'react-native-paper'
+import Share from 'react-native-share'
+import {captureScreen} from 'react-native-view-shot'
+import useDark from './use-dark'
 
-export default function StackHeader({
-  title,
-  children,
-}: {
-  title: string;
-  children?: JSX.Element | JSX.Element[];
-}) {
-  const navigation = useNavigation();
+export default function StackHeader({title}: {title: string}) {
+  const navigation = useNavigation()
+  const dark = useDark()
 
   return (
     <Appbar.Header>
-      <IconButton icon="arrow-back" onPress={navigation.goBack} />
+      <IconButton
+        color={dark ? 'white' : 'white'}
+        icon="arrow-back"
+        onPress={navigation.goBack}
+      />
       <Appbar.Content title={title} />
-      {children}
-    </Appbar.Header>
-  );
+      <IconButton
+        color={dark ? 'white' : 'white'}
+        onPress={() =>
+          captureScreen().then(async uri => {
+            const base64 = await FileSystem.readFile(uri, 'base64')
+            const url = `data:image/jpeg;base64,${base64}`
+            Share.open({
+              type: 'image/jpeg',
+              url,
+            })
+          })
+        }
+        icon="share"
+      />
+    </Appbar.Header>
+  )
 }

StartPlan.tsx

@@ -1,50 +1,42 @@
-import {
-  NavigationProp,
-  RouteProp,
-  useFocusEffect,
-  useNavigation,
-  useRoute,
-} from "@react-navigation/native";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { FlatList, NativeModules, TextInput, View } from "react-native";
-import { Button, IconButton, ProgressBar } from "react-native-paper";
-import AppInput from "./AppInput";
-import { getBestSet } from "./best.service";
-import { MARGIN, PADDING } from "./constants";
-import CountMany from "./count-many";
-import { AppDataSource } from "./data-source";
-import { getNow, setRepo, settingsRepo } from "./db";
-import { fixNumeric } from "./fix-numeric";
-import GymSet from "./gym-set";
-import { PlanPageParams } from "./plan-page-params";
-import Settings from "./settings";
-import StackHeader from "./StackHeader";
-import StartPlanItem from "./StartPlanItem";
-import { toast } from "./toast";
+import {RouteProp, useFocusEffect, useRoute} from '@react-navigation/native'
+import {useCallback, useMemo, useRef, useState} from 'react'
+import {FlatList, NativeModules, TextInput, View} from 'react-native'
+import {Button, ProgressBar} from 'react-native-paper'
+import AppInput from './AppInput'
+import {getBestSet, getLast} from './best.service'
+import {PADDING} from './constants'
+import CountMany from './count-many'
+import {AppDataSource} from './data-source'
+import {getNow, setRepo, settingsRepo} from './db'
+import GymSet from './gym-set'
+import {PlanPageParams} from './plan-page-params'
+import Settings from './settings'
+import StackHeader from './StackHeader'
+import StartPlanItem from './StartPlanItem'
+import {toast} from './toast'
 
 export default function StartPlan() {
-  const { params } = useRoute<RouteProp<PlanPageParams, "StartPlan">>();
-  const [reps, setReps] = useState(params.first?.reps.toString() || "0");
-  const [weight, setWeight] = useState(params.first?.weight.toString() || "0");
-  const [unit, setUnit] = useState<string>(params.first?.unit || "kg");
-  const [selected, setSelected] = useState(0);
-  const [settings, setSettings] = useState<Settings>();
-  const [counts, setCounts] = useState<CountMany[]>();
-  const weightRef = useRef<TextInput>(null);
-  const repsRef = useRef<TextInput>(null);
-  const unitRef = useRef<TextInput>(null);
-  const workouts = useMemo(() => params.plan.workouts.split(","), [params]);
-  const navigation = useNavigation<NavigationProp<PlanPageParams>>();
+  const {params} = useRoute<RouteProp<PlanPageParams, 'StartPlan'>>()
+  const [reps, setReps] = useState(params.first?.reps.toString() || '0')
+  const [weight, setWeight] = useState(params.first?.weight.toString() || '0')
+  const [unit, setUnit] = useState<string>(params.first?.unit || 'kg')
+  const [selected, setSelected] = useState(0)
+  const [settings, setSettings] = useState<Settings>()
+  const [counts, setCounts] = useState<CountMany[]>()
+  const weightRef = useRef<TextInput>(null)
+  const repsRef = useRef<TextInput>(null)
+  const unitRef = useRef<TextInput>(null)
+  const workouts = useMemo(() => params.plan.workouts.split(','), [params])
 
   const [selection, setSelection] = useState({
     start: 0,
     end: 0,
-  });
+  })
 
   const refresh = useCallback(async () => {
     const questions = workouts
       .map((workout, index) => `('${workout}',${index})`)
-      .join(",");
+      .join(',')
     const select = `
       SELECT workouts.name, COUNT(sets.id) as total, sets.sets
       FROM (select 0 as name, 0 as sequence union values ${questions}) as workouts 
@@ -55,45 +47,41 @@ export default function StartPlan() {
       ORDER BY workouts.sequence
       LIMIT -1
       OFFSET 1
-    `;
-    const newCounts = await AppDataSource.manager.query(select);
-    console.log(`${StartPlan.name}.focus:`, { newCounts });
-    setCounts(newCounts);
-  }, [workouts]);
+    `
+    const newCounts = await AppDataSource.manager.query(select)
+    console.log(`${StartPlan.name}.focus:`, {newCounts})
+    setCounts(newCounts)
+  }, [workouts])
 
   const select = useCallback(
     async (index: number, newCounts?: CountMany[]) => {
-      setSelected(index);
-      if (!counts && !newCounts) return;
-      const workout = counts ? counts[index] : newCounts[index];
-      console.log(`${StartPlan.name}.next:`, { workout });
-      const last = await setRepo.findOne({
-        where: { name: workout.name },
-        order: { created: "desc" },
-      });
-      console.log({ last });
-      if (!last) return;
-      delete last.id;
-      console.log(`${StartPlan.name}.select:`, { last });
-      setReps(last.reps.toString());
-      setWeight(last.weight.toString());
-      setUnit(last.unit);
+      setSelected(index)
+      if (!counts && !newCounts) return
+      const workout = counts ? counts[index] : newCounts[index]
+      console.log(`${StartPlan.name}.next:`, {workout})
+      const last = await getLast(workout.name)
+      if (!last) return
+      delete last.id
+      console.log(`${StartPlan.name}.select:`, {last})
+      setReps(last.reps.toString())
+      setWeight(last.weight.toString())
+      setUnit(last.unit)
     },
-    [counts]
-  );
+    [counts],
+  )
 
   useFocusEffect(
     useCallback(() => {
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-      refresh();
-    }, [refresh])
-  );
+      settingsRepo.findOne({where: {}}).then(setSettings)
+      refresh()
+    }, [refresh]),
+  )
 
   const handleSubmit = async () => {
-    const now = await getNow();
-    const workout = counts[selected];
-    const best = await getBestSet(workout.name);
-    delete best.id;
+    const now = await getNow()
+    const workout = counts[selected]
+    const best = await getBestSet(workout.name)
+    delete best.id
     const newSet: GymSet = {
       ...best,
       weight: +weight,
@@ -101,94 +89,44 @@ export default function StartPlan() {
       unit,
       created: now,
       hidden: false,
-    };
-    await setRepo.save(newSet);
-    await refresh();
+    }
+    await setRepo.save(newSet)
+    await refresh()
     if (
       settings.notify &&
       (+weight > best.weight || (+reps > best.reps && +weight === best.weight))
-    ) {
-      toast("Great work King! That's a new record.");
-    }
-    if (!settings.alarm) return;
+    )
+      toast("Great work King! That's a new record.")
+    if (!settings.alarm) return
     const milliseconds =
-      Number(best.minutes) * 60 * 1000 + Number(best.seconds) * 1000;
-    NativeModules.AlarmModule.timer(milliseconds);
-  };
+      Number(best.minutes) * 60 * 1000 + Number(best.seconds) * 1000
+    NativeModules.AlarmModule.timer(milliseconds)
+  }
 
   return (
     <>
-      <StackHeader title={params.plan.days.replace(/,/g, ", ")}>
-        <IconButton
-          onPress={() => navigation.navigate("EditPlan", { plan: params.plan })}
-          icon="edit"
-        />
-      </StackHeader>
-      <View style={{ padding: PADDING, flex: 1, flexDirection: "column" }}>
+      <StackHeader title={params.plan.days.replace(/,/g, ', ')} />
+      <View style={{padding: PADDING, flex: 1, flexDirection: 'column'}}>
         <View style={{flex: 1}}>
-          <View
-            style={{
-              flexDirection: "row",
-              marginBottom: MARGIN,
-            }}
-          >
           <AppInput
             label="Reps"
-              style={{ flex: 1 }}
             keyboardType="numeric"
             value={reps}
-              onChangeText={(newReps) => {
-                const fixed = fixNumeric(newReps);
-                setReps(fixed);
-                if (fixed.length !== newReps.length)
-                  toast("Reps must be a number");
-              }}
+            onChangeText={setReps}
             onSubmitEditing={() => weightRef.current?.focus()}
             selection={selection}
-              onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
+            onSelectionChange={e => setSelection(e.nativeEvent.selection)}
             innerRef={repsRef}
           />
-            <IconButton
-              icon="add"
-              onPress={() => setReps((Number(reps) + 1).toString())}
-            />
-            <IconButton
-              icon="remove"
-              onPress={() => setReps((Number(reps) - 1).toString())}
-            />
-          </View>
-
-          <View
-            style={{
-              flexDirection: "row",
-              marginBottom: MARGIN,
-            }}
-          >
           <AppInput
             label="Weight"
-              style={{ flex: 1 }}
             keyboardType="numeric"
             value={weight}
-              onChangeText={(newWeight) => {
-                const fixed = fixNumeric(newWeight);
-                setWeight(fixed);
-                if (fixed.length !== newWeight.length)
-                  toast("Weight must be a number");
-              }}
+            onChangeText={setWeight}
             onSubmitEditing={handleSubmit}
             innerRef={weightRef}
             blurOnSubmit
           />
-            <IconButton
-              icon="add"
-              onPress={() => setWeight((Number(weight) + 2.5).toString())}
-            />
-            <IconButton
-              icon="remove"
-              onPress={() => setWeight((Number(weight) - 2.5).toString())}
-            />
-          </View>
-
           {settings?.showUnit && (
             <AppInput
               autoCapitalize="none"
@@ -201,7 +139,7 @@ export default function StartPlan() {
           {counts && (
             <FlatList
               data={counts}
-              renderItem={(props) => (
+              renderItem={props => (
                 <View>
                   <StartPlanItem
                     {...props}
@@ -217,10 +155,10 @@ export default function StartPlan() {
             />
           )}
         </View>
-        <Button mode="outlined" icon="save" onPress={handleSubmit}>
+        <Button mode="contained" icon="save" onPress={handleSubmit}>
           Save
         </Button>
       </View>
     </>
-  );
+  )
 }

StartPlanItem.tsx

@@ -1,101 +1,66 @@
-import { NavigationProp, useNavigation } from "@react-navigation/native";
-import React, { useCallback, useState } from "react";
-import { GestureResponderEvent, ListRenderItemInfo, View } from "react-native";
-import { List, Menu, RadioButton, useTheme } from "react-native-paper";
-import { Like } from "typeorm";
-import CountMany from "./count-many";
-import { getNow, setRepo } from "./db";
-import { PlanPageParams } from "./plan-page-params";
-import { toast } from "./toast";
+import {NavigationProp, useNavigation} from '@react-navigation/native'
+import React, {useCallback, useState} from 'react'
+import {GestureResponderEvent, ListRenderItemInfo, View} from 'react-native'
+import {List, Menu, RadioButton, useTheme} from 'react-native-paper'
+import {Like} from 'typeorm'
+import CountMany from './count-many'
+import {getNow, setRepo} from './db'
+import {PlanPageParams} from './plan-page-params'
+import {toast} from './toast'
 
 interface Props extends ListRenderItemInfo<CountMany> {
-  onSelect: (index: number) => void;
-  selected: number;
-  onUndo: () => void;
+  onSelect: (index: number) => void
+  selected: number
+  onUndo: () => void
 }
 
 export default function StartPlanItem(props: Props) {
-  const { index, item, onSelect, selected, onUndo } = props;
-  const { colors } = useTheme();
-  const [anchor, setAnchor] = useState({ x: 0, y: 0 });
-  const [showMenu, setShowMenu] = useState(false);
-  const { navigate } = useNavigation<NavigationProp<PlanPageParams>>();
+  const {index, item, onSelect, selected, onUndo} = props
+  const {colors} = useTheme()
+  const [anchor, setAnchor] = useState({x: 0, y: 0})
+  const [showMenu, setShowMenu] = useState(false)
+  const {navigate} = useNavigation<NavigationProp<PlanPageParams>>()
 
   const undo = useCallback(async () => {
-    const now = await getNow();
-    const created = now.split("T")[0];
+    const now = await getNow()
+    const created = now.split('T')[0]
     const first = await setRepo.findOne({
       where: {
         name: item.name,
         hidden: 0 as any,
         created: Like(`${created}%`),
       },
-      order: { created: "desc" },
-    });
-    setShowMenu(false);
-    if (!first) return toast("Nothing to undo.");
-    await setRepo.delete(first.id);
-    onUndo();
-  }, [setShowMenu, onUndo, item.name]);
+      order: {created: 'desc'},
+    })
+    setShowMenu(false)
+    if (!first) return toast('Nothing to undo.')
+    await setRepo.delete(first.id)
+    onUndo()
+  }, [setShowMenu, onUndo, item.name])
 
   const longPress = useCallback(
     (e: GestureResponderEvent) => {
-      setAnchor({ x: e.nativeEvent.pageX, y: e.nativeEvent.pageY });
-      setShowMenu(true);
+      setAnchor({x: e.nativeEvent.pageX, y: e.nativeEvent.pageY})
+      setShowMenu(true)
     },
-    [setShowMenu, setAnchor]
-  );
+    [setShowMenu, setAnchor],
+  )
 
-  const edit = useCallback(async () => {
-    const now = await getNow();
-    const created = now.split("T")[0];
+  const edit = async () => {
+    const now = await getNow()
+    const created = now.split('T')[0]
     const first = await setRepo.findOne({
       where: {
         name: item.name,
         hidden: 0 as any,
         created: Like(`${created}%`),
       },
-      order: { created: "desc" },
-    });
-    setShowMenu(false);
-    if (!first) return toast("Nothing to edit.");
-    navigate("EditSet", { set: first });
-  }, [item.name, navigate]);
-
-  const left = useCallback(
-    () => (
-      <View style={{ alignItems: "center", justifyContent: "center" }}>
-        <RadioButton
-          onPress={() => onSelect(index)}
-          value={index.toString()}
-          status={selected === index ? "checked" : "unchecked"}
-          color={colors.primary}
-        />
-      </View>
-    ),
-    [index, selected, colors.primary, onSelect]
-  );
-
-  const right = useCallback(
-    () => (
-      <View
-        style={{
-          width: "25%",
-          justifyContent: "center",
-        }}
-      >
-        <Menu
-          anchor={anchor}
-          visible={showMenu}
-          onDismiss={() => setShowMenu(false)}
-        >
-          <Menu.Item leadingIcon="edit" onPress={edit} title="Edit" />
-          <Menu.Item leadingIcon="undo" onPress={undo} title="Undo" />
-        </Menu>
-      </View>
-    ),
-    [anchor, showMenu, edit, undo]
-  );
+      order: {created: 'desc'},
+    })
+    setShowMenu(false)
+    if (!first) return toast('Nothing to edit.')
+    navigate('EditSet', {set: first})
+  }
 
   return (
     <List.Item
@@ -105,8 +70,31 @@ export default function StartPlanItem(props: Props) {
         item.sets ? `${item.total} / ${item.sets}` : item.total.toString()
       }
       onPress={() => onSelect(index)}
-      left={left}
-      right={right}
+      left={() => (
+        <View style={{alignItems: 'center', justifyContent: 'center'}}>
+          <RadioButton
+            onPress={() => onSelect(index)}
+            value={index.toString()}
+            status={selected === index ? 'checked' : 'unchecked'}
+            color={colors.primary}
           />
-  );
+        </View>
+      )}
+      right={() => (
+        <View
+          style={{
+            width: '25%',
+            justifyContent: 'center',
+          }}>
+          <Menu
+            anchor={anchor}
+            visible={showMenu}
+            onDismiss={() => setShowMenu(false)}>
+            <Menu.Item icon="edit" onPress={edit} title="Edit" />
+            <Menu.Item icon="undo" onPress={undo} title="Undo" />
+          </Menu>
+        </View>
+      )}
+    />
+  )
 }

Switch.tsx

@@ -1,42 +1,38 @@
-import React from "react";
-import { Platform, Pressable } from "react-native";
-import { Switch as PaperSwitch, Text, useTheme } from "react-native-paper";
-import { MARGIN } from "./constants";
+import React from 'react'
+import {Platform, Pressable} from 'react-native'
+import {Switch as PaperSwitch, Text, useTheme} from 'react-native-paper'
+import {MARGIN} from './constants'
 
 function Switch({
   value,
   onChange,
   title,
 }: {
-  value?: boolean;
-  onChange: (value: boolean) => void;
-  title: string;
+  value?: boolean
+  onChange: (value: boolean) => void
+  title: string
 }) {
-  const { colors } = useTheme();
+  const {colors} = useTheme()
 
   return (
     <Pressable
       onPress={() => onChange(!value)}
       style={{
-        flexDirection: "row",
-        flexWrap: "wrap",
-        alignItems: "center",
-        marginBottom: Platform.OS === "ios" ? MARGIN : null,
-      }}
-    >
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        marginBottom: Platform.OS === 'ios' ? MARGIN : null,
+      }}>
       <PaperSwitch
         color={colors.primary}
         style={{marginRight: MARGIN}}
         value={value}
         onValueChange={onChange}
-        trackColor={{
-          true: colors.primary + "80",
-          false: colors.surfaceDisabled,
-        }}
+        trackColor={{true: colors.primary + '80', false: colors.disabled}}
       />
       <Text>{title}</Text>
     </Pressable>
-  );
+  )
 }
 
-export default React.memo(Switch);
+export default React.memo(Switch)

TimerPage.tsx

@@ -1,47 +1,47 @@
-import { useFocusEffect } from "@react-navigation/native";
-import React, { useCallback, useMemo, useState } from "react";
-import { Dimensions, NativeModules, View } from "react-native";
-import { Button, Text, useTheme } from "react-native-paper";
-import { ProgressCircle } from "react-native-svg-charts";
-import AppFab from "./AppFab";
-import { MARGIN, PADDING } from "./constants";
-import { settingsRepo } from "./db";
-import DrawerHeader from "./DrawerHeader";
-import Settings from "./settings";
-import useTimer from "./use-timer";
+import {useFocusEffect} from '@react-navigation/native'
+import React, {useCallback, useMemo, useState} from 'react'
+import {Dimensions, NativeModules, View} from 'react-native'
+import {Button, Text, useTheme} from 'react-native-paper'
+import {ProgressCircle} from 'react-native-svg-charts'
+import AppFab from './AppFab'
+import {MARGIN, PADDING} from './constants'
+import {settingsRepo} from './db'
+import DrawerHeader from './DrawerHeader'
+import Settings from './settings'
+import useTimer from './use-timer'
 
 export interface TickEvent {
-  minutes: string;
-  seconds: string;
+  minutes: string
+  seconds: string
 }
 
 export default function TimerPage() {
-  const { minutes, seconds } = useTimer();
-  const [settings, setSettings] = useState<Settings>();
-  const { colors } = useTheme();
+  const {minutes, seconds} = useTimer()
+  const [settings, setSettings] = useState<Settings>()
+  const {colors} = useTheme()
 
   useFocusEffect(
     useCallback(() => {
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-    }, [])
-  );
+      settingsRepo.findOne({where: {}}).then(setSettings)
+    }, []),
+  )
 
   const stop = () => {
-    NativeModules.AlarmModule.stop();
-  };
+    NativeModules.AlarmModule.stop()
+  }
 
   const add = async () => {
-    console.log(`${TimerPage.name}.add:`, settings);
-    NativeModules.AlarmModule.add();
-  };
+    console.log(`${TimerPage.name}.add:`, settings)
+    NativeModules.AlarmModule.add()
+  }
 
   const progress = useMemo(() => {
-    return (Number(minutes) * 60 + Number(seconds)) / 210;
-  }, [minutes, seconds]);
+    return (Number(minutes) * 60 + Number(seconds)) / 210
+  }, [minutes, seconds])
 
   const left = useMemo(() => {
-    return Dimensions.get("screen").width * 0.5 - 60;
-  }, []);
+    return Dimensions.get('screen').width * 0.5 - 60
+  }, [])
 
   return (
     <>
@@ -50,11 +50,10 @@ export default function TimerPage() {
         <View
           style={{
             flex: 1,
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <Text style={{ fontSize: 70, position: "absolute" }}>
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <Text style={{fontSize: 70, position: 'absolute'}}>
             {minutes}:{seconds}
           </Text>
           <ProgressCircle
@@ -62,14 +61,14 @@ export default function TimerPage() {
             progress={progress}
             strokeWidth={10}
             progressColor={colors.primary}
-            backgroundColor={colors.primary + "80"}
+            backgroundColor={colors.primary + '80'}
           />
         </View>
       </View>
-      <Button onPress={add} style={{ position: "absolute", top: "82%", left }}>
+      <Button onPress={add} style={{position: 'absolute', top: '82%', left}}>
         Add 1 min
       </Button>
       <AppFab icon="stop" onPress={stop} />
     </>
-  );
+  )
 }

ViewBest.tsx

@@ -0,0 +1,137 @@
+import {RouteProp, useRoute} from '@react-navigation/native'
+import {format} from 'date-fns'
+import {useEffect, useMemo, useState} from 'react'
+import {View} from 'react-native'
+import {List} from 'react-native-paper'
+import {BestPageParams} from './BestPage'
+import Chart from './Chart'
+import {PADDING} from './constants'
+import {setRepo} from './db'
+import GymSet from './gym-set'
+import {Metrics} from './metrics'
+import {Periods} from './periods'
+import Select from './Select'
+import StackHeader from './StackHeader'
+import Volume from './volume'
+
+export default function ViewBest() {
+  const {params} = useRoute<RouteProp<BestPageParams, 'ViewBest'>>()
+  const [weights, setWeights] = useState<GymSet[]>()
+  const [volumes, setVolumes] = useState<Volume[]>()
+  const [metric, setMetric] = useState(Metrics.Weight)
+  const [period, setPeriod] = useState(Periods.Monthly)
+
+  useEffect(() => {
+    console.log(`${ViewBest.name}.useEffect`, {metric})
+    console.log(`${ViewBest.name}.useEffect`, {period})
+    let difference = '-7 days'
+    if (period === Periods.Monthly) difference = '-1 months'
+    else if (period === Periods.Yearly) difference = '-1 years'
+    let group = '%Y-%m-%d'
+    if (period === Periods.Yearly) group = '%Y-%m'
+    const builder = setRepo
+      .createQueryBuilder()
+      .select("STRFTIME('%Y-%m-%d', created)", 'created')
+      .addSelect('unit')
+      .where('name = :name', {name: params.best.name})
+      .andWhere('NOT hidden')
+      .andWhere("DATE(created) >= DATE('now', 'weekday 0', :difference)", {
+        difference,
+      })
+      .groupBy('name')
+      .addGroupBy(`STRFTIME('${group}', created)`)
+    switch (metric) {
+      case Metrics.Weight:
+        builder
+          .addSelect('ROUND(MAX(weight), 2)', 'weight')
+          .getRawMany()
+          .then(setWeights)
+        break
+      case Metrics.Volume:
+        builder
+          .addSelect('ROUND(SUM(weight * reps), 2)', 'value')
+          .getRawMany()
+          .then(setVolumes)
+        break
+      default:
+        // Brzycki formula https://en.wikipedia.org/wiki/One-repetition_maximum#Brzycki
+        builder
+          .addSelect(
+            'ROUND(MAX(weight / (1.0278 - 0.0278 * reps)), 2)',
+            'weight',
+          )
+          .getRawMany()
+          .then(newWeights => {
+            console.log({weights: newWeights})
+            setWeights(newWeights)
+          })
+    }
+  }, [params.best.name, metric, period])
+
+  const charts = useMemo(() => {
+    if (
+      (metric === Metrics.Volume && volumes?.length === 0) ||
+      (metric === Metrics.Weight && weights?.length === 0) ||
+      (metric === Metrics.OneRepMax && weights?.length === 0)
+    )
+      return <List.Item title="No data yet." />
+    if (metric === Metrics.Volume && volumes?.length && weights?.length)
+      return (
+        <Chart
+          yData={volumes.map(v => v.value)}
+          yFormat={(value: number) =>
+            `${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${
+              volumes[0].unit || 'kg'
+            }`
+          }
+          xData={weights}
+          xFormat={(_value, index) =>
+            format(new Date(weights[index].created), 'd/M')
+          }
+        />
+      )
+
+    return (
+      <Chart
+        yData={weights?.map(set => set.weight) || []}
+        yFormat={value => `${value}${weights?.[0].unit}`}
+        xData={weights || []}
+        xFormat={(_value, index) =>
+          format(new Date(weights?.[index].created), 'd/M')
+        }
+      />
+    )
+  }, [volumes, weights, metric])
+
+  return (
+    <>
+      <StackHeader title={params.best.name} />
+      <View style={{padding: PADDING}}>
+        <Select
+          label="Metric"
+          items={[
+            {value: Metrics.Volume, label: Metrics.Volume},
+            {value: Metrics.OneRepMax, label: Metrics.OneRepMax},
+            {
+              label: Metrics.Weight,
+              value: Metrics.Weight,
+            },
+          ]}
+          onChange={value => setMetric(value as Metrics)}
+          value={metric}
+        />
+        <Select
+          label="Period"
+          items={[
+            {value: Periods.Weekly, label: Periods.Weekly},
+            {value: Periods.Monthly, label: Periods.Monthly},
+            {value: Periods.Yearly, label: Periods.Yearly},
+          ]}
+          onChange={value => setPeriod(value as Periods)}
+          value={period}
+        />
+        {charts}
+      </View>
+    </>
+  )
+}

ViewGraph.tsx

@@ -1,154 +0,0 @@
-import { RouteProp, useRoute } from "@react-navigation/native";
-import { format } from "date-fns";
-import { useEffect, useMemo, useState } from "react";
-import { View } from "react-native";
-import { FileSystem } from "react-native-file-access";
-import { IconButton, List } from "react-native-paper";
-import Share from "react-native-share";
-import { captureScreen } from "react-native-view-shot";
-import Chart from "./Chart";
-import { GraphsPageParams } from "./GraphsPage";
-import Select from "./Select";
-import StackHeader from "./StackHeader";
-import { PADDING } from "./constants";
-import { setRepo } from "./db";
-import GymSet from "./gym-set";
-import { Metrics } from "./metrics";
-import { Periods } from "./periods";
-import Volume from "./volume";
-
-export default function ViewGraph() {
-  const { params } = useRoute<RouteProp<GraphsPageParams, "ViewGraph">>();
-  const [weights, setWeights] = useState<GymSet[]>();
-  const [volumes, setVolumes] = useState<Volume[]>();
-  const [metric, setMetric] = useState(Metrics.Weight);
-  const [period, setPeriod] = useState(Periods.Monthly);
-
-  useEffect(() => {
-    let difference = "-7 days";
-    if (period === Periods.Monthly) difference = "-1 months";
-    else if (period === Periods.Yearly) difference = "-1 years";
-    let group = "%Y-%m-%d";
-    if (period === Periods.Yearly) group = "%Y-%m";
-    const builder = setRepo
-      .createQueryBuilder()
-      .select("STRFTIME('%Y-%m-%d', created)", "created")
-      .addSelect("unit")
-      .where("name = :name", { name: params.best.name })
-      .andWhere("NOT hidden")
-      .andWhere("DATE(created) >= DATE('now', 'weekday 0', :difference)", {
-        difference,
-      })
-      .groupBy("name")
-      .addGroupBy(`STRFTIME('${group}', created)`);
-    switch (metric) {
-      case Metrics.Weight:
-        builder
-          .addSelect("ROUND(MAX(weight), 2)", "weight")
-          .getRawMany()
-          .then(setWeights);
-        break;
-      case Metrics.Volume:
-        builder
-          .addSelect("ROUND(SUM(weight * reps), 2)", "value")
-          .getRawMany()
-          .then(setVolumes);
-        break;
-      default:
-        // Brzycki formula https://en.wikipedia.org/wiki/One-repetition_maximum#Brzycki
-        builder
-          .addSelect(
-            "ROUND(MAX(weight / (1.0278 - 0.0278 * reps)), 2)",
-            "weight"
-          )
-          .getRawMany()
-          .then((newWeights) => {
-            console.log({ weights: newWeights });
-            setWeights(newWeights);
-          });
-    }
-  }, [params.best.name, metric, period]);
-
-  const charts = useMemo(() => {
-    if (
-      (metric === Metrics.Volume && volumes?.length === 0) ||
-      (metric === Metrics.Weight && weights?.length === 0) ||
-      (metric === Metrics.OneRepMax && weights?.length === 0)
-    ) {
-      return <List.Item title="No data yet." />;
-    }
-    if (metric === Metrics.Volume && volumes?.length && weights?.length) {
-      return (
-        <Chart
-          yData={volumes.map((v) => v.value)}
-          yFormat={(value: number) =>
-            `${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}${
-              volumes[0].unit || "kg"
-            }`
-          }
-          xData={weights}
-          xFormat={(_value, index) =>
-            format(new Date(weights[index].created), "d/M")
-          }
-        />
-      );
-    }
-
-    return (
-      <Chart
-        yData={weights?.map((set) => set.weight) || []}
-        yFormat={(value) => `${value}${weights?.[0].unit}`}
-        xData={weights || []}
-        xFormat={(_value, index) =>
-          format(new Date(weights?.[index].created), "d/M")
-        }
-      />
-    );
-  }, [volumes, weights, metric]);
-
-  return (
-    <>
-      <StackHeader title={params.best.name}>
-        <IconButton
-          onPress={() =>
-            captureScreen().then(async (uri) => {
-              const base64 = await FileSystem.readFile(uri, "base64");
-              const url = `data:image/jpeg;base64,${base64}`;
-              Share.open({
-                type: "image/jpeg",
-                url,
-              });
-            })
-          }
-          icon="share"
-        />
-      </StackHeader>
-      <View style={{ padding: PADDING }}>
-        <Select
-          label="Metric"
-          items={[
-            { value: Metrics.Volume, label: Metrics.Volume },
-            { value: Metrics.OneRepMax, label: Metrics.OneRepMax },
-            {
-              label: Metrics.Weight,
-              value: Metrics.Weight,
-            },
-          ]}
-          onChange={(value) => setMetric(value as Metrics)}
-          value={metric}
-        />
-        <Select
-          label="Period"
-          items={[
-            { value: Periods.Weekly, label: Periods.Weekly },
-            { value: Periods.Monthly, label: Periods.Monthly },
-            { value: Periods.Yearly, label: Periods.Yearly },
-          ]}
-          onChange={(value) => setPeriod(value as Periods)}
-          value={period}
-        />
-        {charts}
-      </View>
-    </>
-  );
-}

WorkoutItem.tsx

@@ -1,96 +1,87 @@
-import { NavigationProp, useNavigation } from "@react-navigation/native";
-import { useCallback, useMemo, useState } from "react";
-import { GestureResponderEvent, Image } from "react-native";
-import { List, Menu, Text } from "react-native-paper";
-import ConfirmDialog from "./ConfirmDialog";
-import { setRepo } from "./db";
-import GymSet from "./gym-set";
-import { WorkoutsPageParams } from "./WorkoutsPage";
+import {NavigationProp, useNavigation} from '@react-navigation/native'
+import {useCallback, useMemo, useState} from 'react'
+import {GestureResponderEvent, Image} from 'react-native'
+import {List, Menu, Text} from 'react-native-paper'
+import ConfirmDialog from './ConfirmDialog'
+import {setRepo} from './db'
+import GymSet from './gym-set'
+import {WorkoutsPageParams} from './WorkoutsPage'
 
 export default function WorkoutItem({
   item,
   onRemove,
   images,
 }: {
-  item: GymSet;
-  onRemove: () => void;
-  images: boolean;
+  item: GymSet
+  onRemove: () => void
+  images: boolean
 }) {
-  const [showMenu, setShowMenu] = useState(false);
-  const [anchor, setAnchor] = useState({ x: 0, y: 0 });
-  const [showRemove, setShowRemove] = useState("");
-  const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>();
+  const [showMenu, setShowMenu] = useState(false)
+  const [anchor, setAnchor] = useState({x: 0, y: 0})
+  const [showRemove, setShowRemove] = useState('')
+  const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>()
 
   const remove = useCallback(async () => {
-    await setRepo.delete({ name: item.name });
-    setShowMenu(false);
-    onRemove();
-  }, [setShowMenu, onRemove, item.name]);
+    await setRepo.delete({name: item.name})
+    setShowMenu(false)
+    onRemove()
+  }, [setShowMenu, onRemove, item.name])
 
   const longPress = useCallback(
     (e: GestureResponderEvent) => {
-      setAnchor({ x: e.nativeEvent.pageX, y: e.nativeEvent.pageY });
-      setShowMenu(true);
+      setAnchor({x: e.nativeEvent.pageX, y: e.nativeEvent.pageY})
+      setShowMenu(true)
     },
-    [setShowMenu, setAnchor]
-  );
+    [setShowMenu, setAnchor],
+  )
 
   const description = useMemo(() => {
-    const seconds = item.seconds?.toString().padStart(2, "0");
-    return `${item.sets} x ${item.minutes || 0}:${seconds}`;
-  }, [item]);
+    const seconds = item.seconds?.toString().padStart(2, '0')
+    return `${item.sets} x ${item.minutes || 0}:${seconds}`
+  }, [item])
 
-  const left = useCallback(() => {
-    if (!images || !item.image) return null;
   return (
+    <>
+      <List.Item
+        onPress={() => navigation.navigate('EditWorkout', {value: item})}
+        title={item.name}
+        description={description}
+        onLongPress={longPress}
+        left={() =>
+          images &&
+          item.image && (
             <Image source={{uri: item.image}} style={{height: 75, width: 75}} />
-    );
-  }, [item.image, images]);
-
-  const right = useCallback(() => {
-    return (
+          )
+        }
+        right={() => (
           <Text
             style={{
-          alignSelf: "center",
-        }}
-      >
+              alignSelf: 'center',
+            }}>
             <Menu
               anchor={anchor}
               visible={showMenu}
-          onDismiss={() => setShowMenu(false)}
-        >
+              onDismiss={() => setShowMenu(false)}>
               <Menu.Item
-            leadingIcon="delete"
+                icon="delete"
                 onPress={() => {
-              setShowRemove(item.name);
-              setShowMenu(false);
+                  setShowRemove(item.name)
+                  setShowMenu(false)
                 }}
                 title="Delete"
               />
             </Menu>
           </Text>
-    );
-  }, [anchor, showMenu, item.name]);
-
-  return (
-    <>
-      <List.Item
-        onPress={() => navigation.navigate("EditWorkout", { value: item })}
-        title={item.name}
-        description={description}
-        onLongPress={longPress}
-        left={left}
-        right={right}
+        )}
       />
       <ConfirmDialog
         title={`Delete ${showRemove}`}
         show={!!showRemove}
-        setShow={(show) => (show ? null : setShowRemove(""))}
-        onOk={remove}
-      >
+        setShow={show => (show ? null : setShowRemove(''))}
+        onOk={remove}>
         This irreversibly deletes ALL sets related to this workout. Are you
         sure?
       </ConfirmDialog>
     </>
-  );
+  )
 }

WorkoutList.tsx

@@ -2,49 +2,50 @@ import {
   NavigationProp,
   useFocusEffect,
   useNavigation,
-} from "@react-navigation/native";
-import { useCallback, useState } from "react";
-import { FlatList } from "react-native";
-import { List } from "react-native-paper";
-import { LIMIT } from "./constants";
-import { setRepo, settingsRepo } from "./db";
-import DrawerHeader from "./DrawerHeader";
-import GymSet from "./gym-set";
-import Page from "./Page";
-import SetList from "./SetList";
-import Settings from "./settings";
-import WorkoutItem from "./WorkoutItem";
-import { WorkoutsPageParams } from "./WorkoutsPage";
+} from '@react-navigation/native'
+import {useCallback, useState} from 'react'
+import {FlatList} from 'react-native'
+import {List} from 'react-native-paper'
+import {setRepo, settingsRepo} from './db'
+import DrawerHeader from './DrawerHeader'
+import GymSet from './gym-set'
+import Page from './Page'
+import SetList from './SetList'
+import Settings from './settings'
+import WorkoutItem from './WorkoutItem'
+import {WorkoutsPageParams} from './WorkoutsPage'
+
+const limit = 15
 
 export default function WorkoutList() {
-  const [workouts, setWorkouts] = useState<GymSet[]>();
-  const [offset, setOffset] = useState(0);
-  const [term, setTerm] = useState("");
-  const [end, setEnd] = useState(false);
-  const [settings, setSettings] = useState<Settings>();
-  const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>();
+  const [workouts, setWorkouts] = useState<GymSet[]>()
+  const [offset, setOffset] = useState(0)
+  const [term, setTerm] = useState('')
+  const [end, setEnd] = useState(false)
+  const [settings, setSettings] = useState<Settings>()
+  const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>()
 
   const refresh = useCallback(async (value: string) => {
     const newWorkouts = await setRepo
       .createQueryBuilder()
       .select()
-      .where("name LIKE :name", { name: `%${value.trim()}%` })
-      .groupBy("name")
-      .orderBy("name")
-      .limit(LIMIT)
-      .getMany();
-    console.log(`${WorkoutList.name}`, { newWorkout: newWorkouts[0] });
-    setWorkouts(newWorkouts);
-    setOffset(0);
-    setEnd(false);
-  }, []);
+      .where('name LIKE :name', {name: `%${value}%`})
+      .groupBy('name')
+      .orderBy('name')
+      .limit(limit)
+      .getMany()
+    console.log(`${WorkoutList.name}`, {newWorkout: newWorkouts[0]})
+    setWorkouts(newWorkouts)
+    setOffset(0)
+    setEnd(false)
+  }, [])
 
   useFocusEffect(
     useCallback(() => {
-      refresh(term);
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-    }, [refresh, term])
-  );
+      refresh(term)
+      settingsRepo.findOne({where: {}}).then(setSettings)
+    }, [refresh, term]),
+  )
 
   const renderItem = useCallback(
     ({item}: {item: GymSet}) => (
@@ -55,47 +56,47 @@ export default function WorkoutList() {
         onRemove={() => refresh(term)}
       />
     ),
-    [refresh, term, settings?.images]
-  );
+    [refresh, term, settings?.images],
+  )
 
   const next = useCallback(async () => {
-    if (end) return;
-    const newOffset = offset + LIMIT;
+    if (end) return
+    const newOffset = offset + limit
     console.log(`${SetList.name}.next:`, {
       offset,
-      limit: LIMIT,
+      limit,
       newOffset,
       term,
-    });
+    })
     const newWorkouts = await setRepo
       .createQueryBuilder()
       .select()
-      .where("name LIKE :name", { name: `%${term.trim()}%` })
-      .groupBy("name")
-      .orderBy("name")
-      .limit(LIMIT)
+      .where('name LIKE :name', {name: `%${term}%`})
+      .groupBy('name')
+      .orderBy('name')
+      .limit(limit)
       .offset(newOffset)
-      .getMany();
-    if (newWorkouts.length === 0) return setEnd(true);
-    if (!workouts) return;
-    setWorkouts([...workouts, ...newWorkouts]);
-    if (newWorkouts.length < LIMIT) return setEnd(true);
-    setOffset(newOffset);
-  }, [term, end, offset, workouts]);
+      .getMany()
+    if (newWorkouts.length === 0) return setEnd(true)
+    if (!workouts) return
+    setWorkouts([...workouts, ...newWorkouts])
+    if (newWorkouts.length < limit) return setEnd(true)
+    setOffset(newOffset)
+  }, [term, end, offset, workouts])
 
   const onAdd = useCallback(async () => {
-    navigation.navigate("EditWorkout", {
+    navigation.navigate('EditWorkout', {
       value: new GymSet(),
-    });
-  }, [navigation]);
+    })
+  }, [navigation])
 
   const search = useCallback(
     (value: string) => {
-      setTerm(value);
-      refresh(value);
+      setTerm(value)
+      refresh(value)
     },
-    [refresh]
-  );
+    [refresh],
+  )
 
   return (
     <>
@@ -111,11 +112,11 @@ export default function WorkoutList() {
             data={workouts}
             style={{flex: 1}}
             renderItem={renderItem}
-            keyExtractor={(w) => w.name}
+            keyExtractor={w => w.name}
             onEndReached={next}
           />
         )}
       </Page>
     </>
-  );
+  )
 }

WorkoutsPage.tsx

@@ -1,24 +1,23 @@
-import { createStackNavigator } from "@react-navigation/stack";
-import EditWorkout from "./EditWorkout";
-import GymSet from "./gym-set";
-import WorkoutList from "./WorkoutList";
+import {createStackNavigator} from '@react-navigation/stack'
+import EditWorkout from './EditWorkout'
+import GymSet from './gym-set'
+import WorkoutList from './WorkoutList'
 
 export type WorkoutsPageParams = {
-  WorkoutList: {};
+  WorkoutList: {}
   EditWorkout: {
-    value: GymSet;
-  };
-};
+    value: GymSet
+  }
+}
 
-const Stack = createStackNavigator<WorkoutsPageParams>();
+const Stack = createStackNavigator<WorkoutsPageParams>()
 
 export default function WorkoutsPage() {
   return (
     <Stack.Navigator
-      screenOptions={{ headerShown: false, animationEnabled: false }}
-    >
+      screenOptions={{headerShown: false, animationEnabled: false}}>
       <Stack.Screen name="WorkoutList" component={WorkoutList} />
       <Stack.Screen name="EditWorkout" component={EditWorkout} />
     </Stack.Navigator>
-  );
+  )
 }

android/Gemfile.lock

@@ -1,24 +1,24 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.6)
+    CFPropertyList (3.0.5)
       rexml
-    addressable (2.8.4)
+    addressable (2.8.1)
       public_suffix (>= 2.0.2, < 6.0)
     artifactory (3.0.15)
     atomos (0.1.3)
     aws-eventstream (1.2.0)
-    aws-partitions (1.780.0)
-    aws-sdk-core (3.175.0)
+    aws-partitions (1.686.0)
+    aws-sdk-core (3.168.4)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.5)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.67.0)
-      aws-sdk-core (~> 3, >= 3.174.0)
+    aws-sdk-kms (1.61.0)
+      aws-sdk-core (~> 3, >= 3.165.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.126.0)
-      aws-sdk-core (~> 3, >= 3.174.0)
+    aws-sdk-s3 (1.117.2)
+      aws-sdk-core (~> 3, >= 3.165.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.4)
     aws-sigv4 (1.5.2)
@@ -36,8 +36,8 @@ GEM
       unf (>= 0.0.5, < 1.0.0)
     dotenv (2.8.1)
     emoji_regex (3.2.3)
-    excon (0.100.0)
-    faraday (1.10.3)
+    excon (0.95.0)
+    faraday (1.10.2)
       faraday-em_http (~> 1.0)
       faraday-em_synchrony (~> 1.0)
       faraday-excon (~> 1.1)
@@ -65,8 +65,8 @@ GEM
     faraday-retry (1.0.3)
     faraday_middleware (1.2.0)
       faraday (~> 1.0)
-    fastimage (2.2.7)
-    fastlane (2.213.0)
+    fastimage (2.2.6)
+    fastlane (2.211.0)
       CFPropertyList (>= 2.3, < 4.0.0)
       addressable (>= 2.8, < 3.0.0)
       artifactory (~> 3.0)
@@ -90,7 +90,7 @@ GEM
       json (< 3.0.0)
       jwt (>= 2.1.0, < 3)
       mini_magick (>= 4.9.4, < 5.0.0)
-      multipart-post (>= 2.0.0, < 3.0.0)
+      multipart-post (~> 2.0.0)
       naturally (~> 2.2)
       optparse (~> 0.1.1)
       plist (>= 3.1.0, < 4.0.0)
@@ -106,9 +106,9 @@ GEM
       xcpretty (~> 0.3.0)
       xcpretty-travis-formatter (>= 0.0.3)
     gh_inspector (1.1.3)
-    google-apis-androidpublisher_v3 (0.43.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-core (0.11.0)
+    google-apis-androidpublisher_v3 (0.32.0)
+      google-apis-core (>= 0.9.1, < 2.a)
+    google-apis-core (0.9.2)
       addressable (~> 2.5, >= 2.5.1)
       googleauth (>= 0.16.2, < 2.a)
       httpclient (>= 2.8.1, < 3.a)
@@ -117,10 +117,10 @@ GEM
       retriable (>= 2.0, < 4.a)
       rexml
       webrick
-    google-apis-iamcredentials_v1 (0.17.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-playcustomapp_v1 (0.13.0)
-      google-apis-core (>= 0.11.0, < 2.a)
+    google-apis-iamcredentials_v1 (0.16.0)
+      google-apis-core (>= 0.9.1, < 2.a)
+    google-apis-playcustomapp_v1 (0.12.0)
+      google-apis-core (>= 0.9.1, < 2.a)
     google-apis-storage_v1 (0.19.0)
       google-apis-core (>= 0.9.0, < 2.a)
     google-cloud-core (1.6.0)
@@ -128,7 +128,7 @@ GEM
       google-cloud-errors (~> 1.0)
     google-cloud-env (1.6.0)
       faraday (>= 0.17.3, < 3.0)
-    google-cloud-errors (1.3.1)
+    google-cloud-errors (1.3.0)
     google-cloud-storage (1.44.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
@@ -137,7 +137,7 @@ GEM
       google-cloud-core (~> 1.6)
       googleauth (>= 0.16.2, < 2.a)
       mini_mime (~> 1.0)
-    googleauth (1.5.2)
+    googleauth (1.3.0)
       faraday (>= 0.17.3, < 3.a)
       jwt (>= 1.4, < 3.0)
       memoist (~> 0.16)
@@ -150,17 +150,17 @@ GEM
     httpclient (2.8.3)
     jmespath (1.6.2)
     json (2.6.3)
-    jwt (2.7.1)
+    jwt (2.6.0)
     memoist (0.16.2)
     mini_magick (4.12.0)
     mini_mime (1.1.2)
     multi_json (1.15.0)
-    multipart-post (2.3.0)
+    multipart-post (2.0.0)
     nanaimo (0.3.0)
     naturally (2.2.1)
     optparse (0.1.1)
     os (1.1.4)
-    plist (3.7.0)
+    plist (3.6.0)
     public_suffix (5.0.1)
     rake (13.0.6)
     representable (3.2.0)
@@ -178,7 +178,7 @@ GEM
       faraday (>= 0.17.5, < 3.a)
       jwt (>= 1.5, < 3.0)
       multi_json (~> 1.10)
-    simctl (1.6.10)
+    simctl (1.6.8)
       CFPropertyList
       naturally
     terminal-notifier (2.0.0)
@@ -194,7 +194,7 @@ GEM
       unf_ext
     unf_ext (0.0.8.2)
     unicode-display_width (1.8.0)
-    webrick (1.8.1)
+    webrick (1.7.0)
     word_wrap (1.0.0)
     xcodeproj (1.22.0)
       CFPropertyList (>= 2.3.3, < 4.0)

android/app/build.gradle

@@ -1,6 +1,7 @@
 apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
-apply plugin: "kotlin-android"
+
+import com.android.build.OutputFile
 
 /**
  * This is the configuration block to customize your React Native Android app.
@@ -12,8 +13,8 @@ react {
     // root = file("../")
     //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
     // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
-    // codegenDir = file("../node_modules/@react-native/codegen")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
+    // codegenDir = file("../node_modules/react-native-codegen")
     //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
     // cliFile = file("../node_modules/react-native/cli.js")
 
@@ -51,10 +52,18 @@ react {
     // hermesFlags = ["-O", "-output-source-map"]
 }
 
+/**
+ * Set this to true to create four separate APKs instead of one,
+ * one for each native architecture. This is useful if you don't
+ * use App Bundles (https://developer.android.com/guide/app-bundle/)
+ * and want to have separate APKs to upload to the Play Store.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
 /**
  * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
-def enableProguardInReleaseBuilds = true
+def enableProguardInReleaseBuilds = false
 
 /**
  * The preferred build flavor of JavaScriptCore (JSC)
@@ -69,24 +78,37 @@ def enableProguardInReleaseBuilds = true
  */
 def jscFlavor = 'org.webkit:android-jsc:+'
 
+/**
+ * Private function to get the list of Native Architectures you want to build.
+ * This reads the value from reactNativeArchitectures in your gradle.properties
+ * file and works together with the --active-arch-only flag of react-native run-android.
+ */
+def reactNativeArchitectures() {
+    def value = project.getProperties().get("reactNativeArchitectures")
+    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
 android {
     ndkVersion rootProject.ext.ndkVersion
 
     compileSdkVersion rootProject.ext.compileSdkVersion
 
     namespace "com.massive"
-
-    lintOptions {
-      checkReleaseBuilds false
-      abortOnError false
-    }
-
     defaultConfig {
         applicationId "com.massive"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36174
-        versionName "1.148"
+        versionCode 36154
+        versionName "1.128"
+    }
+
+    splits {
+        abi {
+            reset()
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false  // If true, also generate a universal APK
+            include(*reactNativeArchitectures())
+        }
     }
     signingConfigs {
         release {
@@ -104,6 +126,10 @@ android {
                 keyAlias MYAPP_UPLOAD_KEY_ALIAS
                 keyPassword MYAPP_UPLOAD_KEY_PASSWORD
             }
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
         }
     }
     buildTypes {
@@ -118,15 +144,33 @@ android {
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
+
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // https://developer.android.com/studio/build/configure-apk-splits.html
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
+            }
+
+        }
+    }
 }
 
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-    implementation 'androidx.documentfile:documentfile:1.0.1'
-    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
-    implementation project(':react-native-sqlite-storage')
-    implementation project(':react-native-vector-icons')
+
+    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
+    implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+    implementation "androidx.core:core-ktx:1.6.0"
+    implementation "androidx.appcompat:appcompat:1.3.1"
 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
@@ -142,7 +186,3 @@ dependencies {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
-project.ext.vectoricons = [
-  iconFontNames: ['MaterialIcons.ttf']
-]
-apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

android/app/src/debug/java/com/massive/ReactNativeFlipper.java

@@ -1,75 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
- * directory of this source tree.
- */
-package com.massive;
-
-import android.content.Context;
-import com.facebook.flipper.android.AndroidFlipperClient;
-import com.facebook.flipper.android.utils.FlipperUtils;
-import com.facebook.flipper.core.FlipperClient;
-import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
-import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
-import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
-import com.facebook.flipper.plugins.inspector.DescriptorMapping;
-import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
-import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
-import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
-import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
-import com.facebook.react.ReactInstanceEventListener;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.modules.network.NetworkingModule;
-import okhttp3.OkHttpClient;
-
-/**
- * Class responsible of loading Flipper inside your React Native application. This is the debug
- * flavor of it. Here you can add your own plugins and customize the Flipper setup.
- */
-public class ReactNativeFlipper {
-  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
-    if (FlipperUtils.shouldEnableFlipper(context)) {
-      final FlipperClient client = AndroidFlipperClient.getInstance(context);
-
-      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
-      client.addPlugin(new DatabasesFlipperPlugin(context));
-      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
-      client.addPlugin(CrashReporterPlugin.getInstance());
-
-      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
-      NetworkingModule.setCustomClientBuilder(
-          new NetworkingModule.CustomClientBuilder() {
-            @Override
-            public void apply(OkHttpClient.Builder builder) {
-              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
-            }
-          });
-      client.addPlugin(networkFlipperPlugin);
-      client.start();
-
-      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
-      // Hence we run if after all native modules have been initialized
-      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
-      if (reactContext == null) {
-        reactInstanceManager.addReactInstanceEventListener(
-            new ReactInstanceEventListener() {
-              @Override
-              public void onReactContextInitialized(ReactContext reactContext) {
-                reactInstanceManager.removeReactInstanceEventListener(this);
-                reactContext.runOnNativeModulesQueueThread(
-                    new Runnable() {
-                      @Override
-                      public void run() {
-                        client.addPlugin(new FrescoFlipperPlugin());
-                      }
-                    });
-              }
-            });
-      } else {
-        client.addPlugin(new FrescoFlipperPlugin());
-      }
-    }
-  }
-}

android/app/src/main/AndroidManifest.xml

@@ -1,41 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
+    xmlns:tools="http://schemas.android.com/tools"
+    package="com.massive">
 
-    <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
     <uses-permission android:name="android.permission.VIBRATE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.REQUEST_IGNORE_BATTERY_OPTIMIZATIONS" />
     <uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
-
     <uses-permission
         android:name="android.permission.ACCESS_NETWORK_STATE"
         tools:node="remove" />
 
-    <uses-permission android:name="com.google.android.gms.permission.AD_ID"
-      tools:node="remove"/>
-
     <application
         android:name=".MainApplication"
-      android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
         android:allowBackup="false"
+        android:dataExtractionRules="@xml/data_extraction_rules"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
         android:theme="@style/AppTheme">
-      <activity
-        android:name=".MainActivity"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
-        android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize"
-        android:exported="true">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-
         <activity
             android:name=".TimerDone"
             android:exported="false">
@@ -43,14 +28,25 @@
                 android:name="android.app.lib_name"
                 android:value="" />
         </activity>
+        <activity
+            android:name=".MainActivity"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+            android:exported="true"
+            android:launchMode="singleTask"
+            android:windowSoftInputMode="adjustResize">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
 
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
         <activity
             android:name=".StopAlarm"
             android:exported="true"
             android:process=":remote" />
-
         <service
             android:name=".AlarmService"
             android:exported="false" />
     </application>
+
 </manifest>

android/app/src/main/java/com/massive/BackupModule.kt

@@ -1,84 +0,0 @@
-package com.massive
-
-import android.app.AlarmManager
-import android.app.PendingIntent
-import android.content.*
-import android.net.Uri
-import android.os.Build
-import androidx.annotation.RequiresApi
-import androidx.documentfile.provider.DocumentFile
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactContextBaseJavaModule
-import com.facebook.react.bridge.ReactMethod
-import java.io.*
-import java.util.*
-
-class BackupModule constructor(context: ReactApplicationContext?) :
-    ReactContextBaseJavaModule(context) {
-    val context: ReactApplicationContext = reactApplicationContext
-    private var targetDir: String? = null
-
-    private val copyReceiver = object : BroadcastReceiver() {
-        @RequiresApi(Build.VERSION_CODES.O)
-        override fun onReceive(context: Context?, intent: Intent?) {
-            val treeUri: Uri = Uri.parse(targetDir)
-            val documentFile = context?.let { DocumentFile.fromTreeUri(it, treeUri) }
-            val file = documentFile?.createFile("application/octet-stream", "massive.db")
-            val output = context?.contentResolver?.openOutputStream(file!!.uri)
-            val sourceFile = File(context?.getDatabasePath("massive.db")!!.path)
-            val input = FileInputStream(sourceFile)
-            if (output != null) {
-                input.copyTo(output)
-            }
-            output?.flush()
-            output?.close()
-        }
-    }
-
-    @RequiresApi(Build.VERSION_CODES.M)
-    @ReactMethod
-    fun start(baseUri: String) {
-        targetDir = baseUri
-        val alarmMgr = context.getSystemService(Context.ALARM_SERVICE) as AlarmManager
-        val intent = Intent(COPY_BROADCAST)
-        val pendingIntent =
-            PendingIntent.getBroadcast(context, 0, intent, PendingIntent.FLAG_IMMUTABLE)
-        pendingIntent.send()
-
-        val calendar = Calendar.getInstance().apply {
-            timeInMillis = System.currentTimeMillis()
-            set(Calendar.HOUR_OF_DAY, 6)
-            set(Calendar.MINUTE, 0)
-            set(Calendar.SECOND, 0)
-        }
-
-        alarmMgr.setRepeating(
-            AlarmManager.RTC_WAKEUP,
-            calendar.timeInMillis,
-            AlarmManager.INTERVAL_DAY,
-            pendingIntent
-        )
-    }
-
-    @RequiresApi(Build.VERSION_CODES.M)
-    @ReactMethod
-    fun stop() {
-        val alarmMgr = context.getSystemService(Context.ALARM_SERVICE) as AlarmManager
-        val intent = Intent(COPY_BROADCAST)
-        val pendingIntent =
-            PendingIntent.getBroadcast(context, 0, intent, PendingIntent.FLAG_IMMUTABLE)
-        alarmMgr.cancel(pendingIntent)
-    }
-
-    init {
-        reactApplicationContext.registerReceiver(copyReceiver, IntentFilter(COPY_BROADCAST))
-    }
-
-    companion object {
-        const val COPY_BROADCAST = "copy-event"
-    }
-
-    override fun getName(): String {
-        return "BackupModule"
-    }
-}

android/app/src/main/java/com/massive/DownloadModule.kt

@@ -0,0 +1,51 @@
+package com.massive
+
+import android.app.DownloadManager
+import android.app.NotificationChannel
+import android.app.NotificationManager
+import android.app.NotificationManager.IMPORTANCE_DEFAULT
+import android.app.PendingIntent
+import android.app.PendingIntent.FLAG_IMMUTABLE
+import android.content.Intent
+import android.net.Uri
+import android.os.Build
+import android.os.Environment
+import android.util.Log
+import androidx.annotation.RequiresApi
+import androidx.core.app.NotificationCompat
+import androidx.core.net.toUri
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import java.io.File
+
+class DownloadModule internal constructor(context: ReactApplicationContext) :
+    ReactContextBaseJavaModule(context) {
+    override fun getName(): String {
+        return "DownloadModule"
+    }
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    @ReactMethod
+    fun show(name: String) {
+        val channel = NotificationChannel(CHANNEL_ID, CHANNEL_ID, IMPORTANCE_DEFAULT)
+        channel.description = "Notifications for downloaded files."
+        val manager =
+            reactApplicationContext.getSystemService(NotificationManager::class.java)
+        manager.createNotificationChannel(channel)
+        val intent = Intent(DownloadManager.ACTION_VIEW_DOWNLOADS)
+        val pendingIntent =
+            PendingIntent.getActivity(reactApplicationContext, 0, intent, FLAG_IMMUTABLE)
+        val builder = NotificationCompat.Builder(reactApplicationContext, CHANNEL_ID)
+            .setSmallIcon(R.drawable.ic_baseline_arrow_downward_24)
+            .setContentTitle("Downloaded $name")
+            .setContentIntent(pendingIntent)
+            .setAutoCancel(true)
+        manager.notify(NOTIFICATION_ID, builder.build())
+    }
+
+    companion object {
+        private const val CHANNEL_ID = "MassiveDownloads"
+        private const val NOTIFICATION_ID = 3
+    }
+}

android/app/src/main/java/com/massive/MainActivity.kt

@@ -2,7 +2,7 @@ package com.massive
 
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
 import com.facebook.react.defaults.DefaultReactActivityDelegate
 
 class MainActivity : ReactActivity() {
@@ -10,8 +10,8 @@ class MainActivity : ReactActivity() {
      * Returns the name of the main component registered from JavaScript. This is used to schedule
      * rendering of the component.
      */
-    override fun getMainComponentName(): String? {
-        return "massive"
+    override fun getMainComponentName(): kotlin.String {
+        return "RnDiffApp"
     }
 
     /**
@@ -21,8 +21,10 @@ class MainActivity : ReactActivity() {
     override fun createReactActivityDelegate(): ReactActivityDelegate {
         return DefaultReactActivityDelegate(
             this,
-            mainComponentName!!,  // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-            fabricEnabled
+            mainComponentName,  // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+            DefaultNewArchitectureEntryPoint.fabricEnabled,  // fabricEnabled
+            // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18).
+            DefaultNewArchitectureEntryPoint.concurrentReactEnabled // concurrentRootEnabled
         )
     }
 }

android/app/src/main/java/com/massive/MainApplication.kt

@@ -16,9 +16,9 @@ class MainApplication : Application(), ReactApplication {
         }
 
         override fun getPackages(): List<ReactPackage> {
-            val packages: MutableList<ReactPackage> = PackageList(this).packages
-            packages.add(MassivePackage())
-            return packages
+            // Packages that cannot be autolinked yet can be added manually here, for example:
+            // packages.add(new MyReactNativePackage());
+            return PackageList(this).packages
         }
 
         override fun getJSMainModuleName(): String {

android/app/src/main/java/com/massive/MassivePackage.kt

@@ -4,6 +4,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
+import java.util.ArrayList
 
 class MassivePackage : ReactPackage {
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
@@ -15,8 +16,8 @@ class MassivePackage : ReactPackage {
     ): List<NativeModule> {
         val modules: MutableList<NativeModule> = ArrayList()
         modules.add(AlarmModule(reactContext))
+        modules.add(DownloadModule(reactContext))
         modules.add(SettingsModule(reactContext))
-        modules.add(BackupModule(reactContext))
         return modules
     }
 }

android/app/src/main/java/com/massive/ReactNativeFlipper.java

@@ -7,6 +7,7 @@
 package com.massive;
 
 import android.content.Context;
+
 import com.facebook.react.ReactInstanceManager;
 
 /**

android/app/src/main/java/com/massive/newarchitecture/MainApplicationReactNativeHost.java

@@ -1,116 +0,0 @@
-package com.massive.newarchitecture;
-
-import android.app.Application;
-import androidx.annotation.NonNull;
-import com.facebook.react.PackageList;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
-import com.facebook.react.bridge.JSIModulePackage;
-import com.facebook.react.bridge.JSIModuleProvider;
-import com.facebook.react.bridge.JSIModuleSpec;
-import com.facebook.react.bridge.JSIModuleType;
-import com.facebook.react.bridge.JavaScriptContextHolder;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.UIManager;
-import com.facebook.react.fabric.ComponentFactory;
-import com.facebook.react.fabric.CoreComponentsRegistry;
-import com.facebook.react.fabric.FabricJSIModuleProvider;
-import com.facebook.react.fabric.ReactNativeConfig;
-import com.facebook.react.uimanager.ViewManagerRegistry;
-import com.massive.BuildConfig;
-import com.massive.newarchitecture.components.MainComponentsRegistry;
-import com.massive.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
-import java.util.ArrayList;
-import java.util.List;
-
-/**
- * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both
- * TurboModule delegates and the Fabric Renderer.
- *
- * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
- * `newArchEnabled` property). Is ignored otherwise.
- */
-public class MainApplicationReactNativeHost extends ReactNativeHost {
-  public MainApplicationReactNativeHost(Application application) {
-    super(application);
-  }
-
-  @Override
-  public boolean getUseDeveloperSupport() {
-    return BuildConfig.DEBUG;
-  }
-
-  @Override
-  protected List<ReactPackage> getPackages() {
-    List<ReactPackage> packages = new PackageList(this).getPackages();
-    // Packages that cannot be autolinked yet can be added manually here, for example:
-    //     packages.add(new MyReactNativePackage());
-    // TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
-    //     packages.add(new TurboReactPackage() { ... });
-    // If you have custom Fabric Components, their ViewManagers should also be loaded here
-    // inside a ReactPackage.
-    return packages;
-  }
-
-  @Override
-  protected String getJSMainModuleName() {
-    return "index";
-  }
-
-  @NonNull
-  @Override
-  protected ReactPackageTurboModuleManagerDelegate.Builder
-      getReactPackageTurboModuleManagerDelegateBuilder() {
-    // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
-    // for the new architecture and to use TurboModules correctly.
-    return new MainApplicationTurboModuleManagerDelegate.Builder();
-  }
-
-  @Override
-  protected JSIModulePackage getJSIModulePackage() {
-    return new JSIModulePackage() {
-      @Override
-      public List<JSIModuleSpec> getJSIModules(
-          final ReactApplicationContext reactApplicationContext,
-          final JavaScriptContextHolder jsContext) {
-        final List<JSIModuleSpec> specs = new ArrayList<>();
-
-        // Here we provide a new JSIModuleSpec that will be responsible of providing the
-        // custom Fabric Components.
-        specs.add(
-            new JSIModuleSpec() {
-              @Override
-              public JSIModuleType getJSIModuleType() {
-                return JSIModuleType.UIManager;
-              }
-
-              @Override
-              public JSIModuleProvider<UIManager> getJSIModuleProvider() {
-                final ComponentFactory componentFactory = new ComponentFactory();
-                CoreComponentsRegistry.register(componentFactory);
-
-                // Here we register a Components Registry.
-                // The one that is generated with the template contains no components
-                // and just provides you the one from React Native core.
-                MainComponentsRegistry.register(componentFactory);
-
-                final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
-
-                ViewManagerRegistry viewManagerRegistry =
-                    new ViewManagerRegistry(
-                        reactInstanceManager.getOrCreateViewManagers(reactApplicationContext));
-
-                return new FabricJSIModuleProvider(
-                    reactApplicationContext,
-                    componentFactory,
-                    ReactNativeConfig.DEFAULT_CONFIG,
-                    viewManagerRegistry);
-              }
-            });
-        return specs;
-      }
-    };
-  }
-}

android/app/src/main/java/com/massive/newarchitecture/components/MainComponentsRegistry.java

@@ -1,36 +0,0 @@
-package com.massive.newarchitecture.components;
-
-import com.facebook.jni.HybridData;
-import com.facebook.proguard.annotations.DoNotStrip;
-import com.facebook.react.fabric.ComponentFactory;
-import com.facebook.soloader.SoLoader;
-
-/**
- * Class responsible to load the custom Fabric Components. This class has native methods and needs a
- * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
- * folder for you).
- *
- * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
- * `newArchEnabled` property). Is ignored otherwise.
- */
-@DoNotStrip
-public class MainComponentsRegistry {
-  static {
-    SoLoader.loadLibrary("fabricjni");
-  }
-
-  @DoNotStrip private final HybridData mHybridData;
-
-  @DoNotStrip
-  private native HybridData initHybrid(ComponentFactory componentFactory);
-
-  @DoNotStrip
-  private MainComponentsRegistry(ComponentFactory componentFactory) {
-    mHybridData = initHybrid(componentFactory);
-  }
-
-  @DoNotStrip
-  public static MainComponentsRegistry register(ComponentFactory componentFactory) {
-    return new MainComponentsRegistry(componentFactory);
-  }
-}

android/app/src/main/java/com/massive/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java

@@ -1,48 +0,0 @@
-package com.massive.newarchitecture.modules;
-
-import com.facebook.jni.HybridData;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.soloader.SoLoader;
-import java.util.List;
-
-/**
- * Class responsible to load the TurboModules. This class has native methods and needs a
- * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
- * folder for you).
- *
- * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
- * `newArchEnabled` property). Is ignored otherwise.
- */
-public class MainApplicationTurboModuleManagerDelegate
-    extends ReactPackageTurboModuleManagerDelegate {
-
-  private static volatile boolean sIsSoLibraryLoaded;
-
-  protected MainApplicationTurboModuleManagerDelegate(
-      ReactApplicationContext reactApplicationContext, List<ReactPackage> packages) {
-    super(reactApplicationContext, packages);
-  }
-
-  protected native HybridData initHybrid();
-
-  native boolean canCreateTurboModule(String moduleName);
-
-  public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder {
-    protected MainApplicationTurboModuleManagerDelegate build(
-        ReactApplicationContext context, List<ReactPackage> packages) {
-      return new MainApplicationTurboModuleManagerDelegate(context, packages);
-    }
-  }
-
-  @Override
-  protected synchronized void maybeLoadOtherSoLibraries() {
-    if (!sIsSoLibraryLoaded) {
-      // If you change the name of your application .so file in the Android.mk file,
-      // make sure you update the name here as well.
-      SoLoader.loadLibrary("massive_appmodules");
-      sIsSoLibraryLoaded = true;
-    }
-  }
-}

android/app/src/main/jni/MainApplicationModuleProvider.cpp

@@ -1,24 +0,0 @@
-#include "MainApplicationModuleProvider.h"
-
-#include <rncore.h>
-
-namespace facebook {
-namespace react {
-
-std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
-    const JavaTurboModule::InitParams &params) {
-  // Here you can provide your own module provider for TurboModules coming from
-  // either your application or from external libraries. The approach to follow
-  // is similar to the following (for a library called `samplelibrary`:
-  //
-  // auto module = samplelibrary_ModuleProvider(moduleName, params);
-  // if (module != nullptr) {
-  //    return module;
-  // }
-  // return rncore_ModuleProvider(moduleName, params);
-  return rncore_ModuleProvider(moduleName, params);
-}
-
-} // namespace react
-} // namespace facebook

android/app/src/main/jni/MainApplicationModuleProvider.h

@@ -1,16 +0,0 @@
-#pragma once
-
-#include <memory>
-#include <string>
-
-#include <ReactCommon/JavaTurboModule.h>
-
-namespace facebook {
-namespace react {
-
-std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
-    const JavaTurboModule::InitParams &params);
-
-} // namespace react
-} // namespace facebook

android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp

@@ -1,45 +0,0 @@
-#include "MainApplicationTurboModuleManagerDelegate.h"
-#include "MainApplicationModuleProvider.h"
-
-namespace facebook {
-namespace react {
-
-jni::local_ref<MainApplicationTurboModuleManagerDelegate::jhybriddata>
-MainApplicationTurboModuleManagerDelegate::initHybrid(
-    jni::alias_ref<jhybridobject>) {
-  return makeCxxInstance();
-}
-
-void MainApplicationTurboModuleManagerDelegate::registerNatives() {
-  registerHybrid({
-      makeNativeMethod(
-          "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid),
-      makeNativeMethod(
-          "canCreateTurboModule",
-          MainApplicationTurboModuleManagerDelegate::canCreateTurboModule),
-  });
-}
-
-std::shared_ptr<TurboModule>
-MainApplicationTurboModuleManagerDelegate::getTurboModule(
-    const std::string name,
-    const std::shared_ptr<CallInvoker> jsInvoker) {
-  // Not implemented yet: provide pure-C++ NativeModules here.
-  return nullptr;
-}
-
-std::shared_ptr<TurboModule>
-MainApplicationTurboModuleManagerDelegate::getTurboModule(
-    const std::string name,
-    const JavaTurboModule::InitParams &params) {
-  return MainApplicationModuleProvider(name, params);
-}
-
-bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
-    std::string name) {
-  return getTurboModule(name, nullptr) != nullptr ||
-      getTurboModule(name, {.moduleName = name}) != nullptr;
-}
-
-} // namespace react
-} // namespace facebook

android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h

@@ -1,38 +0,0 @@
-#include <memory>
-#include <string>
-
-#include <ReactCommon/TurboModuleManagerDelegate.h>
-#include <fbjni/fbjni.h>
-
-namespace facebook {
-namespace react {
-
-class MainApplicationTurboModuleManagerDelegate
-    : public jni::HybridClass<
-          MainApplicationTurboModuleManagerDelegate,
-          TurboModuleManagerDelegate> {
- public:
-  // Adapt it to the package you used for your Java class.
-  static constexpr auto kJavaDescriptor =
-      "Lcom/massive/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";
-
-  static jni::local_ref<jhybriddata> initHybrid(jni::alias_ref<jhybridobject>);
-
-  static void registerNatives();
-
-  std::shared_ptr<TurboModule> getTurboModule(
-      const std::string name,
-      const std::shared_ptr<CallInvoker> jsInvoker) override;
-  std::shared_ptr<TurboModule> getTurboModule(
-      const std::string name,
-      const JavaTurboModule::InitParams &params) override;
-
-  /**
-   * Test-only method. Allows user to verify whether a TurboModule can be
-   * created by instances of this class.
-   */
-  bool canCreateTurboModule(std::string name);
-};
-
-} // namespace react
-} // namespace facebook

android/app/src/main/jni/MainComponentsRegistry.cpp

@@ -1,61 +0,0 @@
-#include "MainComponentsRegistry.h"
-
-#include <CoreComponentsRegistry.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <react/renderer/components/rncore/ComponentDescriptors.h>
-
-namespace facebook {
-namespace react {
-
-MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {}
-
-std::shared_ptr<ComponentDescriptorProviderRegistry const>
-MainComponentsRegistry::sharedProviderRegistry() {
-  auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
-
-  // Custom Fabric Components go here. You can register custom
-  // components coming from your App or from 3rd party libraries here.
-  //
-  // providerRegistry->add(concreteComponentDescriptorProvider<
-  //        AocViewerComponentDescriptor>());
-  return providerRegistry;
-}
-
-jni::local_ref<MainComponentsRegistry::jhybriddata>
-MainComponentsRegistry::initHybrid(
-    jni::alias_ref<jclass>,
-    ComponentFactory *delegate) {
-  auto instance = makeCxxInstance(delegate);
-
-  auto buildRegistryFunction =
-      [](EventDispatcher::Weak const &eventDispatcher,
-         ContextContainer::Shared const &contextContainer)
-      -> ComponentDescriptorRegistry::Shared {
-    auto registry = MainComponentsRegistry::sharedProviderRegistry()
-                        ->createComponentDescriptorRegistry(
-                            {eventDispatcher, contextContainer});
-
-    auto mutableRegistry =
-        std::const_pointer_cast<ComponentDescriptorRegistry>(registry);
-
-    mutableRegistry->setFallbackComponentDescriptor(
-        std::make_shared<UnimplementedNativeViewComponentDescriptor>(
-            ComponentDescriptorParameters{
-                eventDispatcher, contextContainer, nullptr}));
-
-    return registry;
-  };
-
-  delegate->buildRegistryFunction = buildRegistryFunction;
-  return instance;
-}
-
-void MainComponentsRegistry::registerNatives() {
-  registerHybrid({
-      makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid),
-  });
-}
-
-} // namespace react
-} // namespace facebook

android/app/src/main/jni/MainComponentsRegistry.h

@@ -1,32 +0,0 @@
-#pragma once
-
-#include <ComponentFactory.h>
-#include <fbjni/fbjni.h>
-#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <react/renderer/componentregistry/ComponentDescriptorRegistry.h>
-
-namespace facebook {
-namespace react {
-
-class MainComponentsRegistry
-    : public facebook::jni::HybridClass<MainComponentsRegistry> {
- public:
-  // Adapt it to the package you used for your Java class.
-  constexpr static auto kJavaDescriptor =
-      "Lcom/massive/newarchitecture/components/MainComponentsRegistry;";
-
-  static void registerNatives();
-
-  MainComponentsRegistry(ComponentFactory *delegate);
-
- private:
-  static std::shared_ptr<ComponentDescriptorProviderRegistry const>
-  sharedProviderRegistry();
-
-  static jni::local_ref<jhybriddata> initHybrid(
-      jni::alias_ref<jclass>,
-      ComponentFactory *delegate);
-};
-
-} // namespace react
-} // namespace facebook

android/app/src/main/jni/OnLoad.cpp

@@ -1,11 +0,0 @@
-#include <fbjni/fbjni.h>
-#include "MainApplicationTurboModuleManagerDelegate.h"
-#include "MainComponentsRegistry.h"
-
-JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
-  return facebook::jni::initialize(vm, [] {
-    facebook::react::MainApplicationTurboModuleManagerDelegate::
-        registerNatives();
-    facebook::react::MainComponentsRegistry::registerNatives();
-  });
-}

android/build.gradle

@@ -2,12 +2,11 @@
 
 buildscript {
     ext {
+        kotlin_version = '1.6.10'
         buildToolsVersion = "33.0.0"
         minSdkVersion = 21
         compileSdkVersion = 33
         targetSdkVersion = 33
-
-        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
         ndkVersion = "23.1.7779620"
     }
     repositories {
@@ -15,8 +14,8 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle")
+        classpath('com.android.tools.build:gradle:7.3.1')
         classpath("com.facebook.react:react-native-gradle-plugin")
-        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.22")
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

android/gradle.properties

@@ -1,44 +1,33 @@
 # Project-wide Gradle settings.
-
 # IDE (e.g. Android Studio) users:
 # Gradle settings configured through the IDE *will override*
 # any settings specified in this file.
-
 # For more details on how to configure your build environment visit
 # http://www.gradle.org/docs/current/userguide/build_environment.html
-
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
 org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
-
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
-
 # AndroidX package structure to make it clearer which packages are bundled with the
 # Android operating system, and which are packaged with your app's APK
 # https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
 # Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true
-
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.182.0
-
+FLIPPER_VERSION=0.125.0
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using
 # ./gradlew <task> -PreactNativeArchitectures=x86_64
 reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-
 # Use this property to enable support to the new architecture.
 # This will allow you to use TurboModules and the Fabric render in
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
 newArchEnabled=false
-
-# Use this property to enable or disable the Hermes JS engine.
-# If set to false, you will be using JSC instead.
 hermesEnabled=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
+#Fri Mar 03 17:27:19 NZDT 2023
 distributionBase=GRADLE_USER_HOME
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-bin.zip
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
-networkTimeout=10000
-zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME

android/gradlew

@@ -55,7 +55,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -80,11 +80,11 @@ do
     esac
 done
 
-# This is normally unused
-# shellcheck disable=SC2034
-APP_BASE_NAME=${0##*/}
 APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
+APP_NAME="Gradle"
+APP_BASE_NAME=${0##*/}
+
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
@@ -143,16 +143,12 @@ fi
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
-        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045 
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
     case $MAX_FD in  #(
       '' | soft) :;; #(
       *)
-        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045 
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -209,12 +205,6 @@ set -- \
         org.gradle.wrapper.GradleWrapperMain \
         "$@"
 
-# Stop when "xargs" is not available.
-if ! command -v xargs >/dev/null 2>&1
-then
-    die "xargs is not available"
-fi
-
 # Use "xargs" to parse quoted args.
 #
 # With -n1 it outputs one arg per line, with the quotes and backslashes removed.

android/gradlew.bat

@@ -26,7 +26,6 @@ if "%OS%"=="Windows_NT" setlocal
 
 set DIRNAME=%~dp0
 if "%DIRNAME%" == "" set DIRNAME=.
-@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
@@ -41,7 +40,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if %ERRORLEVEL% equ 0 goto execute
+if "%ERRORLEVEL%" == "0" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -76,15 +75,13 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 :end
 @rem End local scope for the variables with windows NT shell
-if %ERRORLEVEL% equ 0 goto mainEnd
+if "%ERRORLEVEL%"=="0" goto mainEnd
 
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-set EXIT_CODE=%ERRORLEVEL%
-if %EXIT_CODE% equ 0 set EXIT_CODE=1
-if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
-exit /b %EXIT_CODE%
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
 
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal

android/settings.gradle

@@ -1,6 +1,6 @@
 rootProject.name = 'massive'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
-includeBuild('../node_modules/@react-native/gradle-plugin')
+includeBuild('../node_modules/react-native-gradle-plugin')
 include ':react-native-sqlite-storage'
 project(':react-native-sqlite-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sqlite-storage/platforms/android')

babel.config.js

@@ -4,8 +4,8 @@ module.exports = {
     '@babel/plugin-transform-flow-strip-types',
     ['@babel/plugin-proposal-decorators', {legacy: true}],
     ['@babel/plugin-proposal-class-properties', {loose: true}],
-    'react-native-paper/babel',
     'react-native-reanimated/plugin',
+    'react-native-paper/babel',
   ],
   env: {
     production: {

best.service.ts

@@ -1,42 +1,28 @@
-import { LIMIT } from "./constants";
-import { setRepo } from "./db";
-import GymSet from "./gym-set";
+import {setRepo} from './db'
+import GymSet from './gym-set'
 
 export const getBestSet = async (name: string): Promise<GymSet> => {
   return setRepo
     .createQueryBuilder()
     .select()
-    .addSelect("MAX(weight)", "weight")
-    .where("name = :name", { name })
-    .groupBy("name")
-    .addGroupBy("reps")
-    .orderBy("weight", "DESC")
-    .addOrderBy("reps", "DESC")
-    .getOne();
-};
+    .addSelect('MAX(weight)', 'weight')
+    .where('name = :name', {name})
+    .groupBy('name')
+    .addGroupBy('reps')
+    .orderBy('weight', 'DESC')
+    .addOrderBy('reps', 'DESC')
+    .getOne()
+}
 
-export const getBestSets = ({
-  term: term,
-  offset,
-}: {
-  term: string;
-  offset?: number;
-}) => {
+export const getLast = async (name: string): Promise<GymSet> => {
   return setRepo
-    .createQueryBuilder("gym_set")
-    .select(["gym_set.name", "gym_set.reps", "gym_set.weight"])
-    .groupBy("gym_set.name")
-    .innerJoin(
-      (qb) =>
-        qb
-          .select(["gym_set2.name", "MAX(gym_set2.weight) AS max_weight"])
-          .from(GymSet, "gym_set2")
-          .where("gym_set2.name LIKE (:name)", { name: `%${term.trim()}%` })
-          .groupBy("gym_set2.name"),
-      "subquery",
-      "gym_set.name = subquery.gym_set2_name AND gym_set.weight = subquery.max_weight"
-    )
-    .limit(LIMIT)
-    .offset(offset || 0)
-    .getMany();
-};
+    .createQueryBuilder()
+    .where('name = :name', {name})
+    .andWhere('reps >= 5')
+    .groupBy("STRFTIME('%Y-%m-%d', created)")
+    .orderBy('created', 'DESC')
+    .select('reps')
+    .addSelect('MAX(weight) as weight')
+    .addSelect('unit')
+    .getRawOne()
+}

colors.ts

@@ -1,41 +1,40 @@
-import { DefaultTheme, MD3DarkTheme } from "react-native-paper";
+import {DarkTheme, DefaultTheme} from 'react-native-paper'
 
 export const lightColors = [
-  { hex: MD3DarkTheme.colors.primary, name: "Purple" },
-  { hex: "#B3E5FC", name: "Blue" },
-  { hex: "#FA8072", name: "Salmon" },
-  { hex: "#FFC0CB", name: "Pink" },
-  { hex: "#E9DCC9", name: "Linen" },
-];
+  {hex: DarkTheme.colors.primary, name: 'Purple'},
+  {hex: '#B3E5FC', name: 'Blue'},
+  {hex: '#FA8072', name: 'Salmon'},
+  {hex: '#FFC0CB', name: 'Pink'},
+  {hex: '#E9DCC9', name: 'Linen'},
+]
 
 export const darkColors = [
-  { hex: DefaultTheme.colors.primary, name: "Purple" },
-  { hex: "#0051a9", name: "Blue" },
-  { hex: "#000000", name: "Black" },
-  { hex: "#863c3c", name: "Red" },
-  { hex: "#1c6000", name: "Kermit" },
-];
+  {hex: DefaultTheme.colors.primary, name: 'Purple'},
+  {hex: '#0051a9', name: 'Blue'},
+  {hex: '#000000', name: 'Black'},
+  {hex: '#863c3c', name: 'Red'},
+  {hex: '#1c6000', name: 'Kermit'},
+]
 
 export const colorShade = (color: any, amount: number) => {
-  color = color.replace(/^#/, "");
-  if (color.length === 3) {
-    color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-  }
+  color = color.replace(/^#/, '')
+  if (color.length === 3)
+    color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2]
 
-  let [r, g, b] = color.match(/.{2}/g);
-  [r, g, b] = [
+  let [r, g, b] = color.match(/.{2}/g)
+  ;[r, g, b] = [
     parseInt(r, 16) + amount,
     parseInt(g, 16) + amount,
     parseInt(b, 16) + amount,
-  ];
+  ]
 
-  r = Math.max(Math.min(255, r), 0).toString(16);
-  g = Math.max(Math.min(255, g), 0).toString(16);
-  b = Math.max(Math.min(255, b), 0).toString(16);
+  r = Math.max(Math.min(255, r), 0).toString(16)
+  g = Math.max(Math.min(255, g), 0).toString(16)
+  b = Math.max(Math.min(255, b), 0).toString(16)
 
-  const rr = (r.length < 2 ? "0" : "") + r;
-  const gg = (g.length < 2 ? "0" : "") + g;
-  const bb = (b.length < 2 ? "0" : "") + b;
+  const rr = (r.length < 2 ? '0' : '') + r
+  const gg = (g.length < 2 ? '0' : '') + g
+  const bb = (b.length < 2 ? '0' : '') + b
 
-  return `#${rr}${gg}${bb}`;
-};
+  return `#${rr}${gg}${bb}`
+}

constants.ts

@@ -1,6 +1,5 @@
-export const MARGIN = 10;
-export const PADDING = 10;
-export const ITEM_PADDING = 8;
-export const DARK_RIPPLE = "#444444";
-export const LIGHT_RIPPLE = "#c2c2c2";
-export const LIMIT = 15;
+export const MARGIN = 10
+export const PADDING = 10
+export const ITEM_PADDING = 8
+export const DARK_RIPPLE = '#444444'
+export const LIGHT_RIPPLE = '#c2c2c2'

count-many.ts

@@ -1,5 +1,5 @@
 export default interface CountMany {
-  name: string;
-  total: number;
-  sets?: number;
+  name: string
+  total: number
+  sets?: number
 }

data-source.ts

@@ -1,40 +1,39 @@
-import { DataSource } from "typeorm";
-import GymSet from "./gym-set";
-import { Sets1667185586014 as sets1667185586014 } from "./migrations/1667185586014-sets";
-import { plans1667186124792 } from "./migrations/1667186124792-plans";
-import { settings1667186130041 } from "./migrations/1667186130041-settings";
-import { addSound1667186139844 } from "./migrations/1667186139844-add-sound";
-import { addHidden1667186159379 } from "./migrations/1667186159379-add-hidden";
-import { addNotify1667186166140 } from "./migrations/1667186166140-add-notify";
-import { addImage1667186171548 } from "./migrations/1667186171548-add-image";
-import { addImages1667186179488 } from "./migrations/1667186179488-add-images";
-import { insertSettings1667186203827 } from "./migrations/1667186203827-insert-settings";
-import { addSteps1667186211251 } from "./migrations/1667186211251-add-steps";
-import { addSets1667186250618 } from "./migrations/1667186250618-add-sets";
-import { addMinutes1667186255650 } from "./migrations/1667186255650-add-minutes";
-import { addSeconds1667186259174 } from "./migrations/1667186259174-add-seconds";
-import { addShowUnit1667186265588 } from "./migrations/1667186265588-add-show-unit";
-import { addColor1667186320954 } from "./migrations/1667186320954-add-color";
-import { addSteps1667186348425 } from "./migrations/1667186348425-add-steps";
-import { addDate1667186431804 } from "./migrations/1667186431804-add-date";
-import { addShowDate1667186435051 } from "./migrations/1667186435051-add-show-date";
-import { addTheme1667186439366 } from "./migrations/1667186439366-add-theme";
-import { addShowSets1667186443614 } from "./migrations/1667186443614-add-show-sets";
-import { addSetsCreated1667186451005 } from "./migrations/1667186451005-add-sets-created";
-import { addNoSound1667186456118 } from "./migrations/1667186456118-add-no-sound";
-import { dropMigrations1667190214743 } from "./migrations/1667190214743-drop-migrations";
-import { splitColor1669420187764 } from "./migrations/1669420187764-split-color";
-import { addBackup1678334268359 } from "./migrations/1678334268359-add-backup";
-import { Plan } from "./plan";
-import Settings from "./settings";
+import {DataSource} from 'typeorm'
+import GymSet from './gym-set'
+import {Sets1667185586014 as sets1667185586014} from './migrations/1667185586014-sets'
+import {plans1667186124792} from './migrations/1667186124792-plans'
+import {settings1667186130041} from './migrations/1667186130041-settings'
+import {addSound1667186139844} from './migrations/1667186139844-add-sound'
+import {addHidden1667186159379} from './migrations/1667186159379-add-hidden'
+import {addNotify1667186166140} from './migrations/1667186166140-add-notify'
+import {addImage1667186171548} from './migrations/1667186171548-add-image'
+import {addImages1667186179488} from './migrations/1667186179488-add-images'
+import {insertSettings1667186203827} from './migrations/1667186203827-insert-settings'
+import {addSteps1667186211251} from './migrations/1667186211251-add-steps'
+import {addSets1667186250618} from './migrations/1667186250618-add-sets'
+import {addMinutes1667186255650} from './migrations/1667186255650-add-minutes'
+import {addSeconds1667186259174} from './migrations/1667186259174-add-seconds'
+import {addShowUnit1667186265588} from './migrations/1667186265588-add-show-unit'
+import {addColor1667186320954} from './migrations/1667186320954-add-color'
+import {addSteps1667186348425} from './migrations/1667186348425-add-steps'
+import {addDate1667186431804} from './migrations/1667186431804-add-date'
+import {addShowDate1667186435051} from './migrations/1667186435051-add-show-date'
+import {addTheme1667186439366} from './migrations/1667186439366-add-theme'
+import {addShowSets1667186443614} from './migrations/1667186443614-add-show-sets'
+import {addSetsCreated1667186451005} from './migrations/1667186451005-add-sets-created'
+import {addNoSound1667186456118} from './migrations/1667186456118-add-no-sound'
+import {dropMigrations1667190214743} from './migrations/1667190214743-drop-migrations'
+import {splitColor1669420187764} from './migrations/1669420187764-split-color'
+import {Plan} from './plan'
+import Settings from './settings'
 
 export const AppDataSource = new DataSource({
-  type: "react-native",
-  database: "massive.db",
-  location: "default",
+  type: 'react-native',
+  database: 'massive.db',
+  location: 'default',
   entities: [GymSet, Plan, Settings],
   migrationsRun: true,
-  migrationsTableName: "typeorm_migrations",
+  migrationsTableName: 'typeorm_migrations',
   migrations: [
     sets1667185586014,
     plans1667186124792,
@@ -60,6 +59,5 @@ export const AppDataSource = new DataSource({
     addNoSound1667186456118,
     dropMigrations1667190214743,
     splitColor1669420187764,
-    addBackup1678334268359,
   ],
-});
+})

db.ts

@@ -1,15 +1,15 @@
-import { AppDataSource } from "./data-source";
-import GymSet from "./gym-set";
-import { Plan } from "./plan";
-import Settings from "./settings";
+import {AppDataSource} from './data-source'
+import GymSet from './gym-set'
+import {Plan} from './plan'
+import Settings from './settings'
 
-export const setRepo = AppDataSource.manager.getRepository(GymSet);
-export const planRepo = AppDataSource.manager.getRepository(Plan);
-export const settingsRepo = AppDataSource.manager.getRepository(Settings);
+export const setRepo = AppDataSource.manager.getRepository(GymSet)
+export const planRepo = AppDataSource.manager.getRepository(Plan)
+export const settingsRepo = AppDataSource.manager.getRepository(Settings)
 
 export const getNow = async (): Promise<string> => {
   const query = await AppDataSource.manager.query(
-    "SELECT STRFTIME('%Y-%m-%dT%H:%M:%S','now','localtime') AS now"
-  );
-  return query[0].now;
-};
+    "SELECT STRFTIME('%Y-%m-%dT%H:%M:%S','now','localtime') AS now",
+  )
+  return query[0].now
+}

deno.json

@@ -1,11 +0,0 @@
-{
-  "fmt": {
-    "useTabs": false,
-    "lineWidth": 80,
-    "semiColons": false,
-    "singleQuote": true,
-    "proseWrap": "preserve",
-    "include": ["src/"],
-    "exclude": ["src/testdata/", "data/fixtures/**/*.ts"]
-  }
-}

deploy.sh

@@ -26,6 +26,7 @@ sed -i "s/\"version\": \"[0-9]*.[0-9]*\"/\"version\": \"$major.$minor\"/" ../pac
 if [ "$1" != "-n" ]; then
   yarn tsc
   yarn lint
+  yarn jest
   ./gradlew bundleRelease
   bundle install
   bundle exec fastlane supply --aab app/build/outputs/bundle/release/app-release.aab

drawer-param-list.ts

@@ -1,8 +1,8 @@
 export type DrawerParamList = {
-  Home: {};
-  Settings: {};
-  Graphs: {};
-  Plans: {};
-  Workouts: {};
-  Timer: {};
-};
+  Home: {}
+  Settings: {}
+  Best: {}
+  Plans: {}
+  Workouts: {}
+  Timer: {}
+}

fix-numeric.ts

@@ -1,11 +0,0 @@
-export const fixNumeric = (text: string) => {
-  let newText = text.replace(/[^0-9.-]/g, "");
-  let parts = newText.split(".");
-  if (parts.length > 2) {
-    newText = parts[0] + "." + parts.slice(1).join("");
-  }
-  if (newText.startsWith("-")) {
-    newText = "-" + newText.slice(1).replace(/-/g, "");
-  }
-  return newText;
-};

gym-set.ts

@@ -1,53 +1,53 @@
-import { Column, Entity, PrimaryGeneratedColumn } from "typeorm";
+import {Column, Entity, PrimaryGeneratedColumn} from 'typeorm'
 
-@Entity("sets")
+@Entity('sets')
 export default class GymSet {
   @PrimaryGeneratedColumn()
-  id?: number;
+  id?: number
 
-  @Column("text")
-  name: string;
+  @Column('text')
+  name: string
 
-  @Column("int")
-  reps: number;
+  @Column('int')
+  reps: number
 
-  @Column("int")
-  weight: number;
+  @Column('int')
+  weight: number
 
-  @Column("int")
-  sets = 3;
+  @Column('int')
+  sets = 3
 
-  @Column("int")
-  minutes = 3;
+  @Column('int')
+  minutes = 3
 
-  @Column("int")
-  seconds = 30;
+  @Column('int')
+  seconds = 30
 
-  @Column("boolean")
-  hidden = false;
+  @Column('boolean')
+  hidden = false
 
-  @Column("text")
-  created: string;
+  @Column('text')
+  created: string
 
-  @Column("text")
-  unit: string;
+  @Column('text')
+  unit: string
 
-  @Column("text")
-  image: string;
+  @Column('text')
+  image: string
 
-  @Column("text")
-  steps?: string;
+  @Column('text')
+  steps?: string
 }
 
 export const defaultSet: GymSet = {
-  created: "",
-  name: "",
-  image: "",
+  created: '',
+  name: '',
+  image: '',
   hidden: false,
   minutes: 3,
   seconds: 30,
   reps: 0,
   sets: 0,
-  unit: "kg",
+  unit: 'kg',
   weight: 0,
-};
+}

home-page-params.ts

@@ -1,11 +1,11 @@
-import GymSet from "./gym-set";
+import GymSet from './gym-set'
 
 export type HomePageParams = {
-  Sets: {};
+  Sets: {}
   EditSet: {
-    set: GymSet;
-  };
+    set: GymSet
+  }
   EditSets: {
-    ids: number[];
-  };
-};
+    ids: number[]
+  }
+}

index.js

@@ -1,9 +1,6 @@
-/**
- * @format
- */
+import {AppRegistry} from 'react-native'
+import 'react-native-gesture-handler'
+import App from './App'
+import {name as appName} from './app.json'
 
-import {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
-
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => App)

input.ts

@@ -1,9 +1,9 @@
-import { Item } from "./Select";
-import Settings from "./settings";
+import {Item} from './Select'
+import Settings from './settings'
 
 export default interface Input<T> {
-  name: string;
-  key: keyof Settings;
-  value?: T;
-  items?: Item[];
+  name: string
+  key: keyof Settings
+  value?: T
+  items?: Item[]
 }

install.sh

@@ -2,5 +2,5 @@
 
 set -ex
 cd android
-[ "$1" != "--nobuild" ] && ./gradlew assembleRelease -PreactNativeArchitectures=arm64-v8a
-adb -d install app/build/outputs/apk/release/app-release.apk
+[ "$1" != "--nobuild" ] && ./gradlew assembleRelease
+adb -d install app/build/outputs/apk/release/app-arm64-v8a-release.apk

ios/.xcode.env

@@ -1,11 +0,0 @@
-# This `.xcode.env` file is versioned and is used to source the environment
-# used when running script phases inside Xcode.
-# To customize your local environment, you can create an `.xcode.env.local`
-# file that is not versioned.
-
-# NODE_BINARY variable contains the PATH to the node executable.
-#
-# Customize the NODE_BINARY variable here.
-# For example, to use nvm with brew, add the following line
-# . "$(brew --prefix nvm)/nvm.sh" --no-use
-export NODE_BINARY=$(command -v node)

ios/Podfile

@@ -1,29 +1,8 @@
-# Resolve react_native_pods.rb with node to allow for hoisting
-require Pod::Executable.execute_command('node', ['-p',
-  'require.resolve(
-    "react-native/scripts/react_native_pods.rb",
-    {paths: [process.argv[1]]},
-  )', __dir__]).strip
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, min_ios_version_supported
-prepare_react_native_project!
-
-# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
-# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
-#
-# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
-# ```js
-# module.exports = {
-#   dependencies: {
-#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
-# ```
-flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
-
-linkage = ENV['USE_FRAMEWORKS']
-if linkage != nil
-  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
-  use_frameworks! :linkage => linkage.to_sym
-end
+platform :ios, '12.4'
+install! 'cocoapods', :deterministic_uuids => false
 
 target 'massive' do
   config = use_native_modules!
@@ -33,14 +12,9 @@ target 'massive' do
 
   use_react_native!(
     :path => config[:reactNativePath],
-    # Hermes is now enabled by default. Disable by setting this flag to false.
+    # to enable hermes on iOS, change `false` to `true` and then install pods
     :hermes_enabled => flags[:hermes_enabled],
     :fabric_enabled => flags[:fabric_enabled],
-    # Enables Flipper.
-    #
-    # Note that if you have use_frameworks! enabled, Flipper will not work and
-    # you should disable the next line.
-    :flipper_configuration => flipper_config,
     # An absolute path to your application root.
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
@@ -50,13 +24,14 @@ target 'massive' do
     # Pods for testing
   end
 
+  # Enables Flipper.
+  #
+  # Note that if you have use_frameworks! enabled, Flipper will not work and
+  # you should disable the next line.
+  use_flipper!()
+
   post_install do |installer|
-    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
-    react_native_post_install(
-      installer,
-      config[:reactNativePath],
-      :mac_catalyst_enabled => false
-    )
+    react_native_post_install(installer)
     __apply_Xcode_12_5_M1_post_install_workaround(installer)
   end
 end

ios/massive.xcodeproj/project.pbxproj

@@ -43,6 +43,7 @@
 		5DCACB8F33CDC322A6C60F78 /* libPods-massive.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-massive.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = massive/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		89C6BE57DB24E9ADA2F236DE /* Pods-massive-massiveTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-massive-massiveTests.release.xcconfig"; path = "Target Support Files/Pods-massive-massiveTests/Pods-massive-massiveTests.release.xcconfig"; sourceTree = "<group>"; };
+		CA043791292233DB00942DF1 /* MaterialIcons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = MaterialIcons.ttf; path = "../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
 
@@ -116,6 +117,7 @@
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
+				CA043790292233A900942DF1 /* Fonts */,
 				13B07FAE1A68108700A75B9A /* massive */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* massiveTests */,
@@ -148,6 +150,14 @@
 			path = Pods;
 			sourceTree = "<group>";
 		};
+		CA043790292233A900942DF1 /* Fonts */ = {
+			isa = PBXGroup;
+			children = (
+				CA043791292233DB00942DF1 /* MaterialIcons.ttf */,
+			);
+			path = Fonts;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -492,7 +502,6 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -518,7 +527,6 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -564,7 +572,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -598,6 +606,7 @@
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 				);
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
 			name = Debug;
@@ -635,7 +644,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -661,6 +670,7 @@
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 				);
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
 			};

ios/massive/AppDelegate.h

@@ -1,6 +1,8 @@
-#import <RCTAppDelegate.h>
+#import <React/RCTBridgeDelegate.h>
 #import <UIKit/UIKit.h>
 
-@interface AppDelegate : RCTAppDelegate
+@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
 
 @end

ios/massive/AppDelegate.mm

@@ -1,17 +1,85 @@
 #import "AppDelegate.h"
 
+#import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
+#import <React/RCTRootView.h>
+
+#import <React/RCTAppSetupUtils.h>
+
+#if RCT_NEW_ARCH_ENABLED
+#import <React/CoreModulesPlugins.h>
+#import <React/RCTCxxBridgeDelegate.h>
+#import <React/RCTFabricSurfaceHostingProxyRootView.h>
+#import <React/RCTSurfacePresenter.h>
+#import <React/RCTSurfacePresenterBridgeAdapter.h>
+#import <ReactCommon/RCTTurboModuleManager.h>
+
+#import <react/config/ReactNativeConfig.h>
+
+static NSString *const kRNConcurrentRoot = @"concurrentRoot";
+
+@interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate> {
+  RCTTurboModuleManager *_turboModuleManager;
+  RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
+  std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
+  facebook::react::ContextContainer::Shared _contextContainer;
+}
+@end
+#endif
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  self.moduleName = @"massive";
-  // You can add your custom initial props in the dictionary below.
-  // They will be passed down to the ViewController used by React Native.
-  self.initialProps = @{};
+  RCTAppSetupPrepareApp(application);
 
-  return [super application:application didFinishLaunchingWithOptions:launchOptions];
+  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+
+#if RCT_NEW_ARCH_ENABLED
+  _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
+  _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
+  _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
+  _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer];
+  bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;
+#endif
+
+  NSDictionary *initProps = [self prepareInitialProps];
+  UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"massive", initProps);
+
+  if (@available(iOS 13.0, *)) {
+    rootView.backgroundColor = [UIColor systemBackgroundColor];
+  } else {
+    rootView.backgroundColor = [UIColor whiteColor];
+  }
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [UIViewController new];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
+///
+/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
+/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
+/// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`.
+- (BOOL)concurrentRootEnabled
+{
+  // Switch this bool to turn on and off the concurrent root
+  return true;
+}
+
+- (NSDictionary *)prepareInitialProps
+{
+  NSMutableDictionary *initProps = [NSMutableDictionary new];
+
+#ifdef RCT_NEW_ARCH_ENABLED
+  initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]);
+#endif
+
+  return initProps;
 }
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
@@ -23,4 +91,43 @@
 #endif
 }
 
+#if RCT_NEW_ARCH_ENABLED
+
+#pragma mark - RCTCxxBridgeDelegate
+
+- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
+{
+  _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
+                                                             delegate:self
+                                                            jsInvoker:bridge.jsCallInvoker];
+  return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager);
+}
+
+#pragma mark RCTTurboModuleManagerDelegate
+
+- (Class)getModuleClassFromName:(const char *)name
+{
+  return RCTCoreModulesClassProvider(name);
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
+                                                      jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
+{
+  return nullptr;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
+                                                     initParams:
+                                                         (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return nullptr;
+}
+
+- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass
+{
+  return RCTAppSetupDefaultModuleFromClass(moduleClass);
+}
+
+#endif
+
 @end

ios/massive/Info.plist

@@ -2,6 +2,10 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>MaterialIcons.ttf</string>
+	</array>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -17,11 +21,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>$(MARKETING_VERSION)</string>
+	<string>1.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
@@ -43,6 +47,10 @@
 	<array>
 		<string>armv7</string>
 	</array>
+	<key>UIFileSharingEnabled</key>
+	<true/>
+	<key>LSSupportsOpeningDocumentsInPlace</key>
+	<true/>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>

jestSetup.ts

@@ -1,21 +1,21 @@
-import { NativeModules } from "react-native";
-import "react-native-gesture-handler/jestSetup";
+import {NativeModules} from 'react-native'
+import 'react-native-gesture-handler/jestSetup'
 
 NativeModules.RNViewShot = NativeModules.RNViewShot || {
   captureScreen: jest.fn(),
-};
+}
 NativeModules.SettingsModule = NativeModules.SettingsModule || {
   ignoringBattery: jest.fn(),
   is24: jest.fn(() => Promise.resolve(true)),
-};
+}
 
-jest.mock("react-native-file-access", () => jest.fn());
-jest.mock("react-native-share", () => jest.fn());
-jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
-jest.mock("react-native/Libraries/EventEmitter/NativeEventEmitter");
+jest.mock('react-native-file-access', () => jest.fn())
+jest.mock('react-native-share', () => jest.fn())
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
+jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter')
 
-jest.mock("react-native-reanimated", () => {
-  const Reanimated = require("react-native-reanimated/mock");
-  Reanimated.default.call = () => {};
-  return Reanimated;
-});
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock')
+  Reanimated.default.call = () => {}
+  return Reanimated
+})

metrics.ts

@@ -1,5 +1,5 @@
 export enum Metrics {
-  Weight = "Best weight",
-  Volume = "Volume",
-  OneRepMax = "One rep max",
+  Weight = 'Best weight',
+  Volume = 'Volume',
+  OneRepMax = 'One rep max',
 }

metro.config.js

@@ -1,11 +1,17 @@
-const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
-
 /**
- * Metro configuration
- * https://facebook.github.io/metro/docs/configuration
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
  *
- * @type {import('metro-config').MetroConfig}
+ * @format
  */
-const config = {};
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = {
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+}

migrations/1667186124792-plans.ts

@@ -5,11 +5,10 @@ export class plans1667186124792 implements MigrationInterface {
     await queryRunner.query(`
     CREATE TABLE IF NOT EXISTS plans (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
-      title TEXT NOT NULL,
       days TEXT NOT NULL,
       workouts TEXT NOT NULL
     )
-`);
+`)
   }
 
   public async down(queryRunner: QueryRunner): Promise<void> {

migrations/1678334268359-add-backup.ts

@@ -1,13 +0,0 @@
-import {MigrationInterface, QueryRunner} from 'typeorm'
-
-export class addBackup1678334268359 implements MigrationInterface {
-  public async up(queryRunner: QueryRunner): Promise<void> {
-    await queryRunner
-      .query('ALTER TABLE settings ADD COLUMN backup BOOLEAN DEFAULT false')
-      .catch(() => null)
-  }
-
-  public async down(queryRunner: QueryRunner): Promise<void> {
-    await queryRunner.dropColumn('settings', 'backup')
-  }
-}

mock-providers.tsx

@@ -1,30 +1,29 @@
-import { NavigationContainer } from "@react-navigation/native";
-import React from "react";
+import {NavigationContainer} from '@react-navigation/native'
+import React from 'react'
 import {
+  DarkTheme,
   DefaultTheme,
-  MD3DarkTheme,
   Provider as PaperProvider,
-} from "react-native-paper";
-import MaterialIcon from "react-native-vector-icons/MaterialIcons";
-import { ThemeContext } from "./use-theme";
+} from 'react-native-paper'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import {ThemeContext} from './use-theme'
 
 export const MockProviders = ({
   children,
 }: {
-  children: JSX.Element | JSX.Element[];
+  children: JSX.Element | JSX.Element[]
 }) => (
-  <PaperProvider settings={{ icon: (props) => <MaterialIcon {...props} /> }}>
+  <PaperProvider settings={{icon: props => <MaterialIcon {...props} />}}>
     <ThemeContext.Provider
       value={{
-        theme: "system",
+        theme: 'system',
         setTheme: jest.fn(),
         lightColor: DefaultTheme.colors.primary,
-        darkColor: MD3DarkTheme.colors.primary,
+        darkColor: DarkTheme.colors.primary,
         setLightColor: jest.fn(),
         setDarkColor: jest.fn(),
-      }}
-    >
+      }}>
       <NavigationContainer>{children}</NavigationContainer>
     </ThemeContext.Provider>
   </PaperProvider>
-);
+)

options.ts

@@ -1,19 +1,19 @@
-import { darkColors, lightColors } from "./colors";
+import {darkColors, lightColors} from './colors'
 
 export const themeOptions = [
-  { label: "System", value: "system" },
-  { label: "Dark", value: "dark" },
-  { label: "Light", value: "light" },
-];
+  {label: 'System', value: 'system'},
+  {label: 'Dark', value: 'dark'},
+  {label: 'Light', value: 'light'},
+]
 
-export const lightOptions = lightColors.map((color) => ({
+export const lightOptions = lightColors.map(color => ({
   label: color.name,
   value: color.hex,
   color: color.hex,
-}));
+}))
 
-export const darkOptions = darkColors.map((color) => ({
+export const darkOptions = darkColors.map(color => ({
   label: color.name,
   value: color.hex,
   color: color.hex,
-}));
+}))