✨ Add title to Plan

Closes brandon.presley/Massive#164

EditPlan.tsx

@@ -14,10 +14,12 @@ import { PlanPageParams } from "./plan-page-params";
 import StackHeader from "./StackHeader";
 import Switch from "./Switch";
 import { DAYS } from "./time";
+import AppInput from "./AppInput";
 
 export default function EditPlan() {
   const { params } = useRoute<RouteProp<PlanPageParams, "EditPlan">>();
   const { plan } = params;
+  const [title, setTitle] = useState<string>(plan?.title);
   const [days, setDays] = useState<string[]>(
     plan.days ? plan.days.split(",") : []
   );
@@ -45,8 +47,13 @@ export default function EditPlan() {
     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 });
-  }, [days, workouts, plan]);
+    await planRepo.save({
+      title: title,
+      days: newDays,
+      workouts: newWorkouts,
+      id: plan.id,
+    });
+  }, [title, days, workouts, plan]);
 
   const toggleWorkout = useCallback(
     (on: boolean, name: string) => {
@@ -96,6 +103,11 @@ export default function EditPlan() {
       </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) => (
             <Switch

EditSet.tsx

@@ -9,7 +9,7 @@ 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 { Button, Card, IconButton, TouchableRipple } from "react-native-paper";
 import AppInput from "./AppInput";
 import ConfirmDialog from "./ConfirmDialog";
 import { MARGIN, PADDING } from "./constants";
@@ -155,22 +155,44 @@ 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");
+              if (fixed.length !== newReps.length)
+                toast("Reps must be a number");
             }}
             onSubmitEditing={() => weightRef.current?.focus()}
             selection={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
+            style={{ flex: 1 }}
             label="Weight"
             keyboardType="numeric"
             value={weight}
@@ -183,6 +205,15 @@ export default function EditSet() {
             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

EditSets.tsx

@@ -7,7 +7,7 @@ import {
 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 { Button, Card, IconButton, TouchableRipple } from "react-native-paper";
 import { In } from "typeorm";
 import AppInput from "./AppInput";
 import ConfirmDialog from "./ConfirmDialog";
@@ -89,7 +89,16 @@ export default function EditSets() {
           autoFocus={!name}
         />
 
+        <View
+          style={{
+            flexDirection: "row",
+            marginBottom: MARGIN,
+          }}
+        >
           <AppInput
+            style={{
+              flex: 1,
+            }}
             label={`Reps: ${oldReps}`}
             keyboardType="numeric"
             value={reps}
@@ -98,14 +107,39 @@ export default function EditSets() {
             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

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>
     </>

PlanItem.tsx

@@ -56,13 +56,14 @@ export default function PlanItem({
     setIds([item.id]);
   }, [ids.length, item.id, setIds]);
 
-  const title = useMemo(
-    () =>
-      days.map((day, index) => (
+  const currentDays = days.map((day, index) => (
     <Text key={day}>
       {day === today ? (
         <Text
-              style={{ fontWeight: "bold", textDecorationLine: "underline" }}
+          style={{
+            fontWeight: "bold",
+            textDecorationLine: "underline",
+          }}
         >
           {day}
         </Text>
@@ -71,13 +72,21 @@ export default function PlanItem({
       )}
       {index === days.length - 1 ? "" : ", "}
     </Text>
-      )),
-    [days, today]
+  ));
+
+  const title = useMemo(
+    () =>
+      item.title ? (
+        <Text style={{ fontWeight: "bold" }}>{item.title}</Text>
+      ) : (
+        currentDays
+      ),
+    [item.title, currentDays]
   );
 
   const description = useMemo(
-    () => item.workouts.replace(/,/g, ", "),
-    [item.workouts]
+    () => (item.title ? currentDays : item.workouts.replace(/,/g, ", ")),
+    [item.title, currentDays, item.workouts]
   );
 
   const backgroundColor = useMemo(() => {

PlanList.tsx

@@ -25,6 +25,7 @@ export default function PlanList() {
     planRepo
       .find({
         where: [
+          { title: Like(`%${value.trim()}%`) },
           { days: Like(`%${value.trim()}%`) },
           { workouts: Like(`%${value.trim()}%`) },
         ],
@@ -54,7 +55,9 @@ export default function PlanList() {
   );
 
   const onAdd = () =>
-    navigation.navigate("EditPlan", { plan: { days: "", workouts: "" } });
+    navigation.navigate("EditPlan", {
+      plan: { title: "", days: "", workouts: "" },
+    });
 
   const edit = useCallback(async () => {
     const plan = await planRepo.findOne({ where: { id: ids.pop() } });

Select.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { View } from "react-native";
-import { Button, Menu, Subheading } from "react-native-paper";
+import { Button, Menu, Subheading, useTheme } from "react-native-paper";
 import { ITEM_PADDING } from "./constants";
 
 export interface Item {
@@ -21,6 +21,7 @@ function Select({
   label?: string;
 }) {
   const [show, setShow] = useState(false);
+  const { colors } = useTheme();
 
   const selected = useMemo(
     () => items.find((item) => item.value === value) || items[0],
@@ -60,7 +61,7 @@ function Select({
       >
         {items.map((item) => (
           <Menu.Item
-            titleStyle={{ color: item.color }}
+            titleStyle={{ color: item.color || colors.onSurface }}
             key={item.value}
             title={item.label}
             onPress={() => handlePress(item.value)}

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]);
 

SettingsPage.tsx

@@ -244,13 +244,13 @@ export default function SettingsPage() {
   }, [settings, darkColor, formatOptions, theme, lightColor]);
 
   const renderSelect = useCallback(
-    (item: Input<string>) => (
+    (input: Input<string>) => (
       <Select
-        key={item.name}
-        value={item.value}
-        onChange={(value) => changeString(item.key, value)}
-        label={item.name}
-        items={item.items}
+        key={input.name}
+        value={input.value}
+        onChange={(value) => changeString(input.key, value)}
+        label={input.name}
+        items={input.items}
       />
     ),
     [changeString]

StartPlan.tsx

@@ -10,7 +10,7 @@ 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 { PADDING } from "./constants";
+import { MARGIN, PADDING } from "./constants";
 import CountMany from "./count-many";
 import { AppDataSource } from "./data-source";
 import { getNow, setRepo, settingsRepo } from "./db";
@@ -126,8 +126,15 @@ export default function StartPlan() {
       </StackHeader>
       <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) => {
@@ -141,8 +148,25 @@ export default function StartPlan() {
               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) => {
@@ -155,6 +179,16 @@ export default function StartPlan() {
               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"

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]);
 

android/app/build.gradle

@@ -85,8 +85,8 @@ android {
         applicationId "com.massive"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36173
-        versionName "1.147"
+        versionCode 36174
+        versionName "1.148"
     }
     signingConfigs {
         release {

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;

migrations/1667186124792-plans.ts

@@ -5,10 +5,11 @@ 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> {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "massive",
-  "version": "1.147",
+  "version": "1.148",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {

plan.ts

@@ -5,6 +5,9 @@ export class Plan {
   @PrimaryGeneratedColumn()
   id?: number;
 
+  @Column("text")
+  title?: string;
+
   @Column("text")
   days: string;