fix: vote error

xgeekshq · Dec 19, 2022 · 45e6fcb · 45e6fcb
1 parent 4c53b5d
commit 45e6fcb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 47 deletions.
diff --git a/frontend/src/components/Board/Column/Column.tsx b/frontend/src/components/Board/Column/Column.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Droppable } from '@hello-pangea/dnd';
 
 import Flex from '@/components/Primitives/Flex';
@@ -33,12 +33,6 @@ const Column = React.memo<ColumnBoardType>(
     const setFilteredColumns = useSetRecoilState(filteredColumnsState);
 
     const filteredCards = useCallback(() => {
-      if (filter) {
-        setFilteredColumns((prev) => {
-          if (prev.includes(columnId)) return prev;
-          return [...prev, columnId];
-        });
-      }
       switch (filter) {
         case 'asc':
           return [...cards].sort((a, b) => {
@@ -53,17 +47,27 @@ const Column = React.memo<ColumnBoardType>(
             return votesB - votesA;
           });
         default:
-          setFilteredColumns((prev) => {
-            const newValues = [...prev];
-            const index = newValues.indexOf(columnId);
-            if (index > -1) {
-              newValues.splice(index, 1);
-            }
-            return newValues;
-          });
           return cards;
       }
-    }, [cards, columnId, filter, setFilteredColumns]);
+    }, [cards, filter]);
+
+    useEffect(() => {
+      if (filter) {
+        setFilteredColumns((prev) => {
+          if (prev.includes(columnId)) return prev;
+          return [...prev, columnId];
+        });
+      } else {
+        setFilteredColumns((prev) => {
+          const newValues = [...prev];
+          const index = newValues.indexOf(columnId);
+          if (index > -1) {
+            newValues.splice(index, 1);
+          }
+          return newValues;
+        });
+      }
+    }, [columnId, filter, setFilteredColumns]);
 
     return (
       <OuterContainer>

diff --git a/frontend/src/hooks/useVotes.tsx b/frontend/src/hooks/useVotes.tsx
@@ -72,6 +72,19 @@ const useVotes = () => {
     return newBoardData;
   };
 
+  const updateBoardUser = (boardData: BoardType, action: Action) => {
+    boardData.users = boardData.users.map((boardUser) => {
+      if (boardUser.user._id === userId) {
+        return {
+          ...boardUser,
+          votesCount: action === Action.Add ? boardUser.votesCount + 1 : boardUser.votesCount - 1,
+        };
+      }
+
+      return boardUser;
+    });
+  };
+
   const updateCardItemVoteOptimistic = (
     prevBoardData: BoardType,
     indexes: number[],
@@ -152,7 +165,7 @@ const useVotes = () => {
     voteData: voteDto,
     action: Action,
   ) => {
-    const { cardId, cardItemId, isCardGroup } = voteData;
+    const { cardId, cardItemId, isCardGroup, count } = voteData;
 
     const [colIndex, cardIndex, cardItemIndex] = [-1, -1, -1];
     let indexes = [colIndex, cardIndex, cardItemIndex];
@@ -172,7 +185,13 @@ const useVotes = () => {
     );
 
     if (foundCardItem) {
-      return updateCardOrCardIndexVotesOptimistic(prevBoardData, indexes, isCardGroup, action);
+      const newBoard = updateCardOrCardIndexVotesOptimistic(
+        prevBoardData,
+        indexes,
+        isCardGroup,
+        action,
+      );
+      updateBoardUser(prevBoardData, count > 0 ? Action.Add : Action.Remove);
     }
 
     return prevBoardData;
@@ -192,11 +211,6 @@ const useVotes = () => {
     return { newBoardData, prevBoardData };
   };
 
-  const addVoteOptimistic = async (voteData: voteDto) => updateVoteOptimistic(Action.Add, voteData);
-
-  const removeVoteOptimistic = async (voteData: voteDto) =>
-    updateVoteOptimistic(Action.Remove, voteData);
-
   const buildToastMessage = (
     toastMessage: string,
     toastStateType: ToastStateEnum,
@@ -216,38 +230,22 @@ const useVotes = () => {
     }
   };
 
-  const restoreBoardDataAndToastError = (
-    prevBoardData: BoardType | undefined,
-    { boardId }: voteDto,
-    errorMessage: string,
-  ) => {
-    queryClient.setQueryData(getBoardQueryKey(boardId), prevBoardData);
-
-    toastErrorMessage(errorMessage);
-  };
-
-  const invalidateQueriesAndToastMessage = (
-    boardDataFromApi: BoardType | undefined,
-    message: string,
-  ) => {
-    queryClient.invalidateQueries(getBoardQueryKey(boardDataFromApi?._id));
-
-    toastRemainingVotesMessage(message, boardDataFromApi);
-  };
-
   const handleVote = useMutation(handleVotes, {
     onMutate: async (variables) => {
-      const { prevBoardData } = await updateVoteOptimistic(
+      const { newBoardData, prevBoardData } = await updateVoteOptimistic(
         variables.count > 0 ? Action.Add : Action.Remove,
         variables,
       );
 
+      if (newBoardData?.maxVotes && newBoardData) {
+        toastRemainingVotesMessage('', newBoardData);
+      }
+
       return { previousBoard: prevBoardData, variables };
     },
-    onSettled: (data) => {
-      queryClient.invalidateQueries(['board', { id: data?._id }]);
-      if (data?.maxVotes && data) {
-        toastRemainingVotesMessage('', data);
+    onSettled: (data, error, variables, context) => {
+      if (error) {
+        queryClient.invalidateQueries(['board', { id: data?._id }]);
       }
     },
     onError: (error, variables, context) => {