Switch DayView to client component

apps/web/app/dashboard/day/[dateQuery]/page.tsx

@@ -1,10 +1,17 @@
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { api } from "@/server/api/client";
 import { TRPCError } from "@trpc/server";
 import DayView from "@/components/dashboard/days/DayView";
+import { getServerAuthSession } from "@/server/auth";
 import LoadingSpinner from "@/components/ui/spinner";
 
 export default async function DayPage({ params }: { params: { dateQuery: string }; }) {
+    const session = await getServerAuthSession();
+    if (!session) {
+        redirect("/");
+    }
+
+
     let day;
     const { dateQuery } = await params;
     const timezone = await api.users.getTimezone();

apps/web/components/dashboard/days/DayView.tsx

@@ -1,7 +1,7 @@
+"use client";
 import { redirect } from "next/navigation";
 import { Separator } from "@/components/ui/separator";
-import { getServerAuthSession } from "@/server/auth";
-import { ZDay } from "@lifetracker/shared/types/days";
+import { ZDay, ZHour } from "@lifetracker/shared/types/days";
 import EditableDayComment from "./EditableDayComment";
 import { MoodStars } from "./MoodStars";
 import Link from "next/link";
@@ -10,26 +10,21 @@ import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react";
 import spacetime from "spacetime";
 import EditableHour from "@/components/dashboard/hours/EditableHour";
 import { DayMetrics } from "./DayMetrics";
-import { api } from "@/server/api/client";
-
-export default async function DayView({
+import { api } from "@/lib/trpc";
+export default function DayView({
     day,
 }: {
     day: ZDay;
 }) {
-    const session = await getServerAuthSession();
-    if (!session) {
-        redirect("/");
-    }
 
     const prevDay = spacetime(day.date).subtract(1, "day").format("iso-short");
     const nextDay = spacetime(day.date).add(1, "day").format("iso-short");
 
-    const userMetrics = await api.metrics.list();
+    const { data: userMetrics } = api.metrics.list.useQuery();
 
     const groupConsecutiveHours = (day: ZDay) => {
         const result = [];
-        let currentGroup = [];
+        let currentGroup: ZHour[] = [];
 
         for (const hour of day.hours) {
             if (hour.categoryCode === null) {
@@ -113,6 +108,7 @@ export default async function DayView({
             </div>
             <Separator />
 
+            {day && userMetrics ?
                 <ul>
                     {/* {consecutiveHours.map((group, i) => (
                     group.map((hour, j) => (
@@ -135,6 +131,7 @@ export default async function DayView({
 
                     }
                 </ul>
+                : <LoadingSpinner />}
 
         </div>
     );

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

@@ -37,7 +37,7 @@ export default function EditableHour({
     i: number,
     j: number,
     hourGroup: ZHour[],
-    metrics: ZMetric[],
+    metrics: ZMetric[] | undefined,
     isConsecutiveHour?: boolean,
     className?: string;
 }) {
@@ -114,6 +114,7 @@ export default function EditableHour({
     function reload(newHour: ZHour) {
         setHour(newHour);
     }
+
     return (
         <div
             data-hourid={hour.id}
@@ -177,6 +178,7 @@ export default function EditableHour({
                                     (<Icon name={titleCase(m.icon)} size={24}
                                         color={hour.foreground}
                                         tooltip={`${m.metricName}: ${m.value} ${m.unit}`}
+                                        key={m.id}
                                     />)
                                     : Array.from({ length: m.value }).map((_, index) =>
                                         <div key={`${m.id}-${index}`} className="hover:cursor-no-drop" onClick={(e) => {

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

@@ -252,7 +252,7 @@ export default function HourMeasurementsDialog({
                 }
 
                 {Object.keys(metricsByType).map(type => (
-                    <>
+                    <div key={`metric-${type}`}>
                         <div className="font-bold border-b border-white">{titleCase(type)}</div>
                         <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", rowGap: "1em" }}>
                             {metricsByType[type].map(metric => (
@@ -266,7 +266,8 @@ export default function HourMeasurementsDialog({
                                         <span className="text-sm">{metric.name}</span>
                                     </button>
                             ))}
-                        </div></>
+                        </div>
+                    </div>
                 ))}
             </DialogContent>
         </Dialog>