feat: day slider skeleton and all recaps

apps/expo/package.json

@@ -42,6 +42,8 @@
     "@rn-primitives/label": "^1.0.3",
     "@rn-primitives/portal": "^1.0.3",
     "@rn-primitives/progress": "^1.0.3",
+    "@rn-primitives/radio-group": "^1.0.3",
+    "@rn-primitives/select": "^1.0.4",
     "@rn-primitives/separator": "^1.0.3",
     "@rn-primitives/slot": "^1.0.3",
     "@rn-primitives/tooltip": "^1.0.3",

apps/expo/src/app/(app)/(tabs)/account.tsx

@@ -8,6 +8,8 @@ import {
 import DexcomCGMData from "~/components/dexcom/dexcom-data";
 import DexcomDevicesList from "~/components/dexcom/dexcom-devices";
 import { DexcomLogin } from "~/components/dexcom/dexcom-login";
+import { ChangeRangeSetting } from "~/components/glucose/change-range-setting";
+import { CalculateRecap } from "~/components/glucose/create-recap";
 import { ThemeToggle } from "~/components/theme-toggle";
 import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
@@ -41,10 +43,14 @@ export default function AccountScreen() {
       <Text>Account Screen</Text>
       {user?.id && <SignOut />}
 
+      <ChangeRangeSetting />
+
       <DexcomLogin />
 
       <DexcomCGMData />
 
+      <CalculateRecap />
+
       <DexcomDevicesList />
     </ScrollView>
   );

apps/expo/src/components/calendar/home-calendar.tsx

@@ -5,38 +5,44 @@ import type {
 import { useCallback, useMemo, useState } from "react";
 import { View } from "react-native";
 import { fromDateId, toDateId } from "@marceloterreiro/flash-calendar";
-import { add, endOfMonth, format, startOfMonth, sub } from "date-fns";
+import { add, sub } from "date-fns";
 import { format as formatFP } from "date-fns/fp";
 
 import { BasicCalendar } from "~/components/calendar/basic-calendar";
-import { Text } from "~/components/ui/text";
+import { Progress } from "~/components/ui/progress";
 import { useDateStore } from "~/stores/date-store";
 import { useGlucoseStore } from "~/stores/glucose-store";
 import { api } from "~/utils/api";
 
 export function HomeCalendar() {
-  const { selectedDate, setSelectedDate, setIsCalendarOpen } = useDateStore();
+  const {
+    selectedDate,
+    setSelectedDate,
+    setIsCalendarOpen,
+    updateVisibleDates,
+  } = useDateStore();
   const { rangeView } = useGlucoseStore();
   const [currentCalendarMonth, setCurrentCalendarMonth] =
     useState(selectedDate);
 
-  const startDate = startOfMonth(selectedDate);
-  const endDate = endOfMonth(selectedDate);
-
-  const { data: dailyRecaps, isPending } = api.recap.getDailyRecaps.useQuery({
-    startDate: format(startDate, "yyyy-MM-dd"),
-    endDate: format(endDate, "yyyy-MM-dd"),
-  });
+  const { data: allRecaps, isPending } = api.recap.all.useQuery();
 
   const currentDate = new Date();
+  const minDate = allRecaps
+    ? new Date(
+        Math.min(...allRecaps.map((recap) => new Date(recap.date).getTime())),
+      )
+    : new Date("2024-08-01");
 
   const handleDayPress = useCallback<CalendarOnDayPress>(
     (dateId) => {
-      setCurrentCalendarMonth(fromDateId(dateId));
-      setSelectedDate(fromDateId(dateId));
+      const newDate = fromDateId(dateId);
+      setCurrentCalendarMonth(newDate);
+      setSelectedDate(newDate);
+      updateVisibleDates(newDate);
       setIsCalendarOpen(false); // Close the dialog after selecting a date
     },
-    [setSelectedDate, setIsCalendarOpen],
+    [setSelectedDate, setIsCalendarOpen, updateVisibleDates],
   );
 
   const calendarActiveDateRanges = useMemo<CalendarActiveDateRange[]>(
@@ -57,16 +63,12 @@ export function HomeCalendar() {
     setCurrentCalendarMonth(add(currentCalendarMonth, { months: 1 }));
   }, [currentCalendarMonth]);
 
-  if (isPending) {
-    return <Text>Loading...</Text>;
-  }
-
   return (
     <View className="flex-1">
       <BasicCalendar
         calendarActiveDateRanges={calendarActiveDateRanges}
         calendarDisabledDateIds={[]}
-        calendarMinDateId="2024-07-11"
+        calendarMinDateId={toDateId(minDate)}
         calendarMaxDateId={toDateId(currentDate)}
         calendarMonthId={toDateId(currentCalendarMonth)}
         calendarRowVerticalSpacing={4}
@@ -76,9 +78,10 @@ export function HomeCalendar() {
         // extends
         onNextMonthPress={handleNextMonth}
         onPreviousMonthPress={handlePreviousMonth}
-        dailyRecaps={dailyRecaps ?? []}
+        dailyRecaps={allRecaps ?? []}
         rangeView={rangeView}
       />
+      {isPending && <Progress value={null} className="w-full" />}
     </View>
   );
 }

apps/expo/src/components/glucose/change-range-setting.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import type { GlucoseRangeTypes } from "@hyper/db/schema";
+
+import { Label } from "~/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { useGlucoseStore } from "~/stores/glucose-store";
+
+interface RangeOption {
+  value: GlucoseRangeTypes;
+  label: string;
+}
+
+function ChangeRangeSetting() {
+  const insets = useSafeAreaInsets();
+  const contentInsets = {
+    top: insets.top,
+    bottom: insets.bottom,
+    left: insets.left,
+    right: insets.right,
+  };
+
+  const { rangeView, setRangeView } = useGlucoseStore();
+
+  console.log(rangeView);
+
+  const capitalizeFirstLetter = (string: string) => {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  };
+
+  const rangeOptions: RangeOption[] = [
+    { value: "standard", label: capitalizeFirstLetter("standard") },
+    { value: "tight", label: capitalizeFirstLetter("tight") },
+    { value: "optimal", label: capitalizeFirstLetter("optimal") },
+  ];
+
+  const currentOption =
+    rangeOptions.find((option) => option.value === rangeView) ??
+    rangeOptions[0];
+
+  return (
+    <>
+      <Label nativeID="range-view">Range View</Label>
+      <Select
+        defaultValue={currentOption}
+        onValueChange={(option) =>
+          setRangeView(option?.value as "standard" | "tight" | "optimal")
+        }
+      >
+        <SelectTrigger className="w-[250px]" aria-labelledby="range-view">
+          <SelectValue
+            className="native:text-lg text-sm text-foreground"
+            placeholder="Select a range view"
+          />
+        </SelectTrigger>
+        <SelectContent insets={contentInsets} className="w-[250px]">
+          <SelectGroup>
+            {/* <SelectLabel>Range View</SelectLabel> */}
+            <SelectItem label="Standard" value="standard" />
+            <SelectItem label="Tight" value="tight" />
+            <SelectItem label="Optimal" value="optimal" />
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </>
+  );
+}
+
+export { ChangeRangeSetting };

apps/expo/src/components/glucose/create-recap.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Alert, View } from "react-native";
+
+import { Button } from "~/components/ui/button";
+import { Text } from "~/components/ui/text";
+import { api } from "~/utils/api";
+
+const CalculateRecap: React.FC = () => {
+  const utils = api.useUtils();
+
+  const mutation = api.recap.calculateAndStoreRecapsForRange.useMutation({
+    onSuccess: async (data) => {
+      Alert.alert(
+        "Success",
+        `Recaps calculated and stored successfully for ${data.length} days.`,
+      );
+      await utils.recap.getDailyRecaps.invalidate();
+    },
+    onError: (error) => {
+      Alert.alert("Error", `Failed to calculate recaps: ${error.message}`);
+    },
+  });
+
+  const handleCalculateRecaps = () => {
+    const augustStart = new Date("2024-08-01T00:00:00Z");
+    const augustEnd = new Date("2024-08-31T23:59:59Z");
+
+    const queryInput = {
+      startDate: augustStart.toISOString(),
+      endDate: augustEnd.toISOString(),
+    };
+
+    mutation.mutate(queryInput);
+  };
+
+  return (
+    <View>
+      <Button onPress={handleCalculateRecaps} disabled={mutation.isPending}>
+        <Text>
+          {mutation.isPending
+            ? "Calculating..."
+            : "Calculate August 2024 Recaps"}
+        </Text>
+      </Button>
+      {mutation.isError ? (
+        <Text>An error occurred: {mutation.error.message}</Text>
+      ) : null}
+      {mutation.isSuccess ? (
+        <Text>Last calculated: {new Date().toLocaleString()}</Text>
+      ) : null}
+    </View>
+  );
+};
+
+export { CalculateRecap };