tost added

anwarjunaidkm · Feb 7, 2023 · 06a4ba8 · 06a4ba8
1 parent bcb8a75
commit 06a4ba8
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.1",
     "reactstrap": "^9.1.5",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,7 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import "react-toastify/dist/ReactToastify.css";
+
 import {BrowserRouter , Routes , Route} from 'react-router-dom'
 
 import Header from './components/header/Header';

diff --git a/src/components/dashbords/admin/AddCategory.js b/src/components/dashbords/admin/AddCategory.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { ToastContainer } from 'react-toastify';
 import { Button, Card, Form } from 'reactstrap'
 import AdminLayout from '../../../Layout/admin/AdminLayout'
 import { AddCategoryApi } from '../../../store/admin/AdminSlice';
@@ -51,6 +52,8 @@ const [imageFile, setImageFile] = useState(null);
         <Card style={{ width: "400px", height: "200px", margin: "30px" ,textAlign:"center" }}>
           <h5 style={{fontSize:"14px",textAlign:"center",marginTop:"14px",color:"#6a3921"}}>Add Category</h5>
           <Form onSubmit={categoryHandle}>
+          <ToastContainer />
+
           <input
             type="text"
             placeholder="Enter Category Name..!"

diff --git a/src/components/login/Login.js b/src/components/login/Login.js
@@ -10,6 +10,8 @@ import { anwar, LoginA, LoginApi } from '../../store/auth/AuthSlice'
 import Footer from '../footer/Footer'
 import Header from '../header/Header'
 import "./Login.css"
+import { ToastContainer, toast } from "react-toastify";
+
 
 function Login() {
   const [Input,setInput] =useState()
@@ -45,8 +47,8 @@ function Login() {
                 <div className="login-right">
                   <div>
                     <form onSubmit={handleLogin}>
-
 
+                      <ToastContainer />
                     <h4 style={{color:"#6a3921"}}>Login</h4>
                     <p style={{color:"gray",fontSize:"10px"}}>Lorem, ipsum dolor ipsum dolor ipsum !!</p>
                     <TextField

diff --git a/src/store/admin/AdminSlice.js b/src/store/admin/AdminSlice.js
@@ -1,4 +1,5 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { toast } from "react-toastify";
 import axiosApi from "../AxiosInstance";
 
 
@@ -24,6 +25,7 @@ export const AllevenTeamApi =createAsyncThunk(
 export const AddCategoryApi = createAsyncThunk(
     "admin/AddCategoryApi",
     async({inputValue,imageFile})=>{
+        try{
 
 
         const formData = new FormData();
@@ -34,8 +36,30 @@ export const AddCategoryApi = createAsyncThunk(
               "Content-Type": "multipart/form-data"
             }
           });
+          toast.success(" added successful!", {
+            position: "top-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            theme:"colored"
+          });
+
 
         return res
+        }catch(error){
+            toast.error("Failed. Please try again.", {
+                position: "top-right",
+                autoClose: 5000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                theme:"colored"
+              });
+
+        }
 
     }
 )

diff --git a/src/store/auth/AuthSlice.js b/src/store/auth/AuthSlice.js
@@ -1,18 +1,36 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { toast } from "react-toastify";
 import axiosApi from "../AxiosInstance";
 
 
 //-------------------------login-----------------------------
    export const LoginApi = createAsyncThunk(
     "login/LoginApi",
         async (data)=>{
+            try{
 
             const res = await axiosApi.post("/projectaccount/login/",data.data);
+            toast.success("Login successful!", {
+                position: "top-right",
+                autoClose: 5000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                theme:"colored"
+              });
+
+
+
+
 
             if(res?.data?.token)
+
             sessionStorage.setItem('token',res.data.token);
             sessionStorage.setItem('role',res.data.role);
+
              switch(res?.data?.role){
+
                 case "admin":
                     return data.navigate("/admindash")
                 case "customer":
@@ -21,8 +39,22 @@ import axiosApi from "../AxiosInstance";
                     return data.navigate("/teamdash")
                     default: return data.navigate("/")
              }
+
+
 
-            return res
+            }
+            catch(error){
+                toast.error("Login failed. Please try again.", {
+                    position: "top-right",
+                    autoClose: 5000,
+                    hideProgressBar: false,
+                    closeOnClick: true,
+                    pauseOnHover: true,
+                    draggable: true,
+                    theme:"colored"
+                  });
+
+            }
 
         }
    )