비행 시뮬레이션 페이징 작업

src/components/analysis/simulation/AnalysimuationInfo.js

@@ -1,17 +1,19 @@
 import moment from 'moment';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
+import { Spinner } from 'reactstrap';
 
 export const AnalysimuationInfo = props => {
   const [target, setTarget] = useState(null);
-  const [isLoading, setIsLoding] = useState(false);
-  const bottomObserver = useRef(null);
+
+  const { loading } = useSelector(state => state.loadingReducer);
 
   const onIntersect = useCallback(
     ([entry], observer) => {
       if (entry.isIntersecting) {
+        if (props.data?.filter(i => i === undefined).length <= 0) {
           props.handlerPageList();
-        // 데이터를 가져오는 부분
+        }
       }
     },
     [props.handlerPageList]
@@ -20,11 +22,10 @@ export const AnalysimuationInfo = props => {
   useEffect(() => {
     let observer;
     if (target) {
-      // callback 함수, option
       observer = new IntersectionObserver(onIntersect, {
         threshold: 0.4
       });
-      observer.observe(target); // 타겟 엘리먼트 지정
+      observer.observe(target);
     }
     return () => observer && observer.disconnect();
   }, [target, props.handlerPageList]);
@@ -35,7 +36,9 @@ export const AnalysimuationInfo = props => {
         <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
       ) : (
         <>
-          {props.data?.map(item => {
+          {props.data
+            ?.filter(i => i !== undefined)
+            .map(item => {
               //   item.idntfNum,
               //   ':::',
               //   item.idntfNum.indexOf(props.filterId)
@@ -80,6 +83,19 @@ export const AnalysimuationInfo = props => {
                 );
               }
             })}
+          {loading && (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                alignItems: 'center'
+              }}
+            >
+              <Spinner color='primary' />
+              <span>Loading...</span>
+            </div>
+          )}
           <div ref={setTarget} />
         </>
       )}

src/containers/analysis/simulator/AnalysisSimulationContainer.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AnalysisSimulationDetail } from '../../../components/analysis/simulation/AnalysisSimulationDetail';
 import { AnalysisSimulationMenu } from '../../../components/analysis/simulation/AnalysisSimulationMenu';
@@ -37,9 +37,6 @@ export const AnalysisSimulationContainer = props => {
 
   const [searchText, setSearchText] = useState('');
 
-  const [bottom, setBottom] = useState(null);
-  const bottomObserver = useRef(null);
-
   const [sliderVal, setSliderVal] = useState({
     maxVal: 0,
     minVal: 0
@@ -175,10 +172,11 @@ export const AnalysisSimulationContainer = props => {
     setOpenDetail(false);
   };
 
-  const handlerPageList = () => {
-    // console.log(params);
-    // dispatch(Actions.list.request({ searchParams, page }));
-  };
+  const handlerPageList = useCallback(() => {
+    dispatch(
+      Actions.list.request({ searchParams: { ...params }, page: page + 1 })
+    );
+  }, [params, list, page]);
 
   const handlerOpenReportList = useCallback(
     val => {
@@ -206,13 +204,13 @@ export const AnalysisSimulationContainer = props => {
             handlerSearch={handlerSearch}
             handlerOpenReportList={handlerOpenReportList}
           />
+
           <AnalysimuationInfo
             data={list}
             count={count}
             handlerDetail={handlerDetail}
             handlerPageList={handlerPageList}
           />
-          <div ref={setBottom} />
         </div>
       ) : (
         <div />

src/modules/analysis/simulation/actions/analysisSimulatorAction.ts

@@ -25,12 +25,14 @@ const STATICS_FAILURE = 'anls/smlt/STATICS_FAILURE';
 
 const DISPATCH_SEARCH = 'amls/smlt/DISPATCH_SEARCH';
 
+const INIT_LIST = 'amls/smlt/INIT_LIST';
+
 export const dispatchSearch =
   createAction(DISPATCH_SEARCH)<{ searchParams: string }>();
 
 export const list = createAsyncAction(LIST_REQUEST, LIST_SUCCESS, LIST_FAILURE)<
   AnalysisSimulatorState,
-  { data: AnalysisSimulatorData[]; count: number; total: number },
+  { data: AnalysisSimulatorData[]; count: number; total: number; page: number },
   AxiosError
 >();
 

src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts

@@ -16,19 +16,29 @@ export const analysisSimulatorReducer = createReducer<
       draft.searchParams = searchParams;
     })
   )
-  .handleAction(Actions.list.request, (state, action) =>
-    produce(state, draft => {
-      const { searchParams, page } = action.payload;
+  // .handleAction(Actions.list.request, (state, action) =>
+  //   produce(state, draft => {
+  //     const { searchParams, page } = action.payload;
 
-      draft.searchParams = searchParams;
-      draft.page = page;
-    })
-  )
+  //     draft.searchParams = searchParams;
+  //     draft.page = page;
+  //   })
+  // )
   .handleAction(Actions.list.success, (state, action) =>
     produce(state, draft => {
-      const { data, count, total } = action.payload;
-      draft.searchParams = state.searchParams;
+      const { data, count, total, page } = action.payload;
+      if (!state.list) {
         draft.list = data;
+      } else {
+        if (page === 1) {
+          draft.list = data;
+          draft.page = page;
+          return;
+        }
+        draft.list = state.list?.concat(data);
+      }
+
+      draft.page = page;
       draft.count = count;
       draft.total = total;
     })

src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts

@@ -16,7 +16,8 @@ function* listSaga(action: ActionType<typeof Actions.list.request>) {
       Actions.list.success({
         data: items,
         count: count,
-        total
+        total,
+        page: res.data.page
       })
     );
   } catch (error) {