fix(bug): when adding new card, cache is not updating correctly

src/components/dashboard/board/cards/BoardCard.tsx

@@ -1,6 +1,5 @@
 import type { Card } from 'types'
 
-import { memo } from 'react'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 
@@ -10,7 +9,7 @@ import { BoardCardActions } from './BoardCardActions'
 import { BoardCardDeadline } from './BoardCardDeadline'
 import { BoardCardPriority } from './BoardCardPriority'
 
-export const BoardCard = memo(({ card }: { card: Card }) => {
+export const BoardCard = ({ card }: { card: Card }) => {
   const {
     setNodeRef,
     attributes,
@@ -64,4 +63,4 @@ export const BoardCard = memo(({ card }: { card: Card }) => {
       </div>
     </div>
   )
-})
+}

src/components/dashboard/board/cards/BoardCardActions.tsx

@@ -1,16 +1,17 @@
 import type { Card } from 'types'
 
-import { useDragAndDrop } from 'context/dnd.context'
 import { isToday } from 'date-fns'
 import { useModal } from 'react-modal-state'
 
 import { EditCardModal } from 'components/dashboard/modals'
 import { Button } from 'components/ui'
 
+import { useDeleteCard } from 'hooks/card'
+
 export const BoardCardActions = ({ card }: { card: Card }) => {
   const { open } = useModal(EditCardModal)
 
-  const { deleteCard } = useDragAndDrop()
+  const { mutate: deleteCard } = useDeleteCard()
 
   return (
     <div className='ml-auto flex gap-2'>

src/components/dashboard/board/columns/BoardColumnsActions.tsx

@@ -2,13 +2,12 @@ import type { onSaveProps } from 'react-edit-text'
 import type { Column } from 'types'
 
 import { useState } from 'react'
-import { useDragAndDrop } from 'context/dnd.context'
 import { EditText } from 'react-edit-text'
 import { toast } from 'sonner'
 
 import { Button } from 'components/ui'
 
-import { useEditColumn } from 'hooks/column'
+import { useDeleteColumn, useEditColumn } from 'hooks/column'
 
 import {
   DEFAULT_COLUMN_TITLE,
@@ -20,17 +19,17 @@ import { cn } from 'lib'
 export const BoardColumnsActions = ({ column }: { column: Column }) => {
   const [columnTitle, setColumnTitle] = useState(column.title)
 
-  const { deleteColumn } = useDragAndDrop()
+  const { mutate: deleteColumn } = useDeleteColumn()
 
-  const { mutate } = useEditColumn()
+  const { mutate: editColumn } = useEditColumn()
 
   const handleColumnEdit = ({ value, previousValue }: onSaveProps) => {
     if (value.trim().length < REQUIRED_COLUMN_TITLE_LENGTH) {
       setColumnTitle(previousValue.trim())
 
       return toast.error('Column title must be at least 3 characters long.')
     }
-    mutate({ columnId: column.id, data: { title: value } })
+    editColumn({ columnId: column.id, data: { title: value } })
   }
 
   return (

src/components/dashboard/board/columns/BoardColumnsItem.tsx

@@ -1,6 +1,5 @@
 import type { Card, Column } from 'types'
 
-import { memo } from 'react'
 import {
   SortableContext,
   useSortable,
@@ -29,88 +28,90 @@ type BoardColumnsItemProps = {
   backgroundIdentifier?: string
 }
 
-export const BoardColumnsItem = memo(
-  ({ column, cards, backgroundIdentifier }: BoardColumnsItemProps) => {
-    const { open } = useModal(NewCardModal)
+export const BoardColumnsItem = ({
+  column,
+  cards,
+  backgroundIdentifier
+}: BoardColumnsItemProps) => {
+  const { open } = useModal(NewCardModal)
 
-    const { cardPriority, cardDeadline } = useCardFilters()
+  const { cardPriority, cardDeadline } = useCardFilters()
 
-    const isTabletAndBelow = useTabletAndBelowMediaQuery()
+  const isTabletAndBelow = useTabletAndBelowMediaQuery()
 
-    const { cardsIds } = useDragAndDrop()
+  const { cardsIds } = useDragAndDrop()
 
-    const filteredCards = getFilteredCards(cards!, {
-      priority: cardPriority,
-      deadline: cardDeadline
-    })
+  const filteredCards = getFilteredCards(cards!, {
+    priority: cardPriority,
+    deadline: cardDeadline
+  })
 
-    const {
-      setNodeRef,
-      attributes,
-      listeners,
-      transition,
-      transform,
-      isDragging
-    } = useSortable({
-      id: column.id,
-      data: { type: 'column', column }
-    })
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transition,
+    transform,
+    isDragging
+  } = useSortable({
+    id: column.id,
+    data: { type: 'column', column }
+  })
 
-    const style = {
-      transition,
-      transform: CSS.Transform.toString(transform)
-    }
-
-    return isDragging ? (
-      <div
-        className='w-[334px] rounded-lg border-2 border-brand bg-white-gray-secondary opacity-60
-          violet:border-brand-secondary dark:bg-black'
-        ref={setNodeRef}
-        style={style}
-      />
-    ) : (
-      <div
-        className={cn(
-          `flex w-[334px] cursor-grab touch-manipulation flex-col
-          focus-visible:outline-none`,
-          isDragging && 'select-none'
-        )}
-        ref={setNodeRef}
-        style={style}
-        {...attributes}
-        {...listeners}>
-        <BoardColumnsActions column={column} />
-        <ScrollArea.Root
-          type='scroll'
-          className={cn('-mr-4 pr-4', {
-            'h-[calc(100dvh-275px)]': !isTabletAndBelow,
-            'h-[calc(100dvh-300px)]': isTabletAndBelow
-          })}>
-          <ScrollArea.Viewport className='h-full'>
-            <SortableContext
-              items={cardsIds || []}
-              strategy={verticalListSortingStrategy}>
-              {filteredCards?.map(card => (
-                <BoardCard
-                  card={card}
-                  key={card.id}
-                />
-              ))}
-            </SortableContext>
-          </ScrollArea.Viewport>
-          <Scrollbar
-            backgroundIdentifier={backgroundIdentifier}
-            scrollBarClassName='w-2'
-            thumbClassName='!w-2'
-          />
-        </ScrollArea.Root>
-        <Button
-          isPlusIcon
-          className='mt-3.5'
-          onClick={() => open(column.id)}>
-          Add another card
-        </Button>
-      </div>
-    )
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform)
   }
-)
+
+  return isDragging ? (
+    <div
+      className='w-[334px] rounded-lg border-2 border-brand bg-white-gray-secondary opacity-60
+        violet:border-brand-secondary dark:bg-black'
+      ref={setNodeRef}
+      style={style}
+    />
+  ) : (
+    <div
+      className={cn(
+        `flex w-[334px] cursor-grab touch-manipulation flex-col
+        focus-visible:outline-none`,
+        isDragging && 'select-none'
+      )}
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}>
+      <BoardColumnsActions column={column} />
+      <ScrollArea.Root
+        type='scroll'
+        className={cn('-mr-4 pr-4', {
+          'h-[calc(100dvh-275px)]': !isTabletAndBelow,
+          'h-[calc(100dvh-300px)]': isTabletAndBelow
+        })}>
+        <ScrollArea.Viewport className='h-full'>
+          <SortableContext
+            items={cardsIds || []}
+            strategy={verticalListSortingStrategy}>
+            {filteredCards?.map(card => (
+              <BoardCard
+                card={card}
+                key={card.id}
+              />
+            ))}
+          </SortableContext>
+        </ScrollArea.Viewport>
+        <Scrollbar
+          backgroundIdentifier={backgroundIdentifier}
+          scrollBarClassName='w-2'
+          thumbClassName='!w-2'
+        />
+      </ScrollArea.Root>
+      <Button
+        isPlusIcon
+        className='mt-3.5'
+        onClick={() => open(column.id)}>
+        Add another card
+      </Button>
+    </div>
+  )
+}

src/components/dashboard/board/columns/BoardColumnsList.tsx

@@ -16,6 +16,8 @@ export const BoardColumnsList = ({
 }: BoardColumnsListProps) => {
   const { columns, cards, columnsIds } = useDragAndDrop()
 
+  console.log(cards)
+
   return (
     <div className='flex touch-manipulation gap-[34px]'>
       <SortableContext

src/context/dnd.context.tsx

@@ -1,15 +1,8 @@
 import type { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core'
-import type { ReactNode } from 'react'
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
 import type { Card, Column } from 'types'
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState
-} from 'react'
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import {
   DndContext,
   DragOverlay,
@@ -23,27 +16,27 @@ import { createPortal } from 'react-dom'
 import { BoardCard } from 'components/dashboard/board/cards/BoardCard'
 import { BoardColumnsItem } from 'components/dashboard/board/columns/BoardColumnsItem'
 
-import { useCardDragHandlers, useDeleteCard } from 'hooks/card'
-import { useColumnDragHandlers, useDeleteColumn } from 'hooks/column'
+import { useCardDragHandlers } from 'hooks/card'
+import { useColumnDragHandlers } from 'hooks/column'
 
 import { collisionDetectionAlgorithm } from 'lib'
 
-type DragAndDropContext = {
+export type DragAndDropContext = {
+  setColumns: Dispatch<SetStateAction<Column[] | undefined>>
+  setCards: Dispatch<SetStateAction<Card[] | undefined>>
   columns: Column[] | undefined
   cards: Card[] | undefined
   columnsIds: string[] | undefined
   cardsIds: string[] | undefined
-  deleteColumn: (columnId: string) => void
-  deleteCard: (cardId: string) => void
 }
 
-const DragAndDropContext = createContext<DragAndDropContext | null>(null)
-
 type DragAndDropProviderProps = {
   children: ReactNode
   initialColumns: Column[] | undefined
 }
 
+const DragAndDropContext = createContext<DragAndDropContext | null>(null)
+
 export const DragAndDropProvider = ({
   children,
   initialColumns
@@ -66,29 +59,6 @@ export const DragAndDropProvider = ({
     setActiveColumn
   })
 
-  const { mutate: deleteColumnMutation } = useDeleteColumn()
-  const { mutate: deleteCardMutation } = useDeleteCard()
-
-  const deleteColumn = useCallback(
-    (columnId: string) => {
-      setColumns(columns?.filter(col => col.id !== columnId))
-
-      setCards(cards?.filter(c => c.columnId !== columnId))
-
-      deleteColumnMutation(columnId)
-    },
-    [columns, cards, deleteColumnMutation]
-  )
-
-  const deleteCard = useCallback(
-    (cardId: string) => {
-      setCards(cards?.filter(c => c.id !== cardId))
-
-      deleteCardMutation(cardId)
-    },
-    [cards, deleteCardMutation]
-  )
-
   const onDragStart = (event: DragStartEvent) => {
     if (!event.active) return
 
@@ -122,17 +92,9 @@ export const DragAndDropProvider = ({
     })
   )
 
-  const contextValue: DragAndDropContext = {
-    columns,
-    cards,
-    cardsIds,
-    columnsIds,
-    deleteColumn,
-    deleteCard
-  }
-
   return (
-    <DragAndDropContext.Provider value={contextValue}>
+    <DragAndDropContext.Provider
+      value={{ setColumns, setCards, columns, cards, columnsIds, cardsIds }}>
       <DndContext
         sensors={sensors}
         collisionDetection={collisionDetectionAlgorithm}

src/hooks/card/useAddCard.ts

@@ -7,16 +7,12 @@ import { toast } from 'sonner'
 
 import { NewCardModal } from 'components/dashboard/modals'
 
-import { useGetBoardId } from 'hooks/board'
-
 import { CacheKeys } from 'config'
 import { cardService } from 'services'
 
 export const useAddCard = (reset: UseFormReset<CardSchema>) => {
   const queryClient = useQueryClient()
 
-  const boardId = useGetBoardId()
-
   const { data: column } = useModalInstance<string>()
 
   const { close } = useModal(NewCardModal)
@@ -25,7 +21,7 @@ export const useAddCard = (reset: UseFormReset<CardSchema>) => {
     mutationKey: [CacheKeys.AddCard],
     mutationFn: (data: CardSchema) => cardService.addNewCard(column, data),
     onSuccess() {
-      queryClient.invalidateQueries({ queryKey: [CacheKeys.Board, boardId] })
+      queryClient.invalidateQueries({ queryKey: [CacheKeys.Board] })
       close()
       reset()
     },