From 498542c94d1da94ba95d83aee66847453c862ebb Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sun, 19 Nov 2023 18:29:29 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20board=20hydration=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Board/context.tsx                |  9 ++++++---
 src/components/layout/Templates/BoardLayout.tsx |  6 +-----
 src/pages/board/[slug].tsx                      | 16 ++++++++++------
 src/pages/board/index.tsx                       | 12 ++++++++----
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/Board/context.tsx b/src/components/Board/context.tsx
index 6495b3cb9..262b5e731 100644
--- a/src/components/Board/context.tsx
+++ b/src/components/Board/context.tsx
@@ -19,18 +19,21 @@ export const BoardProvider = ({ children, userAgent, ...props }: BoardProviderPr
   const { enabled } = useEditModeStore();
   const router = useRouter();
   const { layout } = router.query;
-  const { data: board } = api.boards.byName.useQuery(
+  const { data: queryBoard } = api.boards.byName.useQuery(
     {
       boardName: props.initialBoard.name,
       layoutId: layout as string | undefined,
       userAgent,
     },
     {
-      initialData: props.initialBoard,
-      //enabled: !!layout,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      enabled: typeof window !== 'undefined', // Disable on server-side so it is not cached with an old result.
     }
   );
 
+  const board = queryBoard ?? props.initialBoard; // Initialdata property is not working because it somehow ignores the enabled property.
+
   useConfirmLeavePage(enabled);
 
   return (
diff --git a/src/components/layout/Templates/BoardLayout.tsx b/src/components/layout/Templates/BoardLayout.tsx
index bd1a53421..d2bb0fad2 100644
--- a/src/components/layout/Templates/BoardLayout.tsx
+++ b/src/components/layout/Templates/BoardLayout.tsx
@@ -166,11 +166,7 @@ const ToggleEditModeButton = () => {
     toggleEditMode();
     if (!board || !name) return;
     await saveBoardAsync({ boardId: board.id, sections: board.sections, layoutId: board.layoutId });
-    utils.boards.byName.invalidate({
-      boardName: name,
-      layoutId: board.layoutId,
-      userAgent: navigator.userAgent,
-    });
+    utils.boards.byName.invalidate();
     Consola.log('Saved config to server', name);
     hideNotification(editModeNotificationId);
   };
diff --git a/src/pages/board/[slug].tsx b/src/pages/board/[slug].tsx
index 8db36aa0a..853946c2a 100644
--- a/src/pages/board/[slug].tsx
+++ b/src/pages/board/[slug].tsx
@@ -6,7 +6,7 @@ import { Board } from '~/components/Board/Board';
 import { BoardProvider } from '~/components/Board/context';
 import { BoardLayout } from '~/components/layout/Templates/BoardLayout';
 import { env } from '~/env';
-import { createTrpcServersideHelpers } from '~/server/api/helper';
+import { boardRouter } from '~/server/api/routers/board';
 import { getServerAuthSession } from '~/server/auth';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { checkForSessionOrAskForLogin } from '~/tools/server/loginBuilder';
@@ -58,9 +58,15 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
     ctx.res
   );
 
-  const helpers = await createTrpcServersideHelpers(ctx);
-  const board = await helpers.boards.byName
-    .fetch({
+  const session = await getServerAuthSession({ req: ctx.req, res: ctx.res });
+
+  const caller = boardRouter.createCaller({
+    session,
+    cookies: ctx.req.cookies,
+    headers: ctx.req.headers,
+  });
+  const board = await caller
+    .byName({
       boardName: routeParams.data.slug,
       layoutId: query.data.layout,
       userAgent: ctx.req.headers['user-agent'],
@@ -78,8 +84,6 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
     };
   }
 
-  const session = await getServerAuthSession({ req: ctx.req, res: ctx.res });
-
   const result = checkForSessionOrAskForLogin(
     ctx,
     session,
diff --git a/src/pages/board/index.tsx b/src/pages/board/index.tsx
index 3cdafa98c..bcd4001af 100644
--- a/src/pages/board/index.tsx
+++ b/src/pages/board/index.tsx
@@ -6,7 +6,7 @@ import { Board } from '~/components/Board/Board';
 import { BoardProvider } from '~/components/Board/context';
 import { BoardLayout } from '~/components/layout/Templates/BoardLayout';
 import { env } from '~/env';
-import { createTrpcServersideHelpers } from '~/server/api/helper';
+import { boardRouter } from '~/server/api/routers/board';
 import { getServerAuthSession } from '~/server/auth';
 import { getDefaultBoardAsync } from '~/server/db/queries/userSettings';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
@@ -48,9 +48,13 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   }
   const session = await getServerAuthSession(ctx);
   const boardName = await getDefaultBoardAsync(session?.user?.id, 'default');
-  const helpers = await createTrpcServersideHelpers(ctx);
-  const board = await helpers.boards.byName
-    .fetch({
+  const caller = boardRouter.createCaller({
+    session,
+    cookies: ctx.req.cookies,
+    headers: ctx.req.headers,
+  });
+  const board = await caller
+    .byName({
       boardName,
       layoutId: query.data.layout,
       userAgent: ctx.req.headers['user-agent'],