From 4951fa55f7812712193a6ed67f50afc0b5db9a5f Mon Sep 17 00:00:00 2001
From: Prayag Bhatia <prayag.bhatia2015@vit.ac.in>
Date: Thu, 20 Oct 2022 08:34:18 +0530
Subject: [PATCH] ADD : top loader

---
 package-lock.json      | 18 ++++++++++++++++++
 package.json           |  1 +
 src/App.js             | 32 +++++++++++++++++++++++---------
 src/components/News.js |  4 ++++
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 37be403..61d0e10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "react-infinite-scroll-component": "^6.1.0",
         "react-router-dom": "^6.4.2",
         "react-scripts": "5.0.1",
+        "react-top-loading-bar": "^2.3.1",
         "web-vitals": "^2.1.4"
       }
     },
@@ -14123,6 +14124,17 @@
         }
       }
     },
+    "node_modules/react-top-loading-bar": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/react-top-loading-bar/-/react-top-loading-bar-2.3.1.tgz",
+      "integrity": "sha512-rQk2Nm+TOBrM1C4E3e6KwT65iXyRSgBHjCkr2FNja1S51WaPulRA5nKj/xazuQ3x89wDDdGsrqkqy0RBIfd0xg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -26768,6 +26780,12 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-top-loading-bar": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/react-top-loading-bar/-/react-top-loading-bar-2.3.1.tgz",
+      "integrity": "sha512-rQk2Nm+TOBrM1C4E3e6KwT65iXyRSgBHjCkr2FNja1S51WaPulRA5nKj/xazuQ3x89wDDdGsrqkqy0RBIfd0xg==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 28b3872..c238daf 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "react-top-loading-bar": "^2.3.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index 552e4ea..67d60af 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,8 @@ import './App.css';
 import React, { Component } from 'react'
 import NavBar from './components/NavBar';
 import News from './components/News';
+import LoadingBar from 'react-top-loading-bar'
+
 
 import {
   BrowserRouter as Router,
@@ -12,21 +14,33 @@ import {
 
 
 export default class App extends Component {
-  pageSize = 8
+  pageSize = 8 ;
+
+  state = {progress: 0}
+
+  setProgress = (progress) => {
+    this.setState({progress: progress})
+  }
+
   render() {
     return (
       <div>
         <Router>
         <NavBar />
+        <LoadingBar
+        color='#f11946'
+        progress={this.state.progress}
+        onLoaderFinished={() => this.setProgress(0)}
+      />
         <Routes>
-        <Route exact path='/' element={<News key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
-          <Route exact path='/home' element={<News key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
-          <Route exact path='/business' element={<News key="business" pageSize={this.pageSize} country={'in'} category={'business'} />}></Route>
-          <Route exact path='/entertainment' element={<News key="entertainment" pageSize={this.pageSize} country={'in'} category={'entertainment'} />}></Route>
-          <Route exact path='/health' element={<News key="health" pageSize={this.pageSize} country={'in'} category={'health'} />} ></Route>
-          <Route exact path='/science' element={<News key="science" pageSize={this.pageSize} country={'in'} category={'science'} />}></Route>
-          <Route exact path='/sports' element={<News key='sports' pageSize={this.pageSize} country={'in'} category={'sports'} />}></Route>
-          <Route exact path='/technology' element={<News key='technology' pageSize={this.pageSize} country={'in'} category={'technology'} />}></Route>
+        <Route exact path='/' element={<News setProgress={this.setProgress} key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
+          <Route exact path='/home' element={<News setProgress={this.setProgress} key="general" pageSize={this.pageSize} country={'in'} category={'general'} />}></Route> 
+          <Route exact path='/business' element={<News setProgress={this.setProgress} key="business" pageSize={this.pageSize} country={'in'} category={'business'} />}></Route>
+          <Route exact path='/entertainment' element={<News setProgress={this.setProgress} key="entertainment" pageSize={this.pageSize} country={'in'} category={'entertainment'} />}></Route>
+          <Route exact path='/health' element={<News setProgress={this.setProgress} key="health" pageSize={this.pageSize} country={'in'} category={'health'} />} ></Route>
+          <Route exact path='/science' element={<News setProgress={this.setProgress} key="science" pageSize={this.pageSize} country={'in'} category={'science'} />}></Route>
+          <Route exact path='/sports' element={<News setProgress={this.setProgress} key='sports' pageSize={this.pageSize} country={'in'} category={'sports'} />}></Route>
+          <Route exact path='/technology' element={<News setProgress={this.setProgress} key='technology' pageSize={this.pageSize} country={'in'} category={'technology'} />}></Route>
         </Routes>
         </Router>
       </div>
diff --git a/src/components/News.js b/src/components/News.js
index d58510e..ea1e001 100644
--- a/src/components/News.js
+++ b/src/components/News.js
@@ -51,6 +51,7 @@ export class News extends Component {
     };
 
     async fetchNewsData(page) {
+        this.props.setProgress(10) ;
         let todayDate = this.getCurrentDate();
         const url =
             `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&from=${todayDate}&sortBy=publishedAt&apiKey=7d248d9c8ea64fa6a4691432a30a74ac&pageSize=${this.props.pageSize}&page=` +
@@ -58,13 +59,16 @@ export class News extends Component {
         console.log(url);
         this.setState({ loading: true });
         let data = await fetch(url);
+        this.props.setProgress(30) ;
         let parsedData = await data.json();
+        this.props.setProgress(70) ;
         console.log(parsedData);
         this.setState({ loading: false });
         this.setState({
             articles: parsedData.articles,
             total_results: parsedData.totalResults,
         });
+        this.props.setProgress(100) ;
     }
 
     showNextButton() {