Skip to content

Commit 303e784

Browse files
HaritscodeHaritscode
committedFeb 6, 2022
This app is about news
1 parent d947931 commit 303e784

File tree

10 files changed

+28482
-14398
lines changed

10 files changed

+28482
-14398
lines changed
 

‎package-lock.json

+17,428-14,380
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
"@testing-library/user-event": "^13.5.0",
99
"react": "^17.0.2",
1010
"react-dom": "^17.0.2",
11-
"react-scripts": "5.0.0",
11+
"react-infinite-scroll-component": "^6.1.0",
12+
"react-router-dom": "^6.2.1",
13+
"react-scripts": "^3.0.1",
14+
"react-top-loading-bar": "^2.1.0",
1215
"web-vitals": "^2.1.3"
1316
},
1417
"scripts": {

‎public/index.html

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
89
<meta
910
name="description"
1011
content="Web site created using create-react-app"
@@ -29,6 +30,7 @@
2930
<body>
3031
<noscript>You need to enable JavaScript to run this app.</noscript>
3132
<div id="root"></div>
33+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
3234
<!--
3335
This HTML file is a template.
3436
If you open it directly in the browser, you will see an empty page.

‎src/App.js

+39-17
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,46 @@
1-
import logo from './logo.svg';
21
import './App.css';
2+
import Navbars from './Components/Navbars';
3+
import News from './Components/News';
4+
import React from 'react';
5+
import {BrowserRouter as Router, Routes, Route } from "react-router-dom";
6+
import LoadingBar from 'react-top-loading-bar'
7+
import { useState } from 'react';
8+
39

410
function App() {
11+
const [progress, setprogress] = useState(0);
12+
let page=20;
13+
// let apikey='650f6718c3d644388b93d3f67b3f30d1';
14+
let apikey=process.env.REACT_APP_NEWS_API
15+
let setProgress=(progress)=>{setprogress(progress)
16+
// console.log(progress)
17+
}
518
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
19+
<Router>
20+
<Navbars/>
21+
<LoadingBar
22+
color='#f11946'
23+
progress={progress}
24+
// onLoaderFinished={() => setProgress(0)}
25+
/>
26+
<Routes>
27+
<Route exact path="/" element={<News setProgress={setProgress} key="general" pages={page} country="in" category="general" apikey={apikey}/>}/>
28+
29+
<Route exact path="/business" element={<News setProgress={setProgress} key="business" pages={page} country="in" category="business" apikey={apikey} />}/>
30+
31+
<Route exact path="/entertainment" element={<News setProgress={setProgress} key="entertainment" pages={page} country="in" category="entertainment" apikey={apikey}/>}/>
32+
33+
<Route exact path="/general" element={<News setProgress={setProgress} key="general" pages={page} country="in" category="general" apikey={apikey}/>} />
34+
35+
<Route exact path="/health" element={<News setProgress={setProgress} key="health" pages={page} country="in" category="health" apikey={apikey}/>} />
36+
37+
<Route exact path="/science" element={<News setProgress={setProgress} key="science" pages={page} country="in" category="science" apikey={apikey}/>} />
38+
39+
<Route exact path="/sports" element={<News setProgress={setProgress} key="sports" pages={page} country="in" category="sports" apikey={apikey}/>} />
40+
41+
<Route exact path="/technology" element={<News setProgress={setProgress} key="technology" pages={page} country="in" category="technology" apikey={apikey}/>} />
42+
</Routes>
43+
</Router>
2244
);
2345
}
2446

‎src/Components/Cards.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { Component } from 'react'
2+
export default class Cards extends Component {
3+
render() {
4+
return (
5+
<div className="card mx-3 my-3 container">
6+
<div style={{display:'flex', justifyContent:'flex-end',
7+
position:'absolute',
8+
right:0}}>
9+
<span className="badge rounded-pill bg-danger">{this.props.Source}</span>
10+
</div>
11+
<img src={this.props.img} className="card-img-top" alt="..." />
12+
<div className="card-body">
13+
<h5 className="card-title">{this.props.title.slice(0,80)}....</h5>
14+
<p className="card-text">{this.props.content}</p>
15+
<p className="card-text"><small className="text-muted">by: {this.props.author?this.props.author:"UnKnown"} on {new Date(this.props.Date).toGMTString()}</small></p>
16+
<a href={this.props.link} target="_blank_" className="btn btn-primary">Read More</a>
17+
</div>
18+
</div>
19+
)
20+
}
21+
}

‎src/Components/Navbars.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { Component } from 'react'
2+
// import PropTypes from 'prop-types'
3+
import {Link} from 'react-router-dom'
4+
export default class Navbars extends Component {
5+
// static propTypes = {
6+
// prop: PropTypes
7+
// }
8+
9+
render() {
10+
return (
11+
<div>
12+
<nav className="navbar navbar-expand-dark navbar-dark bg-dark">
13+
<div className="container-fluid">
14+
<a className="navbar-brand" href="/">Navbar</a>
15+
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
16+
<span className="navbar-toggler-icon"></span>
17+
</button>
18+
<div className="collapse navbar-collapse" id="navbarSupportedContent">
19+
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
20+
<li className="nav-item">
21+
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
22+
</li>
23+
<li className="nazv-item">
24+
<Link className="nav-link" to="/">Link</Link>
25+
</li>
26+
<li className="nazv-item"><Link className="nav-link" to="/business">Business</Link></li>
27+
<li className="nazv-item"><Link className="nav-link" to="/entertainment">Entertainment</Link></li>
28+
<li className="nazv-item"><Link className="nav-link" to="/general">General</Link> </li>
29+
<li className="nazv-item"><Link className="nav-link" to="/health">Health</Link> </li>
30+
<li className="nazv-item"><Link className="nav-link" to="/science">Science</Link> </li>
31+
<li className="nazv-item"><Link className="nav-link" to="/sports">Sports</Link> </li>
32+
<li className="nazv-item"><Link className="nav-link" to="/technology">Technology</Link> </li>
33+
<li className="nav-item">
34+
<a href="/" className="nav-link disabled">Disabled</a>
35+
</li>
36+
</ul>
37+
<form className="d-flex">
38+
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
39+
<button className="btn btn-outline-success" type="submit">Search</button>
40+
</form>
41+
</div>
42+
</div>
43+
</nav>
44+
</div>
45+
)
46+
}
47+
}

