refactor: major update facing new design changes

frontend/.eslintrc.json

@@ -33,7 +33,6 @@
     "import/no-cycle": "off",
     "no-plusplus": "off",
     "no-useless-escape": "off",
-    "react-hooks/exhaustive-deps": "off",
     "no-restricted-exports": "off"
   }
 }

frontend/Dockerfile

@@ -15,7 +15,7 @@ RUN npm ci
 FROM node:16-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
-COPY ./frontend .
+COPY ./frontend/ .
 
 ARG NEXT_PUBLIC_ENABLE_AZURE
 ENV NEXT_PUBLIC_ENABLE_AZURE=${NEXT_PUBLIC_ENABLE_AZURE}

frontend/api/authService.tsx

@@ -11,14 +11,14 @@ export const login = (credentials: LoginUser): Promise<User> => {
   return fetchData("/auth/login", { method: "POST", data: credentials, serverSide: true });
 };
 
-export const refreshAccessToken = (refreshToken: string): Promise<Token> => {
-  return fetchData("/auth/refresh", { refreshToken, serverSide: true });
-};
-
 export const createOrLoginUserAzure = (azureAccessToken: string): Promise<CreateOrLogin> => {
   return fetchData(`/auth/signAzure`, {
     method: "POST",
     data: { token: azureAccessToken },
     serverSide: true,
   });
 };
+
+export const refreshAccessToken = (token: string): Promise<Token> => {
+  return fetchData("/auth/refresh", { refreshToken: token, serverSide: true });
+};

frontend/api/boardService.tsx

@@ -9,7 +9,10 @@ import UpdateCardDto from "../types/card/updateCard.dto";
 import AddCommentDto from "../types/comment/addComment.dto";
 import DeleteCommentDto from "../types/comment/deleteComment.dto";
 import UpdateCommentDto from "../types/comment/updateComment.dto";
