From 01cba04a59cbfd459d54757020fa1a72f401d9e3 Mon Sep 17 00:00:00 2001
From: Nuno Caseiro <n.caseiro@kigroup.de>
Date: Wed, 4 May 2022 20:18:49 +0100
Subject: [PATCH] feat: boards page and add cards

---
 .../get.board.application.interface.ts        |  16 +-
 .../boards/interfaces/getBoard.interface.ts   |  10 +
 .../services/get.board.service.interface.ts   |  14 +-
 .../boards/services/create.board.service.ts   |  17 +-
 frontend/api/boardService.tsx                 |  23 +-
 .../components/Board/AddCardOrComments.tsx    | 199 +++++++++++++
 frontend/components/Board/Card/AddCard.tsx    |  98 -------
 frontend/components/Board/Column/Column.tsx   |  95 ++++--
 frontend/components/Primitives/TextArea.tsx   | 195 +++++++------
 frontend/hooks/useCards.tsx                   | 123 +++++++-
 frontend/pages/boards/[boardId].tsx           | 270 ++++++++++++------
 .../store/mergeCard/atoms/merge-card.atom.tsx |   7 +
 frontend/types/board/useBoard.ts              |   4 +-
 frontend/types/card/deleteCard.dto.ts         |   4 +
 frontend/types/column.ts                      |  19 +-
 15 files changed, 733 insertions(+), 361 deletions(-)
 create mode 100644 backend/src/modules/boards/interfaces/getBoard.interface.ts
 create mode 100644 frontend/components/Board/AddCardOrComments.tsx
 delete mode 100644 frontend/components/Board/Card/AddCard.tsx
 create mode 100644 frontend/store/mergeCard/atoms/merge-card.atom.tsx

diff --git a/backend/src/modules/boards/interfaces/applications/get.board.application.interface.ts b/backend/src/modules/boards/interfaces/applications/get.board.application.interface.ts
index 5bf555e9e..e1489373f 100644
--- a/backend/src/modules/boards/interfaces/applications/get.board.application.interface.ts
+++ b/backend/src/modules/boards/interfaces/applications/get.board.application.interface.ts
@@ -1,5 +1,4 @@
-import { LeanDocument } from 'mongoose';
-import { BoardDocument } from '../../schemas/board.schema';
+import { GetBoardInterface } from '../getBoard.interface';
 import { BoardsAndPage } from '../boards-page.interface';
 
 export interface GetBoardApplicationInterface {
@@ -18,17 +17,6 @@ export interface GetBoardApplicationInterface {
     page?: number,
     size?: number,
   ): Promise<BoardsAndPage | null>;
-  getBoard(
-    boardId: string,
-    userId: string,
-  ): Promise<
-    | { board: LeanDocument<BoardDocument> }
-    | null
-    | {
-        board: LeanDocument<BoardDocument>;
-        mainBoardData: LeanDocument<BoardDocument>;
-      }
-    | null
-  >;
+  getBoard(boardId: string, userId: string): Promise<GetBoardInterface>;
   countBoards(userId: string): Promise<number>;
 }
diff --git a/backend/src/modules/boards/interfaces/getBoard.interface.ts b/backend/src/modules/boards/interfaces/getBoard.interface.ts
new file mode 100644
index 000000000..66ce8d934
--- /dev/null
+++ b/backend/src/modules/boards/interfaces/getBoard.interface.ts
@@ -0,0 +1,10 @@
+import { LeanDocument } from 'mongoose';
+import { BoardDocument } from '../schemas/board.schema';
+
+export type GetBoardInterface =
+  | { board: LeanDocument<BoardDocument> }
+  | {
+      board: LeanDocument<BoardDocument>;
+      mainBoardData: LeanDocument<BoardDocument>;
+    }
+  | null;
diff --git a/backend/src/modules/boards/interfaces/services/get.board.service.interface.ts b/backend/src/modules/boards/interfaces/services/get.board.service.interface.ts
index 3bc944f15..d099bcd04 100644
--- a/backend/src/modules/boards/interfaces/services/get.board.service.interface.ts
+++ b/backend/src/modules/boards/interfaces/services/get.board.service.interface.ts
@@ -1,4 +1,5 @@
 import { LeanDocument } from 'mongoose';
+import { GetBoardInterface } from '../getBoard.interface';
 import { BoardDocument } from '../../schemas/board.schema';
 import { BoardsAndPage } from '../boards-page.interface';
 
@@ -21,17 +22,6 @@ export interface GetBoardServiceInterface {
   getBoardFromRepo(
     boardId: string,
   ): Promise<LeanDocument<BoardDocument> | null>;
-  getBoard(
-    boardId: string,
-    userId: string,
-  ): Promise<
-    | { board: LeanDocument<BoardDocument> }
-    | null
-    | {
-        board: LeanDocument<BoardDocument>;
-        mainBoardData: LeanDocument<BoardDocument>;
-      }
-    | null
-  >;
+  getBoard(boardId: string, userId: string): Promise<GetBoardInterface>;
   countBoards(userId: string): Promise<number>;
 }
diff --git a/backend/src/modules/boards/services/create.board.service.ts b/backend/src/modules/boards/services/create.board.service.ts
index af4903df0..f005acf01 100644
--- a/backend/src/modules/boards/services/create.board.service.ts
+++ b/backend/src/modules/boards/services/create.board.service.ts
@@ -79,15 +79,14 @@ export default class CreateBoardServiceImpl implements CreateBoardService {
     const teamUsers = await this.getTeamService.getUsersOfTeam(team);
     teamUsers.forEach((teamUser) => {
       const user = teamUser.user as UserDocument;
-      if (!usersIds.includes(user._id.toString())) {
-        newUsers.push({
-          user: user._id.toString(),
-          role: !stakeHolders.includes(user.email)
-            ? BoardRoles.MEMBER
-            : BoardRoles.STAKEHOLDER,
-          votesCount: 0,
-        });
-      }
+      if (usersIds.includes(user._id.toString())) return;
+      newUsers.push({
+        user: user._id.toString(),
+        role: !stakeHolders.includes(user.email)
+          ? BoardRoles.MEMBER
+          : BoardRoles.STAKEHOLDER,
+        votesCount: 0,
+      });
     });
   }
 
