From 300d3d928bfb0ebdb95b82c6918229bfb113c746 Mon Sep 17 00:00:00 2001 From: Nuno Caseiro <90208434+nunocaseiro@users.noreply.github.com> Date: Wed, 9 Nov 2022 09:35:26 +0000 Subject: [PATCH] [Fix]: unmerge cards and remaining votes (#565) --- .../src/components/Board/Card/CardFooter.tsx | 2 +- .../components/Board/DragDropArea/index.tsx | 46 +++++++++++++++---- frontend/src/helper/board/transformBoard.tsx | 1 + frontend/src/hooks/useVotes.tsx | 3 ++ frontend/src/pages/boards/new.tsx | 17 +++++-- 5 files changed, 54 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/Board/Card/CardFooter.tsx b/frontend/src/components/Board/Card/CardFooter.tsx index 40e3f4265..10e6d776b 100644 --- a/frontend/src/components/Board/Card/CardFooter.tsx +++ b/frontend/src/components/Board/Card/CardFooter.tsx @@ -136,7 +136,7 @@ const CardFooter = React.memo( }); setCountVotes(0); firstUpdate.current = true; - }, 100); + }, 50); // eslint-disable-next-line consistent-return return () => clearTimeout(delayDebounceFn); diff --git a/frontend/src/components/Board/DragDropArea/index.tsx b/frontend/src/components/Board/DragDropArea/index.tsx index 872e507e0..9c73546ed 100644 --- a/frontend/src/components/Board/DragDropArea/index.tsx +++ b/frontend/src/components/Board/DragDropArea/index.tsx @@ -1,13 +1,16 @@ import React from 'react'; +import { useSetRecoilState } from 'recoil'; import { DragDropContext, DropResult } from '@react-forked/dnd'; import Column from 'components/Board/Column/Column'; import Flex from 'components/Primitives/Flex'; import { countBoardCards } from 'helper/board/countCards'; import useCards from 'hooks/useCards'; +import { toastState } from 'store/toast/atom/toast.atom'; import BoardType from 'types/board/board'; import MergeCardsDto from 'types/board/mergeCard.dto'; import UpdateCardPositionDto from 'types/card/updateCardPosition.dto'; +import { ToastStateEnum } from 'utils/enums/toast-types'; type Props = { userId: string; @@ -16,20 +19,20 @@ type Props = { }; const DragDropArea: React.FC = ({ userId, board, socketId }) => { const { updateCardPosition, mergeCards } = useCards(); + const setToastState = useSetRecoilState(toastState); const countAllCards = React.useMemo(() => { return board.columns ? countBoardCards(board.columns) : 0; }, [board]); - const onDragEnd = ({ destination, source, combine, draggableId }: DropResult) => { - if (!source || (!combine && !destination) || !board?._id || !socketId) { - return; - } - const { droppableId: sourceDroppableId, index: sourceIndex } = source; - - if (combine && userId && board.hideCards === false) { - const { droppableId: combineDroppableId, draggableId: combineDraggableId } = combine; - + const handleCombine = ( + combineDroppableId: string, + combineDraggableId: string, + sourceDroppableId: string, + draggableId: string, + sourceIndex: number + ) => { + if (!board.hideCards) { const changes: MergeCardsDto = { columnIdOfCard: sourceDroppableId, colIdOfCardGroup: combineDroppableId, @@ -42,6 +45,31 @@ const DragDropArea: React.FC = ({ userId, board, socketId }) => { }; mergeCards.mutate(changes); + } else if (board.hideCards) { + setToastState({ + open: true, + type: ToastStateEnum.INFO, + content: 'The merge is not possible. The cards are hidden' + }); + } + }; + + const onDragEnd = ({ destination, source, combine, draggableId }: DropResult) => { + if (!source || (!combine && !destination) || !board?._id || !socketId) { + return; + } + const { droppableId: sourceDroppableId, index: sourceIndex } = source; + + if (combine && userId) { + const { droppableId: combineDroppableId, draggableId: combineDraggableId } = combine; + + handleCombine( + combineDroppableId, + combineDraggableId, + sourceDroppableId, + draggableId, + sourceIndex + ); } if (!combine && destination) { diff --git a/frontend/src/helper/board/transformBoard.tsx b/frontend/src/helper/board/transformBoard.tsx index f922ed561..96dbad89c 100644 --- a/frontend/src/helper/board/transformBoard.tsx +++ b/frontend/src/helper/board/transformBoard.tsx @@ -103,6 +103,7 @@ export const handleUnMergeCard = (board: BoardType, changes: RemoveFromCardGroup const selectedCard = cardGroup?.items.find((item) => item._id === cardId); if (column && cardGroup && selectedCard) { + cardGroup.items = cardGroup.items.filter((item) => item._id !== selectedCard._id); column.cards = addElementAtIndex(column.cards, column.cards.length, { ...selectedCard, items: [selectedCard] diff --git a/frontend/src/hooks/useVotes.tsx b/frontend/src/hooks/useVotes.tsx index 62311eb25..77b6d138a 100644 --- a/frontend/src/hooks/useVotes.tsx +++ b/frontend/src/hooks/useVotes.tsx @@ -242,6 +242,9 @@ const useVotes = () => { const handleVote = useMutation(handleVotes, { onSuccess: (voteData, variables) => { + if (voteData.maxVotes) { + toastRemainingVotesMessage('', voteData); + } queryClient.invalidateQueries(['board', { id: voteData?._id }]); }, onError: (error, variables) => { diff --git a/frontend/src/pages/boards/new.tsx b/frontend/src/pages/boards/new.tsx index 845b6f2a8..5d23cb4a7 100644 --- a/frontend/src/pages/boards/new.tsx +++ b/frontend/src/pages/boards/new.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { FormProvider, useForm, useWatch } from 'react-hook-form'; import { dehydrate, QueryClient, useQuery } from 'react-query'; import { GetServerSideProps, GetServerSidePropsContext, NextPage } from 'next'; @@ -34,12 +34,13 @@ import { toastState } from 'store/toast/atom/toast.atom'; import { CreateBoardDto } from 'types/board/board'; import { TeamUserRoles } from 'utils/enums/team.user.roles'; import { ToastStateEnum } from 'utils/enums/toast-types'; -import { BOARDS_ROUTE } from '../../utils/routes'; const NewBoard: NextPage = () => { const router = useRouter(); const { data: session } = useSession({ required: true }); const { data: teams } = useQuery(['teams'], () => getAllTeams(), { suspense: false }); + const [isBackButtonDisable, setBackButtonState] = useState(false); + /** * Recoil Atoms and Hooks */ @@ -79,7 +80,8 @@ const NewBoard: NextPage = () => { */ const handleBack = useCallback(() => { resetBoardState(); - router.push(BOARDS_ROUTE); + setBackButtonState(true); + router.back(); }, [router, resetBoardState]); /** @@ -146,7 +148,7 @@ const NewBoard: NextPage = () => { Add new SPLIT board - @@ -181,7 +183,12 @@ const NewBoard: NextPage = () => { -