reorg

src/components/xtodo/TodoList.tsx

@@ -5,24 +5,27 @@ import { FaTrash, FaUpload } from "react-icons/fa";
 import { Todo, SERVER_URL as cacheKey, getTodos } from "./todosApi";
 import {
   addTodoMutation,
-  addTodoMutationOptions,
+  addTodoUtility,
   deleteTodoMutation,
-  deleteTodoMutationOptions,
+  deleteTodoUtility,
   updateTodoMutation,
-  updateTodoMutationOptions,
+  updateTodoUtility,
 } from "./mutations";
 
 const TodoList = () => {
   const [newTodo, setNewTodo] = useState("");
 
   const { isLoading, error, data: todos, mutate } = useSWR(cacheKey, getTodos);
 
-  const handleAdd = async (newTodo: Todo) => {
+  const handleAdd = async (addedTodo: Todo) => {
     if (!todos) return;
     try {
       await mutate(
-        addTodoMutation(newTodo, todos),
-        addTodoMutationOptions(newTodo, todos)
+        addTodoMutation(addedTodo, todos),
+        {
+          optimisticData: addTodoUtility(addedTodo, todos),
+          revalidate: false,
+        }
       );
       toast.success("Success! Added a new item", {
         duration: 2000,
@@ -38,7 +41,10 @@ const TodoList = () => {
     try {
       await mutate(
         updateTodoMutation(updatedTodo, todos),
-        updateTodoMutationOptions(updatedTodo, todos)
+        {
+          optimisticData: updateTodoUtility(updatedTodo, todos),
+          revalidate: false,
+        }
       );
       toast.success("Success! Updated item", {
         duration: 2000,
@@ -54,7 +60,10 @@ const TodoList = () => {
     try {
       await mutate(
         deleteTodoMutation(id, todos),
-        deleteTodoMutationOptions(id, todos)
+        {
+          optimisticData: deleteTodoUtility(id, todos),
+          revalidate: false,
+        }
       );
       toast.success("Success! Deleted item", {
         duration: 2000,

src/components/xtodo/mutations.test.ts

@@ -0,0 +1,56 @@
+import { HttpResponse, http } from "msw";
+import { server } from "../../test/mocks/server";
+import { SERVER_URL, Todo } from "./todosApi";
+import { mockTodo, mockTodoList } from "../../test/mocks/constants";
+import {
+  addTodoMutation,
+  deleteTodoMutation,
+  updateTodoMutation,
+} from "./mutations";
+
+describe("mutations", () => {
+  it("should return the added todo item", async () => {
+    server.use(
+      http.post(`${SERVER_URL}`, () => {
+        return HttpResponse.json(mockTodo, { status: 200 });
+      })
+    );
+    const todos = mockTodoList;
+    const todos1 = await addTodoMutation(mockTodo, todos);
+    expect(todos1).toEqual([mockTodo, ...todos]);
+  });
+
+  it("should return the updated todo item", async () => {
+    server.use(
+      http.put(`${SERVER_URL}/:id`, async ({ request }) => {
+        const { id, userId, title, completed } = (await request.json()) as Todo;
+        return HttpResponse.json(
+          {
+            userId,
+            title,
+            completed,
+            id,
+          },
+          { status: 200 }
+        );
+      })
+    );
+    const todos = [mockTodo, ...mockTodoList];
+    const todos1 = await updateTodoMutation(
+      { ...mockTodo, title: "123" },
+      todos
+    );
+    expect(todos1).toEqual([{ ...mockTodo, title: "123" }, ...mockTodoList]);
+  });
+
+  it("should return the deleted todo id", async () => {
+    server.use(
+      http.delete(`${SERVER_URL}/:id`, () => {
+        return HttpResponse.json(mockTodo, { status: 200 });
+      })
+    );
+    const todos = [mockTodo, ...mockTodoList];
+    const todos1 = await deleteTodoMutation(mockTodo.id, todos);
+    expect(todos1).toEqual(mockTodoList);
+  });
+});

src/components/xtodo/mutations.ts

@@ -1,45 +1,33 @@
 import { Todo, addTodo, deleteTodo, updateTodo } from "./todosApi";
 
-export async function addTodoMutation(newTodo: Todo, todos: Todo[]) {
-  const added = await addTodo(newTodo);
+export const addTodoUtility = (added: Todo, todos: Todo[]) => {
   return [added, ...todos];
-}
+};
 
-export function addTodoMutationOptions(newTodo: Todo, todos: Todo[]) {
-  return {
-    optimisticData: [newTodo, ...todos],
-    revalidate: false,
-  };
+export async function addTodoMutation(addedTodo: Todo, todos: Todo[]) {
+  const added = await addTodo(addedTodo);
+  return addTodoUtility(added, todos);
 }
 
-export async function updateTodoMutation(updatedTodo: Todo, todos: Todo[]) {
-  const updated = await updateTodo(updatedTodo);
+export const updateTodoUtility = (updated: Todo, todos: Todo[]) => {
   return todos.map((todo) => {
-    return updatedTodo.id === todo.id ? updated : todo;
+    return updated.id === todo.id ? updated : todo;
   });
-}
+};
 
-export function updateTodoMutationOptions(updatedTodo: Todo, todos: Todo[]) {
-  return {
-    optimisticData: todos.map((todo) => {
-      return updatedTodo.id === todo.id ? updatedTodo : todo;
-    }),
-    revalidate: false,
-  };
+export async function updateTodoMutation(updatedTodo: Todo, todos: Todo[]) {
+  const response = await updateTodo(updatedTodo);
+  return updateTodoUtility(response, todos);
 }
 
-export async function deleteTodoMutation(id: number, todos: Todo[]) {
-  await deleteTodo(id);
+export const deleteTodoUtility = (id: number, todos: Todo[]) => {
   return todos.filter((todo) => {
     return todo.id !== id;
   });
-}
+};
 
-export function deleteTodoMutationOptions(id: number, todos: Todo[]) {
-  return {
-    optimisticData: todos.filter((todo) => {
-      return todo.id !== id;
-    }),
-    revalidate: false,
-  };
+export async function deleteTodoMutation(id: number, todos: Todo[]) {
+  await deleteTodo(id);
+  return deleteTodoUtility(id, todos);
 }
+

src/test/mocks/constants.ts

@@ -1,6 +1,21 @@
 export const mockTodo = {
   userId: 1,
-  title: "Wave hello! 👋",
+  title: "A",
   completed: false,
   id: 1,
 };
+
+export const mockTodoList = [
+  {
+    userId: 2,
+    title: "B",
+    completed: false,
+    id: 2,
+  },
+  {
+    userId: 3,
+    title: "C",
+    completed: false,
+    id: 3,
+  },
+];