Added toast and add logout

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",

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": {

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>
   );

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();
     }
 
 

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('/');

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