From 488f8bc8aea3fcd6ebd21a8fd614025d480684d6 Mon Sep 17 00:00:00 2001
From: glen coden <info@simonmeyer.de>
Date: Tue, 14 Jan 2025 22:15:04 +0100
Subject: [PATCH] feat (session): add realtime lips hook

---
 apps/cloud/app/components/DragDropList.tsx   |  18 ++--
 apps/cloud/app/hooks/useLips.ts              |  30 ++++++
 apps/cloud/app/routes/session.$sessionId.tsx |  62 +++++------
 packages/db/src/queries/createDemoLip.ts     | 107 +++++++++----------
 packages/db/src/queries/moveLip.ts           |  26 ++++-
 packages/ui/src/components/SongLip.tsx       |   2 +-
 6 files changed, 146 insertions(+), 99 deletions(-)
 create mode 100644 apps/cloud/app/hooks/useLips.ts

diff --git a/apps/cloud/app/components/DragDropList.tsx b/apps/cloud/app/components/DragDropList.tsx
index 9868b50..9ace8d2 100644
--- a/apps/cloud/app/components/DragDropList.tsx
+++ b/apps/cloud/app/components/DragDropList.tsx
@@ -32,7 +32,7 @@ const DragDropList = forwardRef<
             <div
                 ref={ref}
                 className={cn(
-                    'px-main relative flex w-full flex-grow flex-col items-center gap-3 pb-48',
+                    'px-main relative flex w-full flex-grow flex-col items-center gap-3',
                     {
                         'overflow-y-scroll': fixTop === null,
                     },
@@ -40,15 +40,21 @@ const DragDropList = forwardRef<
                 style={fixTop ? { transform: `translateY(-${fixTop}px)` } : {}}
             >
                 <div
-                    className='sticky left-0 top-0 z-10 h-36 w-full shrink-0 lg:h-40'
+                    className={cn(
+                        'sticky left-0 top-0 z-10 h-36 w-full shrink-0 lg:h-40',
+                        {
+                            absolute: fixTop !== null,
+                            'px-main': fixTop !== null,
+                        },
+                    )}
                     style={fixTop ? { top: `${fixTop}px` } : {}}
                 >
-                    <div className='absolute bottom-0 left-1/2 h-64 w-full -translate-x-1/2 bg-blue-800 max-md:w-[100vw]'>
-                        <div className='absolute bottom-0 left-1/2 flex h-28 w-full -translate-x-1/2 items-center justify-center px-6'>
-                            {header}
-                        </div>
+                    <div className='absolute bottom-0 left-1/2 h-64 w-full -translate-x-1/2 bg-blue-800 max-lg:w-[50vw] max-md:w-[100vw]' />
+                    <div className='relative mt-8 flex h-28 w-full items-center justify-center lg:mt-12'>
+                        {header}
                     </div>
                 </div>
+                {fixTop !== null && <div className='h-36 lg:h-40' />}
 
                 {springs.map((spring, index) => {
                     const lip = lips[index]
diff --git a/apps/cloud/app/hooks/useLips.ts b/apps/cloud/app/hooks/useLips.ts
new file mode 100644
index 0000000..8ab013a
--- /dev/null
+++ b/apps/cloud/app/hooks/useLips.ts
@@ -0,0 +1,30 @@
+import { api } from '@repo/api/client'
+import { Session } from '@repo/db'
+import { useEffect } from 'react'
+import { supabase } from '~/lib/supabase.client'
+
+export const useLips = (sessionId: Session['id']) => {
+    const utils = api.useUtils()
+
+    useEffect(() => {
+        const channel = supabase
+            .channel('lip')
+            .on(
+                'postgres_changes',
+                {
+                    event: '*',
+                    schema: 'public',
+                    table: 'lip',
+                },
+                () => {
+                    void utils.lip.getBySessionId.invalidate({ id: sessionId })
+                },
+            )
+            .subscribe()
+        return () => {
+            void supabase.removeChannel(channel)
+        }
+    }, [utils, sessionId])
+
+    return api.lip.getBySessionId.useQuery({ id: sessionId })
+}
diff --git a/apps/cloud/app/routes/session.$sessionId.tsx b/apps/cloud/app/routes/session.$sessionId.tsx
index 7946f74..9933438 100644
--- a/apps/cloud/app/routes/session.$sessionId.tsx
+++ b/apps/cloud/app/routes/session.$sessionId.tsx
@@ -19,6 +19,7 @@ import DragDropList from '~/components/DragDropList'
 import DragDropListItem from '~/components/DragDropListItem'
 import SessionMenu from '~/components/SessionMenu'
 import { createSpringEffect } from '~/helpers/create-spring-effect'
+import { useLips } from '~/hooks/useLips'
 
 const FULL_LIP_HEIGHT = 108 // px, lip height 96 + list gap 12
 const FULL_ACTION_LIP_BOX_HEIGHT = 124 // px, lip box height 112 + list gap 12
@@ -98,12 +99,7 @@ export default function ActiveSession() {
         data,
         isLoading: isLipsLoading,
         isFetching: isLipsFetching,
-    } = api.lip.getBySessionId.useQuery(
-        { id: session.id },
-        {
-            refetchInterval: 1000 * 60,
-        },
-    )
+    } = useLips(session.id)
 
     const lips = data ?? ([] as LipDTO[])
 
@@ -300,31 +296,13 @@ export default function ActiveSession() {
             return
         }
 
-        // TODO: add this to move update to avoid having two requests
-        // ALSO let staged lip be moved away
-        // ALSO mobile page indicator dots
-        // Song select loading spinner
+        // TODO:
+        // Mobile page indicator dots
         // Session start buttons loading spinner rather than page pulse
-        // Refactor drop shadows by the example of SongLip
+        // Refactor Button drop shadows by the example of SongLip
         // Always five demo lips
-        // Remove shadow from lips on live stack
+        // Remove shadow from lips on live stack?
         // Hook up stripe and tool ws locally
-        if (actionLip && status === 'staged') {
-            const actionStatus =
-                actionLip.status === 'staged' ? 'no-show' : 'done'
-            utils.lip.getBySessionId.setData({ id: session.id }, (prevLips) => {
-                return prevLips?.map((lip) => {
-                    if (lip.id !== actionLip.id) {
-                        return lip
-                    }
-                    return { ...lip, status: actionStatus }
-                })
-            })
-            updateLip({
-                id: actionLip.id,
-                status: actionStatus,
-            })
-        }
 
         // Optimistic update
         void utils.lip.getBySessionId.setData(
@@ -335,6 +313,7 @@ export default function ActiveSession() {
                         if (lip.sortNumber === null) {
                             return lip
                         }
+                        // Update moved lip
                         if (lip.id === id) {
                             return {
                                 ...lip,
@@ -342,6 +321,16 @@ export default function ActiveSession() {
                                 sortNumber,
                             }
                         }
+                        // Update current lip on live stack
+                        if (lip.id === actionLip?.id && status === 'staged') {
+                            return {
+                                ...lip,
+                                status:
+                                    lip.status === 'staged'
+                                        ? 'no-show'
+                                        : ('done' as LipDTO['status']),
+                            }
+                        }
                         if (fromLip.status === status) {
                             if (lip.status !== status) {
                                 return lip
@@ -733,9 +722,6 @@ export default function ActiveSession() {
                 console.log('DRAG INDEX', dragIndex)
                 console.log('TARGET INDEX', targetIndex)
 
-                // staged - live toggle on lip
-                // no moving lip away from live stack > implement no-show status
-
                 let status: LipDTO['status'] = 'idle'
 
                 if (deleteOnDrop) {
@@ -827,11 +813,21 @@ export default function ActiveSession() {
                                                 lip={actionLip}
                                                 spring={actionSpring}
                                                 bind={bindLipDrag}
-                                                isLocked
+                                                isLocked={
+                                                    actionLip.status === 'live'
+                                                }
                                                 hideTime
                                                 hideFavorites
                                             />
-                                            <div className='absolute right-2 top-1/2 flex h-20 w-28 -translate-y-1/2 items-center justify-center'>
+                                            <div
+                                                className={cn(
+                                                    'absolute right-2 top-1/2 flex h-20 w-28 -translate-y-1/2 items-center justify-center',
+                                                    {
+                                                        'animate-pulse':
+                                                            isLipUpdatePending,
+                                                    },
+                                                )}
+                                            >
                                                 {actionLip.status ===
                                                     'staged' && (
                                                     <Button
diff --git a/packages/db/src/queries/createDemoLip.ts b/packages/db/src/queries/createDemoLip.ts
index 42d3e48..8ca50ef 100644
--- a/packages/db/src/queries/createDemoLip.ts
+++ b/packages/db/src/queries/createDemoLip.ts
@@ -1,12 +1,5 @@
-import { and, eq } from 'drizzle-orm'
-import {
-    db,
-    guestsTable,
-    Lip,
-    lipsTable,
-    Session,
-    songsTable,
-} from '../index.js'
+import { and, eq, sql } from 'drizzle-orm'
+import { db, guestsTable, lipsTable, Session, songsTable } from '../index.js'
 
 const DEMO_GUEST_NAMES = [
     'Bugs Bunny',
@@ -39,11 +32,32 @@ export const createDemoLip = (sessionId: Session['id']) => {
             Math.random() * MAX_NUM_DEMO_LIPS_PER_REQUEST,
         )
 
-        const songs = await tx.select().from(songsTable)
-        const guests = await tx.select().from(guestsTable)
+        const songs = await tx
+            .select()
+            .from(songsTable)
+            .limit(numDemos)
+            .orderBy(sql`RANDOM()`)
 
-        const prevLips = await tx
+        if (songs.length < numDemos) {
+            throw new Error(
+                `There are only ${songs.length} songs and you requested ${numDemos} demo lips.`,
+            )
+        }
+
+        const guests = await tx
             .select()
+            .from(guestsTable)
+            .limit(numDemos)
+            .orderBy(sql`RANDOM()`)
+
+        if (guests.length < numDemos) {
+            throw new Error(
+                `There are only ${guests.length} guests and you requested ${numDemos} demo lips.`,
+            )
+        }
+
+        const prevLipsCount = (await tx
+            .select({ count: sql<number>`count(*)` })
             .from(lipsTable)
             .where(
                 and(
@@ -51,52 +65,29 @@ export const createDemoLip = (sessionId: Session['id']) => {
                     eq(lipsTable.status, 'idle'),
                 ),
             )
-
-        const startSortNumber = prevLips.length + 1
-
-        const demos: Pick<
-            Lip,
-            'songId' | 'guestId' | 'singerName' | 'sortNumber'
-        >[] = []
-
-        for (let i = 0; i < numDemos; i++) {
-            const demoSong = songs[Math.floor(Math.random() * songs.length)]
-
-            if (!demoSong) {
-                throw new Error(
-                    'There need to be songs in the database to create a demo lip.',
-                )
-            }
-
-            const demoGuest = guests[Math.floor(Math.random() * guests.length)]!
-
-            if (!demoGuest) {
-                throw new Error(
-                    'There need to be guests in the database to create a demo lip.',
-                )
-            }
-
-            const demoGuestName =
-                DEMO_GUEST_NAMES[
-                    Math.floor(Math.random() * DEMO_GUEST_NAMES.length)
-                ]!
-
-            demos.push({
-                songId: demoSong.id,
-                guestId: demoGuest.id,
-                singerName: demoGuestName,
-                sortNumber: startSortNumber + i,
-            })
-        }
-
-        const inserts = demos.map((demo) => {
-            return tx.insert(lipsTable).values({
-                sessionId,
-                ...demo,
-            })
-        })
-
-        await Promise.all(inserts)
+            .then((result) => result[0]?.count ?? 0)) as string // prob drizzle type error
+
+        const startSortNumber = parseInt(prevLipsCount) + 1
+
+        await tx.insert(lipsTable).values(
+            Array.from({ length: numDemos }, (_, i) => {
+                const songId = songs[i]?.id
+                const guestId = guests[i]?.id
+                if (!songId || !guestId) {
+                    throw new Error('Missing songId or guestId')
+                }
+                return {
+                    sessionId,
+                    songId,
+                    guestId,
+                    singerName:
+                        DEMO_GUEST_NAMES[
+                            Math.floor(Math.random() * DEMO_GUEST_NAMES.length)
+                        ]!,
+                    sortNumber: startSortNumber + i,
+                }
+            }),
+        )
 
         return true
     })
diff --git a/packages/db/src/queries/moveLip.ts b/packages/db/src/queries/moveLip.ts
index 8a142c7..08a69c3 100644
--- a/packages/db/src/queries/moveLip.ts
+++ b/packages/db/src/queries/moveLip.ts
@@ -1,4 +1,4 @@
-import { and, eq } from 'drizzle-orm'
+import { and, eq, or } from 'drizzle-orm'
 import { db, Lip, lipsTable } from '../index.js'
 
 export const moveLip = (
@@ -49,6 +49,30 @@ export const moveLip = (
                           ),
                       )
 
+        const [actionLip] = await tx
+            .select()
+            .from(lipsTable)
+            .where(
+                and(
+                    eq(lipsTable.sessionId, payload.sessionId),
+                    or(
+                        eq(lipsTable.status, 'staged'),
+                        eq(lipsTable.status, 'live'),
+                    ),
+                ),
+            )
+            .limit(1)
+
+        if (actionLip && payload.status === 'staged') {
+            await tx
+                .update(lipsTable)
+                .set({
+                    status: actionLip.status === 'staged' ? 'no-show' : 'done',
+                    sortNumber: 1,
+                })
+                .where(eq(lipsTable.id, actionLip.id))
+        }
+
         const updates =
             toList === null
                 ? fromList
diff --git a/packages/ui/src/components/SongLip.tsx b/packages/ui/src/components/SongLip.tsx
index b39730b..818abd2 100644
--- a/packages/ui/src/components/SongLip.tsx
+++ b/packages/ui/src/components/SongLip.tsx
@@ -45,7 +45,7 @@ export default function SongLip({
 
                 <section className='absolute right-3 top-0 flex h-full max-w-[25%] flex-col items-end justify-between py-3'>
                     {!hideTime && (
-                        <Small className='text-pink-700'>
+                        <Small className='text-right text-pink-700'>
                             {formatDistanceToNow(lip.createdAt!)}
                         </Small>
                     )}