Edit TODO page is implemented

amirrh6 · Jun 24, 2024 · 840c1ef · 840c1ef
1 parent e317fa4
commit 840c1ef
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Just a simple experiment with React 18 based on a [tutorial](https://youtu.be/LD
 -   -   -   [x] Item (TODO)
 -   -   -   -   [x] Content collapse (more or less) button
 -   -   -   -   [x] Delete functionality
--   -   -   -   [ ] Edit functionality
+-   -   -   -   [x] Edit functionality
 -   -   [x] ViewAllTODOs
 -   [ ] Pages:
 -   -   [x] Home page

diff --git a/src/App.jsx b/src/App.jsx
@@ -5,14 +5,43 @@ import {
     RouterProvider
 } from 'react-router-dom';
 
-import HomePage from './pages/HomePage';
+import { backend } from './others/others';
+import defaultTODOs from './todos.json';
 import MainLayout from './layouts/MainLayout';
+import HomePage from './pages/HomePage';
 import TODOsPage from './pages/TODOsPage';
 import TODOPage, { TODOLoader } from './pages/TODOPage';
 import AddTODOPage from './pages/AddTODOPage';
 import NotFoundPage from './pages/NotFoundPage';
-import defaultTODOs from './todos.json';
-import { backend } from './others/others';
+import EditTODOPage from './pages/EditTODOPage';
+
+const updateTODO = async (todo) => {
+    if (backend == 'json-server') {
+        const apiUrl = `/api/todos/${todo.id}`;
+
+        await fetch(apiUrl, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(todo)
+        });
+
+        return;
+    } else if (backend == 'browser') {
+        if (localStorage.getItem('todos') === null) {
+            localStorage.setItem('todos', JSON.stringify(defaultTODOs['todos']));
+        }
+
+        let readTODOs = JSON.parse(localStorage.getItem('todos'));
+
+        readTODOs = readTODOs.map((object) =>
+            object.id === todo.id ? { ...object, ...todo } : object
+        );
+
+        localStorage.setItem('todos', JSON.stringify(readTODOs));
+    }
+};
 
 const deleteTODO = async (id) => {
     if (backend == 'json-server') {
@@ -76,6 +105,11 @@ const App = () => {
                     element={<TODOPage deleteTODO={deleteTODO} />}
                     loader={TODOLoader}
                 />
+                <Route
+                    path="/edit-todo/:id"
+                    element={<EditTODOPage updateTODOSubmit={updateTODO} />}
+                    loader={TODOLoader}
+                />
                 <Route path="/add-todo" element={<AddTODOPage addTODOSubmit={addTODO} />} />
                 <Route path="*" element={<NotFoundPage />} />
             </Route>

diff --git a/src/pages/EditTODOPage.jsx b/src/pages/EditTODOPage.jsx
@@ -0,0 +1,106 @@
+/* eslint-disable react/prop-types */
+import { useParams, useLoaderData, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+
+const EditTODOPage = ({ updateTODOSubmit }) => {
+    const todo = useLoaderData();
+
+    const [title, setTitle] = useState(todo.title);
+    const [priority, setPriority] = useState(todo.priority);
+    const [description, setDescription] = useState(todo.description);
+
+    const navigate = useNavigate();
+
+    const { id } = useParams();
+
+    const submitForm = (event) => {
+        event.preventDefault();
+
+        const updatedTODO = {
+            id,
+            title,
+            priority,
+            description
+        };
+
+        updateTODOSubmit(updatedTODO);
+        toast.success('TODO updated successfully!');
+        return navigate(`/todos/${updatedTODO.id}`);
+    };
+
+    return (
+        <section className="bg-indigo-50">
+            <div className="container m-auto max-w-2xl py-24">
+                <div className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0">
+                    <form onSubmit={submitForm}>
+                        <h2 className="text-3xl text-center font-semibold mb-6">Update TODO</h2>
+
+                        <div className="mb-4">
+                            <label
+                                htmlFor="priority"
+                                className="block text-gray-700 font-bold mb-2"
+                            >
+                                TODO priority
+                            </label>
+                            <select
+                                id="priority"
+                                name="priority"
+                                className="border rounded w-full py-2 px-3"
+                                required
+                                value={priority}
+                                onChange={(event) => setPriority(event.target.value)}
+                            >
+                                <option value="High-priority">High-priority</option>
+                                <option value="Medium-priority">Medium-priority</option>
+                                <option value="Low-priority">Low-priority</option>
+                            </select>
+                        </div>
+
+                        <div className="mb-4">
+                            <label className="block text-gray-700 font-bold mb-2">TODO title</label>
+                            <input
+                                type="text"
+                                id="title"
+                                name="title"
+                                className="border rounded w-full py-2 px-3 mb-2"
+                                placeholder="eg. Do the laundry"
+                                required
+                                value={title}
+                                onChange={(event) => setTitle(event.target.value)}
+                            />
+                        </div>
+                        <div className="mb-4">
+                            <label
+                                htmlFor="description"
+                                className="block text-gray-700 font-bold mb-2"
+                            >
+                                Description
+                            </label>
+                            <textarea
+                                id="description"
+                                name="description"
+                                className="border rounded w-full py-2 px-3"
+                                rows="4"
+                                placeholder="Gather sport clothes and take them to ..."
+                                value={description}
+                                onChange={(event) => setDescription(event.target.value)}
+                            ></textarea>
+                        </div>
+
+                        <div>
+                            <button
+                                className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
+                                type="submit"
+                            >
+                                Update TODO
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default EditTODOPage;
diff --git a/src/pages/TODOPage.jsx b/src/pages/TODOPage.jsx
@@ -62,12 +62,8 @@ const TODOPage = ({ deleteTODO }) => {
                             <div className="bg-white p-6 rounded-lg shadow-md mt-6">
                                 <h3 className="text-xl font-bold mb-6">Manage TODO</h3>
                                 <Link
-                                    to={`/todos/edit/${todo.id}`}
+                                    to={`/edit-todo/${todo.id}`}
                                     className="bg-indigo-500 hover:bg-indigo-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
-                                    onClick={(event) => {
-                                        event.preventDefault();
-                                        alert('Work in Progress...');
-                                    }}
                                 >
                                     Edit TODO
                                 </Link>