Merge pull request #2 from velascoandres/fix/performance-whiteboard

Fix/performance whiteboard

src/app/_whiteboards/hooks/use-whiteboard.ts

@@ -1,37 +1,64 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import compare from 'just-compare'
 
 import { type ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 import { type AppState, type BinaryFiles } from '@excalidraw/excalidraw/types/types'
+import { useQueryClient } from '@tanstack/react-query'
 
 import { useDebounceCallback } from '@/app/_shared/hooks/use-debounce-callback'
 import { api } from '@/trpc/react'
 
+import { type Whiteboard } from '../interfaces/whiteboard'
+
 
 export const useWhiteboard = (id: number) => {
-  const utils = api.useUtils()
-
-  const { mutate: updateContent } = api.whiteboard.updateUserWhiteboardContent.useMutation({
-    onSuccess: () => {
-      void utils.whiteboard.findUserWhiteboardById.invalidate()
-    }
-  })
-
+  const queryClient = useQueryClient()
+
   const { data: whiteboard, isLoading } = api.whiteboard.findUserWhiteboardById.useQuery({
     id: Number(id),
   }, { 
     enabled: Boolean(id),
     cacheTime: Infinity, 
+    queryKey: ['whiteboard.findUserWhiteboardById', { id: Number(id) }],
+  })
+
+  const [currentWhiteboard, setWhiteboard] = useState<typeof whiteboard>(whiteboard)
+
+
+  const { mutate: updateContent } = api.whiteboard.updateUserWhiteboardContent.useMutation({
+    onMutate: async ({ content }) => {
+      await queryClient.cancelQueries(['whiteboard.findUserWhiteboardById', { id: Number(id) }])
+
+      const prevWhiteboard = queryClient.getQueryData(['whiteboard.findUserWhiteboardById', { id: Number(id) }])
+
+      queryClient.setQueryData(['whiteboard.findUserWhiteboardById', { id: Number(id) }], (old: unknown) => {
+        const oldWhiteboard = old as Whiteboard
+
+        setWhiteboard({
+          ...oldWhiteboard,
+          content,
+        } as typeof whiteboard)
+
+        return {
+          ...oldWhiteboard,
+          content,
+        }
+      })
+
+      return prevWhiteboard
+    }
   })
 
-  const debounce = useDebounceCallback(200)
+  const debounce = useDebounceCallback(500)
 
   const handleChange = (elements: ExcalidrawElement[], appState: AppState, files?: BinaryFiles) => {
     if (!elements.length) {
       return
     }
-    if (!whiteboard) {
+
+    if (!currentWhiteboard) {
       return
     }
 
@@ -60,15 +87,15 @@ export const useWhiteboard = (id: number) => {
       },
     }
 
-    const areSame = compare(payload, whiteboard.content)
+    const areSame = compare(payload, currentWhiteboard.content)
 
 
     if (areSame){
       return
     }
 
     updateContent({
-      id: whiteboard.id,
+      id: currentWhiteboard.id,
       content: {
         scene: {
           ...payload.scene,
@@ -81,6 +108,10 @@ export const useWhiteboard = (id: number) => {
     debounce(() => handleChange(elements, appState, files))
   }
 
+  useEffect(() => {
+    setWhiteboard(whiteboard)
+  }, [whiteboard])
+
 
   return {
     isLoading,

src/app/view-whiteboard/[id]/layout.tsx

@@ -1,6 +1,41 @@
 import React, { Suspense } from 'react'
+import { type Metadata,type ResolvingMetadata } from 'next'
+import { redirect } from 'next/navigation'
 
 import Loading from '@/app/(protected)/loading'
+import findPublicWhiteboardById from '@/server/api/whiteboard/usecases/find-public-whiteboard'
+import { db } from '@/server/db'
+
+
+export async function generateMetadata({ params }: {params: {id: string}}, parent: ResolvingMetadata) {
+  const id = Number(params.id)
+
+  const whiteboard = await findPublicWhiteboardById(db, { id, omitContent: true })
+
+
+  if (!whiteboard){
+    redirect('/not-found')
+  }
+
+
+  const previousDescription = (await parent).openGraph?.description ?? ''
+
+  return {
+    title: whiteboard.name,
+    description: whiteboard.description,
+    openGraph:{
+      title: whiteboard.name,
+      description: whiteboard.description ?? previousDescription,
+      url: 'https://drawy-studio.vercel.app/',
+      images: [{ 
+        url: 'https://drawy-studio.vercel.app/preview.jpg',        
+        width: 1200,
+        height: 630, 
+      }],
+      siteName: 'Drawy studio',
+    }
+  } as Metadata
+}
 
 const Layout = ({ children }: {children: React.ReactNode}) => {
   return (

src/server/api/whiteboard/usecases/find-public-whiteboard.ts

@@ -5,13 +5,22 @@ import { type SearchByIdDto } from '@/dtos/shared-dtos'
 import type * as schema from '@/server/db/schema'
 import { NotFound } from '@/server/exceptions/not-found'
 
-type Options = z.infer<typeof SearchByIdDto>
+
+type Options = z.infer<typeof SearchByIdDto> & {omitContent?: boolean}
 
 const findPublicWhiteboardById = async (db: PostgresJsDatabase<typeof schema>, options: Options) => {
-  const { id } = options
+  const { id, omitContent } = options
 
   const currentWhiteboard = await db.query.whiteboards.findFirst({
-    where: (whiteboards, { eq, and }) => and(eq(whiteboards.id, id), eq(whiteboards.isPublic, true))
+    where: (whiteboards, { eq, and }) => and(eq(whiteboards.id, id), eq(whiteboards.isPublic, true)),
+    columns: {
+      id: true,
+      name: true,
+      description: true,
+      content: omitContent ? false : true,
+      createdAt: true,
+      updatedAt: true,
+    }
   })
 
   if (!currentWhiteboard){

src/server/api/whiteboard/usecases/update-whiteboard-content.ts

@@ -31,7 +31,7 @@ const updateWhiteboardContent = async (db: PostgresJsDatabase<typeof schema>, op
 
   return db.update(whiteboards).set({
     content
-  }).where(eq(whiteboards.id, id)).returning()
+  }).where(eq(whiteboards.id, id))
 }