ADD : pagination in news app

prayag1740 · Oct 15, 2022 · edf4255 · edf4255
1 parent 2b3f605
commit edf4255
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 11 deletions.
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -1,25 +1,23 @@
-import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 export class NavBar extends Component {
-  static propTypes = {}
 
   render() {
     return (
       <div>
-        <nav className="navbar navbar-expand-lg bg-light">
+<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
   <div className="container-fluid">
-    <a className="navbar-brand" href="#">NewsMonkey</a>
+    <a className="navbar-brand" href="/">NewsMonkey</a>
     <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span className="navbar-toggler-icon"></span>
     </button>
     <div className="collapse navbar-collapse" id="navbarSupportedContent">
       <ul className="navbar-nav me-auto mb-2 mb-lg-0">
         <li className="nav-item">
-          <a className="nav-link active" aria-current="page" href="#">Home</a>
+          <a className="nav-link active" aria-current="page" href="/home">Home</a>
         </li>
         <li className="nav-item">
-          <a className="nav-link" href="#">About</a>
+          <a className="nav-link" href="/about">About</a>
         </li>
       </ul>
     </div>

diff --git a/src/components/News.js b/src/components/News.js
@@ -1,22 +1,46 @@
 import React, { Component } from 'react'
 import NewsItem from './NewsItem'
 
+const pageSize = 10
 export class News extends Component {
 
     constructor() {
         super();
         this.state = {
             articles: [],
-            loading: false
+            loading: false,
+            page: 1,
+            total_results: 0
         }
     }
 
     //Lifecycle method run after render method is called ; used for loading of data
-    async componentDidMount() {
-        let url = "https://newsapi.org/v2/everything?q=india&from=2022-09-14&sortBy=publishedAt&apiKey=7d248d9c8ea64fa6a4691432a30a74ac"
+    componentDidMount() {
+        this.fetchNewsData(1) //intially fetch data for 1st page
+    }
+
+    handleNextClick = () => {
+        this.setState({page: this.state.page + 1})
+        console.log(this.state.page)
+        this.fetchNewsData(this.state.page+1)
+    }
+
+    handlePrevClick = () => {
+        this.setState({page: this.state.page - 1})
+        console.log(this.state.page)
+        this.fetchNewsData(this.state.page-1)
+    }
+
+    async fetchNewsData(page){
+        let url = `https://newsapi.org/v2/everything?q=india&from=2022-09-14&sortBy=publishedAt&apiKey=7d248d9c8ea64fa6a4691432a30a74ac&pageSize=${pageSize}&page=` + page 
         let data = await fetch(url) ;
+        console.log(data)
         let parsedData = await data.json()
-        this.setState({articles: parsedData.articles})
+        this.setState({articles: parsedData.articles, total_results: parsedData.totalResults})
+    }
+
+    showNextButton() {
+        return this.state.page + 1 > Math.ceil(this.state.total_results/pageSize)
     }
 
   render() {
@@ -31,6 +55,10 @@ export class News extends Component {
                 </div> 
             })}
       </div>
+      <div className='container d-flex justify-content-between'>
+      <button disabled={this.state.page <=1} type="button" className="btn btn-dark" onClick={this.handlePrevClick}> &larr; Previous</button>
+      <button disabled={this.showNextButton()} type="button" className="btn btn-dark" onClick={this.handleNextClick}>Next &rarr; </button>
+      </div>
       </div>
     )
   }

diff --git a/src/components/NewsItem.js b/src/components/NewsItem.js
@@ -13,7 +13,7 @@ export class NewsItem extends Component {
         <div className="card-body">
           <h5 className="card-title">{title}</h5>
           <p className="card-text">{description}</p>
-          <a href={newsUrl} target='_blank' className="btn btn-sm btn-primary">Read More</a>
+          <a href={newsUrl} rel="noreferrer"  target='_blank' className="btn btn-sm btn-primary">Read More</a>
         </div>
       </div>
       </div>