diff --git a/src/pages/support/notice/list-page.tsx b/src/pages/support/notice/list-page.tsx
index 34fdf45..944b12e 100644
--- a/src/pages/support/notice/list-page.tsx
+++ b/src/pages/support/notice/list-page.tsx
@@ -4,7 +4,7 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { NoticeItem } from '@/entities/support/model/types';
+import { NoticeItem, NoticeListParams, NoticeListResponse } from '@/entities/support/model/types';
import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
import { HeaderType } from '@/entities/common/model/types';
import {
@@ -13,12 +13,15 @@ import {
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
+import useIntersectionObserver from '@/widgets/intersection-observer';
export const NoticeListPage = () => {
const { navigate } = useNavigate();
const { t } = useTranslation();
+ const [onActionIntersect, setOnActionIntersect] = useState
(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+ const [nextCursor, setNextCursor] = useState(null);
const [searchKeyword, setSearchKeyword] = useState('');
const [selectedCategory, setSelectedCategory] = useState('ALL');
const [resultList, setResultList] = useState>([]);
@@ -31,16 +34,63 @@ export const NoticeListPage = () => {
});
const { mutateAsync: noticeList } = useNoticeListMutation();
- const callList = () => {
- let listParams = {
+
+ 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('page');
+ }
+ }
+ else{
+ console.log('Element is no longer intersecting with the root.');
+ }
+ });
+ };
+
+ const { setTarget } = useIntersectionObserver({
+ threshold: 1,
+ onIntersect
+ });
+
+ const callList = (type?: string) => {
+ let listParams: NoticeListParams = {
category: selectedCategory,
searchKeyword: searchKeyword,
- ...{page: pageParam}
+ ...{
+ page: pageParam
+ }
};
+ if(type === 'page'){
+ if(listParams.page){
+ listParams.page.cursor = nextCursor;
+ }
+ }
+ else{
+ setNextCursor(null);
+ if(listParams.page){
+ listParams.page.cursor = null;
+ }
+ }
- noticeList(listParams).then((rs) => {
- console.log(rs)
- setResultList(rs.content);
+ noticeList(listParams).then((rs: NoticeListResponse) => {
+ if(type === 'page'){
+ setResultList([
+ ...resultList,
+ ...rs.content
+ ]);
+ }
+ else{
+ setResultList(rs.content);
+ }
+ if(rs.hasNext){
+ setNextCursor(rs.nextCursor);
+ setOnActionIntersect(true);
+ }
+ else{
+ setNextCursor(null);
+ }
});
};
@@ -70,6 +120,7 @@ export const NoticeListPage = () => {
};
useEffect(() => {
+ setNextCursor(null);
callList();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedCategory]);
@@ -89,7 +140,7 @@ export const NoticeListPage = () => {
>
) => setSearchKeyword(e.target.value) }
onKeyDown={ (e: React.KeyboardEvent) => {
@@ -102,19 +153,20 @@ export const NoticeListPage = () => {