Toast notifications

app/layout.jsx

@@ -1,5 +1,7 @@
 import Navbar from '@/components/Navbar';
 import AuthProvider from '@/components/AuthProvider';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import '@/assets/styles/globals.css';
 
 export const metadata = {
@@ -15,6 +17,7 @@ const MainLayout = ({ children }) => {
         <body>
           <Navbar />
           <main>{children}</main>
+          <ToastContainer />
         </body>
       </html>
     </AuthProvider>

components/ProfileProperties.jsx

@@ -2,6 +2,7 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { toast } from 'react-toastify';
 import deleteProperty from '@/app/actions/deleteProperty';
 
 const ProfileProperties = ({ properties: initialProperties }) => {
@@ -18,6 +19,8 @@ const ProfileProperties = ({ properties: initialProperties }) => {
 
     await deletePropertyById();
 
+    toast.success('Property Deleted');
+
     const updatedProperties = properties.filter(
       (property) => property._id !== propertyId
     );

package-lock.json

@@ -16,7 +16,8 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.2.1",
-        "react-spinners": "^0.14.1"
+        "react-spinners": "^0.14.1",
+        "react-toastify": "^10.0.5"
       },
       "devDependencies": {
         "@types/node": "20.14.10",
@@ -602,6 +603,15 @@
         "node": ">=9"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1829,6 +1839,19 @@
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -17,7 +17,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.2.1",
-    "react-spinners": "^0.14.1"
+    "react-spinners": "^0.14.1",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@types/node": "20.14.10",