pages and routes

db.json

@@ -2,13 +2,8 @@
   "task": [
     {
       "title": "rhrhrhrytyty",
-      "isCompleted": true,
-      "id": 1
-    },
-    {
-      "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadddadsdsdsadasasasadasaadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyyrt",
       "isCompleted": false,
-      "id": 2
+      "id": 1
     }
   ]
 }
\ No newline at end of file

package-lock.json

@@ -15,6 +15,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.10.1",
+        "react-router-dom": "^6.16.0",
         "react-scripts": "5.0.1",
         "react-toastify": "^9.1.3",
         "web-vitals": "^2.1.4"
@@ -4649,6 +4650,14 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
+      "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -21607,6 +21616,36 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
+      "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
+      "dependencies": {
+        "@remix-run/router": "1.9.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
+      "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
+      "dependencies": {
+        "@remix-run/router": "1.9.0",
+        "react-router": "6.16.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.1.3",
     "web-vitals": "^2.1.4"

src/App.js

-import { useEffect } from "react";
 import "./App.css";
-import Layout from "./components/base/layout";
-import Form from "./components/top-level/form";
-import Tasks from "./components/top-level/tasks";
-import { useAppContext } from "./app-context/index";
 
-function App() {
-  const { todo, addTodo, getTodos, deleteTodo, updateTodo } = useAppContext();
-  useEffect(() => {
-    getTodos();
-  }, []);
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Pages from "./pages/index";
 
+function App() {
   return (
     <div className="App">
-      <Layout count={todo?.filter((e) => !e.isCompleted).length}>
-        {todo?.length > 0 ? (
-          <Tasks tasks={todo} onChange={updateTodo} onDelete={deleteTodo} />
-        ) : (
-          <h3>No task</h3>
-        )}
-        <Form onSubmit={addTodo} />
-      </Layout>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Pages />} />
+        </Routes>
+      </Router>
     </div>
   );
 }

src/app-context/index.js

 import React, { createContext, useContext, useState } from "react";
 import * as api from "../lib/api";
-import { setMessage } from "../message/toaster";
+import { toast } from "react-toastify";
 export const TodoContext = createContext();
 export const useAppContext = () => useContext(TodoContext);
 
@@ -14,7 +14,7 @@ export function TodoProvider({ children }) {
       const response = await api.addTodo({ title, isCompleted: false });
       setTodo([...todo, response]);
     } catch (err) {
-      setMessage("error", err.message);
+      toast.error(err.message);
     }
   }
   //UPDATE METHOD
@@ -23,7 +23,7 @@ export function TodoProvider({ children }) {
       const response = await api.updateTodo({ id, ...item });
       setTodo(response);
     } catch (err) {
-      setMessage("error", err.message);
+      toast.error(err.message);
     }
   }
 
@@ -33,7 +33,7 @@ export function TodoProvider({ children }) {
       const response = await api.getTodos();
       setTodo(response);
     } catch (err) {
-      setMessage("error", err.message);
+      toast.error(err.message);
     }
   }
 
@@ -43,7 +43,7 @@ export function TodoProvider({ children }) {
       const response = await api.deleteTodo(id);
       setTodo(response);
     } catch (err) {
-      setMessage("error", err.message);
+      toast.error(err.message);
     }
   }
 

src/components/top-level/task/index.js

@@ -2,7 +2,7 @@ import { FaTimesCircle } from "react-icons/fa";
 import Checkbox from "../../base/checkbox";
 import "./task.css";
 import { useEffect, useRef, useState, useCallback } from "react";
-import { setMessage } from "../../../message/toaster";
+import { toast } from "react-toastify";
 
 function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   const [debouncetitle, setDebounceTitle] = useState(title);
@@ -14,7 +14,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
     const dialog = window.confirm("Do you want to delete?");
     if (dialog) {
       onDelete({ id });
-      setMessage("info", "Task deleted");
+      toast.info("Task deleted");
       return true;
     }
     return false;
@@ -24,8 +24,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   const handleChange = useCallback(() => {
     setIsCheck(!ischeck);
     onChange({ id, isCompleted: !ischeck });
-    setMessage(
-      "success",
+    toast.success(
       `${!ischeck ? "Task completed" : "Task not completed"}`,
       "success"
     );
@@ -51,7 +50,7 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
     const handler = setTimeout(() => {
       if (textarea_ref.current.value !== title) {
         onChange({ id, title: debouncetitle });
-        setMessage("success", "Task updated");
+        toast.success("Task updated");
       }
     }, 2000);
 

src/index.js

@@ -5,7 +5,7 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { TodoProvider } from "./app-context";
 import { ToastContainer } from "react-toastify";
-
+import "react-toastify/dist/ReactToastify.css";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   // <React.StrictMode>

src/lib/api.js

-import { setMessage } from "../message/toaster";
+import { toast } from "react-toastify";
 const url = "http://192.168.1.91:5000/task";
 
 //POST METHOD
@@ -11,7 +11,7 @@ export async function addTodo({ title, isCompleted }) {
     });
     return await response.json();
   } catch (err) {
-    setMessage("error", err.message);
+    toast.error(err.message);
   }
 }
 //PATCH METHOD
@@ -25,7 +25,7 @@ export async function updateTodo({ id, ...item }) {
     const response = await getTodos();
     return response;
   } catch (err) {
-    setMessage("error", err.message);
+    toast.error(err.message);
   }
 }
 
@@ -35,7 +35,7 @@ export async function getTodos() {
     const response = await fetch(url);
     return await response.json();
   } catch (err) {
-    setMessage("error", err.message);
+    toast.error(err.message);
   }
 }
 
@@ -48,6 +48,6 @@ export async function deleteTodo(id) {
     const response = await getTodos();
     return response;
   } catch (err) {
-    setMessage("error", err.message);
+    toast.error(err.message);
   }
 }

src/message/toaster.js

-import { toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-export function setMessage(type, message) {
-  let toaster = {
-    success: () => toast.success(message),
-    info: () => toast.info(message),
-    error: () => toast.error(message),
-  };
-
-  return toaster[type]();
-}

src/pages/index.js

+import React from "react";
+import Layout from "../components/base/layout";
+import Form from "../components/top-level/form";
+import Tasks from "../components/top-level/tasks";
+import { useAppContext } from "../app-context/index";
+
+import { useEffect } from "react";
+export default function Pages() {
+  const { todo, addTodo, getTodos, deleteTodo, updateTodo } = useAppContext();
+  useEffect(() => {
+    getTodos();
+  }, []);
+  return (
+    <div>
+      <Layout count={todo?.filter((e) => !e.isCompleted).length}>
+        {todo?.length > 0 ? (
+          <Tasks tasks={todo} onChange={updateTodo} onDelete={deleteTodo} />
+        ) : (
+          <h3>No task</h3>
+        )}
+        <Form onSubmit={addTodo} />
+      </Layout>
+    </div>
+  );
+}