Merge pull request #126 from cboard-org/feature/capture-dashboard-url

Feature/Manage views and URLs

src/app/[locale]/dashboard/[id]/@board/BoardPage.tsx

@@ -2,11 +2,63 @@
 import InitialContent from './InitialContent';
 import BoardContainer from './BoardContainer';
 import { useBoundStore } from '@/providers/StoreProvider';
+import { useEffect, useState } from 'react';
+import { BoardRecord } from '@/commonTypes/Board';
 import { useShallow } from 'zustand/react/shallow';
+import { INITIAL_CONTENT_ID, STASHED_CONTENT_ID } from '../constants';
 
-export default function BoardPage() {
+type RemoteInitialBoard = BoardRecord | null;
+
+const useSetInitialBoard = (
+  remoteInitialBoard: RemoteInitialBoard,
+  id: string,
+) => {
+  const [setBoard, stashedDashboard, showInitialContent] = useBoundStore(
+    useShallow((state) => [
+      state.setBoard,
+      state.stashedDashboard,
+      state.showInitialContent,
+    ]),
+  );
+
+  useEffect(() => {
+    if (remoteInitialBoard) {
+      return setBoard(remoteInitialBoard);
+    }
+  }, [setBoard, remoteInitialBoard]);
+
+  const [initialStashedBoard, setInitialStashedBoard] =
+    useState<BoardRecord | null>(null);
+
+  useEffect(() => {
+    if (stashedDashboard.board !== null && initialStashedBoard === null) {
+      setInitialStashedBoard(stashedDashboard.board);
+    }
+  }, [stashedDashboard.board, initialStashedBoard]);
+
+  useEffect(() => {
+    if (!remoteInitialBoard && initialStashedBoard) {
+      if (id === STASHED_CONTENT_ID) return setBoard(initialStashedBoard);
+      if (id === INITIAL_CONTENT_ID) return showInitialContent();
+    }
+  }, [
+    setBoard,
+    remoteInitialBoard,
+    id,
+    showInitialContent,
+    initialStashedBoard,
+  ]);
+};
+export default function BoardPage({
+  remoteInitialBoard,
+  id,
+}: {
+  remoteInitialBoard: RemoteInitialBoard;
+  id: string;
+}) {
   const shouldDisplayInitialContent = useBoundStore(
     useShallow((state) => state.shouldDisplayInitialContent),
   );
+  useSetInitialBoard(remoteInitialBoard, id);
   return shouldDisplayInitialContent ? <InitialContent /> : <BoardContainer />;
 }

src/app/[locale]/dashboard/[id]/@board/error.tsx

@@ -0,0 +1,39 @@
+'use client'; // Error components must be Client Components
+
+import { useRouter } from '@/navigation';
+import { useEffect } from 'react';
+import Box from '@mui/material/Box';
+import { INITIAL_CONTENT_ID } from '@/dashboard/constants';
+
+export default function Error({
+  error,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const router = useRouter();
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('err', error);
+    setTimeout(() => {
+      router.push(`/dashboard/${INITIAL_CONTENT_ID}`);
+    }, 2000);
+  }, [error, router]);
+
+  return (
+    <Box
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+      }}
+    >
+      <h1 style={{ color: 'red' }}>ERROR</h1>
+      <p>{error.message}</p>
+      <p>you will be redirected to the initial page</p>
+    </Box>
+  );
+}

src/app/[locale]/dashboard/[id]/@board/page.tsx

@@ -1,13 +1,34 @@
-import { NextIntlClientProvider, useMessages } from 'next-intl';
 import BoardDisplayed from './BoardPage';
-import pick from 'lodash.pick';
+import { BoardRecord } from '@/commonTypes/Board';
+import testBoards from '@/dashboard/@board/testBoard.json';
+import IntlWrapperForAsync from '@/components/IntlWrapperForAsync/IntlWrapperForAsync';
+import { INITIAL_CONTENT_ID, STASHED_CONTENT_ID } from '@/dashboard/constants';
 
-export default function Page() {
-  const messages = useMessages();
+export default async function Page({
+  params: { id },
+}: {
+  params: { id: string };
+}) {
+  let board: BoardRecord | null = null;
+
+  const preventFetch = id === INITIAL_CONTENT_ID || id === STASHED_CONTENT_ID;
+  if (!preventFetch) {
+    try {
+      await fetch('https://postman-echo.com/delay/2', {
+        cache: 'no-cache',
+      });
+      board = testBoards[Number(id)];
+      if (!board) {
+        throw new Error('board not found');
+      }
+    } catch (error) {
+      throw error;
+    }
+  }
 
   return (
-    <NextIntlClientProvider messages={pick(messages, 'Board')}>
-      <BoardDisplayed />
-    </NextIntlClientProvider>
+    <IntlWrapperForAsync propertyName="Board">
+      <BoardDisplayed remoteInitialBoard={board} id={id} />
+    </IntlWrapperForAsync>
   );
 }