From 9f689beb9ded08b81a45d83d278c65aafa27f1b1 Mon Sep 17 00:00:00 2001
From: Manik Maity <manikmaity156@gmail.com>
Date: Fri, 8 Nov 2024 19:24:23 +0530
Subject: [PATCH] Added toast and add logout

---
 frontend/package-lock.json                    | 23 +++++++++++++++++++
 frontend/package.json                         |  1 +
 frontend/src/App.jsx                          | 15 ++++++++++++
 .../src/components/Header/ProfileImage.jsx    | 16 ++++++++++++-
 frontend/src/pages/LoginPage.jsx              |  2 ++
 frontend/src/services/logoutService.js        |  8 +++++++
 6 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/services/logoutService.js

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6b814ae..81f6983 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
         "react-icons": "^5.3.0",
         "react-query": "^3.39.3",
         "react-router-dom": "^6.27.0",
+        "react-toastify": "^10.0.6",
         "zustand": "^5.0.1"
       },
       "devDependencies": {
@@ -1984,6 +1985,15 @@
         "node": ">= 6"
       }
     },
+    "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",
@@ -4759,6 +4769,19 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
+      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
+      "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",
diff --git a/frontend/package.json b/frontend/package.json
index 1ed2b0c..f1e3c35 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "react-icons": "^5.3.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.27.0",
+    "react-toastify": "^10.0.6",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8283dc3..d81f195 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -11,6 +11,8 @@ import VotingPage from "./pages/VotingPage";
 import CreatePollForm from "./pages/CreatePollForm";
 import { QueryClient, QueryClientProvider } from "react-query";
 import PrivateRoute from "./components/PrivateRoute/PrivateRoute";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   const queryClient = new QueryClient();
@@ -30,6 +32,19 @@ function App() {
             <Route path="/create" element={<CreatePollForm />} />
           </Route>
         </Routes>
+        <ToastContainer
+          position="bottom-right"
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="dark"
+          transition:Bounce
+        />
       </BrowserRouter>
     </QueryClientProvider>
   );
diff --git a/frontend/src/components/Header/ProfileImage.jsx b/frontend/src/components/Header/ProfileImage.jsx
index 19f355e..2fc2819 100644
--- a/frontend/src/components/Header/ProfileImage.jsx
+++ b/frontend/src/components/Header/ProfileImage.jsx
@@ -1,13 +1,27 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import useUserStore from '../../store/useStore';
+import { useMutation } from 'react-query';
+import logoutService from '../../services/logoutService';
+import { toast } from 'react-toastify';
 
 function ProfileImage({userData}) {
 
     const {setUser} = useUserStore();
 
+    const mutation = useMutation(logoutService, {
+        onSuccess: (data) => {
+            setUser({});
+            toast.success(data?.message);
+        },
+        onError: (error) => {
+            toast.error("Something went wrong");
+            console.log(error);
+        },
+    });
+
     const handleLogout = () => {
-        setUser({});
+       mutation.mutate();
     }
 
 
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index feafa1c..82ade94 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -6,6 +6,7 @@ import { loginService } from '../services/loginService';
 import SpinnerLoader from '../components/Loaders/SpinnerLoader';
 import InlineTextError from '../components/Errors/InlineTextError';
 import useUserStore from '../store/useStore';
+import { toast } from 'react-toastify';
 
 const LoginPage = () => {
 
@@ -18,6 +19,7 @@ const LoginPage = () => {
   const mutation = useMutation(loginService, {
     onSuccess: (data) => {
       setUser(data?.user);
+      toast.success(data?.message);
       setEmail('');
       setPassword('');
       navigator('/');
diff --git a/frontend/src/services/logoutService.js b/frontend/src/services/logoutService.js
new file mode 100644
index 0000000..bd6b793
--- /dev/null
+++ b/frontend/src/services/logoutService.js
@@ -0,0 +1,8 @@
+import axiosInstance from "../helper/axiosInstance";
+
+async function logoutService() {
+    const response = await axiosInstance.get("/user/logout");
+    return response.data;
+}
+
+export default logoutService