-import VoteDto from "../types/board/vote/vote.dto";
+import VoteDto from "../types/vote/vote.dto";
+import MergeCardsDto from "../types/board/mergeCard.dto";
+import RemoveFromCardGroupDto from "../types/card/removeFromCardGroup.dto";
+
 // #region BOARD
 
 export const createBoardRequest = (newBoard: BoardToAdd): Promise<BoardType> => {
@@ -27,8 +30,21 @@ export const getBoardRequest = (
   return fetchData<BoardType>(`/boards/${id}`, { context, serverSide: !!context });
 };
 
-export const getBoardsRequest = (context?: GetServerSidePropsContext): Promise<BoardType[]> => {
-  return fetchData<BoardType[]>(`/boards`, { context, serverSide: !!context });
+export const getDashboardBoardsRequest = (
+  pageParam: number,
+  context?: GetServerSidePropsContext
+): Promise<{ boards: BoardType[]; hasNextPage: boolean; page: number }> => {
+  return fetchData(`/boards/dashboard?page=${pageParam ?? 0}&size=10`, {
+    context,
+    serverSide: !!context,
+  });
+};
+
+export const getBoardsRequest = (
+  pageParam: number,
+  context?: GetServerSidePropsContext
+): Promise<{ boards: BoardType[]; hasNextPage: boolean; page: number }> => {
+  return fetchData(`/boards?page=${pageParam ?? 0}&size=10`, { context, serverSide: !!context });
 };
 
 export const deleteBoardRequest = async (id: string): Promise<BoardType> => {
@@ -73,7 +89,26 @@ export const deleteCardRequest = (deleteCardDto: DeleteCardDto): Promise<BoardTy
 
 // #endregion
 
-// #region COMMENTS
+// #region MERGE_CARDS
+export const mergeCardsRequest = (mergeCard: MergeCardsDto): Promise<BoardType> => {
+  return fetchData<BoardType>(
+    `/boards/${mergeCard.boardId}/card/${mergeCard.cardId}/merge/${mergeCard.cardGroupId}`,
+    { method: "PUT", data: mergeCard }
+  );
+};
+
+export const removeFromMergeRequest = (
+  removeFromMerge: RemoveFromCardGroupDto
+): Promise<BoardType> => {
+  return fetchData<BoardType>(
+    `/boards/${removeFromMerge.boardId}/card/${removeFromMerge.cardGroupId}/cardItem/${removeFromMerge.cardId}/removeFromCardGroup`,
+    { method: "PUT", data: removeFromMerge }
+  );
+};
+
+// #endregion
+
+// #region COMMENT
 export const addCommentRequest = (addCommentDto: AddCommentDto): Promise<BoardType> => {
   return fetchData<BoardType>(
     addCommentDto.isCardGroup

frontend/components/Board/Card/AddCard.tsx

@@ -3,13 +3,12 @@ import React, { useState } from "react";
 import { styled } from "../../../stitches.config";
 import { CardToAdd } from "../../../types/card/card";
 import ToastMessage from "../../../utils/toast";
-import useBoard from "../../../hooks/useBoard";
 import AddCardDto from "../../../types/card/addCard.dto";
 import BlurEvent from "../../../types/events/blurEvent";
 import Button from "../../Primitives/Button";
 import Flex from "../../Primitives/Flex";
-import ResizableTextArea from "../../Primitives/ResizableTextArea";
 import isEmpty from "../../../utils/isEmpty";
+import useCards from "../../../hooks/useCards";
 
 const ActionButton = styled(Button, { borderRadius: "$round" });
 
@@ -23,7 +22,7 @@ interface AddCardProps {
 }
 
 const AddCard = React.memo<AddCardProps>(({ colId, boardId, socketId }) => {
-  const { addCardInColumn } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+  const { addCardInColumn } = useCards();
 
   const [text, setText] = useState<string>("");
   const [isClicked, setIsClicked] = useState(false);
@@ -82,7 +81,7 @@ const AddCard = React.memo<AddCardProps>(({ colId, boardId, socketId }) => {
       onBlur={handleBlur}
       onFocus={handleFocus}
     >
-      <ResizableTextArea value={text} editText={setText} border={false} edit={false} />
+      {/* <TextArea  /> */}
       {isClicked && (
         <Flex justify="end" gap="4" css={{ width: "100%" }}>
           <ActionButton color="red" onClick={handleDisableEdit}>

frontend/components/Board/Card/CardBoard.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Draggable } from "react-beautiful-dnd";
-import useBoard from "../../../hooks/useBoard";
+import { Draggable } from "@react-forked/dnd";
+import useCards from "../../../hooks/useCards";
 import { styled } from "../../../stitches.config";
 import CardType from "../../../types/card/card";
 import ToastMessage from "../../../utils/toast";
@@ -43,8 +43,7 @@ const CardBoard: React.FC<CardBoardProps> = ({
   userId,
 }) => {
   const isCardGroup = card.items.length > 1;
-  const { updateCard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
-
+  const { updateCard } = useCards();
   const [editText, setEditText] = useState(false);
   const [newText, setNewText] = useState(card.text);
 

frontend/components/Board/Card/CardFooter.tsx

@@ -11,12 +11,10 @@ import { styled } from "../../../stitches.config";
 import CardType from "../../../types/card/card";
 import { getCommentsFromCardGroup } from "../../../helper/board/comments";
 import Button from "../../Primitives/Button";
-import useBoard from "../../../hooks/useBoard";
-import { useAppSelector } from "../../../store/hooks";
 import { getCardVotes } from "../../../helper/board/votes";
-import { maxBoardVotes } from "../../../store/store";
 import ToastMessage from "../../../utils/toast";
 import isEmpty from "../../../utils/isEmpty";
+import useVotes from "../../../hooks/useVotes";
 
 const StyledChatBubbleIcon = styled(ChatBubbleIcon, { size: "100%" });
 const StyledPlusIcon = styled(PlusCircledIcon, { size: "100%" });
@@ -31,9 +29,9 @@ interface FooterProps {
 }
 
 const CardFooter = React.memo<FooterProps>(({ boardId, userId, socketId, card }) => {
-  const { addVote, deleteVote } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+  const { addVote, deleteVote } = useVotes();
 
-  const actualBoardVotes = useAppSelector((state) => state.board.votes);
+  const actualBoardVotes = 0;
 
   const cardItemId = card.items.length === 1 ? card.items[0]._id : undefined;
 
@@ -44,7 +42,7 @@ const CardFooter = React.memo<FooterProps>(({ boardId, userId, socketId, card })
   const comments =
     card.items.length === 1 ? card.items[0].comments : getCommentsFromCardGroup(card);
 
-  const maxVotes = maxBoardVotes();
+  const maxVotes = 6;
 
   const handleDeleteVote = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     event.stopPropagation();
@@ -98,7 +96,7 @@ const CardFooter = React.memo<FooterProps>(({ boardId, userId, socketId, card })
       <Button
         css={{ size: "$20" }}
         onClick={handleAddVote}
-        disabled={actualBoardVotes === maxVotes}
+        // disabled={actualBoardVotes === maxVotes}
       >
         <StyledPlusIcon />
       </Button>

frontend/components/Board/Card/SideBar.tsx

@@ -1,17 +1,16 @@
 import { CheckIcon } from "@modulz/radix-icons";
-import React, { Dispatch, SetStateAction, useState, useRef } from "react";
+import React, { Dispatch, SetStateAction, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { styled } from "../../../stitches.config";
 import Comment from "../Comment/Comment";
 import ToastMessage from "../../../utils/toast";
 import Flex from "../../Primitives/Flex";
-import useBoard from "../../../hooks/useBoard";
 import AddCommentDto from "../../../types/comment/addComment.dto";
 import useOnClickOutside from "../../../hooks/useOnClickOutside";
-import ResizableTextArea from "../../Primitives/ResizableTextArea";
 import CardType from "../../../types/card/card";
 import { getCommentsFromCardGroup } from "../../../helper/board/comments";
 import Button from "../../Primitives/Button";
+import useComments from "../../../hooks/useComments";
 
 const SideBarContent = styled("div", {
   position: "sticky",
@@ -37,12 +36,13 @@ interface SideBarProps {
 
 const SideBard = React.memo<SideBarProps>(
   ({ show, setShow, card, color, userId, boardId, socketId }) => {
-    const { addCommentInCard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+    const { addCommentInCard } = useComments();
 
     const cardItemId = card.items && card.items.length === 1 ? card.items[0]._id : undefined;
     const comments = cardItemId ? card.items[0].comments : getCommentsFromCardGroup(card);
 
-    const [text, setText] = useState("");
+    // setText is missing
+    const [text] = useState("");
     const ref = useRef<HTMLDivElement>(null);
     useOnClickOutside(ref, () => setShow(false));
 
@@ -71,7 +71,7 @@ const SideBard = React.memo<SideBarProps>(
     return createPortal(
       <SideBarContent ref={ref}>
         <Flex direction="column">
-          <ResizableTextArea value={text} editText={setText} border={false} edit={false} />
+          {/* <ResizableTextArea value={text} editText={setText} border={false} edit={false} /> */}
           <Button css={{ borderTop: "1px solid black" }} color="green" onClick={handleAddComment}>
             <StyledCheckIcon />
           </Button>

frontend/components/Board/Column/Column.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Droppable } from "react-beautiful-dnd";
+import { Droppable } from "@react-forked/dnd";
 import { styled } from "../../../stitches.config";
 import { ColumnBoardType } from "../../../types/column";
 import Flex from "../../Primitives/Flex";

frontend/components/Board/Comment/Comment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import useBoard from "../../../hooks/useBoard";
+import useComments from "../../../hooks/useComments";
 import { styled } from "../../../stitches.config";
 import CardComment from "../../../types/comment/comment";
 import ToastMessage from "../../../utils/toast";
@@ -41,7 +41,7 @@ const Comment: React.FC<CommentProps> = ({
   const [editText, setEditText] = useState(false);
   const [newText, setNewText] = useState(comment.text);
 
-  const { updateComment } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+  const { updateComment } = useComments();
 
   const handleUpdateCommentText = () => {
     if (newText?.length > 0 && boardId) {