diff --git a/frontend/api/boardService.tsx b/frontend/api/boardService.tsx
index e4c9eaa46..4b362dcb3 100644
--- a/frontend/api/boardService.tsx
+++ b/frontend/api/boardService.tsx
@@ -1,6 +1,6 @@
 import { GetServerSidePropsContext } from "next";
 import fetchData from "../utils/fetchData";
-import BoardType, { CreateBoardDto } from "../types/board/board";
+import BoardType, { CreateBoardDto, GetBoardResponse } from "../types/board/board";
 import UpdateCardPositionDto from "../types/card/updateCardPosition.dto";
 import UpdateBoardDto from "../types/board/updateBoard";
 import AddCardDto from "../types/card/addCard.dto";
@@ -26,8 +26,8 @@ export const updateBoardRequest = ({ board }: UpdateBoardDto): Promise<BoardType
 export const getBoardRequest = (
   id: string,
   context?: GetServerSidePropsContext
-): Promise<BoardType> => {
-  return fetchData<BoardType>(`/boards/${id}`, { context, serverSide: !!context });
+): Promise<GetBoardResponse> => {
+  return fetchData<GetBoardResponse>(`/boards/${id}`, { context, serverSide: !!context });
 };
 
 export const getStakeholders = (): Promise<string[]> => {
@@ -75,6 +75,10 @@ export const updateCardRequest = (updateCard: UpdateCardDto): Promise<BoardType>
   );
 };
 
