added top loading bar

AnantDuhan · Nov 1, 2023 · 6141e64 · 6141e64
1 parent 5290558
commit 6141e64
Show file tree

Hide file tree

Showing 18 changed files with 297 additions and 92 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -44,6 +44,7 @@
         "react-scripts": "^5.0.0",
         "react-stripe-checkout": "^2.6.3",
         "react-toastify": "^9.0.5",
+        "react-top-loading-bar": "^2.3.1",
         "redux": "^4.1.2",
         "redux-devtools-extension": "^2.13.9",
         "redux-thunk": "^2.4.1",

diff --git a/frontend/src/components/Admin/OrderList.jsx → frontend/src/components/Admin/OrderList.js b/frontend/src/components/Admin/OrderList.jsx → frontend/src/components/Admin/OrderList.js
diff --git a/frontend/src/components/Admin/ProcessOrder.js b/frontend/src/components/Admin/ProcessOrder.js
@@ -22,12 +22,14 @@ import {
     Select,
     Typography
 } from '@material-ui/core';
-import Loader from '../layout/Loader/Loader';
+// import Loader from '../layout/Loader/Loader';
 import MetaData from '../layout/MetaData';
+import LoadingBar from 'react-top-loading-bar';
 
 import './ProcessOrder.css';
 
 const ProcessOrder = () => {
+
     const { order, error, loading } = useSelector(state => state.orderDetails);
     const { error: updateError, isUpdated } = useSelector(state => state.order);
 
@@ -37,9 +39,13 @@ const ProcessOrder = () => {
     const [openDialog, setOpenDialog] = useState(false);
     const [selectedRefundStatus, setSelectedRefundStatus] = useState('');
     const [status, setStatus] = useState('');
+    const [progress, setProgress] = useState(0);
+
+    const onLoaderFinished = () => setProgress(0);
 
     const submitRefundRequest_1 = id => {
         if (order) {
+            setProgress(50);
             dispatch(initiateRefund(id));
             toast.success('Refund request initiated successfully');
             handleCloseDialog_1();
@@ -68,10 +74,6 @@ const ProcessOrder = () => {
         }
     };
 
-    // console.log('ORDER ID', order?._id);
-    // console.log('REFUND ID', order);
-    // console.log('ORDER STATUS', selectedRefundStatus);
-
     const handleOpenDialog_2 = () => {
         setOpenDialog(true);
         setSelectedRefundStatus(options[4]);
@@ -111,12 +113,14 @@ const ProcessOrder = () => {
         }
 
         dispatch(getOrderDetails(id));
+        setProgress(100);
+        setTimeout(() => setProgress(0), 1000);
     }, [dispatch, error, id, updateError, isUpdated]);
 
     return (
         <Fragment>
             {loading ? (
-                <Loader />
+                <LoadingBar color='red' progress={progress} onLoaderFinished={onLoaderFinished} />
             ) : (
                 <Fragment>
                     <MetaData title='Update Order Status' />
@@ -539,6 +543,7 @@ const ProcessOrder = () => {
                                                 ? true
                                                 : false
                                         }
+                                        onClick={() => setProgress(progress + 60)}
                                     >
                                         Process
                                     </Button>

diff --git a/frontend/src/components/Admin/RefundList.js b/frontend/src/components/Admin/RefundList.js
@@ -1,11 +1,12 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { DataGrid } from '@material-ui/data-grid';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { clearErrors, allRefunds } from '../../actions/orderAction';
-import Loader from '../layout/Loader/Loader';
+// import Loader from '../layout/Loader/Loader';
+import LoadingBar from 'react-top-loading-bar';
 import MetaData from '../layout/MetaData';
 
 import './RefundList.css';
@@ -15,6 +16,10 @@ const RefundList = () => {
 
     const { loading, error, refunds } = useSelector(state => state.allRefunds);
 
+    const [progress, setProgress] = useState(0);
+
+    const onLoaderFinished = () => setProgress(0);
+
     const columns = [
         { field: 'id', headerName: 'Refund ID', minWidth: 150, flex: 0.4 },
         { field: 'orderID', headerName: 'Order ID', minWidth: 150, flex: 0.4 },
@@ -87,13 +92,19 @@ const RefundList = () => {
         }
 
         dispatch(allRefunds());
+        setProgress(100);
+        setTimeout(() => setProgress(0), 5000);
     }, [dispatch, error]);
 
     return (
         <Fragment>
             <MetaData title='All Refunds' />
             {loading ? (
-                <Loader />
+                <LoadingBar
+                    color='red'
+                    progress={progress}
+                    onLoaderFinished={onLoaderFinished}
+                />
             ) : (
                 <div className='allReturnsPage'>
                     <h1 id='returnsListHeading'>ALL REFUNDS</h1>

diff --git a/frontend/src/components/Admin/ReturnList.js b/frontend/src/components/Admin/ReturnList.js
@@ -1,11 +1,12 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { DataGrid } from '@material-ui/data-grid';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { clearErrors, allReturns } from '../../actions/orderAction';
-import Loader from '../layout/Loader/Loader';
+// import Loader from '../layout/Loader/Loader';
+import LoadingBar from 'react-top-loading-bar';
 import MetaData from '../layout/MetaData';
 
 import './ReturnList.css';
@@ -15,6 +16,10 @@ const ReturnList = () => {
 
     const { loading, error, returns } = useSelector(state => state.allReturns);
 
+    const [progress, setProgress] = useState(0);
+
+    const onLoaderFinished = () => setProgress(0);
+
     const columns = [
         { field: 'id', headerName: 'Return ID', minWidth: 150, flex: 0.4 },
         {
@@ -134,13 +139,19 @@ const ReturnList = () => {
         }
 
         dispatch(allReturns());
+        setProgress(100);
+        setTimeout(() => setProgress(0), 5000);
     }, [dispatch, error]);
 
     return (
         <Fragment>
             <MetaData title='All Returns' />
             {loading ? (
-                <Loader />
+                <LoadingBar
+                    color='red'
+                    progress={progress}
+                    onLoaderFinished={onLoaderFinished}
+                />
             ) : (
                 <div className='allReturnsPage'>
                     <h1 id='returnsListHeading'>ALL RETURNS</h1>

diff --git a/frontend/src/components/Home/Home.js b/frontend/src/components/Home/Home.js
@@ -4,7 +4,8 @@ import { toast } from 'react-toastify';
 
 import { clearErrors, getProduct } from '../../actions/productAction';
 import { clearNewsletter, newsletter } from '../../actions/subscribeAction';
-import Loader from '../layout/Loader/Loader';
+// import Loader from '../layout/Loader/Loader';
+import LoadingBar from 'react-top-loading-bar';
 import MetaData from '../layout/MetaData';
 import ProductCard from './ProductCard';
 import ProductGridItem from './ProductGridItem';
@@ -15,7 +16,9 @@ const Home = () => {
     const dispatch = useDispatch();
 
     const [email, setEmail] = useState('');
+    const [progress, setProgress] = useState(0);
 
+    const onLoaderFinished = () => setProgress(0);
 
     const { loading, error, products } = useSelector(state => state.products);
     const { success: subscribeSuccess, error: subscribeError } = useSelector(state => state.subscribe);
@@ -24,6 +27,7 @@ const Home = () => {
         e.preventDefault();
         dispatch(newsletter(email));
         setEmail('');
+        setProgress(50);
     };
 
     useEffect(() => {
@@ -40,14 +44,20 @@ const Home = () => {
             toast.error(error);
             dispatch(clearErrors());
         }
+        setProgress(100);
+        setTimeout(() => setProgress(0), 5000);
 
         dispatch(getProduct());
     }, [dispatch, error, subscribeSuccess, subscribeError]);
 
     return (
         <Fragment>
             {loading ? (
-                <Loader />
+                <LoadingBar
+                    color='red'
+                    progress={progress}
+                    onLoaderFinished={onLoaderFinished}
+                />
             ) : (
                 <Fragment>
                     <MetaData title='Order Planning' />
@@ -56,9 +66,7 @@ const Home = () => {
                         <h1>
                             Welcome to <span>Order Planning!!</span>
                         </h1>
-                        <p>
-                            FIND OUR AMAZING RANGE OF PRODUCTS BELOW..
-                        </p>
+                        <p>FIND OUR AMAZING RANGE OF PRODUCTS BELOW..</p>
                     </div>
 
                     {/* <h2 className='homeHeading'>Featured Products</h2>
@@ -116,7 +124,7 @@ const Home = () => {
                             value={email}
                             onChange={e => setEmail(e.target.value)}
                         />
-                        <button className='subscribe-button' type='submit'>
+                        <button className='subscribe-button' type='submit' onClick={() => setProgress(progress + 60)}>
                             Subscribe
                         </button>
                     </form>

diff --git a/frontend/src/components/Order/MyOrders.js b/frontend/src/components/Order/MyOrders.js
@@ -1,12 +1,14 @@
+import { Typography } from '@material-ui/core';
 import { DataGrid } from '@material-ui/data-grid';
 import LaunchIcon from '@material-ui/icons/Launch';
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { Typography } from '@material-ui/core';
+// import Loader from '../layout/Loader/Loader';
+import LoadingBar from 'react-top-loading-bar';
+
 import { clearErrors, myOrders } from '../../actions/orderAction';
-import Loader from '../layout/Loader/Loader';
 import MetaData from '../layout/MetaData';
 
 import './MyOrders.css';
@@ -17,6 +19,10 @@ const MyOrders = () => {
     const { loading, error, orders } = useSelector(state => state.myOrders);
     const { user } = useSelector(state => state.user);
 
+    const [progress, setProgress] = useState(0);
+
+    const onLoaderFinished = () => setProgress(0);
+
     const columns = [
         { field: 'id', headerName: 'Order ID', minWidth: 150, flex: 0.4 }, // Extra minWidth and flex for ID
         {
@@ -69,7 +75,7 @@ const MyOrders = () => {
             renderCell: params => {
                 return (
                     <div className='actions-container'>
-                        <Link to={`/order/${params.getValue(params.id, 'id')}`}>
+                        <Link onClick={() => setProgress(progress + 80)} to={`/order/${params.getValue(params.id, 'id')}`}>
                             <LaunchIcon />
                         </Link>
                     </div>
@@ -78,8 +84,6 @@ const MyOrders = () => {
         }
     ];
 
-
-
     const rows = [];
 
     orders &&
@@ -100,13 +104,19 @@ const MyOrders = () => {
         }
 
         dispatch(myOrders());
+        setProgress(100);
+        setTimeout(() => setProgress(0), 5000);
     }, [dispatch, error]);
 
     return (
         <Fragment>
             <MetaData title={`${user.name} - Orders`} />
             {loading ? (
-                <Loader />
+                <LoadingBar
+                    color='red'
+                    progress={progress}
+                    onLoaderFinished={onLoaderFinished}
+                />
             ) : (
                 <div className='myOrdersPage'>
                     <h1 id='orderListHeading'>MY ORDERS</h1>

diff --git a/frontend/src/components/Order/OrderDetails.js b/frontend/src/components/Order/OrderDetails.js
@@ -22,7 +22,8 @@ import {
     Select,
     Typography
 } from '@material-ui/core';
-import Loader from '../layout/Loader/Loader';
+// import Loader from '../layout/Loader/Loader';
+import LoadingBar from 'react-top-loading-bar';
 import MetaData from '../layout/MetaData';
 
 import './OrderDetails.css';
@@ -36,6 +37,9 @@ const OrderDetails = () => {
     const [openDialog, setOpenDialog] = useState(false);
     const [selectedOrder, setSelectedOrder] = useState(null);
     const [selectedReturnReason, setSelectedReturnReason] = useState('');
+    const [progress, setProgress] = useState(0);
+
+    const onLoaderFinished = () => setProgress(0);
 
     const returnReasons = [
         'Defective Product',
@@ -61,6 +65,7 @@ const OrderDetails = () => {
             toast.success('Return request submitted successfully');
             handleCloseDialog();
         }
+        setProgress(progress + 80);
     };
 
     const handleOpenDialog = order => {
@@ -80,12 +85,18 @@ const OrderDetails = () => {
         }
 
         dispatch(getOrderDetails(id));
+        setProgress(100);
+        setTimeout(() => setProgress(0), 5000);
     }, [dispatch, error, id]);
 
     return (
         <Fragment>
             {loading ? (
-                <Loader />
+                <LoadingBar
+                    color='red'
+                    progress={progress}
+                    onLoaderFinished={onLoaderFinished}
+                />
             ) : (
                 <Fragment>
                     <MetaData title='Order Details' />