enhance avoid increasing pages when no data

src/components/Newspaper/Newspaper.scss

@@ -40,7 +40,7 @@
 
       &__desc {
         line-height: 22px;
-        font-size: 14px;
+        font-size: 18px;
         color: $neutral-900;
         display: block;
       }

src/pages/home/homePageSlice.ts

@@ -2,8 +2,9 @@ import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import newsApi from "api/newsApi";
 import { INewspaper, IPagination } from "pages/interface";
 
-const initialState: { newsData: INewspaper[] } = {
+const initialState: { newsData: INewspaper[]; currentPage: number } = {
   newsData: [],
+  currentPage: 0,
 };
 
 export const getNews = createAsyncThunk(
@@ -19,17 +20,24 @@ const home = createSlice({
   initialState,
   reducers: {
     handleResetNews: (state) => {
-      state.newsData = [];
+      return initialState;
+    },
+    loadPages: (state) => {
+      state.currentPage++;
     },
   },
   extraReducers: (builder) => {
     builder.addCase(getNews.fulfilled, (state, action: PayloadAction<any>) => {
       const { collection } = action.payload.data;
-      state.newsData = [...state.newsData, ...collection];
+
+      if (collection.length > 0) {
+        state.currentPage++;
+        state.newsData = [...state.newsData, ...collection];
+      }
     });
   },
 });
 
 const { reducer, actions } = home;
-export const { handleResetNews } = actions;
+export const { handleResetNews, loadPages } = actions;
 export default reducer;

src/pages/home/index.tsx

@@ -10,7 +10,7 @@ import { CircularProgress } from "@mui/material";
 
 const HomePage = () => {
   const dispatch = useAppDispatch();
-  const { newsData } = useAppSelector(homeSelector);
+  const { newsData, currentPage } = useAppSelector(homeSelector);
   const { ref, inView } = useInView({
     threshold: 0.7,
     initialInView: false,
@@ -21,21 +21,27 @@ const HomePage = () => {
 
   useEffect(() => {
     try {
-      setIsLocalLoading(true);
-      setTimeout(() => {
-        const newsParams: IPagination = {
-          Filters: "",
-          Sorts: "",
-          Page: page,
-          PageSize: 10,
-        };
-        const fetchData = async () => {
-          await dispatch(getNews(newsParams));
-        };
+      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();
 
-        fetchData();
-        setIsLocalLoading(false);
-      }, 1000);
+            if (res.data.collection.length === 0) {
+              setPage((page) => page - 1);
+            }
+          };
+
+          fetchData();
+          setIsLocalLoading(false);
+        }, 1000);
+      }
     } catch (err) {
       console.error("ERROR: ", err);
       setIsLocalLoading(false);