feat: mutation slice (#4)

src/App.test.js

@@ -30,6 +30,7 @@ test('allows user to type in a new todo', () => {
     </Provider>);
 
   const inputElement = screen.getByLabelText(/Add to list/i);
+  // eslint-disable-next-line testing-library/no-unnecessary-act
   act(() => {
     fireEvent.change(inputElement, { target: { value: 'New Todo Item' } });
   });

src/app/api/apiSlice.js

@@ -6,10 +6,42 @@ export const apiSlice = createApi({
     endpoints: (builder) => ({
         getTodos: builder.query({
             query: () => '/todos'
+        }),
+        addTodo: builder.mutation({
+            query: (todo) => ({
+                url: '/todo',
+                method: 'POST',
+                body: todo
+            })
+        }),
+        updateTodo: builder.mutation({
+            query: (todo) => ({
+                url: `/todo/${todo.id}/title`,
+                method: 'PATCH',
+                body: todo
+            })
+        }),
+        doneTodo: builder.mutation({
+            query: (todo) => ({
+                url: `/todo/${todo.id}/status`,
+                method: 'PATCH',
+                body: todo
+            })
+        }),
+        deleteTodo: builder.mutation({
+            query: ({ id })=> ({
+                url: `/todo/${id}`,
+                method: 'DELETE',
+                body: id
+            })
         })
     })
 })
 
 export const {
-    useGetTodosQuery
+    useGetTodosQuery,
+    useAddTodoMutation,
+    useUpdateTodoMutation,
+    useDoneTodoMutation,
+    useDeleteTodoMutation
 } = apiSlice

src/features/todos/TodoList.js

@@ -2,7 +2,13 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash, faUpload } from '@fortawesome/free-solid-svg-icons'
 import { useState } from 'react'
-import { useGetTodosQuery } from '../../app/api/apiSlice'
+import { 
+    useGetTodosQuery,
+    useAddTodoMutation,
+    useUpdateTodoMutation,
+    useDoneTodoMutation,
+    useDeleteTodoMutation 
+} from '../../app/api/apiSlice'
 
 const TodoList = () => {
     const [ newTodo, setNewTodo ] = useState('')
@@ -14,10 +20,13 @@ const TodoList = () => {
         isError,
         error
     } = useGetTodosQuery()
+    const [ addTodo ] = useAddTodoMutation()
+    const [ doneTodo ] = useDoneTodoMutation()
+    const [ deleteTodo ] = useDeleteTodoMutation()
 
     const handleSubmit = (e)=> {
         e.preventDefault()
-        //addTodo
+        addTodo({title: newTodo})
         setNewTodo('')
     }
 
@@ -42,7 +51,24 @@ const TodoList = () => {
     if (isLoading) {
         content = <p>Loading ...</p>
     } else if (isSuccess){
-        content = JSON.stringify(todos)
+        content = todos.map(todo => {
+            return (
+                <article key={todo.id}>
+                    <div className="todo">
+                        <input 
+                        type="checkbox" 
+                        checked={todo.status}
+                        id={todo.id}
+                        onChange={()=> doneTodo({ ...todo, status: !todo.status})}
+                        />
+                        <label htmlFor={todo.id}>{todo.title}</label>
+                    </div>
+                    <button className="trash" onClick={()=> deleteTodo({ id: todo.id})}>
+                        <FontAwesomeIcon icon={faTrash}/>
+                    </button>
+                </article>
+            )
+        })
     } else if (isError) {
         content = <p>{error.message || 'Error fetching todos'}</p>
     }

src/index.css

@@ -1,13 +1,91 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-family: 'Nunito', sans-serif;
+  font-size: 1.5rem;
+}
+
+input[type="text"], button {
+  font: inherit;
+}
+
+main {
+  margin: auto;
+  max-width: 600px;
+}
+
+h1 {
+  margin-bottom: 0.5rem;
+}
+
+article {
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid hsl(0, 0%, 58%);
+}
+
+.todo {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+input[type="checkbox"] {
+  min-width: 30px;
+  min-height: 30px;
+  margin-right: 1rem;
+}
+
+button {
+  min-width: 50px;
+  min-height: 50px;
+  border: 1px solid #333;
+  border-radius: 10%;
+  cursor: pointer;
+}
+
+.trash {
+  background-color: #fff;
+  color: mediumvioletred;
+}
+
+.trash:focus, .trash:hover {
+  filter:brightness(120%)
+}
+
+form {
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #333;
+  margin-bottom: 1rem;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+form label {
+  position: absolute;
+  left: -10000px;
 }
+
+.new-todo {
+  width: 100%;
+  padding-right: 30px;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 10px;
+  border: 0.5px solid #333;
+}
+
+.submit {
+  background-color: gray;
+  color: #fff;
+}
+
+.submit:focus, .submit:hover {
+  background-color: limegreen;
+}

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';