+export const mergeBoardRequest = (subBoardId: string): Promise<BoardType> => {
+  return fetchData<BoardType>(`/boards/${subBoardId}/merge`, { method: "PUT" });
+};
+
 export const updateCardPositionRequest = (
   updateCardPosition: UpdateCardPositionDto
 ): Promise<BoardType> => {
@@ -85,10 +89,15 @@ export const updateCardPositionRequest = (
 };
 
 export const deleteCardRequest = (deleteCardDto: DeleteCardDto): Promise<BoardType> => {
-  return fetchData<BoardType>(`/boards/${deleteCardDto.boardId}/card/${deleteCardDto.cardId}`, {
-    method: "DELETE",
-    data: deleteCardDto,
-  });
+  return fetchData<BoardType>(
+    deleteCardDto.isCardGroup
+      ? `/boards/${deleteCardDto.boardId}/card/${deleteCardDto.cardId}`
+      : `/boards/${deleteCardDto.boardId}/card/${deleteCardDto.cardId}/items/${deleteCardDto.cardItemId}`,
+    {
+      method: "DELETE",
+      data: deleteCardDto,
+    }
+  );
 };
 
 // #endregion
diff --git a/frontend/components/Board/AddCardOrComments.tsx b/frontend/components/Board/AddCardOrComments.tsx
new file mode 100644
index 000000000..675d2699a
--- /dev/null
+++ b/frontend/components/Board/AddCardOrComments.tsx
@@ -0,0 +1,199 @@
+import * as z from "zod";
+import React, { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { styled } from "../../stitches.config";
+import { CardToAdd } from "../../types/card/card";
+import AddCardDto from "../../types/card/addCard.dto";
+import Button from "../Primitives/Button";
+import Flex from "../Primitives/Flex";
+import useCards from "../../hooks/useCards";
+import TextArea from "../Primitives/TextArea";
+import CrossIcon from "../icons/CrossIcon";
+import CheckIcon from "../icons/Check";
+import PlusIcon from "../icons/PlusIcon";
+import UpdateCardDto from "../../types/card/updateCard.dto";
+import useComments from "../../hooks/useComments";
+import AddCommentDto from "../../types/comment/addComment.dto";
+import UpdateCommentDto from "../../types/comment/updateComment.dto";
+
+const ActionButton = styled(Button, { width: "$48", height: "$36" });
+
+const StyledForm = styled("form", Flex, { width: "100%" });
+
+interface AddCardProps {
+  isUpdate: boolean;
+  isCard: boolean;
+  colId: string;
+  boardId: string;
+  socketId: string;
+  cardId?: string;
+  cardItemId?: string;
+  cardText?: string;
+  commentId?: string;
+  cancelUpdate?: () => void;
+  defaultOpen?: boolean;
+}
+
+const AddCardOrComments = React.memo<AddCardProps>(
+  ({
+    isUpdate,
+    colId,
+    boardId,
+    socketId,
+    cardId,
+    cardItemId,
+    cardText,
+    cancelUpdate,
+    isCard,
+    commentId,
+    defaultOpen,
+  }) => {
+    const { addCardInColumn, updateCard } = useCards();
+    const { addCommentInCard, updateComment } = useComments();
+    const [isOpen, setIsOpen] = useState(!!isUpdate || !!cancelUpdate || defaultOpen);
+
+    const methods = useForm<{ text: string }>({
+      mode: "onSubmit",
+      reValidateMode: "onChange",
+      defaultValues: {
+        text: cardText || "",
+      },
+      resolver: zodResolver(z.object({ text: z.string().min(1) })),
+    });
+
+    const handleAddCard = (text: string) => {
+      const newCard: CardToAdd = {
+        items: [
+          {
+            text: text.trim(),
+            votes: [],
+            comments: [],
+          },
+        ],
+        text: text.trim(),
+        votes: [],
+        comments: [],
+      };
+      const changes: AddCardDto = {
+        colIdToAdd: colId,
+        boardId,
+        card: newCard,
+        socketId,
+      };
+
+      addCardInColumn.mutate(changes);
+    };
+
+    const handleUpdateCard = (text: string) => {
+      if (!cardId || !cancelUpdate) return;
+      const cardUpdated: UpdateCardDto = {
+        cardId,
+        cardItemId: cardItemId ?? "",
+        text,
+        boardId,
+        socketId,
+        isCardGroup: !cardItemId,
+      };
+
+      updateCard.mutate(cardUpdated);
+      cancelUpdate();
+    };
+
+    const handleAddComment = (text: string) => {
+      if (!cardId || !cancelUpdate) return;
+      const commentDto: AddCommentDto = {
+        cardId,
+        cardItemId,
+        text,
+        boardId,
+        socketId,
+        isCardGroup: !cardItemId,
+      };
+
+      addCommentInCard.mutate(commentDto);
+      cancelUpdate();
+    };
+
+    const handleUpdateComment = (text: string) => {
+      if (!cardId || !cancelUpdate || !commentId) return;
+      const updateCommentDto: UpdateCommentDto = {
+        cardId,
+        cardItemId,
+        text,
+        boardId,
+        socketId,
+        isCardGroup: !cardItemId,
+        commentId,
+      };
+
+      updateComment.mutate(updateCommentDto);
+      cancelUpdate();
+    };
+
+    const handleClear = () => {
+      if ((isUpdate || !isCard) && cancelUpdate) {
+        cancelUpdate();
+        return;
+      }
+
+      methods.reset({ text: "" });
+      setIsOpen(false);
+    };
+
+    const handleSubmit = (text: string) => {
+      if (isCard) {
+        if (!isUpdate) {
+          handleAddCard(text);
+          return;
+        }
+        handleUpdateCard(text);
+      }
+      if (!isCard) {
+        if (!isUpdate) {
+          handleAddComment(text);
+          return;
+        }
+        handleUpdateComment(text);
+      }
+    };
+
+    if (!isOpen)
+      return (
+        <ActionButton css={{ display: "flex" }} onClick={() => setIsOpen(true)}>
+          <PlusIcon size="16" css={{ size: "$12", color: "white" }} />
+          Add new card
+        </ActionButton>
+      );
+
+    return (
+      <StyledForm
+        direction="column"
+        align="center"
+        justify="center"
+        gap="8"
+        tabIndex={0}
+        onSubmit={methods.handleSubmit(({ text }) => {
+          handleSubmit(text);
+        })}
+      >
+        <FormProvider {...methods}>
+          <TextArea id="text" floatPlaceholder={false} placeholder="Write your comment here..." />
+          <Flex justify="end" gap="4" css={{ width: "100%" }}>
+            <ActionButton
+              size="sm"
+              variant={!isUpdate && isCard ? "lightOutline" : "primaryOutline"}
+              onClick={handleClear}
+            >
+              <CrossIcon size="16" />
+            </ActionButton>
+            <ActionButton size="sm" type="submit" variant="primary">
+              <CheckIcon />
+            </ActionButton>
+          </Flex>
+        </FormProvider>
+      </StyledForm>
+    );
+  }
+);
+export default AddCardOrComments;
diff --git a/frontend/components/Board/Card/AddCard.tsx b/frontend/components/Board/Card/AddCard.tsx
deleted file mode 100644
index 2d812e399..000000000
--- a/frontend/components/Board/Card/AddCard.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Cross2Icon, CheckIcon } from "@modulz/radix-icons";
-import React, { useState } from "react";
-import { styled } from "../../../stitches.config";
-import { CardToAdd } from "../../../types/card/card";
-import ToastMessage from "../../../utils/toast";
-import AddCardDto from "../../../types/card/addCard.dto";
-import BlurEvent from "../../../types/events/blurEvent";
-import Button from "../../Primitives/Button";
-import Flex from "../../Primitives/Flex";
-import isEmpty from "../../../utils/isEmpty";
-import useCards from "../../../hooks/useCards";
-
-const ActionButton = styled(Button, { borderRadius: "$round" });
-
-const StyledCrossIcon = styled(Cross2Icon, { size: "$20" });
-const StyledCheckIcon = styled(CheckIcon, { size: "$20" });
-
-interface AddCardProps {
-  colId: string;
-  boardId: string;
-  socketId: string;
-}
-
-const AddCard = React.memo<AddCardProps>(({ colId, boardId, socketId }) => {
-  const { addCardInColumn } = useCards();
-
-  const [text, setText] = useState<string>("");
-  const [isClicked, setIsClicked] = useState(false);
-
-  const handleDisableEdit = () => {
-    setText("");
-    setIsClicked(false);
-  };
-
-  const handleBlur = (e: BlurEvent<HTMLDivElement>) => {
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      setIsClicked(false);
-    }
-  };
-
-  const handleFocus = () => setIsClicked(true);
-
-  const handleAddCard = () => {
-    if (isEmpty(text)) {
-      ToastMessage("Card text cannot be empty!", "error");
-      return;
-    }
-    const newCard: CardToAdd = {
-      items: [
-        {
-          text: text.trim(),
-          votes: [],
-          comments: [],
-        },
-      ],
-      text: text.trim(),
-      votes: [],
-      comments: [],
-    };
-    const changes: AddCardDto = {
-      colIdToAdd: colId,
-      boardId,
-      card: newCard,
-      socketId,
-    };
-
-    addCardInColumn.mutate(changes);
-    handleDisableEdit();
-  };
-
-  return (
-    <Flex
-      direction="column"
-      align="center"
-      justify="center"
-      gap="4"
-      css={{
-        width: "100%",
-      }}
-      tabIndex={0}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-    >
-      {/* <TextArea  /> */}
-      {isClicked && (
-        <Flex justify="end" gap="4" css={{ width: "100%" }}>
-          <ActionButton color="red" onClick={handleDisableEdit}>
-            <StyledCrossIcon />
-          </ActionButton>
-          <ActionButton color="green" onClick={handleAddCard}>
-            <StyledCheckIcon />
-          </ActionButton>
-        </Flex>
-      )}
-    </Flex>
-  );
-});
-export default AddCard;
diff --git a/frontend/components/Board/Column/Column.tsx b/frontend/components/Board/Column/Column.tsx
index acf843e66..d30789e05 100644
--- a/frontend/components/Board/Column/Column.tsx
+++ b/frontend/components/Board/Column/Column.tsx
@@ -4,16 +4,16 @@ import { styled } from "../../../stitches.config";
 import { ColumnBoardType } from "../../../types/column";
 import Flex from "../../Primitives/Flex";
 import Text from "../../Primitives/Text";
-import AddCard from "../Card/AddCard";
+import AddCardOrComments from "../AddCardOrComments";
 import CardsList from "./CardsList";
+import Box from "../../Primitives/Box";
+import Separator from "../../Sidebar/Separator";
 
