Progress check-in.

src/app/(main)/boards/BoardProvider.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { Loading } from '@umami/react-zen';
+import { createContext, type ReactNode } from 'react';
+import { useBoardQuery } from '@/components/hooks/queries/useBoardQuery';
+import type { Board } from '@/generated/prisma/client';
+
+export const BoardContext = createContext<Board>(null);
+
+export function BoardProvider({ boardId, children }: { boardId: string; children: ReactNode }) {
+  const { data: board, isFetching, isLoading } = useBoardQuery(boardId);
+
+  if (isFetching && isLoading) {
+    return <Loading placement="absolute" />;
+  }
+
+  if (!board) {
+    return null;
+  }
+
+  return <BoardContext.Provider value={board}>{children}</BoardContext.Provider>;
+}

src/app/(main)/boards/[boardId]/BoardBody.tsx

@@ -0,0 +1,3 @@
+export function BoardBody() {
+  return <h1>i am bored.</h1>;
+}

src/app/(main)/boards/[boardId]/BoardHeader.tsx

@@ -1,11 +1,11 @@
-import { Button, Column, Grid, InlineEditField, Row } from '@umami/react-zen';
+import { Button, Column, Grid, Heading, Row, TextField } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 
 export function BoardHeader() {
   const { formatMessage, labels } = useMessages();
   const defaultName = formatMessage(labels.untitled);
-  const name = 'My Board';
-  const description = 'This is my board';
+  const name = '';
+  const description = '';
 
   const handleNameChange = (name: string) => {
     //updateReport({ name: name || defaultName });
@@ -15,29 +15,50 @@ export function BoardHeader() {
     //updateReport({ description });
   };
 
+  return <h1>asdgfviybiyu8oaero8g9873qrgb875qh0g8</h1>;
+
   return (
-    <Grid columns="1fr 1fr">
+    <Grid
+      columns={{ xs: '1fr', md: '1fr 1fr' }}
+      paddingY="4"
+      marginBottom="6"
+      border="bottom"
+      gapX="6"
+    >
+      asdfasdfds
       <Column>
         <Row>
-          <InlineEditField
+          <TextField
+            variant="quiet"
             name="name"
             value={name}
+            defaultValue={name}
             placeholder={defaultName}
-            onCommit={handleNameChange}
-          />
+            onChange={handleNameChange}
+            autoComplete="off"
+            style={{ fontSize: '2rem', fontWeight: 700, width: '100%' }}
+          >
+            <Heading size="4">{name}</Heading>
+          </TextField>
         </Row>
         <Row>
-          <InlineEditField
+          <TextField
+            variant="quiet"
             name="description"
             value={description}
+            defaultValue={description}
             placeholder={`+ ${formatMessage(labels.addDescription)}`}
-            onCommit={handleDescriptionChange}
-          />
+            autoComplete="off"
+            onChange={handleDescriptionChange}
+            style={{ width: '100%' }}
+          >
+            {description}
+          </TextField>
         </Row>
       </Column>
-      <Row justifyContent="flex-end">
+      <Column justifyContent="center" alignItems="flex-end">
         <Button variant="primary">{formatMessage(labels.save)}</Button>
-      </Row>
+      </Column>
     </Grid>
   );
 }

src/app/(main)/boards/[boardId]/BoardPage.tsx

@@ -1,17 +1,17 @@
 'use client';
 import { Column } from '@umami/react-zen';
 import { BoardHeader } from '@/app/(main)/boards/[boardId]/BoardHeader';
+import { BoardProvider } from '@/app/(main)/boards/BoardProvider';
 import { PageBody } from '@/components/common/PageBody';
-import { useMessages } from '@/components/hooks';
-
-export function BoardPage() {
-  const { formatMessage, labels } = useMessages();
 
+export function BoardPage({ boardId }: { boardId: string }) {
   return (
-    <PageBody>
-      <Column margin="2">
-        <BoardHeader />
-      </Column>
-    </PageBody>
+    <BoardProvider boardId={boardId}>
+      <PageBody>
+        <Column>
+          <BoardHeader />
+        </Column>
+      </PageBody>
+    </BoardProvider>
   );
 }

src/components/boards/Board.tsx

@@ -1,9 +0,0 @@
-import { Column } from '@umami/react-zen';
-
-export interface BoardProps {
-  children?: React.ReactNode;
-}
-
-export function Board({ children }: BoardProps) {
-  return <Column>{children}</Column>;
-}

src/components/hooks/context/useBoard.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { BoardContext } from '@/app/(main)/boards/BoardProvider';
+
+export function useBoard() {
+  return useContext(BoardContext);
+}

src/components/hooks/index.ts

@@ -1,6 +1,7 @@
 'use client';
 
 // Context hooks
+export * from './context/useBoard';
 export * from './context/useLink';
 export * from './context/usePixel';
 export * from './context/useTeam';
@@ -9,6 +10,7 @@ export * from './context/useWebsite';
 
 // Query hooks
 export * from './queries/useActiveUsersQuery';
+export * from './queries/useBoardQuery';
 export * from './queries/useBoardsQuery';
 export * from './queries/useDateRangeQuery';
 export * from './queries/useDeleteQuery';

src/components/hooks/queries/useBoardQuery.ts

@@ -0,0 +1,17 @@
+import { keepPreviousData } from '@tanstack/react-query';
+import type { ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useModified } from '../useModified';
+
+export function useBoardQuery(boardId: string, options?: ReactQueryOptions) {
+  const { get, useQuery } = useApi();
+  const { modified } = useModified(`board:${boardId}`);
+
+  return useQuery({
+    queryKey: ['boards', { boardId, modified }],
+    queryFn: () => get(`/boards/${boardId}`),
+    enabled: !!boardId && boardId !== 'create',
+    placeholderData: keepPreviousData,
+    ...options,
+  });
+}