From eee7bff44e8b046c428f9ba3e585d316409042ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Thu, 13 Oct 2022 17:33:37 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8B=9C=EB=AE=AC?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98=20=ED=8E=98=EC=9D=B4=EC=A7=95=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../analysis/simulation/AnalysimuationInfo.js | 110 ++++++++++-------- .../simulator/AnalysisSimulationContainer.js | 16 ++- .../actions/analysisSimulatorAction.ts | 4 +- .../reducers/analysisSimulatorReducer.ts | 30 +++-- .../simulation/sagas/analysisSimulatorSaga.ts | 3 +- 5 files changed, 95 insertions(+), 68 deletions(-) diff --git a/src/components/analysis/simulation/AnalysimuationInfo.js b/src/components/analysis/simulation/AnalysimuationInfo.js index 7d6976fd..71442ec7 100644 --- a/src/components/analysis/simulation/AnalysimuationInfo.js +++ b/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 => {
표시할 데이터가 없습니다.
) : ( <> - {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 ( -
props.handlerDetail(item.cntrlId)} - key={Math.random()} - > -
-
-
식별번호
-
{item.idntfNum}
-
-
-
일자
-
- {moment(item.cntrlStDt).format('YYYY년MM월DD일')} -
-
-
-
시작 위치
-
{item.stArea}
-
-
-
시작/종료 시간
-
- {moment(item.cntrlStDt).format('HH:mm')} - {' '}/{' '} - {moment(item.cntrlEndDt).format('HH:mm')} -
-
- {/*
+ if (item.idntfNum) { + return ( +
props.handlerDetail(item.cntrlId)} + key={Math.random()} + > +
+
+
식별번호
+
{item.idntfNum}
+
+
+
일자
+
+ {moment(item.cntrlStDt).format('YYYY년MM월DD일')} +
+
+
+
시작 위치
+
{item.stArea}
+
+
+
시작/종료 시간
+
+ {moment(item.cntrlStDt).format('HH:mm')} + {' '}/{' '} + {moment(item.cntrlEndDt).format('HH:mm')} +
+
+ {/*
총 비행거리/시간
ddd
*/} -
-
- ); - } - })} +
+
+ ); + } + })} + {loading && ( +
+ + Loading... +
+ )}
)} diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js index b4fe10c1..4a770b92 100644 --- a/src/containers/analysis/simulator/AnalysisSimulationContainer.js +++ b/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} /> + -
) : (
diff --git a/src/modules/analysis/simulation/actions/analysisSimulatorAction.ts b/src/modules/analysis/simulation/actions/analysisSimulatorAction.ts index 26ff61f3..ca8981e4 100644 --- a/src/modules/analysis/simulation/actions/analysisSimulatorAction.ts +++ b/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 >(); diff --git a/src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts b/src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts index e16b0add..d952cc61 100644 --- a/src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts +++ b/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; }) diff --git a/src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts b/src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts index 4efa9838..2c7fe9ee 100644 --- a/src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts +++ b/src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts @@ -16,7 +16,8 @@ function* listSaga(action: ActionType) { Actions.list.success({ data: items, count: count, - total + total, + page: res.data.page }) ); } catch (error) {