Commit 2a97d85c authored by Ken's avatar Ken

fix some bug

parent d2ad01e1
...@@ -2,9 +2,14 @@ import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"; ...@@ -2,9 +2,14 @@ import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
import newsApi from "api/newsApi"; import newsApi from "api/newsApi";
import { INewspaper, IPagination } from "pages/interface"; import { INewspaper, IPagination } from "pages/interface";
const initialState: { newsData: INewspaper[]; currentPage: number } = { const initialState: {
newsData: INewspaper[];
currentPage: number;
isMaxPage: boolean;
} = {
newsData: [], newsData: [],
currentPage: 0, currentPage: 1,
isMaxPage: false,
}; };
export const getNews = createAsyncThunk( export const getNews = createAsyncThunk(
...@@ -22,8 +27,11 @@ const home = createSlice({ ...@@ -22,8 +27,11 @@ const home = createSlice({
handleResetNews: (state) => { handleResetNews: (state) => {
return initialState; return initialState;
}, },
loadPages: (state) => { handlePage: (state, action) => {
state.currentPage++; state.currentPage += action.payload;
},
handleMaxPage: (state) => {
state.isMaxPage = true;
}, },
}, },
extraReducers: (builder) => { extraReducers: (builder) => {
...@@ -31,7 +39,6 @@ const home = createSlice({ ...@@ -31,7 +39,6 @@ const home = createSlice({
const { collection } = action.payload.data; const { collection } = action.payload.data;
if (collection.length > 0) { if (collection.length > 0) {
state.currentPage++;
state.newsData = [...state.newsData, ...collection]; state.newsData = [...state.newsData, ...collection];
} }
}); });
...@@ -39,5 +46,5 @@ const home = createSlice({ ...@@ -39,5 +46,5 @@ const home = createSlice({
}); });
const { reducer, actions } = home; const { reducer, actions } = home;
export const { handleResetNews, loadPages } = actions; export const { handleResetNews, handlePage, handleMaxPage } = actions;
export default reducer; export default reducer;
...@@ -3,38 +3,42 @@ import { homeSelector } from "app/selectors"; ...@@ -3,38 +3,42 @@ import { homeSelector } from "app/selectors";
import WrapperContainer from "components/WrapperContainer"; import WrapperContainer from "components/WrapperContainer";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Newspaper from "../../components/Newspaper"; import Newspaper from "../../components/Newspaper";
import { getNews, handleResetNews } from "./homePageSlice"; import {
getNews,
handleMaxPage,
handlePage,
handleResetNews,
} from "./homePageSlice";
import { IPagination } from "pages/interface"; import { IPagination } from "pages/interface";
import { useInView } from "react-intersection-observer"; import { useInView } from "react-intersection-observer";
import { CircularProgress } from "@mui/material"; import { CircularProgress } from "@mui/material";
const HomePage = () => { const HomePage = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { newsData, currentPage } = useAppSelector(homeSelector); const { newsData, currentPage, isMaxPage } = useAppSelector(homeSelector);
const { ref, inView } = useInView({ const { ref, inView } = useInView({
threshold: 0.7, threshold: 0.7,
initialInView: false, initialInView: false,
delay: 100, delay: 100,
}); });
const [page, setPage] = useState<number>(1);
const [isLocalLoading, setIsLocalLoading] = useState<boolean>(false); const [isLocalLoading, setIsLocalLoading] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
try { try {
if (page > currentPage) { if (!isMaxPage) {
setIsLocalLoading(true); setIsLocalLoading(true);
setTimeout(() => { setTimeout(() => {
const newsParams: IPagination = { const newsParams: IPagination = {
Filters: "", Filters: "",
Sorts: "", Sorts: "",
Page: page, Page: currentPage,
PageSize: 10, PageSize: 10,
}; };
const fetchData = async () => { const fetchData = async () => {
const res: any = await dispatch(getNews(newsParams)).unwrap(); const res: any = await dispatch(getNews(newsParams)).unwrap();
if (res.data.collection.length === 0) { if (res.data.collection.length === 0) {
setPage((page) => page - 1); dispatch(handleMaxPage());
} }
}; };
...@@ -48,13 +52,14 @@ const HomePage = () => { ...@@ -48,13 +52,14 @@ const HomePage = () => {
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [page]); }, [currentPage]);
useEffect(() => { useEffect(() => {
if (inView) { if (inView && !isMaxPage) {
setPage((page) => page + 1); dispatch(handlePage(1));
} }
}, [inView]); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [inView, isMaxPage]);
useEffect(() => { useEffect(() => {
dispatch(handleResetNews()); dispatch(handleResetNews());
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment