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

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) {
-        props.handlerPageList();
-        // 데이터를 가져오는 부분
+        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,51 +36,66 @@ export const AnalysimuationInfo = props => {
         <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
       ) : (
         <>
-          {props.data?.map(item => {
-            //   item.idntfNum,
-            //   ':::',
-            //   item.idntfNum.indexOf(props.filterId)
-            // );
+          {props.data
+            ?.filter(i => i !== undefined)
+            .map(item => {
+              //   item.idntfNum,
+              //   ':::',
+              //   item.idntfNum.indexOf(props.filterId)
+              // );
 
-            if (item.idntfNum) {
-              return (
-                <div
-                  className='layer-content-list'
-                  onClick={() => props.handlerDetail(item.cntrlId)}
-                  key={Math.random()}
-                >
-                  <dl>
-                    <dt>
-                      <div className='list-left-txt'>식별번호</div>
-                      <div className='list-right-txt'>{item.idntfNum}</div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>일자</div>
-                      <div className='list-right-txt'>
-                        {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
-                      </div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>시작 위치</div>
-                      <div className='list-right-txt'>{item.stArea}</div>
-                    </dt>
-                    <dt>
-                      <div className='list-left-txt'>시작/종료 시간</div>
-                      <div className='list-right-txt'>
-                        {moment(item.cntrlStDt).format('HH:mm')}
-                        {'  '}/{'  '}
-                        {moment(item.cntrlEndDt).format('HH:mm')}
-                      </div>
-                    </dt>
-                    {/* <dt>
+              if (item.idntfNum) {
+                return (
+                  <div
+                    className='layer-content-list'
+                    onClick={() => props.handlerDetail(item.cntrlId)}
+                    key={Math.random()}
+                  >
+                    <dl>
+                      <dt>
+                        <div className='list-left-txt'>식별번호</div>
+                        <div className='list-right-txt'>{item.idntfNum}</div>
+                      </dt>
+                      <dt>
+                        <div className='list-left-txt'>일자</div>
+                        <div className='list-right-txt'>
+                          {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
+                        </div>
+                      </dt>
+                      <dt>
+                        <div className='list-left-txt'>시작 위치</div>
+                        <div className='list-right-txt'>{item.stArea}</div>
+                      </dt>
+                      <dt>
+                        <div className='list-left-txt'>시작/종료 시간</div>
+                        <div className='list-right-txt'>
+                          {moment(item.cntrlStDt).format('HH:mm')}
+                          {'  '}/{'  '}
+                          {moment(item.cntrlEndDt).format('HH:mm')}
+                        </div>
+                      </dt>
+                      {/* <dt>
                     <div className='list-left-txt'>총 비행거리/시간</div>
                     <div className='list-right-txt'>ddd</div>
                   </dt> */}
-                  </dl>
-                </div>
-              );
-            }
-          })}
+                    </dl>
+                  </div>
+                );
+              }
+            })}
+          {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;
-      draft.list = data;
+      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) {