text: import React, { useEffect, useState } from "react";
  import NewsItem from "./NewsItem";
  import Spinner from "./Spinner";
  import PropTypes from "prop-types";
  import InfiniteScroll from "react-infinite-scroll-component";
  
  const News = (props) => {
    const [articles, setArticles] = useState([]);
    const [loading, setLoading] = useState(true);
    const [page, setPage] = useState(1);
    const [totalResults, setTotalResults] = useState(0);
  
    const capFirsLe = (string) => {
      return string.charAt(0).toUpperCase() + string.slice(1);
    };
  
    const updateNews = async () => {
      props.setProgress(10);
  
      const url = `https://newsapi.org/v2/top-headlines?country=${props.country}&category=${props.category}&apiKey=a11efa70c87440a5b17c7adca8fe532d&page=${page}&pageSize=${props.pageSize}`;
  
      setLoading(true);
  
      let data = await fetch(url);
  
      props.setProgress(40);
  
      let parsedData = await data.json();
  
      props.setProgress(70);
  
      setArticles(parsedData.articles);
      setTotalResults(parsedData.totalResults);
  
      setLoading(false);
  
      props.setProgress(100);
    };
  
    useEffect(() => {
      document.title = `${capFirsLe(props.category)} - NewsPrime`;
      updateNews();
    }, []);
  
    // const handlePrevClick = async () => {
    //   setPage(page-1);
    //   updateNews();
    // };
  
    // handleNextClick = async () => {
    //   setPage(page+1);
    //   updateNews();
    // };
  
    const fetchMoreData = async () => {
      const url = `https://newsapi.org/v2/top-headlines?country=${
        props.country
      }&category=${props.category}&apiKey=a11efa70c87440a5b17c7adca8fe532d&page=${
        page + 1
      }&pageSize=${props.pageSize}`;
      setPage(page + 1);
      let data = await fetch(url);
      let parsedData = await data.json();
  
      setArticles(articles.concat(parsedData.articles));
      setTotalResults(parsedData.totalResults);
    };
  
    return (
      <div>
        <h1 className="text-center" style={{ marginTop: "90px" }}>
          NewsPrime - Top {capFirsLe(props.category)} Headlines
        </h1>
        {loading && <Spinner />}
        <InfiniteScroll
          dataLength={articles.length}
          next={fetchMoreData}
          hasMore={articles.length !== totalResults}
          loader={<Spinner />}
        >
          <div className="container my-4">
            <div className="row">
              {articles.map((element) => {
                return (
                  <div className="col-md-4" key={element.url}>
                    <NewsItem
                      title={
                        element.title
                          ? element.title.slice(0, 60)
                          : "Click on Read More to know about this news"
                      }
                      description={
                        element.description
                          ? element.description.slice(0, 130)
                          : "Click on Read More to know about this news"
                      }
                      imageUrl={element.urlToImage}
                      newsUrl={element.url}
                      author={element.author}
                      date={element.publishedAt}
                      source={element.source.name}
                    />
                  </div>
                );
              })}
            </div>
          </div>
        </InfiniteScroll>
  
        {/* <div className="container d-flex justify-content-between">
            <button
              disabled={page <= 1}
              type="button"
              className="btn btn-dark"
              onClick={handlePrevClick}
            >
              &larr; Previous
            </button>
            <button
              disabled={
                page >=
                Math.ceil(totalResults / props.pageSize)
              }
              type="button"
              className="btn btn-dark"
              onClick={handleNextClick}
            >
              Next &rarr;
            </button>
          </div>*/}
      </div>
    );
  };
  
  News.defaultProps = {
    country: "in",
    pageSize: 6,
    category: "general",
  };
  News.propTypes = {
    country: PropTypes.string,
    pageSize: PropTypes.number,
    category: PropTypes.string,
  };
  
  export default News;
  