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); + } + })} + > + +