ADD : news articles from NEWS api

prayag1740 · Oct 14, 2022 · 2b3f605 · 2b3f605
1 parent 0000918
commit 2b3f605
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/src/components/News.js b/src/components/News.js
@@ -2,14 +2,35 @@ import React, { Component } from 'react'
 import NewsItem from './NewsItem'
 
 export class News extends Component {
+
+    constructor() {
+        super();
+        this.state = {
+            articles: [],
+            loading: false
+        }
+    }
+
+    //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"
+        let data = await fetch(url) ;
+        let parsedData = await data.json()
+        this.setState({articles: parsedData.articles})
+    }
+
   render() {
     return (
-      <div>This is a news component
-         <NewsItem/>
-         <NewsItem/>
-         <NewsItem/>
-         <NewsItem/>
-         <NewsItem/>
+      <div className='container my-3'>
+        <h2> NewsMonkey -- Top Headlines</h2>
+        <div className='row'>
+            {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}/>
+                </div> 
+            })}
+      </div>
       </div>
     )
   }

diff --git a/src/components/NewsItem.js b/src/components/NewsItem.js
@@ -1,10 +1,21 @@
 import React, { Component } from 'react'
 
 export class NewsItem extends Component {
+
   render() {
+    let {title, description, imageUrl, newsUrl} = this.props ;
+    let defaultImage = 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.ctfassets.net%2Flh3zuq09vnm2%2F1ENjVxhiWtm7LCwLFhgiW9%2F3132b27acddbfab3131686ea80310fdc%2Fconducting-usability-test_yon4BQT.svg&imgrefurl=https%3A%2F%2Fwww.hotjar.com%2Fusability-testing%2Fprocess-examples%2F&tbnid=RfcanOTfNU2P-M&vet=12ahUKEwiM5J27-d_6AhVDi9gFHXu4BqUQMygCegUIARDeAQ..i&docid=ipEmDD0rz65fGM&w=800&h=534&q=test&hl=en&ved=2ahUKEwiM5J27-d_6AhVDi9gFHXu4BqUQMygCegUIARDeAQ'
+
     return (
-      <div>
-        This is a news item
+        <div className='my-3'>
+        <div className="card" style={{width: "18rem"}}>
+        <img src={!imageUrl ? defaultImage : imageUrl} className="card-img-top" alt="..." />
+        <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>
+        </div>
+      </div>
       </div>
     )
   }