start template system

Author: OmarMcAdam

apps/mobile/src/components/app/trackableLogStep.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState } from "react";
 import { View } from "react-native";
 import { useRouter } from "expo-router";
 import { useForm } from "@tanstack/react-form";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { toast } from "sonner-native";
 
 import type { ConstsTypes } from "@1up/consts";
@@ -12,21 +12,28 @@ import { ImagePickerUploader } from "~/components/ui/image-picker-uploader";
 import { Text } from "~/components/ui/text";
 import { Textarea } from "~/components/ui/textarea";
 import { trpc } from "~/utils/api";
+import { Button } from "../ui/button";
 import { LogStepWrapper } from "./logStepWrapper";
 
+// Use the proper type from consts
+type TrackableParentType = ConstsTypes["TRACKABLE"]["TYPES"]["KEY"];
+type TrackableSubType = ConstsTypes["TRACKABLE"]["SUB_TYPES"]["KEY"];
+
 // Lookup data for different trackable types
 interface TrackableOptions {
   textAreaPlaceholders: string[];
   generalName: string;
   textAreaLabel: string;
   tipText: string;
   title: string;
+  new: {
+    name: string;
+    description: string;
+    icon: string;
+    subType: TrackableSubType;
+  }[];
 }
 
-// Use the proper type from consts
-type TrackableParentType = ConstsTypes["TRACKABLE"]["TYPES"]["KEY"];
-type TrackableSubType = ConstsTypes["TRACKABLE"]["SUB_TYPES"]["KEY"];
-
 const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
   consumption: {
     textAreaPlaceholders: [
@@ -41,6 +48,26 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     tipText:
       "Be as detailed as possible about the components and size of this meal/drink.",
     title: "Food & Drink",
+    new: [
+      {
+        name: "Nom npm",
+        description: "Log your food and drink",
+        icon: "🍽️",
+        subType: "consumption.parent.other",
+      },
+      {
+        name: "Lala",
+        description: "Log your food and drink",
+        icon: "🍽️",
+        subType: "consumption.parent.other",
+      },
+      {
+        name: "ooooo",
+        description: "Log your food and drink",
+        icon: "🍽️",
+        subType: "consumption.parent.other",
+      },
+    ],
   },
   activity: {
     textAreaPlaceholders: [
@@ -55,6 +82,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     tipText:
       "Include details like duration, intensity, and any other relevant information.",
     title: "Physical Activity",
+    new: [],
   },
   medication: {
     textAreaPlaceholders: [
@@ -68,6 +96,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     textAreaLabel: "What medication did you take?",
     tipText: "Include details like dosage, frequency, and any side effects.",
     title: "Medication",
+    new: [],
   },
   supplement: {
     textAreaPlaceholders: [
@@ -82,6 +111,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     tipText:
       "Include details like dosage, brand if relevant, and when you took it.",
     title: "Supplement",
+    new: [],
   },
   energy: {
     textAreaPlaceholders: [
@@ -96,6 +126,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     tipText:
       "Note any patterns or factors that might be affecting your energy levels.",
     title: "Energy",
+    new: [],
   },
   blood: {
     textAreaPlaceholders: [
@@ -109,6 +140,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     textAreaLabel: "What blood metric are you logging?",
     tipText: "Include specific measurements, units, and context if available.",
     title: "Blood Reading",
+    new: [],
   },
   body: {
     textAreaPlaceholders: [
@@ -122,6 +154,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     textAreaLabel: "What would you like to record about your body?",
     tipText: "Include specific measurements with units where applicable.",
     title: "Body",
+    new: [],
   },
   sleep: {
     textAreaPlaceholders: [
@@ -136,6 +169,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     tipText:
       "Include details about duration, quality, and any factors affecting your sleep.",
     title: "Sleep",
+    new: [],
   },
   mind: {
     textAreaPlaceholders: [
@@ -150,6 +184,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     tipText:
       "Share details about your mental wellbeing, practices, or observations.",
     title: "Mind",
+    new: [],
   },
   symptom: {
     textAreaPlaceholders: [
@@ -164,6 +199,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     tipText:
       "Include details about severity, duration, and any potential triggers.",
     title: "Symptom",
+    new: [],
   },
   custom: {
     textAreaPlaceholders: [
@@ -177,6 +213,7 @@ const trackableLookup: Record<TrackableParentType, TrackableOptions> = {
     textAreaLabel: "What would you like to log?",
     tipText: "Add any relevant details that you want to track.",
     title: "Custom Log",
+    new: [],
   },
 };
 
@@ -209,6 +246,17 @@ export const TrackableLogStep = ({
 }: TrackableLogStepProps) => {
   const lookupValues = getLookupValues(trackableParentType);
 
+  // get user profile
+  const {
+    data: parentTrackableTypes,
+    // isLoading: parentTrackableTypesLoading,
+    // error: parentTrackableTypesError,
+  } = useQuery(
+    trpc.log.getTrackableParentTypes.queryOptions({
+      trackableParentType,
+    }),
+  );
+
   // Text related
   const [placeholder] = useState(
     lookupValues.textAreaPlaceholders[
@@ -348,6 +396,33 @@ export const TrackableLogStep = ({
           onSubmit={handleSubmit}
           submitting={isFormSubmitting}
         />
+
+        <Text className="text-sand-11 text-sm">
+          Existing TRACKERS {parentTrackableTypes?.length}
+        </Text>
+        {parentTrackableTypes?.map((trackable) => (
+          <Text key={trackable.id} className="text-sand-11 text-sm">
+            {trackable.name}
+          </Text>
+        ))}
+
+        {lookupValues.new.length > 0 && (
+          <Text className="text-sand-11 text-sm">
+            Track something new with a template
+          </Text>
+        )}
+        {lookupValues.new.map((newTrackable) => (
+          <Button
+            variant={"outline"}
+            size={"sm"}
+            key={newTrackable.name}
+            onPress={() => {
+              console.log("pressed");
+            }}
+          >
+            <Text>{newTrackable.name}</Text>
+          </Button>
+        ))}
       </View>
     </LogStepWrapper>
   );

packages/trpc/src/router/log.ts

@@ -3,6 +3,7 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 
 import { CONSTS } from "@1up/consts";
+import { and, eq, trackables } from "@1up/db";
 
 import { protectedProcedure } from "../trpc";
 
@@ -46,4 +47,23 @@ export const logRouter = {
         success: true,
       };
     }),
+  getTrackableParentTypes: protectedProcedure
+    .input(
+      z.object({
+        trackableParentType: CONSTS.TRACKABLE.TYPES_SCHEMA,
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      const { db, auth } = ctx;
+      const user = auth.user;
+
+      const logTypeTrackables = await db.query.trackables.findMany({
+        where: and(
+          eq(trackables.ownerId, user.id),
+          eq(trackables.type, input.trackableParentType),
+        ),
+      });
+
+      return logTypeTrackables;
+    }),
 } satisfies TRPCRouterRecord;