News App using React

// App.js
import React from "react";
import NavBar2 from "./Components/NavBar2";
import NavBar1 from "./Components/NavBar1";
import News from "./Components/News";
import { BrowserRouter, Route, Routes } 
	from "react-router-dom";

function App() {
	return (
		<>
			<div className="App">
				<BrowserRouter>
					<NavBar1 />
					<NavBar2 />

					<div className="container">
						<div className="row">
							<div className="col-md">
								<Routes>
									<Route
										path="/"
										element={
											<News key="general"
											category="general" />}
									/>
									<Route
										path="/Entertainment"
										element={
											<News key="entertainment"
											category="entertainment" />
										}
									/>
									<Route
										path="/Technology"
										element={
											<News key="technology"
											category="technology" />}
									/>
									<Route
										path="/Sports"
										element={
											<News key="sports"
											category="sports" />}
									/>
									<Route
										path="/Business"
										element={
											<News key="business"
											category="business" />}
									/>
									<Route
										path="/Health"
										element={
											<News key="health"
											category="health" />}
									/>
									<Route
										path="/Science"
										element={
											<News key="science"
											category="science" />}
									/>
								</Routes>
							</div>
						</div>
					</div>
				</BrowserRouter>
			</div>
		</>
	);
}

export default App;

// Components/NavBar1.js
import React from "react";

function NavBar1() {
	return (
		<div>
			<nav className="navbar navbar-dark bg-dark">
				<div className="container-fluid">
					<a className="navbar-brand " href="/">
						News Geek
					</a>
				</div>
			</nav>
		</div>
	);
}

export default NavBar1;

// Components/NavBar2.js

import React from "react";
import { Link } from "react-router-dom";

function NavBar2() {
	return (
		<div>
			<nav className="navbar navbar-expand-lg 
				bg-body-tertiary">
				<div className="container-fluid ">
					<button
						className="navbar-toggler"
						type="button"
						data-bs-toggle="collapse"
						data-bs-target="#navbarNav"
						aria-controls="navbarNav"
						aria-expanded="false"
						aria-label="Toggle navigation"
					>
						<span className="navbar-toggler-icon"></span>
					</button>
					<div className="collapse navbar-collapse"
						id="navbarNav">
						<ul className="navbar-nav">
							<li className="nav-item">
								<Link className="nav-link active"
									aria-current="page" to={`/`}>
									Home
								</Link>
							</li>
							<li className="nav-item">
								<Link className="nav-link" to={`/Entertainment`}>
									Entertainment
								</Link>
							</li>
							<li className="nav-item">
								<Link className="nav-link" to={`/Technology`}>
									Technology
								</Link>
							</li>
							<li className="nav-item">
								<Link className="nav-link" to={`/Sports`}>
									Sports
								</Link>
							</li>
							<li className="nav-item">
								<Link className="nav-link" to={`/Business`}>
									Business
								</Link>
							</li>
							<li className="nav-item">
								<Link className="nav-link" to={`/Health`}>
									Health
								</Link>
							</li>
							<li className="nav-item">
								<Link className="nav-link" to={`/Science`}>
									Science
								</Link>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	);
}

export default NavBar2;

// Components/News.js

import { React, useState, useEffect } from "react";
import NewsItem from "./NewsItem";
import Image from "../Images/News1.jpg";
import InfiniteScroll
	from "react-infinite-scroll-component";

function News(props) {
	let category = props.category;
	let [articles, setArticles] = useState([]);
	let [totalResults, setTotalResults] = useState(0);
	let [page, setPage] = useState(1);

	let resultNews = async () => {
		const url =
`https://newsapi.org/v2/top-headlines?country=in&category=${category}&page=${page}&apiKey=ecfaf9eaaa8d40a5b5d769210f5ee616`;
		let data = await fetch(url);
		let parsedData = await data.json();
		setArticles(parsedData.articles);
		setTotalResults(parsedData.totalResults);
	};

	useEffect(() => {
		resultNews();
	}, []);

	let fetchData = async () => {
		const url =
`https://newsapi.org/v2/top-headlines?country=in&category=${category}&page=${page + 1
			}&apiKey=ecfaf9eaaa8d40a5b5d769210f5ee616`;
		setPage(page + 1);
		let data = await fetch(url);
		let parsedData = await data.json();
		setArticles(articles.concat(parsedData.articles));
	};

	return (
		<InfiniteScroll
			//This is important field to render the next data
			dataLength={articles.length}
			next={fetchData}
			hasMore={
				articles.length < totalResults
			}
			loader={
				<h4 className="text-center">
					Loading...
				</h4>}
			endMessage={
				<p style={{ textAlign: "center" }}>
					<b>Yay! You have seen it all</b>
				</p>
			}
		>
			<div className="container my-3">
				<div className="row">
					{articles.map((element) => {
						return (
							<div className="col-md-4" key={element.url}>
								<NewsItem
									sourceName={element.source.name}
									title={element.title}
									desc={element.description}
									imageURL=
									{element.urlToImage ?
										element.urlToImage :
										Image}
									newsUrl={element.url}
								/>
							</div>
						);
					})}
				</div>
			</div>
		</InfiniteScroll>
	);
}

export default News;

// Components/NewsItem.js

import React from "react";

function NewsItem(props) {
	let {
		desc, title, imageURL,
		newsUrl, sourceName
	} = props;
	return (
		<div>
			<div className="card my-3">
				<img src={imageURL}
					className="card-img-top" alt="..." />
				<div className="card-body">
					<h5 className="card-title">{title}</h5>
					<p className="w-100 fs-6 
						text-body-secondary 
						text-end">
						- {sourceName}
					</p>
					<p className="card-text">{desc}</p>
					<a href={newsUrl}
						target="_blank"
						className="btn btn-primary btn-sm">
						Read More...
					</a>
				</div>
			</div>
		</div>
	);
}

export default NewsItem;