From a3c3360380175698ba98bcf6d8cba55ff1ab5984 Mon Sep 17 00:00:00 2001 From: Nuno Caseiro Date: Wed, 11 May 2022 19:27:03 +0100 Subject: [PATCH] refactor: boards page --- .github/workflows/deploy_backend.yml | 2 +- ...ardOrComments.tsx => AddCardOrComment.tsx} | 4 +- frontend/components/Board/Card/AddCard.tsx | 207 + frontend/components/Board/Card/CardBoard.tsx | 277 +- frontend/components/Board/Card/CardFooter.tsx | 273 +- .../Board/Card/CardItem/CardItem.tsx | 129 + .../Board/Card/CardItem/CardItemList.tsx | 70 + frontend/components/Board/Card/DeleteCard.tsx | 45 + .../components/Board/Card/PopoverSettings.tsx | 109 + frontend/components/Board/Card/SideBar.tsx | 101 - .../components/Board/Column/CardsList.tsx | 20 +- frontend/components/Board/Column/Column.tsx | 4 +- frontend/components/Board/Comment/Comment.tsx | 143 +- .../components/Board/Comment/Comments.tsx | 87 + .../Board/Comment/PopoverSettings.tsx | 63 + frontend/components/Board/Item/DeleteItem.tsx | 47 - frontend/components/Board/Item/EditItem.tsx | 26 - frontend/components/Board/Item/TextItem.tsx | 17 - frontend/components/Board/Item/UpdateItem.tsx | 19 - frontend/components/Boards/MyBoards.tsx | 2 +- frontend/components/CardBoard/CardAvatars.tsx | 47 +- .../CardBoard/CardBody/SubBoards.tsx | 4 +- .../components/CreateBoard/SettingsTabs.tsx | 4 +- .../SubTeamsTab/QuickEditSubTeams.tsx | 2 +- .../CreateBoard/SubTeamsTab/SubCardBoard.tsx | 9 +- .../Dashboard/RecentRetros/ListOfCards.tsx | 4 +- .../components/Layout/DashboardLayout.tsx | 9 +- frontend/components/Primitives/Avatar.tsx | 10 +- frontend/components/Primitives/Popover.tsx | 88 + frontend/components/Primitives/Switch.tsx | 2 + frontend/components/icons/ArrowLongRight.tsx | 20 + frontend/components/icons/Comment.tsx | 31 + .../icons/DoubleVerticalSeparator.tsx | 22 + frontend/components/icons/DownVote.tsx | 30 + frontend/components/icons/Merged.tsx | 14 + frontend/components/icons/UpVote.tsx | 36 + .../components/icons/VerticalThreeDots.tsx | 21 + frontend/hooks/useBoard.tsx | 5 +- frontend/hooks/useCards.tsx | 1 + frontend/hooks/useComments.tsx | 40 +- frontend/hooks/useVotes.tsx | 28 +- frontend/package.json | 5 +- frontend/pages/_document.tsx | 4 +- frontend/styles/globals.tsx | 9 + frontend/types/auth/auth.ts | 3 + frontend/types/authFieldSet.ts | 4 +- frontend/types/board/boardChanges.ts | 5 - frontend/types/card/card.ts | 4 +- frontend/types/card/cardItem.ts | 4 +- frontend/types/card/dragItem.tsx | 3 + frontend/types/card/exchangeCardGroup.dto.ts | 11 + frontend/types/comment/comment.ts | 4 +- frontend/utils/enums/board.user.roles.ts | 1 + frontend/utils/enums/team.user.roles.ts | 1 + frontend/utils/initialNames.ts | 7 + frontend/utils/toast.tsx | 16 - package-lock.json | 794 +- yarn.lock | 18231 ++++++++-------- 58 files changed, 11567 insertions(+), 9611 deletions(-) rename frontend/components/Board/{AddCardOrComments.tsx => AddCardOrComment.tsx} (98%) create mode 100644 frontend/components/Board/Card/AddCard.tsx create mode 100644 frontend/components/Board/Card/CardItem/CardItem.tsx create mode 100644 frontend/components/Board/Card/CardItem/CardItemList.tsx create mode 100644 frontend/components/Board/Card/DeleteCard.tsx create mode 100644 frontend/components/Board/Card/PopoverSettings.tsx delete mode 100644 frontend/components/Board/Card/SideBar.tsx create mode 100644 frontend/components/Board/Comment/Comments.tsx create mode 100644 frontend/components/Board/Comment/PopoverSettings.tsx delete mode 100644 frontend/components/Board/Item/DeleteItem.tsx delete mode 100644 frontend/components/Board/Item/EditItem.tsx delete mode 100644 frontend/components/Board/Item/TextItem.tsx delete mode 100644 frontend/components/Board/Item/UpdateItem.tsx create mode 100644 frontend/components/Primitives/Popover.tsx create mode 100644 frontend/components/icons/ArrowLongRight.tsx create mode 100644 frontend/components/icons/Comment.tsx create mode 100644 frontend/components/icons/DoubleVerticalSeparator.tsx create mode 100644 frontend/components/icons/DownVote.tsx create mode 100644 frontend/components/icons/Merged.tsx create mode 100644 frontend/components/icons/UpVote.tsx create mode 100644 frontend/components/icons/VerticalThreeDots.tsx create mode 100644 frontend/types/auth/auth.ts delete mode 100644 frontend/types/board/boardChanges.ts create mode 100644 frontend/types/card/dragItem.tsx create mode 100644 frontend/types/card/exchangeCardGroup.dto.ts create mode 100644 frontend/utils/initialNames.ts delete mode 100644 frontend/utils/toast.tsx diff --git a/.github/workflows/deploy_backend.yml b/.github/workflows/deploy_backend.yml index 63013c674..de804ed87 100644 --- a/.github/workflows/deploy_backend.yml +++ b/.github/workflows/deploy_backend.yml @@ -2,7 +2,7 @@ name: Deploy backend on: push: - branches: [main] + branches: [ main ] jobs: build: diff --git a/frontend/components/Board/AddCardOrComments.tsx b/frontend/components/Board/AddCardOrComment.tsx similarity index 98% rename from frontend/components/Board/AddCardOrComments.tsx rename to frontend/components/Board/AddCardOrComment.tsx index 675d2699a..c8517dd8c 100644 --- a/frontend/components/Board/AddCardOrComments.tsx +++ b/frontend/components/Board/AddCardOrComment.tsx @@ -35,7 +35,7 @@ interface AddCardProps { defaultOpen?: boolean; } -const AddCardOrComments = React.memo( +const AddCardOrComment = React.memo( ({ isUpdate, colId, @@ -196,4 +196,4 @@ const AddCardOrComments = React.memo( ); } ); -export default AddCardOrComments; +export default AddCardOrComment; diff --git a/frontend/components/Board/Card/AddCard.tsx b/frontend/components/Board/Card/AddCard.tsx new file mode 100644 index 000000000..2fa2c8897 --- /dev/null +++ b/frontend/components/Board/Card/AddCard.tsx @@ -0,0 +1,207 @@ +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, {}); + +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 AddCard = React.memo( + ({ + 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); + methods.reset({ text: "" }); + }; + + 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); + }; + + if (!isOpen) + return ( + setIsOpen(true)}> + + Add new card + + ); + + return ( + { + if (isCard) { + if (!isUpdate) { + handleAddCard(text); + return; + } + handleUpdateCard(text); + } + if (!isCard) { + if (!isUpdate) { + handleAddComment(text); + return; + } + handleUpdateComment(text); + } + })} + > + +