diff --git a/src/components/analysis/simulation/AnalysimuationInfo.js b/src/components/analysis/simulation/AnalysimuationInfo.js index a7d29fc..7d6976f 100644 --- a/src/components/analysis/simulation/AnalysimuationInfo.js +++ b/src/components/analysis/simulation/AnalysimuationInfo.js @@ -1,57 +1,87 @@ import moment from 'moment'; -import { useEffect } from 'react'; +import { useEffect, useState, useRef, useCallback } from 'react'; +import { useSelector } from 'react-redux'; export const AnalysimuationInfo = props => { + const [target, setTarget] = useState(null); + const [isLoading, setIsLoding] = useState(false); + const bottomObserver = useRef(null); + + const onIntersect = useCallback( + ([entry], observer) => { + if (entry.isIntersecting) { + props.handlerPageList(); + // 데이터를 가져오는 부분 + } + }, + [props.handlerPageList] + ); + + useEffect(() => { + let observer; + if (target) { + // callback 함수, option + observer = new IntersectionObserver(onIntersect, { + threshold: 0.4 + }); + observer.observe(target); // 타겟 엘리먼트 지정 + } + return () => observer && observer.disconnect(); + }, [target, props.handlerPageList]); + return (
{props.count === 0 ? (
표시할 데이터가 없습니다.
) : ( - props.data?.map(item => { - // item.idntfNum, - // ':::', - // item.idntfNum.indexOf(props.filterId) - // ); + <> + {props.data?.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
*/} -
-
- ); - } - }) +
+
+ ); + } + })} +
+ )}
); diff --git a/src/components/analysis/simulation/AnalysisSimulationReport.js b/src/components/analysis/simulation/AnalysisSimulationReport.js index dcae0b0..4be4be6 100644 --- a/src/components/analysis/simulation/AnalysisSimulationReport.js +++ b/src/components/analysis/simulation/AnalysisSimulationReport.js @@ -14,7 +14,7 @@ export const AnalysisSimulationReport = props => { diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js index 9a21004..b4fe10c 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 } from 'react'; +import { useEffect, useState, useCallback, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { AnalysisSimulationDetail } from '../../../components/analysis/simulation/AnalysisSimulationDetail'; import { AnalysisSimulationMenu } from '../../../components/analysis/simulation/AnalysisSimulationMenu'; @@ -14,7 +14,7 @@ import * as Action from '../../../modules/account/login/actions/authAction'; let playCount = 0; export const AnalysisSimulationContainer = props => { - const { list, count, detail, searchParams, log, stcsList, stcsCount } = + const { list, count, detail, searchParams, log, stcsList, stcsCount, page } = useSelector(state => state.analysisSimulatorState); const [oepnReportList, setOpenReportList] = useState(false); @@ -37,6 +37,9 @@ 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 @@ -50,27 +53,6 @@ export const AnalysisSimulationContainer = props => { search1: '' }); - // 스크롤 이벤트 핸들러 - const handleScroll = () => { - const scrollHeight = document.documentElement.scrollHeight; - const scrollTop = document.documentElement.scrollTop; - const clientHeight = document.documentElement.clientHeight; - console.log('@@'); - // if (scrollTop + clientHeight >= scrollHeight && fetching === false) { - // // 페이지 끝에 도달하면 추가 데이터를 받아온다 - // console.log('@@'); - // } - }; - - useEffect(() => { - // scroll event listener 등록 - window.addEventListener('scroll', handleScroll); - return () => { - // scroll event listener 해제 - window.removeEventListener('scroll', handleScroll); - }; - }, []); - // 시뮬레이션 타이머 useEffect(() => { if (isPlay) { @@ -145,7 +127,7 @@ export const AnalysisSimulationContainer = props => { }, [log]); const handlerSearch = search1 => { - setSearchText(search1); + setParams({ ...params, search1 }); dispatch( Actions.list.request({ searchParams: { ...params, search1 }, page: 1 }) @@ -193,6 +175,17 @@ export const AnalysisSimulationContainer = props => { setOpenDetail(false); }; + const handlerPageList = () => { + // console.log(params); + // dispatch(Actions.list.request({ searchParams, page })); + }; + + const handlerOpenReportList = useCallback( + val => { + setOpenReportList(val); + }, + [oepnReportList] + ); return ( //
@@ -201,7 +194,7 @@ export const AnalysisSimulationContainer = props => {
@@ -211,14 +204,15 @@ export const AnalysisSimulationContainer = props => { params={params} handlerInput={handlerInput} handlerSearch={handlerSearch} - setOpenReportList={setOpenReportList} + handlerOpenReportList={handlerOpenReportList} /> +
) : (
@@ -238,7 +232,7 @@ export const AnalysisSimulationContainer = props => { timeCd={timeCd} setSliderCount={setSliderCount} handlerDetailClose={handlerDetailClose} - setOpenReportList={setOpenReportList} + setOpenReportList={handlerOpenReportList} /> produce(state, draft => { const { searchParams, page } = action.payload; + draft.searchParams = searchParams; draft.page = page; }) @@ -26,6 +27,7 @@ export const analysisSimulatorReducer = createReducer< .handleAction(Actions.list.success, (state, action) => produce(state, draft => { const { data, count, total } = action.payload; + draft.searchParams = state.searchParams; draft.list = data; draft.count = count; draft.total = total;