Paginate graphs

Also factor out LIMIT constant

GraphsList.tsx

@@ -6,15 +6,19 @@ import {
 import { useCallback, useState } from "react";
 import { FlatList, Image } from "react-native";
 import { List } from "react-native-paper";
-import { GraphsPageParams } from "./GraphsPage";
-import { setRepo, settingsRepo } from "./db";
+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 [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>();
@@ -26,22 +30,9 @@ export default function GraphsList() {
   );
 
   const refresh = useCallback(async (value: string) => {
-    const result = await 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: `%${value.trim()}%` })
-            .groupBy("gym_set2.name"),
-        "subquery",
-        "gym_set.name = subquery.gym_set2_name AND gym_set.weight = subquery.max_weight"
-      )
-      .getMany();
+    const result = await getBestSets({ term: value, offset: 0 });
     setBests(result);
+    setOffset(0);
   }, []);
 
   useFocusEffect(
@@ -50,6 +41,18 @@ export default function GraphsList() {
     }, [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);
@@ -86,7 +89,12 @@ export default function GraphsList() {
             description="Once sets have been added, this will highlight your personal bests."
           />
         ) : (
-          <FlatList style={{ flex: 1 }} renderItem={renderItem} data={bests} />
+          <FlatList
+            style={{ flex: 1 }}
+            renderItem={renderItem}
+            data={bests}
+            onEndReached={next}
+          />
         )}
       </Page>
     </>

SetList.tsx

@@ -7,6 +7,7 @@ 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";
@@ -16,8 +17,6 @@ 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);
@@ -30,11 +29,11 @@ export default function SetList() {
   const refresh = useCallback(async (value: string) => {
     const newSets = await setRepo.find({
       where: { name: Like(`%${value.trim()}%`), hidden: 0 as any },
-      take: limit,
+      take: LIMIT,
       skip: 0,
       order: { created: "DESC" },
     });
-    console.log(`${SetList.name}.refresh:`, { value, limit });
+    console.log(`${SetList.name}.refresh:`, { value });
     setSets(newSets);
     setOffset(0);
     setEnd(false);
@@ -63,18 +62,18 @@ export default function SetList() {
 
   const next = useCallback(async () => {
     if (end) return;
-    const newOffset = offset + limit;
+    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);
+    if (newSets.length < LIMIT) return setEnd(true);
     setOffset(newOffset);
   }, [term, end, offset, sets]);
 

WorkoutList.tsx

@@ -6,6 +6,7 @@ import {
 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";
@@ -15,8 +16,6 @@ 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);
@@ -32,7 +31,7 @@ export default function WorkoutList() {
       .where("name LIKE :name", { name: `%${value.trim()}%` })
       .groupBy("name")
       .orderBy("name")
-      .limit(limit)
+      .limit(LIMIT)
       .getMany();
     console.log(`${WorkoutList.name}`, { newWorkout: newWorkouts[0] });
     setWorkouts(newWorkouts);
@@ -61,10 +60,10 @@ export default function WorkoutList() {
 
   const next = useCallback(async () => {
     if (end) return;
-    const newOffset = offset + limit;
+    const newOffset = offset + LIMIT;
     console.log(`${SetList.name}.next:`, {
       offset,
-      limit,
+      limit: LIMIT,
       newOffset,
       term,
     });
@@ -74,13 +73,13 @@ export default function WorkoutList() {
       .where("name LIKE :name", { name: `%${term.trim()}%` })
       .groupBy("name")
       .orderBy("name")
-      .limit(limit)
+      .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);
+    if (newWorkouts.length < LIMIT) return setEnd(true);
     setOffset(newOffset);
   }, [term, end, offset, workouts]);
 

best.service.ts

@@ -1,3 +1,4 @@
+import { LIMIT } from "./constants";
 import { setRepo } from "./db";
 import GymSet from "./gym-set";
 
@@ -13,3 +14,29 @@ export const getBestSet = async (name: string): Promise<GymSet> => {
     .addOrderBy("reps", "DESC")
     .getOne();
 };
+
+export const getBestSets = ({
+  term: term,
+  offset,
+}: {
+  term: string;
+  offset?: number;
+}) => {
+  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();
+};

constants.ts

@@ -3,3 +3,4 @@ export const PADDING = 10;
 export const ITEM_PADDING = 8;
 export const DARK_RIPPLE = "#444444";
 export const LIGHT_RIPPLE = "#c2c2c2";
+export const LIMIT = 15;