adding toaster

db.json

@@ -9,11 +9,6 @@
       "title": "helloxxsxsxsxsxsxsxsxsxsxsxsxsxssssssssssssssssssssxssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssadddadsdsdsadasasasadasaadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyyrt",
       "isCompleted": false,
       "id": 2
-    },
-    {
-      "title": "rfrfrfredefefefefffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
-      "isCompleted": false,
-      "id": 3
     }
   ]
 }
\ No newline at end of file

package-lock.json

@@ -16,6 +16,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^4.10.1",
         "react-scripts": "5.0.1",
+        "react-toastify": "^9.1.3",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -10610,6 +10611,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -21693,6 +21702,18 @@
         }
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+      "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/app-context/index.js

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

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

@@ -2,6 +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";
 
 function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   const [debouncetitle, setDebounceTitle] = useState(title);
@@ -13,6 +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");
       return true;
     }
     return false;
@@ -22,6 +24,11 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   const handleChange = useCallback(() => {
     setIsCheck(!ischeck);
     onChange({ id, isCompleted: !ischeck });
+    setMessage(
+      "success",
+      `${!ischeck ? "Task completed" : "Task not completed"}`,
+      "success"
+    );
   }, [ischeck]);
 
   const handleContent = (e) => {
@@ -42,8 +49,9 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
 
     //after 2 second it will execute
     const handler = setTimeout(() => {
-      if (textarea_ref.current.value != title) {
+      if (textarea_ref.current.value !== title) {
         onChange({ id, title: debouncetitle });
+        setMessage("success", "Task updated");
       }
     }, 2000);
 

src/components/top-level/task/task.css

@@ -23,6 +23,7 @@ input:focus {
 .strike-through {
   text-decoration: line-through;
   text-decoration-thickness: 1.5px;
+  text-decoration-color: rgb(90, 87, 87);
 }
 
 .task-section textarea {

src/index.js

@@ -4,12 +4,25 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { TodoProvider } from "./app-context";
+import { ToastContainer } from "react-toastify";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   // <React.StrictMode>
   <TodoProvider>
     <App />
+    <ToastContainer
+      position="top-right"
+      autoClose={4000}
+      hideProgressBar
+      newestOnTop
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover={false}
+      theme="colored"
+    />
   </TodoProvider>
   // </React.StrictMode>
 );

src/lib/api.js

+import { setMessage } from "../message/toaster";
 const url = "http://192.168.1.91:5000/task";
 
 //POST METHOD
-export async function addTodo(todo) {
+export async function addTodo({ title, isCompleted }) {
   try {
     const response = await fetch(url, {
       method: "POST",
       headers: { "Content-type": "application/json" },
-      body: JSON.stringify(todo),
+      body: JSON.stringify({ title, isCompleted }),
     });
-    return response.json();
+    return await response.json();
   } catch (err) {
-    console.log(err.message);
+    setMessage("error", err.message);
   }
 }
 //PATCH METHOD
-export async function updateTodo({ id, ...todo }) {
+export async function updateTodo({ id, ...item }) {
   try {
     await fetch(url + `/${id}`, {
       method: "PATCH",
       headers: { "Content-type": "application/json" },
-      body: JSON.stringify({ ...todo }),
+      body: JSON.stringify({ ...item }),
     });
     const response = await getTodos();
     return response;
   } catch (err) {
-    console.log(err.message);
+    setMessage("error", err.message);
   }
 }
 
 //GET METHOD
 export async function getTodos() {
   try {
-    return await fetch(url).then((data) => data.json());
+    const response = await fetch(url);
+    return await response.json();
   } catch (err) {
-    console.log(err.message);
+    setMessage("error", err.message);
   }
 }
 
@@ -46,6 +48,6 @@ export async function deleteTodo(id) {
     const response = await getTodos();
     return response;
   } catch (err) {
-    console.log(err.message);
+    setMessage("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]();
+}