import { useAppDispatch, useAppSelector } from "app/hooks"; import { homeSelector } from "app/selectors"; import WrapperContainer from "components/WrapperContainer"; import React, { useEffect, useState } from "react"; import Newspaper from "../../components/Newspaper"; import { getNews, handleResetNews } from "./homePageSlice"; import { IPagination } from "pages/interface"; import { useInView } from "react-intersection-observer"; import { CircularProgress } from "@mui/material"; const HomePage = () => { const dispatch = useAppDispatch(); const { newsData, currentPage } = useAppSelector(homeSelector); const { ref, inView } = useInView({ threshold: 0.7, initialInView: false, delay: 100, }); const [page, setPage] = useState<number>(1); const [isLocalLoading, setIsLocalLoading] = useState<boolean>(false); useEffect(() => { try { if (page > currentPage) { setIsLocalLoading(true); setTimeout(() => { const newsParams: IPagination = { Filters: "", Sorts: "", Page: page, PageSize: 10, }; const fetchData = async () => { const res: any = await dispatch(getNews(newsParams)).unwrap(); if (res.data.collection.length === 0) { setPage((page) => page - 1); } }; fetchData(); setIsLocalLoading(false); }, 1000); } } catch (err) { console.error("ERROR: ", err); setIsLocalLoading(false); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [page]); useEffect(() => { if (inView) { setPage((page) => page + 1); } }, [inView]); useEffect(() => { dispatch(handleResetNews()); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <main className="homePage"> <WrapperContainer> <div className="homePage-title"> <h1>Tin mới nhất</h1> </div> <div className="homePage-list row"> {newsData.map((newspaper, idx) => ( <div className={`${idx === 0 ? "col-12" : "col-lg-4 col-sm-6 col-12"}`} key={newspaper.id} > <Newspaper data={newspaper} firstNews={idx === 0} /> </div> ))} </div> {newsData.length > 0 && ( <div className="homePage-load d-flex justify-content-center" ref={ref} > {isLocalLoading && <CircularProgress />} </div> )} </WrapperContainer> </main> ); }; export default HomePage;