ADD : custom date & loader added

src/App.js

@@ -9,7 +9,7 @@ export default class App extends Component {
     return (
       <div>
         <NavBar />
-        <News />
+        <News pageSize={5} />
       </div>
     )
   }

src/components/News.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import NewsItem from './NewsItem'
+import Spinner from './Spinner';
 
-const pageSize = 10
 export class News extends Component {
 
     constructor() {
@@ -32,23 +32,36 @@ export class News extends Component {
     }
 
     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 todayDate = this.getCurrentDate()
+        let url = `https://newsapi.org/v2/everything?q=india&from=${todayDate}&sortBy=publishedAt&apiKey=7d248d9c8ea64fa6a4691432a30a74ac&pageSize=${this.props.pageSize}&page=` + page
+        this.setState({loading: true}) 
         let data = await fetch(url) ;
-        console.log(data)
         let parsedData = await data.json()
+        this.setState({loading: false})
         this.setState({articles: parsedData.articles, total_results: parsedData.totalResults})
     }
 
     showNextButton() {
-        return this.state.page + 1 > Math.ceil(this.state.total_results/pageSize)
+        return this.state.page + 1 > Math.ceil(this.state.total_results/this.props.pageSize)
+    }
+
+    getCurrentDate() {
+        var today = new Date();
+        var dd = String(today.getDate()).padStart(2, '0');
+        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+        var yyyy = today.getFullYear();
+
+        today = yyyy + '-' + mm + '-' + dd;
+        return today
     }
 
   render() {
     return (
       <div className='container my-3'>
-        <h2> NewsMonkey -- Top Headlines</h2>
+        {this.state.loading && <Spinner/>}
+        <h1 className='text-center'> NewsMonkey -- Top Headlines</h1>
         <div className='row'>
-            {this.state.articles.map((element) => {
+            {!this.state.loading && this.state.articles.map((element) => {
                 return <div className='col md-4' key={element.url}>
                    <NewsItem title={element.title.slice(0,45)} description={element.description.slice(0,88)}
                     imageUrl={element.urlToImage} newsUrl={element.url}/>

src/components/Spinner.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import loading from './loading.gif'
+
+export default function Spinner() {
+  return (
+        <div className='text-center'>
+            <img src={loading} alt="Loading" />        
+        </div>
+  )
+}