For simple count metrics, increment/decrement from hour measurements dialog

apps/web/components/dashboard/hours/HourMeasurementsDialog.tsx

@@ -13,7 +13,8 @@ import { Icon } from "@/components/ui/icon";
 import { titleCase } from "title-case";
 import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { X } from "lucide-react";
-import { useIncrementCount, } from "@lifetracker/shared-react/hooks/measurements";
+import { useDecrementCount, useIncrementCount, } from "@lifetracker/shared-react/hooks/measurements";
+import { Separator } from "@radix-ui/react-dropdown-menu";
 
 type CreateMeasurementSchema = z.infer<typeof zMeasurementSchema>;
 
@@ -33,15 +34,14 @@ export default function HourMeasurementsDialog({
 
     const { mutate: increment } = useIncrementCount({
         onSuccess: (res) => {
-            onOpenChange(false);
-
             const oldMeasurement = hour.measurements.find(m => m.metricId === res.metricId);
             const newHour = {
                 ...hour,
                 measurements: oldMeasurement ? hour.measurements.map(m => m.metricId === res.metricId ? res : m) : [...hour.measurements, res],
             };
-
+            setHour(newHour);
             reload(newHour);
+            console.log("New hour's deets", newHour.measurements);
             toast({
                 description: "Measurement added!",
             });
@@ -54,17 +54,95 @@ export default function HourMeasurementsDialog({
         },
     });
 
+    const { mutate: decrement } = useDecrementCount({
+        onSuccess: (res, req) => {
+            const oldMeasurementIndex = hour.measurements.findIndex(m => m.metricId === req.metricId);
+            let newMeasurements;
+
+            if (oldMeasurementIndex !== -1) {
+                if (res === undefined) {
+                    // Remove the measurement if res is undefined
+                    newMeasurements = [
+                        ...hour.measurements.slice(0, oldMeasurementIndex),
+                        ...hour.measurements.slice(oldMeasurementIndex + 1)
+                    ];
+                } else {
+                    // Update the measurement
+                    newMeasurements = [
+                        ...hour.measurements.slice(0, oldMeasurementIndex),
+                        res,
+                        ...hour.measurements.slice(oldMeasurementIndex + 1)
+                    ];
+                }
+            } else {
+                // Add the new measurement
+                newMeasurements = [...hour.measurements, res];
+            }
+
+            const newHour = {
+                ...hour,
+                measurements: newMeasurements,
+            };
+
+            setHour(newHour);
+            reload(newHour);
+            toast({
+                description: res === undefined ? "Measurement removed!" : "Measurement updated!",
+            });
+        }
+    });
+
+    let currentMeasurements = hour.measurements.map(measurement => measurement.metricName);
+
+    // With useEffect, update currentMeasurements when hour changes
+    useEffect(() => {
+        currentMeasurements = hour.measurements.map(measurement => measurement.metricName);
+    }, [hour]);
+
+
     return (
         <Dialog open={isOpen} onOpenChange={onOpenChange}>
             <DialogTrigger asChild>{children}</DialogTrigger>
             <DialogContent>
                 <DialogHeader>
-                    <DialogTitle>Add Measurement</DialogTitle>
+                    <DialogTitle>Metrics for {hour.date} at {hour.datetime}</DialogTitle>
                 </DialogHeader>
+                <Separator />
+                {hour.measurements && hour.measurements.length > 0 ?
+                    (<>
+                        <div className="font-bold">Measurements</div>
+                        <div className="mx-4 mb-4">
+                            {hour.measurements.map(measurement => {
+                                const metric = metrics.find(m => m.id === measurement.metricId);
+                                return (
+                                    <div key={measurement.id} className="flex items-center justify-between">
+                                        <div className="gap-4 flex"><Icon name={titleCase(metric.icon)} size={24} />
+                                            <div>{metric.name}</div></div>
+                                        <div className="flex  gap-4 items-center">
+                                            <div className="hover:cursor-pointer" onClick={() => {
+                                                decrement({ metricId: metric.id, hourId: hour.id, dayId: hour.dayId });
+                                            }} ><Icon name={"Minus"} /></div>
+                                            <div>{measurement.value}</div>
+                                            <div className="hover:cursor-pointer" onClick={() => {
+                                                increment({ metricId: metric.id, hourId: hour.id, dayId: hour.dayId });
+                                            }}><Icon name={"Plus"} /></div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </>)
+                    : <>
+                    </>
+                }
+                <div className="font-bold">Add Measurement</div>
                 <div className="grid" style={{ gridTemplateColumns: "repeat(6, 1fr)" }}>
                     {metrics.map(metric => (
+                        // If metric.name is in currentMeasurements, don't show it
+                        currentMeasurements.includes(metric.name) ? null :
                             <button style={{ aspectRatio: "1/1" }} key={metric.id} className="flex flex-col items-center justify-center hover:opacity-50" onClick={() => {
                                 increment({ metricId: metric.id, hourId: hour.id, dayId: hour.dayId });
+                                // onOpenChange(false);
                             }}>
                                 <Icon name={titleCase(metric.icon)} size={32} />
                                 <span className="text-sm">{metric.name}</span>

packages/trpc/routers/measurements.ts

@@ -48,6 +48,7 @@ export const measurementsAppRouter = router({
                 return {
                     ...updatedMeasurement[0],
                     icon: metric[0].icon,
+                    metricName: metric[0].name,
                 };
             } else {
                 const newMeasurement = await ctx.db.insert(measurements).values({
@@ -89,6 +90,7 @@ export const measurementsAppRouter = router({
                     return {
                         ...updatedMeasurement[0],
                         icon: metric[0].icon,
+                        metricName: metric[0].name,
                     };
                 } else {
                     //    Delete the measurement if it's zerooo