‎src/Components/News.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React, { Component } from "react";
2+
import Cards from "./Cards";
3+
import Spinner from "./Spinner";
4+
import PropTypes from 'prop-types';
5+
import InfiniteScroll from "react-infinite-scroll-component";
6+
7+
8+
export default class News extends Component {
9+
10+
static defaulProps={
11+
country:'in',
12+
pageSize:8
13+
}
14+
static propTypes={
15+
country:PropTypes.string,
16+
pageSize:PropTypes.number
17+
}
18+
firstCapital=(string="entertainment")=>{
19+
let str="";
20+
str+=string.charAt(0).toUpperCase();
21+
str+=string.slice(1,string.length);
22+
return str;
23+
}
24+
constructor(props) {
25+
super(props);
26+
this.state = {
27+
content: [],
28+
page: 0,
29+
loading: true,
30+
totalcontent:0,
31+
ttlResults:0
32+
};
33+
// console.log(this.firstCapital("raju"));
34+
document.title=this.firstCapital(this.props.category)+"-NewsMonkey";
35+
}
36+
update=async()=>{
37+
this.props.setProgress(10);
38+
let Url = `https://newsapi.org/v2/top-headlines?category=${this.props.category}&country=${this.props.country}&apiKey=${this.props.apikey}
39+
&page=${this.state.page+1}&pageSize=${this.props.pages}`;
40+
this.setState({loading:true})
41+
let data = await fetch(Url);
42+
this.props.setProgress(40);
43+
let parsedata = await data.json();
44+
this.setState({ content: this.state.content.concat(parsedata.articles), page: this.state.page + 1, loading:false,totalcontent:this.state.totalcontent+parsedata.articles.length,ttlResults:parsedata.totalResults });
45+
this.props.setProgress(100);
46+
}
47+
async componentDidMount() {
48+
// this.props.setProgress(0);
49+
this.update();
50+
console.log("ComponentDidMount")
51+
}
52+
fetchMoreData = async() => {
53+
let Url = `https://newsapi.org/v2/top-headlines?category=${this.props.category}&country=${this.props.country}&apiKey=${this.props.apikey}
54+
&page=${this.state.page+1}&pageSize=${this.props.pages}`;
55+
this.setState({loading:true})
56+
let data = await fetch(Url);
57+
let parsedata = await data.json();
58+
this.setState({ content: this.state.content.concat(parsedata.articles), page: this.state.page + 1, loading:false,totalcontent:this.state.totalcontent+parsedata.articles.length,ttlResults:parsedata.totalResults });
59+
};
60+
61+
render() {
62+
return (
63+
<>
64+
<h1 className="text-center">{`${this.firstCapital(this.props.category)}- Top Headlines`}</h1>
65+
{this.state.loading && <Spinner/>}
66+
<InfiniteScroll
67+
dataLength={this.state.content.length}
68+
next={this.fetchMoreData}
69+
loader={<Spinner/>}
70+
hasMore={this.state.totalcontent!==this.state.ttlResults}>
71+
<div className="containers">
72+
<div className="row" sytle={{margin:"40px 0px"}}>
73+
{this.state.content.map((Element) => {
74+
return <div className="col-md-4" key={Element.url}>
75+
<Cards
76+
content={Element.description}
77+
img={Element.urlToImage}
78+
title={Element.title} link={Element.url} author={Element.author} Date={Element.publishedAt.slice(0,10)} Source={Element.source.name}
79+
/>
80+
</div>
81+
;
82+
})}
83+
</div>
84+
</div>
85+
</InfiniteScroll>
86+
<div className="d-flex justify-content-between">
87+
{console.log("This is simply a render function")}
88+
{/* <button
89+
type="button"
90+
disabled={this.state.totalarticles>60?true:false}
91+
className="btn btn-primary"
92+
onClick={this.Previousclick}
93+
>
94+
&larr; Prev page
95+
</button>
96+
<button disabled={this.state.totalarticles<this.props.pages?true:false}
97+
type="button"
98+
className="btn btn-primary"
99+
onClick={this.Nextclick}
100+
>
101+
Next page &rarr;
102+
</button> */}
103+
</div>
104+
</>
105+
);
106+
}
107+
}

‎src/Components/Spinner.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, { Component } from 'react';
2+
import loading from './loading (1).gif'
3+
export default class Spinner extends Component {
4+
render() {
5+
return <div className="text-center">
6+
<img src={loading} alt="loading"/>
7+
</div>;
8+
}
9+
}

‎src/Components/loading (1).gif

10.7 KB
Loading

‎yarn.lock

+10,825
Large diffs are not rendered by default.

1 commit comments

Comments
 (1)

vercel[bot] commented on May 10, 2022

@vercel[bot]
vercel[bot]
on May 10, 2022

Successfully deployed to the following URLs:

newsapp – ./

newsapp-git-main-haritsharma-prog.vercel.app
newsapp-haritsharma-prog.vercel.app
newsapp-six-lyart.vercel.app

Please sign in to comment.