diff --git a/src/app/(main)/boards/BoardProvider.tsx b/src/app/(main)/boards/BoardProvider.tsx index 1d133166..5dc52d62 100644 --- a/src/app/(main)/boards/BoardProvider.tsx +++ b/src/app/(main)/boards/BoardProvider.tsx @@ -1,6 +1,7 @@ 'use client'; import { Loading, useToast } from '@umami/react-zen'; import { createContext, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'; +import { v4 as uuid } from 'uuid'; import { useApi, useMessages, useModified, useNavigation } from '@/components/hooks'; import { useBoardQuery } from '@/components/hooks/queries/useBoardQuery'; import type { Board, BoardParameters } from '@/lib/types'; @@ -17,11 +18,13 @@ export interface BoardContextValue { export const BoardContext = createContext(null); -const defaultBoard: Partial = { +const createDefaultBoard = (): Partial => ({ name: '', description: '', - parameters: { rows: [] }, -}; + parameters: { + rows: [{ id: uuid(), columns: [{ id: uuid(), component: null }] }], + }, +}); export function BoardProvider({ boardId, children }: { boardId?: string; children: ReactNode }) { const { data, isFetching, isLoading } = useBoardQuery(boardId); @@ -31,7 +34,7 @@ export function BoardProvider({ boardId, children }: { boardId?: string; childre const { formatMessage, labels, messages } = useMessages(); const { router, renderUrl } = useNavigation(); - const [board, setBoard] = useState>(data ?? defaultBoard); + const [board, setBoard] = useState>(data ?? createDefaultBoard()); const layoutGetterRef = useRef(null); const registerLayoutGetter = useCallback((getter: LayoutGetter) => { diff --git a/src/app/(main)/boards/[boardId]/BoardBody.tsx b/src/app/(main)/boards/[boardId]/BoardBody.tsx index c85fbbac..03034fbd 100644 --- a/src/app/(main)/boards/[boardId]/BoardBody.tsx +++ b/src/app/(main)/boards/[boardId]/BoardBody.tsx @@ -221,7 +221,11 @@ function BoardRow({ {columns?.map((column, index) => ( - + 1} + /> {index < columns?.length - 1 && } @@ -276,10 +280,12 @@ function BoardColumn({ id, component, onRemove, + canRemove = true, }: { id: string; component?: ReactElement; onRemove?: (id: string) => void; + canRemove?: boolean; }) { const handleAddComponent = () => {}; @@ -294,16 +300,18 @@ function BoardColumn({ backgroundColor="3" position="relative" > - - - - Remove column - - + {canRemove && ( + + + + Remove column + + + )}