nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

페이징

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-24 18:34:21 +09:00
parent ff17d01007
commit 2f13c29d1b
5 changed files with 168 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/transaction/all-transaction/list-page.tsx
View File

@@ -63,8 +63,7 @@ export const AllTransactionListPage = () => {
const [totalAmount, setTotalAmount] = useState<number>(0);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
useSetHeaderTitle('거래내역 조회');
useSetHeaderType(HeaderType.LeftArrow);
useSetOnBack(() => {

52
src/pages/transaction/billing/list-page.tsx
View File

@@ -29,12 +29,14 @@ import {
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const BillingListPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const userInfo = useStore((state) => state.UserStore.userInfo);
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<ListItemProps>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -62,8 +64,27 @@ export const BillingListPage = () => {
const { mutateAsync: billingList } = useBillingListMutation();
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const callList = () => {
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: BillingListParams = {
mid: mid,
searchType: searchType,
@@ -80,9 +101,33 @@ export const BillingListPage = () => {
...{ sortType: sortType }
}
};
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
billingList(listParams).then((rs: BillingListResponse) => {
setListItems(rs.content);
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
}
@@ -167,7 +212,8 @@ export const BillingListPage = () => {
<BillingList
listItems={ listItems }
transactionCategory={ TransactionCategory.Billing }
></BillingList>
></BillingList>
<div ref={ setTarget }></div>
</div>
</div>
</main>

50
src/pages/transaction/cash-receipt/list-page.tsx
View File

@@ -33,11 +33,13 @@ import { CashReceiptTransactionTypeBtnGroup } from '@/entities/transaction/model
import { useStore } from '@/shared/model/store';
import { useCashReceiptSummaryMutation } from '@/entities/transaction/api/use-cash-receipt-summary-mutation';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const CashReceiptListPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<ListItemProps>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -68,8 +70,27 @@ export const CashReceiptListPage = () => {
const { mutateAsync: cashReceiptList } = useCashReceiptListMutation();
const { mutateAsync: cashReceiptSummary } = useCashReceiptSummaryMutation();
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const callList = () => {
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listSummaryParams: CashReceiptSummaryParams = {
mid: mid,
startDate: startDate,
@@ -88,9 +109,33 @@ export const CashReceiptListPage = () => {
...{ sortType: sortType }
}
};
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
cashReceiptList(listParams).then((rs: CashReceiptListResponse) => {
setListItems(rs.content);
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
cashReceiptSummary(listSummaryParams).then((rs: CashReceiptSummaryResponse) => {
setApprovalCount(rs.approvalCount);
@@ -230,6 +275,7 @@ export const CashReceiptListPage = () => {
listItems={ listItems }
transactionCategory={ TransactionCategory.CashReceipt }
></CashReceiptList>
<div ref={ setTarget }></div>
</div>
</div>
</main>

26
src/pages/transaction/escrow/list-page.tsx
View File

@@ -28,12 +28,14 @@ import {
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const EscrowListPage = () => {
const { navigate } = useNavigate();
const userInfo = useStore((state) => state.UserStore.userInfo);
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<ListItemProps>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -60,8 +62,27 @@ export const EscrowListPage = () => {
const { mutateAsync: escrowList } = useEscrowListMutation();
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = () => {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: EscrowListParams = {
mid: mid,
searchType: 'ORDER_NUMBER',
@@ -170,7 +191,8 @@ export const EscrowListPage = () => {
<EscrowList
listItems={ listItems }
transactionCategory={ TransactionCategory.Escrow }
></EscrowList>
></EscrowList>
<div ref={ setTarget }></div>
</div>
</div>
</main>