[Fix]: unmerge cards and remaining votes (#565)

frontend/src/components/Board/Card/CardFooter.tsx

@@ -136,7 +136,7 @@ const CardFooter = React.memo<FooterProps>(
 				});
 				setCountVotes(0);
 				firstUpdate.current = true;
-			}, 100);
+			}, 50);
 
 			// eslint-disable-next-line consistent-return
 			return () => clearTimeout(delayDebounceFn);

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<Props> = ({ 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<Props> = ({ 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) {

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]

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) => {

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
 				</Text>
 
-				<Button isIcon onClick={handleBack}>
+				<Button isIcon disabled={isBackButtonDisable} onClick={handleBack}>
 					<Icon name="close" />
 				</Button>
 			</PageHeader>
@@ -181,7 +183,12 @@ const NewBoard: NextPage = () => {
 							</FormProvider>
 						</InnerContent>
 						<ButtonsContainer gap="24" justify="end">
-							<Button type="button" variant="lightOutline" onClick={handleBack}>
+							<Button
+								disabled={isBackButtonDisable}
+								type="button"
+								variant="lightOutline"
+								onClick={handleBack}
+							>
 								Cancel
 							</Button>
 							<Button type="submit">Create board</Button>