fix: quitar zustand para manejar tareas y manejar todo con react query

joncodeofficial · joncodeofficial · commit 430c534e560b · 2026-03-14T17:20:38.000+01:00
diff --git a/client/src/features/lists/components/ListItem.tsx b/client/src/features/lists/components/ListItem.tsx
@@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router';
 import { ListProps } from '@shared/types/list.types';
 import { useAlertDialogStore } from '@/shared/store/dialogStore';
-import { useTaskStore } from '@/features/tasks/store/taskStore';
-import { getTaskCount } from '@/features/lists/utils/getTaskCount';
+import { useQueryClient } from '@tanstack/react-query';
+import { TaskProps } from '@shared/types/task.types';
 import { Trash2 } from 'lucide-react';
 import { Tooltip } from '@/shared/components/ui/tooltip';
 import { replaceEmojis } from '@/shared/utils/replaceEmojis';
@@ -20,9 +20,8 @@ type ListItemProps = {
 const ListItem = ({ list }: ListItemProps) => {
   const { listId } = useParams();
   const navigate = useNavigate();
-  const { tasks } = useTaskStore();
+  const queryClient = useQueryClient();
   const inputRef = useRef(null!) as React.MutableRefObject<HTMLInputElement>;
-  const [countTasks, setCountTasks] = useState(0);
   const [isFocused, setIsFocused] = useState(false);
   const { setOpen, setHandleDelete, setListTitle } = useAlertDialogStore();
   const [listName, setListName] = useState(list.name);
@@ -91,10 +90,6 @@ const ListItem = ({ list }: ListItemProps) => {
     setIsFocused(true);
   };
 
-  useEffect(() => {
-    setCountTasks(getTaskCount(list, tasks, listId));
-  }, [list, listId, tasks]);
-
   useEffect(() => {
     if (listNameDebounced === list.name) return;
     setListTitle(listNameDebounced as string);
@@ -150,7 +145,11 @@ const ListItem = ({ list }: ListItemProps) => {
             data-testid='task-count'
             className='text-center inline-block group-hover:hidden align-middle text-xs text-neutral-500 dark:text-neutral-100'
           >
-            <span className='w-full'>{countTasks}</span>
+            <span className='w-full'>
+            {list.listId === listId
+              ? (queryClient.getQueryData<TaskProps[]>(['tasks', listId]) ?? list.tasks ?? []).length
+              : (list.tasks ?? []).length}
+          </span>
           </span>
         </button>
       </Tooltip>
diff --git a/client/src/features/tasks/components/CreateTask.tsx b/client/src/features/tasks/components/CreateTask.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
 import { nanoid } from 'nanoid';
-import { useTaskStore } from '../store/taskStore';
 import { useParams } from 'react-router';
 import { replaceEmojis } from '@/shared/utils/replaceEmojis';
 import { SIZE_ID } from '@/shared/constants/base';
@@ -15,7 +14,6 @@ import { useCreateTask as useCreateTaskMutation } from '@/features/tasks/hooks/u
 
 const CreateTask = () => {
   const [taskName, setTaskName] = useState('');
-  const { tasks } = useTaskStore();
   const { listId } = useParams();
   const [checked, setChecked] = useState(false);
   const inputRef = useRef(null!) as React.RefObject<HTMLInputElement>;
@@ -37,13 +35,10 @@ const CreateTask = () => {
         position: 0,
       };
 
-      // Shift existing tasks' positions
-      const position = tasks.length > 0 ? 0 : 0;
-
       setDate(undefined);
       setChecked(false);
       setTaskName('');
-      createTaskMutation.mutate({ ...newTask, position });
+      createTaskMutation.mutate({ ...newTask, position: 0 });
 
       const body = createNotification({
         type: 'task',
diff --git a/client/src/features/tasks/components/TaskList.tsx b/client/src/features/tasks/components/TaskList.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import SortableList from '@/features/tasks/components/dnd/SortableList';
-import { useTaskStore } from '@/features/tasks/store/taskStore';
+import { useTasks } from '@/features/tasks/hooks/useTasks';
 import { useNavigate, useParams } from 'react-router';
 import { useAlertDialogStore } from '@/shared/store/dialogStore';
 import { useLists } from '@/features/lists/hooks/useLists';
@@ -14,9 +14,9 @@ const EmptyList = () => {
 };
 
 export const TaskList = () => {
-  const { tasks, setTasks } = useTaskStore();
-  const { lists } = useLists();
   const { listId } = useParams();
+  const { tasks } = useTasks(listId);
+  const { lists } = useLists();
   const { setListTitle } = useAlertDialogStore();
   const navigate = useNavigate();
 
@@ -25,8 +25,7 @@ export const TaskList = () => {
     const findList = lists.find((l) => l.listId === listId);
     if (!findList && lists.length !== 0) navigate('/u/dashboard');
     setListTitle(findList?.name ?? '');
-    setTasks(findList?.tasks || []);
-  }, [listId, lists, navigate, setListTitle, setTasks]);
+  }, [listId, lists, navigate, setListTitle]);
 
   return tasks.length > 0 ? <SortableList /> : <EmptyList />;
 };
diff --git a/client/src/features/tasks/components/dnd/SortableList.tsx b/client/src/features/tasks/components/dnd/SortableList.tsx
@@ -10,15 +10,15 @@ import {
   DragStartEvent,
 } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableOverlay } from './SortableOverlay';
 import { Virtuoso } from 'react-virtuoso';
 import { useParams } from 'react-router';
 import { useDragStore } from '@/features/tasks/store/dragStore';
-import { useTaskStore } from '@/features/tasks/store/taskStore';
 import SortableItem from './SortableItem';
-import { useReorderTasks } from '@/features/tasks/hooks/useTasks';
+import { useReorderTasks, useTasks } from '@/features/tasks/hooks/useTasks';
+import { useQueryClient } from '@tanstack/react-query';
+import { TaskProps } from '@shared/types/task.types';
 
 type handleDragEndProps = {
   active: Active;
@@ -29,7 +29,8 @@ const SortableList = () => {
   const { listId } = useParams();
   const [active, setActive] = useState<Active | null>(null);
   const { setIsDragging } = useDragStore();
-  const { tasks, setTasks } = useTaskStore();
+  const { tasks } = useTasks(listId);
+  const queryClient = useQueryClient();
   const reorderTasks = useReorderTasks();
 
   const activeItem = useMemo(() => tasks.find((item) => item.id === active?.id), [active, tasks]);
@@ -50,13 +51,13 @@ const SortableList = () => {
   const handleDragEnd = ({ active, over }: handleDragEndProps) => {
     if (!listId) return;
     if (over && active.id !== over.id) {
-      const previousTasks = [...tasks];
-      const activeIndex = tasks.findIndex(({ id }) => id === active.id);
-      const overIndex = tasks.findIndex(({ id }) => id === over.id);
-      const newOrder = arrayMove(tasks, activeIndex, overIndex);
-      setTasks(newOrder);
+      const previousTasks = queryClient.getQueryData<TaskProps[]>(['tasks', listId]) ?? [];
+      const activeIndex = previousTasks.findIndex(({ id }) => id === active.id);
+      const overIndex = previousTasks.findIndex(({ id }) => id === over.id);
+      const newOrder = arrayMove(previousTasks, activeIndex, overIndex);
+      queryClient.setQueryData<TaskProps[]>(['tasks', listId], newOrder);
       const items = newOrder.map((task, index) => ({ id: task.id, position: index }));
-      reorderTasks.mutate({ items, previousTasks });
+      reorderTasks.mutate({ items, listId, previousTasks });
     }
     setActive(null);
     setIsDragging(false);
diff --git a/client/src/features/tasks/hooks/useTasks.ts b/client/src/features/tasks/hooks/useTasks.ts
@@ -8,7 +8,6 @@ import {
   duplicateTask,
   moveTask,
 } from '../services/taskService';
-import { useTaskStore } from '../store/taskStore';
 import { TaskProps } from '@shared/types/task.types';
 
 export const useTasks = (listId?: string) => {
@@ -31,7 +30,8 @@ export const useCreateTask = () => {
   return useMutation({
     mutationFn: createTask,
     onMutate: (variables) => {
-      const previous = [...useTaskStore.getState().tasks];
+      const queryKey = ['tasks', variables.list_id];
+      const previous = queryClient.getQueryData<TaskProps[]>(queryKey);
       const newTask: TaskProps = {
         id: variables.id,
         list_id: variables.list_id,
@@ -41,11 +41,11 @@ export const useCreateTask = () => {
         date: variables.date,
         position: variables.position,
       };
-      useTaskStore.getState().addTask(newTask);
+      queryClient.setQueryData<TaskProps[]>(queryKey, [newTask, ...(previous ?? [])]);
       return { previous };
     },
-    onError: (_err, _vars, context) => {
-      if (context?.previous) useTaskStore.getState().setTasks(context.previous);
+    onError: (_err, variables, context) => {
+      queryClient.setQueryData(['tasks', variables.list_id], context?.previous);
     },
     onSettled: (_data, _error, variables) => {
       queryClient.invalidateQueries({ queryKey: ['tasks', variables.list_id] });
@@ -59,14 +59,18 @@ export const useUpdateTask = () => {
   return useMutation({
     mutationFn: updateTask,
     onMutate: ({ taskId, body }) => {
-      const previous = [...useTaskStore.getState().tasks];
-      useTaskStore.getState().setTasks(
-        previous.map((task) => (task.id === taskId ? { ...task, ...body } : task))
-      );
-      return { previous };
+      const allCaches = queryClient.getQueriesData<TaskProps[]>({ queryKey: ['tasks'] });
+      for (const [queryKey, tasks] of allCaches) {
+        if (!tasks?.some((t) => t.id === taskId)) continue;
+        queryClient.setQueryData<TaskProps[]>(
+          queryKey,
+          tasks.map((t) => (t.id === taskId ? { ...t, ...body } : t))
+        );
+        return { queryKey, previous: tasks };
+      }
     },
     onError: (_err, _vars, context) => {
-      if (context?.previous) useTaskStore.getState().setTasks(context.previous);
+      if (context) queryClient.setQueryData(context.queryKey, context.previous);
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['tasks'] });
@@ -80,12 +84,18 @@ export const useDeleteTask = () => {
   return useMutation({
     mutationFn: deleteTask,
     onMutate: (taskId) => {
-      const previous = [...useTaskStore.getState().tasks];
-      useTaskStore.getState().deleteTask(taskId);
-      return { previous };
+      const allCaches = queryClient.getQueriesData<TaskProps[]>({ queryKey: ['tasks'] });
+      for (const [queryKey, tasks] of allCaches) {
+        if (!tasks?.some((t) => t.id === taskId)) continue;
+        queryClient.setQueryData<TaskProps[]>(
+          queryKey,
+          tasks.filter((t) => t.id !== taskId)
+        );
+        return { queryKey, previous: tasks };
+      }
     },
     onError: (_err, _vars, context) => {
-      if (context?.previous) useTaskStore.getState().setTasks(context.previous);
+      if (context) queryClient.setQueryData(context.queryKey, context.previous);
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['tasks'] });
@@ -97,41 +107,41 @@ export const useDeleteTask = () => {
 export const useReorderTasks = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: { items: { id: string; position: number }[]; previousTasks: TaskProps[] }) =>
+    mutationFn: (variables: { items: { id: string; position: number }[]; listId: string; previousTasks: TaskProps[] }) =>
       reorderTasks(variables.items),
     onError: (_err, variables) => {
-      useTaskStore.getState().setTasks(variables.previousTasks);
+      queryClient.setQueryData(['tasks', variables.listId], variables.previousTasks);
     },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ['tasks'] });
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['tasks', variables.listId] });
+      queryClient.invalidateQueries({ queryKey: ['lists'] });
     },
   });
 };
 
 export const useDuplicateTask = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: { taskId: string; tempTask: TaskProps }) =>
-      duplicateTask(variables.taskId),
+    mutationFn: (variables: { taskId: string; tempTask: TaskProps }) => duplicateTask(variables.taskId),
     onMutate: ({ tempTask }) => {
-      const previous = [...useTaskStore.getState().tasks];
-      useTaskStore.getState().addTask(tempTask);
+      const queryKey = ['tasks', tempTask.list_id];
+      const previous = queryClient.getQueryData<TaskProps[]>(queryKey);
+      queryClient.setQueryData<TaskProps[]>(queryKey, [tempTask, ...(previous ?? [])]);
       return { previous, tempId: tempTask.id };
     },
-    onSuccess: (data, _vars, context) => {
+    onSuccess: (data, vars, context) => {
       if (context?.tempId && data.length > 0) {
-        const current = useTaskStore.getState().tasks;
-        const serverTask = data[0];
-        useTaskStore.getState().setTasks(
-          current.map((t) => (t.id === context.tempId ? serverTask : t))
+        const queryKey = ['tasks', vars.tempTask.list_id];
+        queryClient.setQueryData<TaskProps[]>(queryKey, (current) =>
+          (current ?? []).map((t) => (t.id === context.tempId ? data[0] : t))
         );
       }
     },
-    onError: (_err, _vars, context) => {
-      if (context?.previous) useTaskStore.getState().setTasks(context.previous);
+    onError: (_err, vars, context) => {
+      queryClient.setQueryData(['tasks', vars.tempTask.list_id], context?.previous);
     },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ['tasks'] });
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['tasks', variables.tempTask.list_id] });
       queryClient.invalidateQueries({ queryKey: ['lists'] });
     },
   });
@@ -142,12 +152,18 @@ export const useMoveTask = () => {
   return useMutation({
     mutationFn: moveTask,
     onMutate: ({ taskId }) => {
-      const previous = [...useTaskStore.getState().tasks];
-      useTaskStore.getState().deleteTask(taskId);
-      return { previous };
+      const allCaches = queryClient.getQueriesData<TaskProps[]>({ queryKey: ['tasks'] });
+      for (const [queryKey, tasks] of allCaches) {
+        if (!tasks?.some((t) => t.id === taskId)) continue;
+        queryClient.setQueryData<TaskProps[]>(
+          queryKey,
+          tasks.filter((t) => t.id !== taskId)
+        );
+        return { queryKey, previous: tasks };
+      }
     },
     onError: (_err, _vars, context) => {
-      if (context?.previous) useTaskStore.getState().setTasks(context.previous);
+      if (context) queryClient.setQueryData(context.queryKey, context.previous);
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['tasks'] });
diff --git a/client/src/features/tasks/store/taskStore.ts b/client/src/features/tasks/store/taskStore.ts
