From 1d68ba86f5f9675019e6dbbbe1f3ec5b15af719b Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Thu, 7 Jul 2022 15:13:44 +1200 Subject: [PATCH] Remove useFocusEffect It was lagging the app out. --- EditPlan.tsx | 25 +++++++++---------------- EditSet.tsx | 2 +- Exercises.tsx | 5 ----- Home.tsx | 19 +++++++------------ PlanItem.tsx | 6 +++--- Plans.tsx | 50 ++++++-------------------------------------------- SetItem.tsx | 20 ++++++++++++++------ Settings.tsx | 5 ++--- set.ts | 2 +- 9 files changed, 43 insertions(+), 91 deletions(-) diff --git a/EditPlan.tsx b/EditPlan.tsx index 80c8501..daafbff 100644 --- a/EditPlan.tsx +++ b/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; - const [result] = await db.executeSql(`SELECT * FROM plans WHERE id = ?`, [ - id, - ]); - 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); + if (!plan) return; + setDays(plan.days); + setWorkouts(plan.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 ( setShow(false)}> - {id ? `Edit "${days}"` : 'Add a plan'} + {plan ? `Edit "${days}"` : 'Add a plan'} {days.split(',').map((day, index) => ( { 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'], diff --git a/Exercises.tsx b/Exercises.tsx index 832ce23..13b7bd5 100644 --- a/Exercises.tsx +++ b/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]); diff --git a/Home.tsx b/Home.tsx index 432d027..3474761 100644 --- a/Home.tsx +++ b/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}) => ( { + 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() { 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', - }, }); diff --git a/PlanItem.tsx b/PlanItem.tsx index 20a0339..040ae99 100644 --- a/PlanItem.tsx +++ b/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({ <> { - setId(item.id); + setPlan(item); setShowEdit(true); }} title={item.days} diff --git a/Plans.tsx b/Plans.tsx index 9842a2c..6620531 100644 --- a/Plans.tsx +++ b/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 {AnimatedFAB, ProgressBar, Searchbar} from 'react-native-paper'; +import {FlatList, StyleSheet, View} from 'react-native'; +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([]); const [refreshing, setRefresing] = useState(false); - const [id, setId] = useState(); + const [plan, setPlan] = useState(); const [showEdit, setShowEdit] = useState(false); - const [progresses, setProgresses] = useState([]); - 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 ( - {progresses.map(progress => ( - - {progress.name} - - - ))} - setId(undefined)} onSave={refresh} setShow={setShowEdit} show={showEdit} - id={id} + plan={plan} /> { - setId(undefined); + setPlan(undefined); setShowEdit(true); }} /> diff --git a/SetItem.tsx b/SetItem.tsx index bc4e331..bf154b0 100644 --- a/SetItem.tsx +++ b/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 ( <> setShow(true)} + onLongPress={() => setShowMenu(true)} right={() => ( setShow(true)} + onPress={() => setShowMenu(true)} /> } - visible={show} - onDismiss={() => setShow(false)}> + visible={showMenu} + onDismiss={() => setShowMenu(false)}> + )} /> diff --git a/Settings.tsx b/Settings.tsx index ebfabec..626d2c5 100644 --- a/Settings.tsx +++ b/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); diff --git a/set.ts b/set.ts index 1dd0109..c9e50c1 100644 --- a/set.ts +++ b/set.ts @@ -1,5 +1,5 @@ export default interface Set { - id: number; + id?: number; name: string; reps: number; weight: number;