Toast Alert functionality added

Author: WebDeveloperGuide

web_panel/src/App.js

@@ -4,11 +4,13 @@ import ProductDetailPage from './pages/ProductDetailPage';
 import About from './pages/About';
 import NotFound from './pages/NotFound';
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-
+import Toast from "./components/Toast";
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
   return (
     <>
+      <Toast/>
       <Router>
         <Switch>
         	<Route path="/" component={Home} exact/>

web_panel/src/components/Toast.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { ToastContainer } from "react-toastify";
+
+const Toast = () => {
+  return (
+    <>
+      <ToastContainer
+        position="top-right"
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+      />
+    </>
+  );
+};
+
+export default Toast;

web_panel/src/pages/ProductDetailPage.js

@@ -9,6 +9,9 @@ import Cart from '../components/Cart';
 import Loading from '../components/Loading';
 import axios from 'axios';
 import {setProductDetail,resetProductDetail} from '../redux/actions/productActions';
+import { toast } from 'react-toastify';
+import {ToastObjects} from "../util/toastObject";
+
 
 const ProductDetailPage = () => {
 
@@ -19,10 +22,13 @@ const ProductDetailPage = () => {
 
 	const fetchProductDetail = async() =>{
 		const response = await axios.get(`https://dummyjson.com/products/${id}`).catch((err) =>{
-			console.log(err);
+		  toast.error("No data found", ToastObjects);
 		});
 
-		dispatch(setProductDetail(response.data));
+		if(response){
+			dispatch(setProductDetail(response.data));	
+		}
+		
 	};
 
 	useEffect(()=>{

web_panel/src/util/toastObject.js

@@ -0,0 +1,8 @@
+export const ToastObjects = {
+    pauseOnFocusLoss: false,
+    draggable: false,
+    pauseOnHover: false,
+    autoClose: 2000,
+    hideProgressBar: true,
+  };
+