diff --git a/src/app/series/hot/page.tsx b/src/app/series/hot/page.tsx index 376a522..28e9807 100644 --- a/src/app/series/hot/page.tsx +++ b/src/app/series/hot/page.tsx @@ -4,10 +4,5 @@ import { getSeriesArray } from '@/service/series'; export default async function SeriesHotpage() { let seriesArray = await getSeriesArray('month', 'hot'); - if ('code' in seriesArray) { - seriesArray = []; - console.error('Error when get seriesArr'); - } - return ; } diff --git a/src/app/series/new/page.tsx b/src/app/series/new/page.tsx index 03d883a..53e8c8c 100644 --- a/src/app/series/new/page.tsx +++ b/src/app/series/new/page.tsx @@ -4,10 +4,5 @@ import { getSeriesArray } from '@/service/series'; export default async function SeriesNewPage() { let seriesArray = await getSeriesArray('month', 'new'); - if ('code' in seriesArray) { - seriesArray = []; - console.error('Error when get seriesArr'); - } - return ; } diff --git a/src/components/question/QuestionsContainer.tsx b/src/components/question/QuestionsContainer.tsx index f646bf9..72381a8 100644 --- a/src/components/question/QuestionsContainer.tsx +++ b/src/components/question/QuestionsContainer.tsx @@ -2,11 +2,9 @@ import { Question, QuestionOrderBy } from '@/types/question'; import QuestionsList from './QuestionsList'; -import { useEffect, useRef, useState } from 'react'; import { getQuestions } from '@/service/questions'; -import useObserver from '@/hooks/useObserver'; -import { QUESTION_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL } from '@/utils/const'; import CategoryLink from '../shared/CategoryLink'; +import { useInfinityScroll } from '@/hooks/useInfinityScroll'; type Props = { questions: Question[]; @@ -14,42 +12,9 @@ type Props = { }; export default function QuestionsContainer({ questions, type }: Props) { - const [questionData, setQuestionData] = useState(questions); - const [pageNum, setPageNum] = useState(1); - const [isEnd, setIsEnd] = useState(false); - const [isLoading, setIsLoading] = useState(false); - const isInitialMount = useRef(true); - - const fetchQuestions = () => { - if (isLoading || isEnd) return; - setIsLoading(true); - getQuestions(type, pageNum, QUESTION_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL) - .then((data) => { - setIsLoading(false); - if (!data.length) setIsEnd(true); - else { - setQuestionData([...questionData, ...data]); - } - }) - .catch(() => { - setIsLoading(false); - }); - }; - - useEffect(() => { - if (isInitialMount.current) { - isInitialMount.current = false; - } else { - fetchQuestions(); - } - }, [pageNum]); - - const onIntersect: IntersectionObserverCallback = ([entry]) => { - if (isEnd || isLoading) return; - entry.isIntersecting && setPageNum(pageNum + 1); - }; - - const { setTarget } = useObserver({ onIntersect }); + const [data, isEnd, setTarget] = useInfinityScroll(questions, (pageNum) => + getQuestions(type, pageNum) + ); return (
@@ -67,7 +32,7 @@ export default function QuestionsContainer({ questions, type }: Props) { isSelected={type === 'HOT'} />
- + {isEnd ? <> :
}
); diff --git a/src/components/series/SeriesContainer.tsx b/src/components/series/SeriesContainer.tsx index 772d13d..09e0ded 100644 --- a/src/components/series/SeriesContainer.tsx +++ b/src/components/series/SeriesContainer.tsx @@ -1,13 +1,11 @@ 'use client'; import { Orderby } from '@/types'; -import { useEffect, useRef, useState } from 'react'; import SeriesGrid from './SeriesGrid'; import { Series } from '@/types/series'; import { getSeriesArray } from '@/service/series'; -import useObserver from '@/hooks/useObserver'; -import { SERIES_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL } from '@/utils/const'; import CategoryLink from '../shared/CategoryLink'; +import { useInfinityScroll } from '@/hooks/useInfinityScroll'; type Props = { seriesArray: Series[]; @@ -15,51 +13,9 @@ type Props = { }; export default function SeriesContainer({ seriesArray, type }: Props) { - const [currentSeriesArray, setCurrentSeriesArray] = - useState(seriesArray); - const [pageNum, setPageNum] = useState(1); - const [isEnd, setIsEnd] = useState(false); - const [isLoading, setIsLoading] = useState(false); - const isInitialMount = useRef(true); - - const fetchSeries = () => { - if (isLoading || isEnd) return; - setIsLoading(true); - getSeriesArray( - 'month', - type, - pageNum, - SERIES_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL - ) - .then((data) => { - if ('code' in data) { - return; - } - setIsLoading(false); - if (!data.length) setIsEnd(true); - else { - setCurrentSeriesArray([...currentSeriesArray, ...data]); - } - }) - .catch(() => { - setIsLoading(false); - }); - }; - - useEffect(() => { - if (isInitialMount.current) { - isInitialMount.current = false; - } else { - fetchSeries(); - } - }, [pageNum]); - - const onIntersect: IntersectionObserverCallback = ([entry]) => { - if (isEnd || isLoading) return; - entry.isIntersecting && setPageNum(pageNum + 1); - }; - - const { setTarget } = useObserver({ onIntersect }); + const [data, isEnd, setTarget] = useInfinityScroll(seriesArray, (pageNum) => + getSeriesArray('month', type, pageNum) + ); return (
@@ -77,7 +33,7 @@ export default function SeriesContainer({ seriesArray, type }: Props) { isSelected={type === 'hot'} />
- + {isEnd ? <> :
}
); diff --git a/src/service/series.ts b/src/service/series.ts index 1dfa466..aae4ba8 100644 --- a/src/service/series.ts +++ b/src/service/series.ts @@ -11,7 +11,7 @@ export async function getSeriesArray( orderBy: Orderby = 'new', pageNum: number = 0, resultCntPerPage: number = SERIES_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL -): Promise { +): Promise { const url = new URL(`${process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS}/series`); const params = { period: period,