diff --git a/src/hooks/useStackedFetchBase/index.ts b/src/hooks/useStackedFetchBase/index.ts index df6af170..111be977 100644 --- a/src/hooks/useStackedFetchBase/index.ts +++ b/src/hooks/useStackedFetchBase/index.ts @@ -1,6 +1,5 @@ import { to } from 'await-to-js'; import { useEffect, useReducer } from 'react'; -import { debounce } from '@src/utils/debounce'; import { reducer } from './reducer'; import { Action, State } from './types'; @@ -14,7 +13,7 @@ function useStackedFetchBase( }); useEffect(() => { - const fetchList = debounce(async () => { + const fetchList = async () => { dispatch({ _TAG: 'FETCH', isInitialFetching, @@ -32,7 +31,7 @@ function useStackedFetchBase( if (response) { dispatch({ _TAG: 'SUCCESS', isInitialFetching, data: response }); } - }); + }; fetchList(); }, [willFetch, isInitialFetching]); diff --git a/src/views/ReviewPage/hooks/useFetch.ts b/src/views/ReviewPage/hooks/useFetch.ts index f05a47f4..b2e3ab2d 100644 --- a/src/views/ReviewPage/hooks/useFetch.ts +++ b/src/views/ReviewPage/hooks/useFetch.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import useBooleanState from '@src/hooks/useBooleanState'; import useStackedFetchBase from '@src/hooks/useStackedFetchBase'; import { api } from '@src/lib/api'; @@ -6,13 +6,26 @@ import { ExtraPart } from '@src/lib/types/universal'; import useInfiniteScroll from './useInfiniteScroll'; const useFetch = (selected: ExtraPart) => { - const { ref, count, setCount } = useInfiniteScroll(); + const jobRecordRef = useRef>({}); + const isIncrementable = () => + Object.values(jobRecordRef.current).every((value) => value === 'DONE'); + + const { ref, count, setCount } = useInfiniteScroll(isIncrementable); const [canGetMoreReviews, setCanGetMoreReviews, setCanNotGetMoreReviews] = useBooleanState(true); + useEffect(() => { + jobRecordRef.current[count] = 'QUEUED'; + }, [count]); + useEffect(() => { function initializeStates() { setCount(1); setCanGetMoreReviews(); + for (const key in jobRecordRef.current) { + if (Object.hasOwnProperty.call(jobRecordRef.current, key)) { + delete jobRecordRef.current[key]; + } + } } return () => { initializeStates(); @@ -23,6 +36,7 @@ const useFetch = (selected: ExtraPart) => { setCanNotGetMoreReviews(); const response = await api.reviewAPI.getReviews(selected, count); response.hasNextPage ? setCanGetMoreReviews() : setCanNotGetMoreReviews(); + jobRecordRef.current[count] = 'DONE'; return response.reviews; }, [selected, count, setCanGetMoreReviews, setCanNotGetMoreReviews]); const state = useStackedFetchBase(willFetch, count === 1); diff --git a/src/views/ReviewPage/hooks/useInfiniteScroll.ts b/src/views/ReviewPage/hooks/useInfiniteScroll.ts index 2efa7513..5496b934 100644 --- a/src/views/ReviewPage/hooks/useInfiniteScroll.ts +++ b/src/views/ReviewPage/hooks/useInfiniteScroll.ts @@ -1,12 +1,14 @@ import { useState } from 'react'; import useIntersectionObserver from '@src/hooks/useIntersectionObserver'; -export default function useInfiniteScroll() { +export default function useInfiniteScroll(isIncrementable: () => boolean) { const [count, setCount] = useState(1); const ref = useIntersectionObserver( async (entry, observer) => { - setCount((prevCount) => prevCount + 1); + if (isIncrementable()) { + setCount((prevCount) => prevCount + 1); + } observer.unobserve(entry.target); }, { rootMargin: '80px' },