From 5885e1185c4b274a65ae1f8439dfb54fe2c590f1 Mon Sep 17 00:00:00 2001
From: Prayag Bhatia <prayag.bhatia2015@vit.ac.in>
Date: Sun, 16 Oct 2022 13:02:53 +0530
Subject: [PATCH] ADD : new news components categories

---
 src/App.js               |  2 +-
 src/components/NavBar.js | 11 ++++++++---
 src/components/News.js   | 23 ++++++++++++++++++++---
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3394764..ca924a0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,7 @@ export default class App extends Component {
     return (
       <div>
         <NavBar />
-        <News pageSize={5} />
+        <News pageSize={8} country={'in'} />
       </div>
     )
   }
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index f847ac6..107a310 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -16,9 +16,14 @@ export class NavBar extends Component {
         <li className="nav-item">
           <a className="nav-link active" aria-current="page" href="/home">Home</a>
         </li>
-        <li className="nav-item">
-          <a className="nav-link" href="/about">About</a>
-        </li>
+        <li className="nav-item"><a className="nav-link" href="/about">About</a></li>
+        <li className="nav-item"><a className="nav-link" href="/business">Business</a></li>
+        <li className="nav-item"><a className="nav-link" href="/entertainment">Entertainment</a></li>
+        <li className="nav-item"><a className="nav-link" href="/general">General</a></li>
+        <li className="nav-item"><a className="nav-link" href="/health">Health</a></li>
+        <li className="nav-item"><a className="nav-link" href="/science">Science</a></li>
+        <li className="nav-item"><a className="nav-link" href="/sports">Sports</a></li>
+        <li className="nav-item"><a className="nav-link" href="/technology">Technology</a></li>
       </ul>
     </div>
   </div>
diff --git a/src/components/News.js b/src/components/News.js
index 2e23e87..90f22da 100644
--- a/src/components/News.js
+++ b/src/components/News.js
@@ -1,9 +1,24 @@
 import React, { Component } from 'react'
 import NewsItem from './NewsItem'
 import Spinner from './Spinner';
+import PropTypes from 'prop-types'
 
 export class News extends Component {
 
+    static defaultProps = {
+        country : 'in',
+        pageSize : 8,
+        category : 'science'
+    }
+
+    static propTypes = {
+        country : PropTypes.string,
+        pageSize : PropTypes.number,
+        category : PropTypes.string
+
+    }
+
+
     constructor() {
         super();
         this.state = {
@@ -33,10 +48,12 @@ export class News extends Component {
 
     async fetchNewsData(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
+        let 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=` + page
+        console.log(url)
         this.setState({loading: true}) 
         let data = await fetch(url) ;
         let parsedData = await data.json()
+        console.log(parsedData)
         this.setState({loading: false})
         this.setState({articles: parsedData.articles, total_results: parsedData.totalResults})
     }
@@ -59,11 +76,11 @@ export class News extends Component {
     return (
       <div className='container my-3'>
         {this.state.loading && <Spinner/>}
-        <h1 className='text-center'> NewsMonkey -- Top Headlines</h1>
+        <h1 className='text-center' style={{margin: '35px 0px'}}> NewsMonkey -- Top Headlines</h1>
         <div className='row'>
             {!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)}
+                   <NewsItem title={element.title.slice(0,45)} description={element.description}
                     imageUrl={element.urlToImage} newsUrl={element.url}/>
                 </div> 
             })}