Add daily page - 2.26 🚀

The daily page is used to flip through your exercises
by day. This is in contrast to the History page, which is
an infinitely scrolling list of all sets.

Closes #216, #207

AppDrawer.tsx

@@ -9,6 +9,7 @@ import PlanList from "./PlanList";
 import SetList from "./SetList";
 import SettingsPage from "./SettingsPage";
 import WeightList from "./WeightList";
+import Daily from "./Daily";
 
 const Drawer = createDrawerNavigator<DrawerParams>();
 
@@ -42,10 +43,15 @@ export default function AppDrawer({
         component={ExerciseList}
         options={{ drawerIcon: () => <IconButton icon="dumbbell" /> }}
       />
+      <Drawer.Screen
+        name="Daily"
+        component={Daily}
+        options={{ drawerIcon: () => <IconButton icon="calendar-outline" /> }}
+      />
       <Drawer.Screen
         name="Plans"
         component={PlanList}
-        options={{ drawerIcon: () => <IconButton icon="calendar-outline" /> }}
+        options={{ drawerIcon: () => <IconButton icon="checkbox-multiple-marked-outline" /> }}
       />
       <Drawer.Screen
         name="Graphs"

Daily.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useState } from "react";
+import { FlatList, Pressable, View } from "react-native";
+import { Button, IconButton, List, Text } from "react-native-paper";
+import AppFab from "./AppFab";
+import DrawerHeader from "./DrawerHeader";
+import { LIMIT, PADDING } from "./constants";
+import GymSet, { defaultSet } from "./gym-set";
+import { getNow, setRepo, settingsRepo } from "./db";
+import { NavigationProp, useFocusEffect, useNavigation } from "@react-navigation/native";
+import { Like } from "typeorm";
+import Settings from "./settings";
+import { format } from "date-fns";
+import { DateTimePickerAndroid } from "@react-native-community/datetimepicker";
+import SetItem from "./SetItem";
+import { StackParams } from "./AppStack";
+
+export default function Daily() {
+    const [sets, setSets] = useState<GymSet[]>();
+    const [day, setDay] = useState<Date>()
+    const [settings, setSettings] = useState<Settings>();
+    const navigation = useNavigation<NavigationProp<StackParams>>();
+
+    const onFocus = async () => {
+        const now = await getNow();
+        let created = now.split('T')[0];
+        setDay(new Date(created));
+    }
+
+    useEffect(() => {
+        (async () => {
+            if (!day) return
+            const created = day.toISOString().split('T')[0]
+            const newSets = await setRepo.find({
+                where: { hidden: 0 as any, created: Like(`${created}%`) },
+                take: LIMIT,
+                skip: 0,
+                order: { created: "DESC" },
+            });
+            setSets(newSets);
+            console.log(`${Daily.name}.useEffect:`, { day });
+            settingsRepo.findOne({ where: {} }).then(setSettings)
+        })()
+    }, [day])
+
+    useFocusEffect(useCallback(() => {
+        onFocus();
+    }, []))
+
+    const onAdd = async () => {
+        const now = await getNow();
+        let set: Partial<GymSet> = { ...sets[0] };
+        if (!set) set = { ...defaultSet };
+        set.created = now;
+        delete set.id;
+        navigation.navigate("EditSet", { set });
+
+    }
+
+    const onRight = () => {
+        const newDay = new Date(day)
+        newDay.setDate(newDay.getDate() + 1)
+        setDay(newDay)
+    }
+
+    const onLeft = () => {
+        const newDay = new Date(day)
+        newDay.setDate(newDay.getDate() - 1)
+        setDay(newDay)
+    }
+
+    const onDate = () => {
+        DateTimePickerAndroid.open({
+            value: new Date(day),
+            onChange: (event, date) => {
+                if (event.type === 'dismissed') return;
+                setDay(date)
+            },
+            mode: 'date',
+        })
+    }
+
+    return (
+        <>
+            <DrawerHeader name="Daily" />
+
+
+            <View style={{ padding: PADDING, flexGrow: 1 }}>
+                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+                    <IconButton style={{ marginRight: 'auto' }} icon="chevron-double-left" onPress={onLeft} />
+                    <Button onPress={onDate}>{format(day ? new Date(day) : new Date(), "PPPP")}</Button>
+                    <IconButton style={{ marginLeft: 'auto' }} icon="chevron-double-right" onPress={onRight} />
+                </View>
+
+                {settings && (
+                    <FlatList ListEmptyComponent={<List.Item title="No sets yet" />} style={{ flex: 1 }} data={sets} renderItem={({ item }) => <SetItem ids={[]} setIds={() => { }} item={item} settings={settings} />} />
+                )}
+
+                <AppFab onPress={onAdd} />
+            </View>
+
+
+        </>
+    )
+}

SettingsPage.tsx

@@ -139,7 +139,8 @@ export default function SettingsPage() {
           items={[
             { label: "History", value: "History", icon: 'history' },
             { label: "Exercises", value: "Exercises", icon: 'dumbbell' },
-            { label: "Plans", value: "Plans", icon: 'calendar-outline' },
+            { label: "Daily", value: "Daily", icon: 'calendar-outline' },
+            { label: "Plans", value: "Plans", icon: 'checkbox-multiple-marked-outline' },
             { label: "Graphs", value: "Graphs", icon: 'chart-bell-curve-cumulative' },
             { label: "Timer", value: "Timer", icon: 'timer-outline' },
             { label: "Weight", value: "Weight", icon: 'scale-bathroom' },

android/app/build.gradle

@@ -87,8 +87,8 @@ android {
         applicationId "com.massive"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36240
-        versionName "2.25"
+        versionCode 36241
+        versionName "2.26"
     }
     signingConfigs {
         release {

drawer-params.ts

@@ -7,4 +7,5 @@ export type DrawerParams = {
   Weight: {};
   Insights: {};
   Settings: {};
+  Daily: {};
 };

package.json

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