diff --git a/src/entities/account/ui/user-manage-wrap.tsx b/src/entities/account/ui/user-manage-wrap.tsx index 8e253bf..1ffc440 100644 --- a/src/entities/account/ui/user-manage-wrap.tsx +++ b/src/entities/account/ui/user-manage-wrap.tsx @@ -6,11 +6,13 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { UserManageAuthList } from './user-manage-auth-list'; import { useUserFindMutation } from '@/entities/user/api/use-user-find-mutation'; -import { UserListItem } from '@/entities/user/model/types'; +import { UserFindParams, UserFindResponse, UserListItem } from '@/entities/user/model/types'; import { useStore } from '@/shared/model/store'; import { checkGrant } from '@/shared/lib/check-grant'; import { showAlert } from '@/widgets/show-alert'; import { snackBar } from '@/shared/lib'; +import useIntersectionObserver from '@/widgets/intersection-observer'; +import { DefaultRequestPagination } from '@/entities/common/model/types'; export const UserManageWrap = () => { const { t } = useTranslation(); @@ -22,18 +24,71 @@ export const UserManageWrap = () => { return value.value === userMid; }); + const [onActionIntersect, setOnActionIntersect] = useState(false); const [mid, setMid] = useState((midItem.length > 0)? userMid: ''); const [userItems, setUserItems] = useState>([]); - const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const { mutateAsync: userFind } = useUserFindMutation(); - const callList = () => { - setPageParam(pageParam); - userFind({ mid: mid, page: pageParam }).then((rs) => { - console.log('API Response:', rs); - console.log('Content:', rs.content); - setUserItems(rs.content || []); + const onIntersect: IntersectionObserverCallback = (entries: Array) => { + entries.forEach((entry: IntersectionObserverEntry) => { + if(entry.isIntersecting){ + if(onActionIntersect && !!pageParam.cursor){ + setOnActionIntersect(false); + callList('page'); + } + } + }); + }; + + const { setTarget } = useIntersectionObserver({ + threshold: 1, + onIntersect + }); + + const callList = (type?: string) => { + let params: UserFindParams = { + mid: mid, + page: { + ...pageParam + } + }; + if(type !== 'page' && params.page){ + params.page.cursor = null; + } + + userFind(params).then((rs: UserFindResponse) => { + // setUserItems(rs.content || []); + if(type === 'page'){ + setUserItems([ + ...userItems, + ...rs.content + ]); + } + else{ + setUserItems(rs.content); + } + if(rs.hasNext + && rs.nextCursor !== pageParam.cursor + && rs.content.length === DEFAULT_PAGE_PARAM.size + ){ + setPageParam({ + ...pageParam, + ...{ cursor: rs.nextCursor } + }); + } + else{ + setPageParam({ + ...pageParam, + ...{ cursor: null } + }); + } + setOnActionIntersect( + !!rs.hasNext + && rs.nextCursor !== pageParam.cursor + && rs.content.length === DEFAULT_PAGE_PARAM.size + ); }).catch((e: any) => { if(e.response?.data?.error?.message){ snackBar(e.response?.data?.error?.message); @@ -86,10 +141,13 @@ export const UserManageWrap = () => {
{ (!!userItems && userItems.length > 0) && - + <> + +
+ }
diff --git a/src/entities/user/model/types.ts b/src/entities/user/model/types.ts index 36774cd..ddbe805 100644 --- a/src/entities/user/model/types.ts +++ b/src/entities/user/model/types.ts @@ -59,7 +59,7 @@ export interface UserFindResponse extends DefaulResponsePagination { export interface UserFindParams { mid: string; - page: DefaultRequestPagination; + page?: DefaultRequestPagination; }; export interface UserExistsUseridParams {