ADD : new news components categories

prayag1740 · Oct 16, 2022 · 5885e11 · 5885e11
1 parent 1f69ac3
commit 5885e11
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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> 
             })}