page update

src/pages/support/faq/list-page.tsx

@@ -20,25 +20,6 @@ export const FaqListPage = () => {
   const { t } = useTranslation();
 
   const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
-  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){
-          callList();
-        } 
-      }
-      else{
-        console.log('Element is no longer intersecting with the root.');
-      }
-    });
-  };
-
-  const { setTarget } = useIntersectionObserver({ 
-    threshold: 1, 
-    onIntersect 
-  });
-
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [searchCl, setSearchCl] = useState<string | null>('HEAD');
@@ -54,26 +35,59 @@ export const FaqListPage = () => {
   });
 
   const { mutateAsync: faqList } = useFaqListMutation();
-  const callList = () => {
+
+  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 && !!nextCursor){
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+  const callList = (type?: string) => {
     setOnActionIntersect(false);
     let listParams: FaqListParams = {
       category: selectedCategory,
       searchCl: (!!searchValue)? searchCl: null,
       searchValue: searchValue,
-      ...{page: pageParam}
+      ...{
+        page: pageParam
+      }
     };
+    if(type === 'page'){
+      if(listParams.page){
+        listParams.page.cursor = nextCursor;
+      }
+    }
+    else{
+      setNextCursor(null);
+      if(listParams.page){
+        listParams.page.cursor = null;
+      }
+    }
     
     faqList(listParams).then((rs: FaqListResponse) => {
-      setResultList([
-        ...resultList,
-        ...rs.content
-      ]);
+      if(type === 'page'){
+        setResultList([
+          ...resultList,
+          ...rs.content
+        ]);
+      }
+      else{
+        setResultList(rs.content);
+      }
       if(rs.hasNext){
         setNextCursor(rs.nextCursor);
-        setPageParam({
-          ...pageParam,
-          cursor: rs.nextCursor
-        });
         setOnActionIntersect(true);
       }
       else{
@@ -113,8 +127,8 @@ export const FaqListPage = () => {
   };
 
   useEffect(() => {
+    setNextCursor(null);
     callList();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedCategory]);
 
   return (

src/pages/support/qna/list-page.tsx

@@ -18,31 +18,12 @@ import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const QnaListPage = () => {
   const { navigate } = useNavigate();
-
-  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
-  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){
-          callList();
-        } 
-      }
-      else{
-        console.log('Element is no longer intersecting with the root.');
-      }
-    });
-  };
-
-  const { setTarget } = useIntersectionObserver({ 
-    threshold: 1, 
-    onIntersect 
-  });
+  const { t } = useTranslation();
   
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
   const userMid = useStore.getState().UserStore.mid;
-  const { t } = useTranslation();
   
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [mid, setMid] = useState<string>(userMid);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [nextCursor, setNextCursor] = useState<string | null>(null);
@@ -57,7 +38,27 @@ export const QnaListPage = () => {
   });
 
   const { mutateAsync: qnaList } = useQnaListMutation();
-  const callList = () => {
+
+  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 && !!nextCursor){
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
     setOnActionIntersect(false);
     let listParams: QnaListParams = {
       mid: mid,
@@ -66,18 +67,30 @@ export const QnaListPage = () => {
         page: pageParam
       }
     };
+    if(type === 'page'){
+      if(listParams.page){
+        listParams.page.cursor = nextCursor;
+      }
+    }
+    else{
+      setNextCursor(null);
+      if(listParams.page){
+        listParams.page.cursor = null;
+      }
+    }
     
     qnaList(listParams).then((rs: QnaListResponse) => {
-      setResultList([
-        ...resultList,
-        ...rs.content
-      ]);
+      if(type === 'page'){
+        setResultList([
+          ...resultList,
+          ...rs.content
+        ]);
+      }
+      else{
+        setResultList(rs.content);
+      }
       if(rs.hasNext){
         setNextCursor(rs.nextCursor);
-        setPageParam({
-          ...pageParam,
-          cursor: rs.nextCursor
-        });
         setOnActionIntersect(true);
       }
       else{
@@ -86,8 +99,6 @@ export const QnaListPage = () => {
     });
   };
   
-  
-  
   const getQnaList = () => {
     let rs = [];
     for(let i=0;i<resultList.length;i++){
@@ -115,6 +126,7 @@ export const QnaListPage = () => {
   };
 
   useEffect(() => {
+    setNextCursor(null);
     callList();
   }, [statusCode]);