feat(create-turbo): apply official-starter transform

nazara/apps/web/app/day/[date]/page.tsx

@@ -1,27 +1,31 @@
 import spacetime from "spacetime";
 import { createClient } from '@/utils/supabase/server';
+import RealtimeDayPage from "./realtime";
 
 export default async function DayPage(
-    { date }: { date: string }
+    { params }: { params: { date: string } }
 ) {
-
     const supabase = await createClient();
+    const date = (await params).date;
 
     const { data: { user: user } } = await supabase.auth.getUser();
     const { data: day } = await supabase
         .from('days')
-        .select('*')
+        .select(`*, 
+            hours(*, 
+                category:categories(id,
+                    code,
+                    name,
+                    color:colors(name, hexcode, inverse)
+                )   
+            )
+            `)
         .eq('date', date)
         .eq('userId', user?.id)
+        .limit(1).single()
         ;
 
     return !day ? <div>Loading...</div> : (
-        <>
-            <h1>{spacetime(day.date).format('{month} {date-ordinal}, {year}')}</h1>
-            <ul>
-                <li>{day.mood}</li>
-                <li>{day.comment}</li>
-            </ul>
-        </>
+        <RealtimeDayPage initialDay={day} />
     );
 }

nazara/apps/web/app/day/[date]/realtime.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { createClient } from "@/utils/supabase/client";
+import { useEffect, useState } from "react";
+import spacetime from "spacetime";
+
+const supabase = createClient();
+
+export default function RealtimeDayPage({ initialDay }) {
+    const [day, setDay] = useState(initialDay);
+
+    useEffect(() => {
+        if (initialDay && !day) {
+            setDay(initialDay);
+        }
+    }, [initialDay]);
+
+    useEffect(() => {
+        const daysChannel = supabase.channel('days')
+            .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'days' }, (payload) => {
+                setDay(payload.new);
+            }).subscribe();
+
+        const hoursChannel = supabase.channel('hours')
+            .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'hours' }, (payload) => {
+                const updatedHour = payload.new;
+                const prevHours = day.hours;
+                const newHours = prevHours.map((hour) => {
+                    if (hour.id === updatedHour.id) {
+                        return updatedHour;
+                    }
+                    return hour;
+                });
+                const newDay = { ...day, hours: newHours };
+                console.log(newDay);
+                setDay(newDay);
+            }).subscribe();
+
+        return () => {
+            daysChannel.unsubscribe();
+            hoursChannel.unsubscribe();
+        }
+    }, [supabase])
+
+    return (
+        <>
+            <h1>{spacetime(day.date).format('{month} {date-ordinal}, {year}')}</h1>
+            <ul>
+                <li>MOOD: {day.mood ?? "No mood set."}</li>
+                <li>COMMENT: {day.comment ?? "No comment yet."}</li>
+            </ul>
+            <ul>
+                {day.hours.map((hour) => (
+                    <li key={hour.id}
+                        className="p-2"
+                        style={{
+                            "backgroundColor": hour.category?.color?.hexcode,
+                            "color": hour.category?.color?.inverse
+                        }}>[{spacetime(hour.datetime).format('{time}')}] {hour.comment}</li>
+                ))}
+
+            </ul>
+        </>
+    )
+}