-const Container = styled(Flex, {
-  borderRadius: "$8",
-  height: "fit-content",
+const Container = styled(Flex, Box, {
+  borderRadius: "$12",
   flexShrink: 0,
   flex: "1",
-  pb: "$40",
-  px: "$24",
+  pb: "$24",
   width: "100%",
 });
 
@@ -30,25 +30,77 @@ const Title = styled(Text, {
 });
 
 const Column = React.memo<ColumnBoardType>(
-  ({ columnId, cards, userId, boardId, title, color, socketId }) => {
+  ({
+    columnId,
+    cards,
+    userId,
+    boardId,
+    title,
+    color,
+    socketId,
+    anonymous,
+    isMainboard,
+    boardUser,
+    maxVotes,
+    countAllCards,
+    isSubmited,
+    filter,
+  }) => {
     return (
       <OuterContainer>
         <Droppable droppableId={columnId} type="CARD" isCombineEnabled>
           {(provided) => (
-            <Container direction="column" css={{ backgroundColor: color }}>
-              <Title>{title}</Title>
-              <AddCard colId={columnId} boardId={boardId} socketId={socketId} />
-              <div ref={provided.innerRef} {...provided.droppableProps}>
-                <CardsList
-                  cards={cards}
-                  color={color}
-                  colId={columnId}
-                  userId={userId}
-                  boardId={boardId}
-                  socketId={socketId}
-                />
-                {provided.placeholder}
-              </div>
+            <Container direction="column" elevation="2">
+              <Flex css={{ pl: "$16", pt: "$20", pb: "$16" }}>
+                <Title heading="4">{title}</Title>
+                <Text
+                  size="xs"
+                  color="primary400"
+                  css={{
+                    borderRadius: "$4",
+                    border: "1px solid $colors$primary100",
+                    px: "$8",
+                    py: "$2",
+                  }}
+                >
+                  {cards.length} cards
+                </Text>
+              </Flex>
+              <Separator css={{ backgroundColor: "$primary100", mb: "$20" }} />
+              <Flex direction="column" css={{ px: "$20" }}>
+                {!isSubmited && (
+                  <AddCardOrComments
+                    isCard
+                    colId={columnId}
+                    boardId={boardId}
+                    socketId={socketId}
+                    isUpdate={false}
+                    defaultOpen={countAllCards === 0}
+                  />
+                )}
+                <Flex
+                  direction="column"
+                  css={{ mt: "$20" }}
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                >
+                  <CardsList
+                    cards={cards}
+                    color={color}
+                    colId={columnId}
+                    userId={userId}
+                    boardId={boardId}
+                    socketId={socketId}
+                    anonymous={anonymous}
+                    isMainboard={isMainboard}
+                    boardUser={boardUser}
+                    maxVotes={maxVotes}
+                    isSubmited={isSubmited}
+                    filter={filter}
+                  />
+                  {provided.placeholder}
+                </Flex>
+              </Flex>
             </Container>
           )}
         </Droppable>
@@ -56,4 +108,5 @@ const Column = React.memo<ColumnBoardType>(
     );
   }
 );
+
 export default Column;
diff --git a/frontend/components/Primitives/TextArea.tsx b/frontend/components/Primitives/TextArea.tsx
index 944444337..0ea1b7bb1 100644
--- a/frontend/components/Primitives/TextArea.tsx
+++ b/frontend/components/Primitives/TextArea.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { useFormContext } from "react-hook-form";
 import { styled } from "../../stitches.config";
 import isEmpty from "../../utils/isEmpty";
@@ -28,14 +28,24 @@ const StyledTextArea = styled("textarea", {
   lineHeight: "$20",
   resize: "none",
   height: "auto",
-  px: "$16",
-  py: "$16",
   boxShadow: "0",
   border: "1px solid $primary200",
   borderRadius: "$4",
   outline: "none",
   fontWeight: "normal",
   width: "100%",
+  pt: "$28",
+  pb: "$8",
+  pl: "$16",
+  pr: "$16",
+  "&:focus ~ label": {
+    transform: `scale(0.875) translateX(0.115rem) translateY(-0.5rem)`,
+  },
+  "&:not(:placeholder-shown) ~ label": {
+    transform: `scale(0.875) translateX(0.115rem) translateY(-0.5rem)`,
+  },
+  overflowWrap: "break-word",
+  overflow: "hidden",
   "&:disabled": {
     backgroundColor: "$primary50",
   },
@@ -44,40 +54,54 @@ const StyledTextArea = styled("textarea", {
     color: "$primary300",
   },
   fontFamily: "DM Sans",
-  overflowWrap: "break-word",
-  overflow: "hidden",
-  pt: "$28",
-  pb: "$8",
-  pl: "$16",
-  pr: "$16",
   variants: {
     variant: {
       default: {
         "&:focus": {
           borderColor: "$primary400",
-          boxShadow: "0px 0px 0px 2px var(--colors-primaryLightest)",
+          boxShadow: "0px 0px 0px 2px $colors$primaryLightest)",
         },
       },
       valid: {
         borderColor: "$success700",
-        boxShadow: "0px 0px 0px 2px var(--colors-successLightest)",
+        boxShadow: "0px 0px 0px 2px $colors$successLightest)",
       },
       error: {
         borderColor: "$danger700",
-        boxShadow: "0px 0px 0px 2px var(--colors-dangerLightest)",
+        boxShadow: "0px 0px 0px 2px $colors$dangerLightest)",
       },
     },
   },
 });
 
+const StyledText = styled(Text, {
+  fontSize: "$16",
+  top: "0",
+  p: "$16",
+  pl: "$17",
+  lineHeight: "24px",
+  color: "$primary300",
+  position: "absolute",
+  pointerEvents: "none",
+  transformOrigin: "0 0",
+  transition: "all .2s ease-in-out",
+});
+
 interface ResizableTextAreaProps {
   id: string;
   placeholder: string;
   helperText?: string;
   disabled?: boolean;
+  floatPlaceholder?: boolean;
 }
 
-const TextArea: React.FC<ResizableTextAreaProps> = ({ id, placeholder, helperText, disabled }) => {
+const TextArea: React.FC<ResizableTextAreaProps> = ({
+  id,
+  placeholder,
+  helperText,
+  disabled,
+  floatPlaceholder,
+}) => {
   TextArea.defaultProps = {
     helperText: undefined,
     disabled: false,
@@ -86,101 +110,90 @@ const TextArea: React.FC<ResizableTextAreaProps> = ({ id, placeholder, helperTex
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const flexRef = useRef<HTMLDivElement | null>(null);
 
-  const values = useFormContext();
-  const { ref, ...rest } = values.register(id);
   const {
-    formState: { errors },
-  } = values;
-  const value = values?.getValues()[id];
-
-  useEffect(() => {
-    if (textareaRef && textareaRef.current) {
-      textareaRef.current.value = value;
-      textareaRef.current.style.height = "0px";
-      const { scrollHeight } = textareaRef.current;
-      textareaRef.current.style.height = `${scrollHeight === 42 ? 0 : scrollHeight}px`;
-    }
-  }, [value]);
+    register,
+    getValues,
+    formState: { errors, touchedFields },
+  } = useFormContext();
+  const { ref, ...rest } = register(id);
 
+  const message = errors[id]?.message;
+  const value = getValues()[id];
   const isValueEmpty = isEmpty(value);
 
-  const state = useMemo(() => {
-    if (errors[id]) {
-      return "error";
-    }
-    if (isValueEmpty) {
-      return "default";
-    }
+  const autoState = useMemo(() => {
+    if (message) return "error";
+    if (isValueEmpty || (value && !touchedFields.text)) return "default";
     return "valid";
-  }, [errors, id, isValueEmpty]);
+  }, [message, isValueEmpty, value, touchedFields.text]);
+
+  const currentState = useMemo(() => {
+    if (disabled && !touchedFields[id]) return "default";
+    return autoState;
+  }, [autoState, disabled, id, touchedFields]);
 
   return (
     <Flex
       ref={flexRef}
       direction="column"
-      css={{ position: "relative", width: "100%", height: "auto", mb: "$20" }}
+      css={{ position: "relative", width: "100%", height: "auto" }}
     >
       <Flex>
-        <StyledTextArea
-          {...rest}
-          id={id}
-          placeholder=" "
-          disabled={disabled}
-          variant={state}
-          ref={(e) => {
-            if (ref) ref(e);
-            textareaRef.current = e;
-          }}
-          css={{
-            "&:focus ~ label": {
-              transform: `scale(0.875) translateX(0.115rem) translateY(-0.5rem)`,
-            },
-            "&:not(:placeholder-shown) ~ label": {
-              transform: `scale(0.875) translateX(0.115rem) translateY(-0.5rem)`,
-            },
-          }}
-        />
-        <Text
-          as="label"
-          htmlFor={id}
-          css={{
-            fontSize: "$16",
-            top: "0",
-            p: "$16",
-            pl: "$17",
-            lineHeight: "24px",
-            color: "$primary300",
-            position: "absolute",
-            pointerEvents: "none",
-            transformOrigin: "0 0",
-            transition: "all .2s ease-in-out",
-          }}
-        >
-          {placeholder}
-        </Text>
+        {floatPlaceholder && (
+          <Flex>
+            <StyledTextArea
+              {...rest}
+              id={id}
+              placeholder=" "
+              disabled={disabled}
+              variant={currentState}
+              ref={(e) => {
+                if (ref) ref(e);
+                textareaRef.current = e;
+              }}
+            />
+            <StyledText as="label" htmlFor={id}>
+              {placeholder}
+            </StyledText>
+          </Flex>
+        )}
       </Flex>
-      <Flex
-        gap="4"
-        align="center"
-        css={{
-          mt: "$8",
-          "& svg": {
-            height: "$16 !important",
-            width: "$16 !important",
-            color: "$dangerBase",
-          },
+      <StyledTextArea
+        {...rest}
+        id={id}
+        placeholder={placeholder}
+        disabled={disabled}
+        variant={currentState}
+        ref={(e) => {
+          if (ref) ref(e);
+          textareaRef.current = e;
         }}
-      >
-        {state === "error" && <InfoIcon size="24" />}
-        <Text
+        css={{ minHeight: "$80", backgroundColor: "$primary50", py: "$12", px: "$16" }}
+      />
+      {floatPlaceholder && (
+        <Flex
+          gap="4"
+          align="center"
           css={{
-            color: state === "error" ? "$dangerBase" : "$primary300",
+            mt: "$8",
+            "& svg": {
+              height: "$16 !important",
+              width: "$16 !important",
+              color: "$dangerBase",
+            },
           }}
-          hint
         >
-          {!isEmpty(helperText) ? helperText : errors[`${id}`]?.message}
-        </Text>
-      </Flex>
+          {currentState === "error" && <InfoIcon size="24" />}
+          <Text
+            css={{
+              color: currentState === "error" ? "$dangerBase" : "$primary300",
+            }}
+            hint
+          >
+            {!isEmpty(helperText) ? helperText : errors[`${id}`]?.message}
+          </Text>
+        </Flex>
+      )}
     </Flex>
   );
 };
diff --git a/frontend/hooks/useCards.tsx b/frontend/hooks/useCards.tsx
index a087708df..570c71090 100644
--- a/frontend/hooks/useCards.tsx
+++ b/frontend/hooks/useCards.tsx
@@ -1,4 +1,5 @@
 import { useMutation } from "react-query";
+import { useSetRecoilState } from "recoil";
 import {
   addCardRequest,
   updateCardPositionRequest,
@@ -6,39 +7,136 @@ import {
   deleteCardRequest,
   mergeCardsRequest,
   removeFromMergeRequest,
+  mergeBoardRequest,
 } from "../api/boardService";
+import { handleUpdateCardPosition } from "../helper/board/transformBoard";
+import { mergeCardState } from "../store/mergeCard/atoms/merge-card.atom";
+import BoardType from "../types/board/board";
+import { ToastStateEnum } from "../utils/enums/toast-types";
+import useBoardUtils from "./useBoardUtils";
 
 const useCards = () => {
+  const { queryClient, setToastState } = useBoardUtils();
+
+  const setMergeCard = useSetRecoilState(mergeCardState);
+
   const addCardInColumn = useMutation(addCardRequest, {
-    onSuccess: () => {},
-    onError: () => {},
+    onSuccess: () => {
+      queryClient.invalidateQueries("board");
+    },
+    onError: () => {
+      setToastState({
+        open: true,
+        content: "Error adding the card",
+        type: ToastStateEnum.ERROR,
+      });
+    },
   });
 
   const updateCardPosition = useMutation(updateCardPositionRequest, {
-    onSuccess: () => {},
-    onError: () => {},
+    onMutate: async (data) => {
+      const query = ["board", { id: data.boardId }];
+      await queryClient.cancelQueries(query);
+
+      const prevData = queryClient.getQueryData<{ board: BoardType }>(query);
+      const board = prevData?.board;
+      if (board) {
+        const newBoard = handleUpdateCardPosition(board, data);
+
+        queryClient.setQueryData<BoardType | undefined>(query, (old: BoardType | undefined) => {
+          if (old)
+            return {
+              ...old,
+              columns: newBoard.columns,
+            };
+          return old;
+        });
+      }
+
+      return { previousBoard: board, data };
+    },
+    onSettled: (data) => {
+      queryClient.invalidateQueries(["board", { id: data?._id }]);
+    },
+    onError: (data, variables, context) => {
+      queryClient.setQueryData(
+        ["board", { id: variables.boardId }],
+        (context as { previousBoard: BoardType }).previousBoard
+      );
+      setToastState({
+        open: true,
+        content: "Error updating the card position",
+        type: ToastStateEnum.ERROR,
+      });
+    },
   });
 
   const updateCard = useMutation(updateCardRequest, {
-    onSuccess: () => {},
-    onError: () => {},
+    onSuccess: (data) => {
+      queryClient.invalidateQueries(["board", { id: data?._id }]);
+    },
+    onError: () => {
+      setToastState({
+        open: true,
+        content: "Error updating the card",
+        type: ToastStateEnum.ERROR,
+      });
+    },
   });
 
   const deleteCard = useMutation(deleteCardRequest, {
-    onSuccess: () => {},
-    onError: () => {},
+    onSuccess: (data) => {
+      queryClient.invalidateQueries(["board", { id: data?._id }]);
+    },
+    onError: () => {
+      setToastState({
+        open: true,
+        content: "Error deleting the card",
+        type: ToastStateEnum.ERROR,
+      });
+    },
+  });
+
+  const mergeBoard = useMutation(mergeBoardRequest, {
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries(["board", { id: variables }]);
+    },
+    onError: () => {
+      setToastState({
+        open: true,
+        content: "Error mergint the board",
+        type: ToastStateEnum.ERROR,
+      });
+    },
   });
 
   // #region MERGE_CARDS
 
   const mergeCards = useMutation(mergeCardsRequest, {
-    onSuccess: () => {},
-    onError: () => {},
+    onSuccess: (data) => {
+      queryClient.invalidateQueries(["board", { id: data?._id }]);
+    },
+    onError: () => {
+      setMergeCard(undefined);
+      setToastState({
+        open: true,
+        content: "Error merging the cards",
+        type: ToastStateEnum.ERROR,
+      });
+    },
   });
 
   const removeFromMergeCard = useMutation(removeFromMergeRequest, {
-    onSuccess: () => {},
-    onError: () => {},
+    onSuccess: (data) => {
+      queryClient.invalidateQueries(["board", { id: data?._id }]);
+    },
+    onError: () => {
+      setToastState({
+        open: true,
+        content: "Error unmerge the card",
+        type: ToastStateEnum.ERROR,
+      });
+    },
   });
 
   // #endregion
@@ -50,6 +148,7 @@ const useCards = () => {
     deleteCard,
     mergeCards,
     removeFromMergeCard,
+    mergeBoard,
   };
 };
 
diff --git a/frontend/pages/boards/[boardId].tsx b/frontend/pages/boards/[boardId].tsx
index 8f2e9be52..3113b5075 100644
--- a/frontend/pages/boards/[boardId].tsx
+++ b/frontend/pages/boards/[boardId].tsx
@@ -1,21 +1,26 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { dehydrate, QueryClient, useQueryClient } from "react-query";
+import { useSession } from "next-auth/react";
 import { GetServerSideProps } from "next";
-import { QueryClient, dehydrate } from "react-query";
-import { useRouter } from "next/router";
 import { io, Socket } from "socket.io-client";
-import { useSession } from "next-auth/react";
-import { DragDropContext, DropResult, ResponderProvided } from "@react-forked/dnd";
+import { DragDropContext, DropResult } from "@react-forked/dnd";
+import Link from "next/link";
+import Select from "react-select";
 import Flex from "../../components/Primitives/Flex";
-import Text from "../../components/Primitives/Text";
 import { styled } from "../../stitches.config";
-import { ERROR_LOADING_DATA, NEXT_PUBLIC_BACKEND_URL } from "../../utils/constants";
-import ColumnType from "../../types/column";
+import { NEXT_PUBLIC_BACKEND_URL } from "../../utils/constants";
 import Column from "../../components/Board/Column/Column";
 import useBoard from "../../hooks/useBoard";
 import UpdateCardPositionDto from "../../types/card/updateCardPosition.dto";
 import { getBoardRequest } from "../../api/boardService";
-import requireAuthentication from "../../components/HOC/requireAuthentication";
 import useCards from "../../hooks/useCards";
+import MergeCardsDto from "../../types/board/mergeCard.dto";
+import SpinnerPage from "../../components/Loading/SpinnerPage";
+import { countBoardCards } from "../../helper/board/countCards";
+import Button from "../../components/Primitives/Button";
+import AlertCustomDialog from "../../components/Primitives/AlertCustomDialog";
+import { AlertDialogTrigger } from "../../components/Primitives/AlertDialog";
+import AlertBox from "../../components/Primitives/AlertBox";
 
 const Container = styled(Flex, {
   alignItems: "flex-start",
@@ -24,76 +29,61 @@ const Container = styled(Flex, {
   height: "100%",
 });
 
-const ContainerSideBar = styled("div", {
-  position: "absolute",
-  right: 0,
-  zIndex: 100,
-});
-
-interface ColumnListProps {
-  columns: ColumnType[];
-  boardId: string;
-  userId: string;
-  socketId: string;
+interface OptionType {
+  value: string;
+  label: string;
 }
 
-const ColumnList = React.memo<ColumnListProps>(({ columns, boardId, userId, socketId }) => {
-  return (
-    <>
-      {columns.map((column) => {
-        return (
-          <Column
-            key={column._id}
-            cards={column.cards}
-            columnId={column._id}
-            userId={userId}
-            boardId={boardId}
-            title={column.title}
-            color={column.color}
-            socketId={socketId}
-          />
-        );
-      })}
-    </>
-  );
-});
-
-export const getServerSideProps: GetServerSideProps = requireAuthentication(async (context) => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   const { boardId } = context.query;
   const queryClient = new QueryClient();
   await queryClient.prefetchQuery(["board", { id: boardId }], () =>
     getBoardRequest(boardId as string, context)
   );
-
   return {
     props: {
+      key: context.query.boardId,
       dehydratedState: dehydrate(queryClient),
+      mainBoardId: context.query.mainBoardId ?? null,
+      boardId: context.query.boardId,
     },
   };
-});
+};
+
+interface BoardProps {
+  boardId: string;
+  mainBoardId?: string;
+}
+
+const Board: React.FC<BoardProps> = ({ boardId, mainBoardId }) => {
+  Board.defaultProps = {
+    mainBoardId: undefined,
+  };
+  const { data: session } = useSession({ required: true });
 
-const Board: React.FC = () => {
-  const { query } = useRouter();
-  const boardId = query.boardId as string;
-  const { data: session } = useSession({ required: false });
+  const queryClient = useQueryClient();
   const userId = session?.user?.id;
+
   const socketClient = useRef<Socket>();
-  const socketId = socketClient.current?.id ?? undefined;
+  const socketId = socketClient?.current?.id;
 
-  const { updateCardPosition } = useCards();
+  const { updateCardPosition, mergeCards, mergeBoard } = useCards();
+  const [filter, setFilter] = useState("order");
 
   const { fetchBoard } = useBoard({
     autoFetchBoard: true,
   });
-  const { status } = fetchBoard;
-  const board = {};
-  // const dispatch = useAppDispatch();
+  const { data } = fetchBoard;
+  const board = data?.board;
 
-  // useEffect(() => {
-  //   if (data && !board) {
-  //     dispatch(setBoard({ board: data, userId }));
-  //   }
-  // }, [board, data, dispatch, userId]);
+  const isResponsible = board?.users.find(
+    (boardUser) => boardUser.role === "responsible" && boardUser.user._id === userId
+  );
+
+  const countAllCards = useMemo(() => {
+    if (board?.columns) return countBoardCards(board?.columns);
+    return 0;
+  }, [board?.columns]);
 
   useEffect(() => {
     const newSocket: Socket = io(NEXT_PUBLIC_BACKEND_URL ?? "http://127.0.0.1:3200", {
@@ -104,31 +94,21 @@ const Board: React.FC = () => {
       newSocket.emit("join", { boardId });
     });
 
-    // newSocket.on("updateAllBoard", (payload: BoardType) => {
-    //   dispatch(setChangesBoard({ board: payload }));
-    // });
+    newSocket.on("updateAllBoard", () => {
+      queryClient.invalidateQueries(["board", { id: boardId }]);
+    });
     socketClient.current = newSocket;
-  }, [boardId]);
+  }, [boardId, queryClient]);
 
   useEffect(
     () => () => {
       if (socketClient.current) socketClient.current?.close();
       socketClient.current = undefined;
-      // dispatch(clearBoard());
     },
     []
   );
 
-  const onDragEnd = (result: DropResult, provided: ResponderProvided) => {
-    const message = result.destination
-      ? `You have moved the card from position ${result.source.index + 1} to ${
-          result.destination.index + 1
-        }`
-      : `The card has been returned to its starting position of ${result.source.index + 1}`;
-
-    provided.announce(message);
-
-    // if (!board?._id || !socketId || !result) return;
+  const onDragEnd = (result: DropResult) => {
     const { destination, source, combine, draggableId } = result;
 
     if (!source) return;
@@ -139,7 +119,24 @@ const Board: React.FC = () => {
 
     const { droppableId: sourceDroppableId, index: sourceIndex } = source;
 
-    if (!combine && destination) {
+    if (combine && userId && board?._id && socketId) {
+      const { droppableId: combineDroppableId, draggableId: combineDraggableId } = combine;
+
+      const changes: MergeCardsDto = {
+        columnIdOfCard: sourceDroppableId,
+        colIdOfCardGroup: combineDroppableId,
+        cardId: draggableId,
+        boardId: board._id,
+        cardGroupId: combineDraggableId,
+        socketId,
+        userId,
+        cardPosition: sourceIndex,
+      };
+
+      mergeCards.mutate(changes);
+    }
+
+    if (!combine && destination && board?._id && socketId) {
       const { droppableId: destinationDroppableId, index: destinationIndex } = destination;
 
       if (
@@ -149,42 +146,127 @@ const Board: React.FC = () => {
       ) {
         return;
       }
-
       const changes: UpdateCardPositionDto = {
         colIdOfCard: source.droppableId,
         targetColumnId: destinationDroppableId,
         newPosition: destinationIndex,
         cardPosition: sourceIndex,
         cardId: draggableId,
-        boardId: "1", // board._id
-        socketId: "aaa",
+        boardId: board?._id,
+        socketId,
       };
-      // dispatch(setNewCardPosition(changes));
       updateCardPosition.mutate(changes);
     }
   };
+  const filteredColumns = () => {
+    if (filter === "order") return board?.columns;
+    return board?.columns.map((column) => {
+      return {
+        ...column,
+        cards: column.cards.sort((a, b) => {
+          const votesA = a.items.length === 1 ? a.items[0].votes.length : a.votes.length;
+          const votesB = b.items.length === 1 ? b.items[0].votes.length : b.votes.length;
+          return votesB - votesA;
+        }),
+      };
+    });
+  };
 
-  if (status === "loading") return <Text>Loading ...</Text>;
-  if (board && userId) {
-    // if (!board.isPublic) {
-    //   return <Text>Locked</Text>;
-    // }
+  if (board && userId && socketId && filteredColumns) {
     return (
       <Container>
-        <DragDropContext onDragEnd={onDragEnd}>
-          <ColumnList columns={[]} boardId={boardId} userId={userId} socketId={socketId ?? ""} />
-        </DragDropContext>
-        <ContainerSideBar
-          id="sidebar"
-          css={{
-            top: document.getElementById("nav-bar")?.clientHeight ?? "5%",
-            height: document.body.clientHeight,
-          }}
-        />
+        <Flex css={{ width: "100%", px: "$36" }} direction="column">
+          <Flex>
+            <Select
+              value={{
+                value: filter,
+                label: `${filter.charAt(0).toUpperCase()}${filter.substring(1)}`,
+              }}
+              options={[
+                { value: "order", label: "Order" },
+                { value: "votes", label: "Votes" },
+              ]}
+              onChange={(option) => setFilter((option as OptionType)?.value)}
+            />
+          </Flex>
+          {board.submitedByUser && board.submitedAt && (
+            <AlertBox
+              type="info"
+              title={`Sub-team board successfully merged into main board ${new Date(
+                board.submitedAt
+              ).toLocaleDateString()}, ${new Date(board.submitedAt).toLocaleTimeString()}`}
+              text="The sub-team board can not be edited anymore. If you want to edit cards, go to the main board and edit the according card there."
+            >
+              <Link
+                key={mainBoardId}
+                href={{ pathname: `[boardId]`, query: { boardId: mainBoardId } }}
+              >
+                <Button size="sm">Go to main board</Button>
+              </Link>
+            </AlertBox>
+          )}
+          {board.isSubBoard && !board.submitedByUser && isResponsible && (
+            <AlertCustomDialog
+              css={{ left: "37% !important" }}
+              defaultOpen={false}
+              title="Merge board into main board"
+              text="If you merge your sub-teams’ board into the main board it can not be edited anymore afterwards. Are you sure you want to merge it?"
+              cancelText="Cancel"
+              confirmText="Merge into main board"
+              handleConfirm={() => {
+                mergeBoard.mutate(boardId);
+              }}
+              variant="primary"
+            >
+              <AlertDialogTrigger asChild>
+                <Button
+                  variant="primaryOutline"
+                  size="sm"
+                  css={{
+                    fontWeight: "$medium",
+                    my: "$20",
+                    width: "206px",
+                  }}
+                >
+                  Merge into main board
+                </Button>
+              </AlertDialogTrigger>
+            </AlertCustomDialog>
+          )}
+
+          <Flex css={{ width: "100%", mt: "$32" }} gap="24">
+            <DragDropContext onDragEnd={onDragEnd}>
+              {filteredColumns()?.map((column, index) => {
+                return (
+                  <Column
+                    key={column._id}
+                    cards={column.cards}
+                    columnId={column._id}
+                    index={index}
+                    userId={userId}
+                    boardId={boardId}
+                    title={column.title}
+                    color={column.color}
+                    socketId={socketId}
+                    anonymous={board.postAnonymously}
+                    isMainboard={!board.isSubBoard}
+                    boardUser={board.users.find(
+                      (userFound) => (userFound.user._id as unknown as string) === userId
+                    )}
+                    maxVotes={Number(board.maxVotes)}
+                    countAllCards={countAllCards}
+                    isSubmited={!!board.submitedByUser}
+                    filter={filter}
+                  />
+                );
+              })}
+            </DragDropContext>
+          </Flex>
+        </Flex>
       </Container>
     );
   }
-  return <Text>{ERROR_LOADING_DATA}</Text>;
+  return <SpinnerPage />;
 };
 
 export default Board;
diff --git a/frontend/store/mergeCard/atoms/merge-card.atom.tsx b/frontend/store/mergeCard/atoms/merge-card.atom.tsx
new file mode 100644
index 000000000..553994e5d
--- /dev/null
+++ b/frontend/store/mergeCard/atoms/merge-card.atom.tsx
@@ -0,0 +1,7 @@
+import { atom } from "recoil";
+import MergeCardsDto from "../../../types/board/mergeCard.dto";
+
+export const mergeCardState = atom<MergeCardsDto | undefined>({
+  key: "mergingCard",
+  default: undefined,
+});
diff --git a/frontend/types/board/useBoard.ts b/frontend/types/board/useBoard.ts
index 8a13b4586..cb2eadd25 100644
--- a/frontend/types/board/useBoard.ts
+++ b/frontend/types/board/useBoard.ts
@@ -1,10 +1,10 @@
 import { UseMutationResult, UseQueryResult } from "react-query";
-import BoardType, { CreateBoardDto } from "./board";
+import BoardType, { CreateBoardDto, GetBoardResponse } from "./board";
 import UpdateBoardDto from "./updateBoard";
 
 export default interface UseBoardType {
   createBoard: UseMutationResult<BoardType, unknown, CreateBoardDto, unknown>;
   updateBoard: UseMutationResult<BoardType, unknown, UpdateBoardDto, unknown>;
   deleteBoard: UseMutationResult<BoardType, unknown, string, unknown>;
-  fetchBoard: UseQueryResult<BoardType | null, unknown>;
+  fetchBoard: UseQueryResult<GetBoardResponse | null, unknown>;
 }
diff --git a/frontend/types/card/deleteCard.dto.ts b/frontend/types/card/deleteCard.dto.ts
index 7b8bf3774..848ba8d4f 100644
--- a/frontend/types/card/deleteCard.dto.ts
+++ b/frontend/types/card/deleteCard.dto.ts
@@ -4,4 +4,8 @@ export default interface DeleteCardDto {
   boardId: string;
 
   socketId?: string;
+
+  isCardGroup: boolean;
+
+  cardItemId?: string;
 }
diff --git a/frontend/types/column.ts b/frontend/types/column.ts
index 3a7ce70c2..7096fa5d0 100644
--- a/frontend/types/column.ts
+++ b/frontend/types/column.ts
@@ -1,3 +1,4 @@
+import { BoardUser } from "./board/board.user";
 import CardType from "./card/card";
 
 interface ColumnType {
@@ -7,16 +8,26 @@ interface ColumnType {
   cards: CardType[];
 }
 
-export type CreateColumn = Omit<ColumnType, "_id">;
+export interface CreateColumn extends Omit<ColumnType, "_id" | "cards"> {
+  cards: never[];
+}
 
 export interface ColumnBoardType {
   columnId: string;
+  index: number;
   userId: string;
   cards: CardType[];
   boardId: string;
   title: string;
   color: string;
   socketId: string;
+  anonymous: boolean;
+  isMainboard: boolean;
+  boardUser?: BoardUser;
+  maxVotes?: number;
+  countAllCards: number;
+  isSubmited: boolean;
+  filter: string;
 }
 
 export interface ColumnInnerList {
@@ -26,6 +37,12 @@ export interface ColumnInnerList {
   boardId: string;
   color: string;
   socketId: string;
+  anonymous: boolean;
+  isMainboard: boolean;
+  boardUser?: BoardUser;
+  maxVotes?: number;
+  isSubmited: boolean;
+  filter: string;
 }
 
 export type ColumnDragItem = {