Added toast for deleting / adding TODOs

package.json

@@ -17,7 +17,8 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
-    "react-spinners": "^0.13.8"
+    "react-spinners": "^0.13.8",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

src/layouts/MainLayout.jsx

@@ -1,12 +1,14 @@
 import { Outlet } from 'react-router-dom';
-
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import Navbar from '../components/Navbar';
 
 const MainLayout = () => {
     return (
         <>
             <Navbar />
             <Outlet />
+            <ToastContainer />
         </>
     );
 };

src/pages/AddTODOPage.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/prop-types */
 import { useState } from 'react';
+import { toast } from 'react-toastify';
 import { useNavigate } from 'react-router-dom';
 
 const AddTODOPage = ({ addTODOSubmit }) => {
@@ -19,6 +20,7 @@ const AddTODOPage = ({ addTODOSubmit }) => {
         };
 
         addTODOSubmit(newTODO);
+        toast.success('TODO added successfully!');
         return navigate('/todos');
     };
 

src/pages/TODOPage.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import { useParams, useLoaderData, Link, useNavigate } from 'react-router-dom';
 import { FaCheckCircle, FaClock } from 'react-icons/fa';
+import { toast } from 'react-toastify';
 import defaultTODOs from '../todos.json';
 import { backend } from '../others/others';
 
@@ -79,6 +80,7 @@ const TODOPage = ({ deleteTODO }) => {
                                             )
                                         ) {
                                             deleteTODO(todo.id);
+                                            toast.success('TODO was deleted!');
                                             navigate('/todos');
                                         }
                                     }}