Implementing a slim progress bar at the top of the header using nprogress npm package

pramit-marattha · pramit-marattha · commit 4d78c7a33d82 · 2021-01-14T20:03:27.000+05:45
diff --git a/README.md b/README.md
@@ -34,5 +34,7 @@ Entire commit History
 | 760da6143c39aee8559bde8c84baa3ce7b5ff644 | Adding dashboard link for both admin and user in navigation header |
 | c9686aaedffc1a924ddebd3b55f32bc8bc86ba8e | creating categorySchema model and category controller in the backend |
 | ea2010997bb0e6fab23d902773e34c0851a104fe | Handling errors and avoiding duplicate category |
+| 76bc2bdb0594c674d8f5d43aeea817f5516d6944 | creating,listing,reading and deleting category |
+| 844d59771007e67414d916364910afc30b89f16f | creating tagSchema model and tag controller and handling errors and avoiding duplicate tag in the backend |
 
 ```
diff --git a/client/components/Header.js b/client/components/Header.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Link from "next/link";
 import {APP_NAME} from "../config.js";
+import NProgress from "nprogress";
 import {logout,isAuthenticated} from "../actions/authentication.js";
 import Router from "next/router";
 import {
@@ -18,6 +19,10 @@ import {
   NavbarText
 } from 'reactstrap';
 
+Router.onRouteChangeStart = url => NProgress.start();
+Router.onRouteChangeComplete = url => NProgress.done();
+Router.onRouteChangeError = url => NProgress.done();
+
 const Header = (props) => {
   const [isOpen, setIsOpen] = useState(false);
 
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -14,6 +14,7 @@
     "isomorphic-fetch": "^3.0.0",
     "js-cookie": "^2.2.1",
     "next": "^10.0.5",
+    "nprogress": "^0.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "reactstrap": "^8.8.1"
diff --git a/client/pages/_document.js b/client/pages/_document.js
@@ -11,6 +11,9 @@ class MyDocument extends Document {
            href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" 
            integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" 
            crossOrigin="anonymous" />
+           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" 
+           integrity="sha512-42kB9yDlYiCEfx2xVwq0q7hT4uf26FUgSIZBK8uiaEnTdShXjwr8Ip1V4xGJMg3mHkUt9nNuTDxunHF0/EgxLQ==" 
+           crossorigin="anonymous" />
         </Head>
         <body>
           <Main />
