fix: property _id to match backend (#5)

tobiasprima · Mar 19, 2024 · b1990d5 · b1990d5
2 parents 38167d4 + 084ee23
commit b1990d5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/app/api/apiSlice.js b/src/app/api/apiSlice.js
@@ -3,37 +3,43 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 export const apiSlice = createApi({
     reducerPath: 'api',
     baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080' }),
+    tagTypes: ['Todos'],
     endpoints: (builder) => ({
         getTodos: builder.query({
-            query: () => '/todos'
+            query: () => '/todos',
+            providesTags: ['Todos']
         }),
         addTodo: builder.mutation({
             query: (todo) => ({
                 url: '/todo',
                 method: 'POST',
                 body: todo
-            })
+            }),
+            invalidatesTags: ['Todos']
         }),
         updateTodo: builder.mutation({
             query: (todo) => ({
                 url: `/todo/${todo.id}/title`,
                 method: 'PATCH',
                 body: todo
-            })
+            }),
+            invalidatesTags: ['Todos']
         }),
         doneTodo: builder.mutation({
             query: (todo) => ({
                 url: `/todo/${todo.id}/status`,
                 method: 'PATCH',
                 body: todo
-            })
+            }),
+            invalidatesTags: ['Todos']
         }),
         deleteTodo: builder.mutation({
             query: ({ id })=> ({
                 url: `/todo/${id}`,
                 method: 'DELETE',
                 body: id
-            })
+            }),
+            invalidatesTags: ['Todos']
         })
     })
 })

diff --git a/src/features/todos/TodoList.js b/src/features/todos/TodoList.js
@@ -53,17 +53,17 @@ const TodoList = () => {
     } else if (isSuccess){
         content = todos.map(todo => {
             return (
-                <article key={todo.id}>
+                <article key={todo._id}>
                     <div className="todo">
                         <input 
                         type="checkbox" 
                         checked={todo.status}
-                        id={todo.id}
-                        onChange={()=> doneTodo({ ...todo, status: !todo.status})}
+                        id={todo._id}
+                        onChange={()=> doneTodo({ id: todo._id, status: !todo.status})}
                         />
-                        <label htmlFor={todo.id}>{todo.title}</label>
+                        <label htmlFor={todo._id}>{todo.title}</label>
                     </div>
-                    <button className="trash" onClick={()=> deleteTodo({ id: todo.id})}>
+                    <button className="trash" onClick={()=> deleteTodo({ id: todo._id})}>
                         <FontAwesomeIcon icon={faTrash}/>
                     </button>
                 </article>