Remove useFocusEffect

It was lagging the app out.

EditPlan.tsx

@@ -6,17 +6,15 @@ import {Plan} from './plan';
 import WorkoutMenu from './WorkoutMenu';
 
 export default function EditPlan({
-  id,
+  plan,
   onSave,
   show,
   setShow,
-  clearId,
 }: {
-  id?: number;
-  clearId: () => void;
   onSave: () => void;
   show: boolean;
   setShow: (visible: boolean) => void;
+  plan?: Plan;
 }) {
   const [days, setDays] = useState('');
   const [workouts, setWorkouts] = useState('');
@@ -27,23 +25,18 @@ export default function EditPlan({
     const [namesResult] = await db.executeSql('SELECT DISTINCT name FROM sets');
     if (!namesResult.rows.length) return;
     setNames(namesResult.rows.raw().map(({name}) => name));
-    if (!id) return;
+    if (!plan) return;
-    const [result] = await db.executeSql(`SELECT * FROM plans WHERE id = ?`, [
+    setDays(plan.days);
-      id,
+    setWorkouts(plan.workouts);
-    ]);
-    if (!result.rows.item(0)) throw new Error("Can't find specified Set.");
-    const set: Plan = result.rows.item(0);
-    setDays(set.days);
-    setWorkouts(set.workouts);
   };
 
   useEffect(() => {
     refresh();
-  }, [id]);
+  }, [plan]);
 
   const save = async () => {
     if (!days || !workouts) return;
-    if (!id)
+    if (!plan)
       await db.executeSql(`INSERT INTO plans(days, workouts) VALUES (?, ?)`, [
         days,
         workouts,
@@ -51,7 +44,7 @@ export default function EditPlan({
     else
       await db.executeSql(
         `UPDATE plans SET days = ?, workouts = ? WHERE id = ?`,
-        [days, workouts, id],
+        [days, workouts, plan.id],
       );
     setShow(false);
     onSave();
@@ -84,7 +77,7 @@ export default function EditPlan({
   return (
     <Portal>
       <Dialog visible={show} onDismiss={() => setShow(false)}>
-        <Dialog.Title>{id ? `Edit "${days}"` : 'Add a plan'}</Dialog.Title>
+        <Dialog.Title>{plan ? `Edit "${days}"` : 'Add a plan'}</Dialog.Title>
         <Dialog.Content>
           {days.split(',').map((day, index) => (
             <DayMenu

EditSet.tsx

@@ -41,7 +41,7 @@ export default function EditSet({
 
   const save = async () => {
     if (!name || !reps || !weight) return;
-    if (!set)
+    if (!set?.id)
       await db.executeSql(
         `INSERT INTO sets(name, reps, weight, created, unit) VALUES (?,?,?,?,?)`,
         [name, reps, weight, new Date().toISOString(), unit || 'kg'],

Exercises.tsx

@@ -1,4 +1,3 @@
-import {useFocusEffect} from '@react-navigation/native';
 import React, {useContext, useEffect, useState} from 'react';
 import {FlatList, StyleSheet, View} from 'react-native';
 import {List, Searchbar} from 'react-native-paper';
@@ -23,10 +22,6 @@ export default function Exercises() {
     setExercises(result.rows.raw());
   };
 
-  useFocusEffect(() => {
-    refresh();
-  });
-
   useEffect(() => {
     refresh();
   }, [search]);

Home.tsx

@@ -1,5 +1,4 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import {useFocusEffect} from '@react-navigation/native';
 import React, {useContext, useEffect, useState} from 'react';
 import {FlatList, NativeModules, SafeAreaView, StyleSheet} from 'react-native';
 import {AnimatedFAB, Searchbar} from 'react-native-paper';
@@ -18,6 +17,7 @@ export default function Home() {
   const [show, setShow] = useState(false);
   const [search, setSearch] = useState('');
   const [refreshing, setRefresing] = useState(false);
+  const [end, setEnd] = useState(false);
   const db = useContext(DatabaseContext);
 
   const selectSets = `
@@ -41,6 +41,7 @@ export default function Home() {
     if (!result) return setSets([]);
     setSets(result.rows.raw());
     setOffset(0);
+    setEnd(false);
   };
 
   const refreshLoader = async () => {
@@ -52,10 +53,6 @@ export default function Home() {
     refresh();
   }, [search]);
 
-  useFocusEffect(() => {
-    refresh();
-  });
-
   const renderItem = ({item}: {item: Set}) => (
     <SetItem
       item={item}
@@ -77,14 +74,16 @@ export default function Home() {
   };
 
   const next = async () => {
+    if (end) return;
     setRefresing(true);
     const newOffset = offset + limit;
     const [result] = await getSets({search, limit, offset: newOffset}).finally(
       () => setRefresing(false),
     );
-    if (result.rows.length === 0) return;
+    if (result.rows.length === 0) return setEnd(true);
     if (!sets) return;
     setSets([...sets, ...result.rows.raw()]);
+    if (result.rows.length < limit) return setEnd(true);
     setOffset(newOffset);
   };
 
@@ -92,9 +91,10 @@ export default function Home() {
     <SafeAreaView style={styles.container}>
       <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
       <FlatList
+        style={{height: 100}}
         data={sets}
         renderItem={renderItem}
-        keyExtractor={set => set.id.toString()}
+        keyExtractor={set => set.id!.toString()}
         onEndReached={next}
         refreshing={refreshing}
         onRefresh={refreshLoader}
@@ -121,11 +121,6 @@ const styles = StyleSheet.create({
   },
   container: {
     flexGrow: 1,
-    flex: 1,
     padding: 10,
   },
-  bottom: {
-    alignSelf: 'center',
-    flexDirection: 'row',
-  },
 });

PlanItem.tsx

@@ -5,12 +5,12 @@ import {Plan} from './plan';
 
 export default function PlanItem({
   item,
-  setId,
+  setPlan,
   setShowEdit,
   onRemove,
 }: {
   item: Plan;
-  setId: (id: number) => void;
+  setPlan: (plan: Plan) => void;
   setShowEdit: (show: boolean) => void;
   onRemove: () => void;
 }) {
@@ -27,7 +27,7 @@ export default function PlanItem({
     <>
       <List.Item
         onPress={() => {
-          setId(item.id);
+          setPlan(item);
           setShowEdit(true);
         }}
         title={item.days}

Plans.tsx

@@ -1,23 +1,17 @@
-import {useFocusEffect} from '@react-navigation/native';
-import {format} from 'date-fns';
 import React, {useContext, useEffect, useState} from 'react';
-import {FlatList, StyleSheet, Text, View} from 'react-native';
+import {FlatList, StyleSheet, View} from 'react-native';
-import {AnimatedFAB, ProgressBar, Searchbar} from 'react-native-paper';
+import {AnimatedFAB, Searchbar} from 'react-native-paper';
 import {DatabaseContext} from './App';
 import EditPlan from './EditPlan';
 import {Plan} from './plan';
 import PlanItem from './PlanItem';
-import Progress from './progress';
 
 export default function Plans() {
   const [search, setSearch] = useState('');
   const [plans, setPlans] = useState<Plan[]>([]);
   const [refreshing, setRefresing] = useState(false);
-  const [id, setId] = useState<number>();
+  const [plan, setPlan] = useState<Plan>();
   const [showEdit, setShowEdit] = useState(false);
-  const [progresses, setProgresses] = useState<Progress[]>([]);
-  const today = `%${format(new Date(new Date().toUTCString()), 'EEEE')}%`;
-  const now = `${format(new Date(new Date().toUTCString()), 'yyyy-MM-dd')}%`;
   const db = useContext(DatabaseContext);
 
   const selectPlans = `
@@ -27,35 +21,11 @@ export default function Plans() {
   const getPlans = ({search}: {search: string}) =>
     db.executeSql(selectPlans, [`%${search}%`, `%${search}%`]);
 
-  const selectProgress = `
-    SELECT COUNT(*) as count from sets
-    WHERE created LIKE ? 
-      AND name = ?
-`;
-  const getProgress = ({created, name}: {created: string; name: string}) =>
-    db.executeSql(selectProgress, [`%${created}%`, name]);
-
   const refresh = async () => {
     const [plansResult] = await getPlans({search});
     setPlans(plansResult.rows.raw());
-    const [todaysResult] = await getPlans({search: today});
-    if (todaysResult.rows.length === 0) return;
-    const workouts: string[] = todaysResult.rows.item(0).workouts.split(',');
-    const newProgress: Progress[] = [];
-    for (const workout of workouts) {
-      const [workoutResult] = await getProgress({
-        created: now,
-        name: workout,
-      });
-      newProgress.push({name: workout, sets: workoutResult.rows.item(0).count});
-    }
-    setProgresses(newProgress);
   };
 
-  useFocusEffect(() => {
-    refresh();
-  });
-
   useEffect(() => {
     refresh();
   }, [search]);
@@ -65,7 +35,7 @@ export default function Plans() {
       item={item}
       key={item.id}
       setShowEdit={setShowEdit}
-      setId={setId}
+      setPlan={setPlan}
       onRemove={refresh}
     />
   );
@@ -73,13 +43,6 @@ export default function Plans() {
   return (
     <View style={styles.container}>
       <Searchbar value={search} onChangeText={setSearch} placeholder="Search" />
-      {progresses.map(progress => (
-        <React.Fragment key={progress.name}>
-          <Text style={styles.progress}>{progress.name}</Text>
-          <ProgressBar progress={progress.sets / 3} />
-        </React.Fragment>
-      ))}
-
       <FlatList
         data={plans}
         renderItem={renderItem}
@@ -92,11 +55,10 @@ export default function Plans() {
       />
 
       <EditPlan
-        clearId={() => setId(undefined)}
         onSave={refresh}
         setShow={setShowEdit}
         show={showEdit}
-        id={id}
+        plan={plan}
       />
 
       <AnimatedFAB
@@ -105,7 +67,7 @@ export default function Plans() {
         icon="add"
         style={{position: 'absolute', right: 20, bottom: 20}}
         onPress={() => {
-          setId(undefined);
+          setPlan(undefined);
           setShowEdit(true);
         }}
       />

SetItem.tsx

@@ -14,15 +14,22 @@ export default function SetItem({
   setShowEdit: (show: boolean) => void;
   onRemove: () => void;
 }) {
-  const [show, setShow] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
   const db = useContext(DatabaseContext);
 
   const remove = async () => {
     await db.executeSql(`DELETE FROM sets WHERE id = ?`, [item.id]);
-    setShow(false);
+    setShowMenu(false);
     onRemove();
   };
 
+  const copy = () => {
+    const {id, ...set} = {...item};
+    setSet(set);
+    setShowEdit(true);
+    setShowMenu(false);
+  };
+
   return (
     <>
       <List.Item
@@ -32,18 +39,19 @@ export default function SetItem({
         }}
         title={item.name}
         description={`${item.reps} x ${item.weight}${item.unit}`}
-        onLongPress={() => setShow(true)}
+        onLongPress={() => setShowMenu(true)}
         right={() => (
           <Menu
             anchor={
               <IconButton
                 icon="ellipsis-vertical"
-                onPress={() => setShow(true)}
+                onPress={() => setShowMenu(true)}
               />
             }
-            visible={show}
+            visible={showMenu}
-            onDismiss={() => setShow(false)}>
+            onDismiss={() => setShowMenu(false)}>
             <Menu.Item icon="trash" onPress={remove} title="Delete" />
+            <Menu.Item icon="copy" onPress={copy} title="Copy" />
           </Menu>
         )}
       />

Settings.tsx

@@ -1,5 +1,4 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import {useFocusEffect} from '@react-navigation/native';
 import React, {useContext, useEffect, useState} from 'react';
 import {NativeModules, StyleSheet, Text, View} from 'react-native';
 import {Button, Snackbar, Switch, TextInput} from 'react-native-paper';
@@ -22,9 +21,9 @@ export default function Settings() {
     NativeModules.AlarmModule.ignoringBatteryOptimizations(setIgnoring);
   };
 
-  useFocusEffect(() => {
+  useEffect(() => {
     refresh();
-  });
+  }, []);
 
   useEffect(() => {
     if (minutes) AsyncStorage.setItem('minutes', minutes);

set.ts

@@ -1,5 +1,5 @@
 export default interface Set {
-  id: number;
+  id?: number;
   name: string;
   reps: number;
   weight: number;