diff --git a/src/entities/settlement/ui/list-wrap.tsx b/src/entities/settlement/ui/list-wrap.tsx index 8a6afe3..252a06c 100644 --- a/src/entities/settlement/ui/list-wrap.tsx +++ b/src/entities/settlement/ui/list-wrap.tsx @@ -31,6 +31,7 @@ import { import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types'; import { useStore } from '@/shared/model/store'; import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; +import useIntersectionObserver from '@/widgets/intersection-observer'; export interface ListWrapProps { startDateFromCalendar?: string; @@ -44,11 +45,14 @@ export const ListWrap = ({ const { navigate } = useNavigate(); const userMid = useStore.getState().UserStore.mid; + const [onActionIntersect, setOnActionIntersect] = useState(false); + const [sortType, setSortType] = useState(SortTypeKeys.LATEST); const [settlementDateListItems, setSettlementDateListItems] = useState>([]); const [transactionDatelistItems, setTransactionDateListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [nextCursor, setNextCursor] = useState(null); const [mid, setMid] = useState(userMid); const [periodType, setPeriodType] = useState(SettlementPeriodType.SETTLEMENT_DATE); const [startDate, setStartDate] = useState(startDateFromCalendar? moment(startDateFromCalendar).format('YYYYMMDD'): moment().format('YYYYMMDD')); @@ -77,18 +81,41 @@ export const ListWrap = ({ const { mutateAsync: settlementsTransactionSummary } = useSettlementsTransactionSummaryMutation(); const { mutateAsync: downloadExcel } = useDownloadExcelMutation(); - const callList = () => { + const callList = (option?: { + type?: string + }) => { + setOnActionIntersect(false); if(periodType === SettlementPeriodType.SETTLEMENT_DATE){ - callSettlementList(); + callSettlementList(option); } else if(periodType === SettlementPeriodType.TRANSACTION_DATE){ - callTransactionList(); + callTransactionList(option); } }; + const onIntersect: IntersectionObserverCallback = (entries: Array) => { + entries.forEach((entry: IntersectionObserverEntry) => { + if(entry.isIntersecting){ + console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); + if(onActionIntersect && !!nextCursor){ + callList({ + type: 'page' + }); + } + } + else{ + console.log('Element is no longer intersecting with the root.'); + } + }); + }; + + const { setTarget } = useIntersectionObserver({ + threshold: 1, + onIntersect + }); + const callSettlementList = (option?: { - sortType?: SortTypeKeys, - val?: string + type?: string }) => { let listSummaryParams: SettlementsHistorySummaryParams = { mid: mid, @@ -100,16 +127,41 @@ export const ListWrap = ({ let listParams: SettlementsHistoryParams = { ...listSummaryParams, ...{ - page: pageParam + page: { + ...pageParam, + ...{ sortType: sortType } + } } }; - if(listParams.page){ - listParams.page.sortType = (option?.sortType)? option.sortType: sortType; - setPageParam(listParams.page); - } + if(option?.type === 'page'){ + if(listParams.page){ + listParams.page.cursor = nextCursor; + } + } + else{ + setNextCursor(null); + if(listParams.page){ + listParams.page.cursor = null; + } + } settlementsHistory(listParams).then((rs: SettlementsHistoryResponse) => { - setSettlementDateListItems(rs.content); + if(option?.type === 'page'){ + setSettlementDateListItems([ + ...settlementDateListItems, + ...rs.content + ]); + } + else{ + setSettlementDateListItems(rs.content); + } + if(rs.hasNext){ + setNextCursor(rs.nextCursor); + setOnActionIntersect(true); + } + else{ + setNextCursor(null); + } }); settlementsHistorySummary(listSummaryParams).then((rs: SettlementsHistorySummaryResponse) => { setSettlementAmount(rs.settlementAmount || 0); @@ -122,7 +174,8 @@ export const ListWrap = ({ }; const callTransactionList = (option?: { sortType?: SortTypeKeys, - val?: string + val?: string, + type?: string }) => { let params = { mid: mid, @@ -143,9 +196,36 @@ export const ListWrap = ({ params.page.sortType = option?.sortType || sortType; setPageParam(params.page); } + if(option?.type === 'page'){ + if(params.page){ + params.page.cursor = nextCursor; + } + } + else{ + setNextCursor(null); + if(params.page){ + params.page.cursor = null; + } + } settlementsTransactionList(params).then((rs) => { - setTransactionDateListItems(rs.content); + if(option?.type === 'page'){ + setTransactionDateListItems([ + ...transactionDatelistItems, + ...rs.content + ]); + } + else{ + setTransactionDateListItems(rs.content); + } + if(rs.hasNext){ + setNextCursor(rs.nextCursor); + setOnActionIntersect(true); + } + else{ + setNextCursor(null); + } + }); settlementsTransactionSummary(summaryParams).then((rs) => { setSettlementAmount(rs.settlementAmount); @@ -160,26 +240,10 @@ export const ListWrap = ({ const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); - if(periodType === SettlementPeriodType.SETTLEMENT_DATE){ - callSettlementList({ - sortType: sort - }); - } - else if(periodType === SettlementPeriodType.TRANSACTION_DATE){ - callTransactionList({ - sortType: sort - }); - } }; const changePeriodType = (val: SettlementPeriodType) => { if(val !== periodType){ setPeriodType(val); - if(val === SettlementPeriodType.SETTLEMENT_DATE){ - callSettlementList(); - } - else if(val === SettlementPeriodType.TRANSACTION_DATE){ - callTransactionList(); - } } }; @@ -302,9 +366,10 @@ export const ListWrap = ({ }, []); useEffect(() => { + setNextCursor(null); callList(); }, [ - mid, periodType, + mid, periodType, sortType, startDate, endDate, paymentMethod ]); @@ -414,6 +479,7 @@ export const ListWrap = ({ { (periodType === SettlementPeriodType.TRANSACTION_DATE) && getTransactionDateListDateGroup() } +
{ const [onActionIntersect, setOnActionIntersect] = useState(false); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); - const [nextCursor, setNextCursor] = useState(null); const [searchValue, setSearchValue] = useState(''); const [selectedCategory, setSelectedCategory] = useState(''); const [resultList, setResultList] = useState>([]); @@ -39,7 +38,7 @@ export const FaqListPage = () => { entries.forEach((entry: IntersectionObserverEntry) => { if(entry.isIntersecting){ console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); - if(onActionIntersect && !!nextCursor){ + if(onActionIntersect && !!pageParam.cursor){ callList('page'); } } @@ -64,16 +63,8 @@ export const FaqListPage = () => { page: pageParam } }; - if(type === 'page'){ - if(listParams.page){ - listParams.page.cursor = nextCursor; - } - } - else{ - setNextCursor(null); - if(listParams.page){ - listParams.page.cursor = null; - } + if(type !== 'page' && listParams.page){ + listParams.page.cursor = null; } faqList(listParams).then((rs: FaqListResponse) => { @@ -87,11 +78,17 @@ export const FaqListPage = () => { setResultList(rs.content); } if(rs.hasNext){ - setNextCursor(rs.nextCursor); + setPageParam({ + ...pageParam, + ...{ cursor: rs.nextCursor } + }); setOnActionIntersect(true); } else{ - setNextCursor(null); + setPageParam({ + ...pageParam, + ...{ cursor: null } + }); } }); }; @@ -127,7 +124,6 @@ export const FaqListPage = () => { }; useEffect(() => { - setNextCursor(null); callList(); }, [selectedCategory]); diff --git a/src/pages/support/notice/list-page.tsx b/src/pages/support/notice/list-page.tsx index 5448784..3abb88e 100644 --- a/src/pages/support/notice/list-page.tsx +++ b/src/pages/support/notice/list-page.tsx @@ -6,7 +6,7 @@ import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mu import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { InformCl, NoticeItem, NoticeListParams, NoticeListResponse, SearchCl } from '@/entities/support/model/types'; import { SupportNoticeItem } from '@/entities/support/ui/notice-item'; -import { HeaderType } from '@/entities/common/model/types'; +import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types'; import { useSetHeaderTitle, useSetHeaderType, @@ -20,8 +20,7 @@ export const NoticeListPage = () => { const { t } = useTranslation(); const [onActionIntersect, setOnActionIntersect] = useState(false); - const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); - const [nextCursor, setNextCursor] = useState(null); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [informCl, setInformCl] = useState(''); const [searchKeyword, setSearchKeyword] = useState(''); const [resultList, setResultList] = useState>([]); @@ -39,7 +38,7 @@ export const NoticeListPage = () => { entries.forEach((entry: IntersectionObserverEntry) => { if(entry.isIntersecting){ console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); - if(onActionIntersect && !!nextCursor){ + if(onActionIntersect && !!pageParam.cursor){ callList('page'); } } @@ -63,16 +62,8 @@ export const NoticeListPage = () => { page: pageParam } }; - if(type === 'page'){ - if(listParams.page){ - listParams.page.cursor = nextCursor; - } - } - else{ - setNextCursor(null); - if(listParams.page){ - listParams.page.cursor = null; - } + if(type !== 'page' && listParams.page){ + listParams.page.cursor = null; } noticeList(listParams).then((rs: NoticeListResponse) => { @@ -86,11 +77,17 @@ export const NoticeListPage = () => { setResultList(rs.content); } if(rs.hasNext){ - setNextCursor(rs.nextCursor); + setPageParam({ + ...pageParam, + ...{ cursor: rs.nextCursor } + }); setOnActionIntersect(true); } else{ - setNextCursor(null); + setPageParam({ + ...pageParam, + ...{ cursor: rs.nextCursor } + }); } }); }; @@ -121,7 +118,6 @@ export const NoticeListPage = () => { }; useEffect(() => { - setNextCursor(null); callList(); }, [informCl]); diff --git a/src/pages/support/qna/list-page.tsx b/src/pages/support/qna/list-page.tsx index b7274b0..ab6cb1a 100644 --- a/src/pages/support/qna/list-page.tsx +++ b/src/pages/support/qna/list-page.tsx @@ -26,7 +26,6 @@ export const QnaListPage = () => { const [onActionIntersect, setOnActionIntersect] = useState(false); const [mid, setMid] = useState(userMid); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); - const [nextCursor, setNextCursor] = useState(null); const [statusCode, setStatusCode] = useState(''); // 02, 03 const [resultList, setResultList] = useState>([]); @@ -43,13 +42,10 @@ export const QnaListPage = () => { entries.forEach((entry: IntersectionObserverEntry) => { if(entry.isIntersecting){ console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); - if(onActionIntersect && !!nextCursor){ + if(onActionIntersect && !!pageParam.cursor){ callList('page'); } } - else{ - console.log('Element is no longer intersecting with the root.'); - } }); }; @@ -67,13 +63,7 @@ export const QnaListPage = () => { page: pageParam } }; - if(type === 'page'){ - if(listParams.page){ - listParams.page.cursor = nextCursor; - } - } - else{ - setNextCursor(null); + if(type !== 'page'){ if(listParams.page){ listParams.page.cursor = null; } @@ -90,11 +80,17 @@ export const QnaListPage = () => { setResultList(rs.content); } if(rs.hasNext){ - setNextCursor(rs.nextCursor); + setPageParam({ + ...pageParam, + ...{ cursor: rs.nextCursor } + }); setOnActionIntersect(true); } else{ - setNextCursor(null); + setPageParam({ + ...pageParam, + ...{ cursor: null } + }); } }); }; @@ -126,13 +122,8 @@ export const QnaListPage = () => { }; useEffect(() => { - setNextCursor(null); callList(); - }, [statusCode]); - - useEffect(() => { - - }, [resultList]); + }, [mid, statusCode]); return ( <> @@ -172,7 +163,7 @@ export const QnaListPage = () => {
{ getQnaList() } -
+