feat/ 비행승인목록 변경감지시 새로고침

.env.development

@@ -1,11 +1,11 @@
-# REACT_APP_HOST = http://192.168.0.30:8080/
-# REACT_APP_WS_HOST = ws://192.168.0.30:8081/ws
 
-# REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
+
+# REACT_APP_HOST = http://192.168.0.56:8080/
+# REACT_APP_DOS_HOST = ws://192.168.0.56:8081/dos
 
 REACT_APP_HOST = http://121.190.193.50:6081/
 REACT_APP_WS_HOST = ws://121.190.193.50:6082/ws
-# REACT_APP_WS_HOST = ws://pav.palntour.com:8081/ws
+REACT_APP_DOS_HOST = ws://121.190.193.50:6082/dos
 REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
 
 # Naver Search API HOST

.env.production

@@ -1,6 +1,7 @@
 # REACT_APP_HOST = http://pav.palntour.com:8080/
 REACT_APP_HOST = http://121.190.193.50:6081/
 REACT_APP_WS_HOST = ws://121.190.193.50:6082/ws
+REACT_APP_DOS_HOST = ws://121.190.193.50:6082/dos
 REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
 
 # Naver Search API HOST

src/components/flight/OperationApprovalsTable.js

@@ -14,6 +14,7 @@ import OperationModal from './OperationModal';
 import ScrollContainer from 'react-indiana-drag-scroll';
 import OperationCheckBoxModal from './OperationCheckBoxModal';
 import { ConfirmModal } from '@component/modal/ConfirmModal';
+import { clientRefreshAprvListParam } from '@src/redux/features/laanc/laancSlice';
 
 export default function OperationApprovalsTable(props) {
   const dispatch = useDispatch();
@@ -64,9 +65,19 @@ export default function OperationApprovalsTable(props) {
   });
 
   useEffect(() => {
+    dispatch(
+      clientRefreshAprvListParam({
+        searchStDt: props.startDate,
+        searchEndDt: props.endDate
+      })
+    );
+  }, []);
+
+  useEffect(() => {
+    console.log(laancAprvList, '----list');
     let approvalCdValue = { S: 0, F: 0, C: 0, U: 0 };
 
-    laancAprvList.map(item => {
+    laancAprvList?.map(item => {
       item.areaList.map(area => {
         if (area.approvalCd === 'S') {
           approvalCdValue.S += 1;

src/components/websocket/WebsocketClient.js

@@ -2,25 +2,59 @@ import React, { useEffect, useState, useRef } from 'react';
 import { VscLoading } from 'react-icons/vsc';
 import { useDispatch, useSelector } from '@src/redux/store';
 import { useHistory } from 'react-router-dom';
-import { WS_HOST } from '../../configs/constants';
+import { WS_HOST, DOS_HOST } from '../../configs/constants';
 import { getControlGp } from '@src/redux/features/control/gp/gpThunk';
+import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk';
 const WebsocketClient = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const reConnectionTime = 5000; //5초
 
+  const { laancAprvParam } = useSelector(state => state.laancState);
+  const laancAprvParamRef = useRef(laancAprvParam);
+
   const [isConnection, setIsConnection] = useState(false);
   const websocket = useRef(null);
   const timeout = useRef(null);
 
+  const [isDosConnection, setIsDosConnection] = useState(false);
+  const dosWebsocket = useRef(null);
+  const dosTimeout = useRef(null);
+
   useEffect(() => {
     connect();
+    dosConnect();
     return () => {
       websocket.current.close();
       clearTimeout(timeout.current);
+
+      dosWebsocket.current.close();
+      clearTimeout(dosTimeout.current);
     };
   }, []);
 
+  useEffect(() => {
+    laancAprvParamRef.current = laancAprvParam;
+  }, [laancAprvParam]);
+
+  const dosConnect = () => {
+    dosWebsocket.current = new WebSocket(DOS_HOST);
+
+    dosWebsocket.current.onopen = () => {
+      setIsDosConnection(true);
+      console.log('[DOS Websocket Open] Connection Open');
+    };
+
+    dosWebsocket.current.onmessage = e => {
+      const data = e.data;
+
+      const key = JSON.parse(data);
+
+      console.log(key, '-------');
+      dispatch(getLaancAprvList({ ...laancAprvParamRef.current }));
+    };
+  };
+
   const connect = () => {
     websocket.current = new WebSocket(WS_HOST);
 
@@ -60,7 +94,9 @@ const WebsocketClient = () => {
   }
   return (
     <div>
-      <span className={isConnection ? 'socket_on' : 'socket_off'}>
+      <span
+        className={isConnection && isDosConnection ? 'socket_on' : 'socket_off'}
+      >
         <VscLoading size={25} />
       </span>
     </div>

src/configs/constants.ts

@@ -1,6 +1,7 @@
 // 호스트
 export const HOST = process.env.REACT_APP_HOST;
 export const WS_HOST = process.env.REACT_APP_WS_HOST;
+export const DOS_HOST = process.env.REACT_APP_DOS_HOST;
 export const NAVER_SEARCH_API_HOST = process.env.NAVER_SEARCH_API_HOST;
 
 export const IMG_PATH = process.env.REACT_APP_IMAGE_HOST;

src/containers/flight/OperationApprovalsContainer.js

@@ -17,7 +17,8 @@ import { useHistory } from 'react-router-dom';
 import useMapType from '@hooks/useMapType';
 import {
   clientSaveAreaCoordinateList,
-  clientChangeDrawType
+  clientChangeDrawType,
+  clientRefreshAprvListParam
 } from '@src/redux/features/laanc/laancSlice';
 import { MapControl } from '../../components/map/MapControl';
 import { clientSetIsMapLoading } from '@src/redux/features/laanc/laancSlice';
@@ -293,7 +294,25 @@ export default function OperationApprovalsContainer({ mode }) {
           : {})
       })
     );
-    // );
+
+    dispatch(
+      clientRefreshAprvListParam({
+        searchStDt: searchDate.startDate,
+        searchEndDt: searchDate.endDate,
+        ctprvn: filterArea.ctprvn === '전체' ? '' : filterArea.ctprvn,
+        sig: filterArea.sig === '전체' ? '' : filterArea.sig,
+        address: filterArea.address,
+        limitZoneCd:
+          checkState.limitZoneNm === '전체' ? '' : checkState.limitZoneNm,
+        ...(search !== '' ? { applyNo: search } : {}),
+        ...(checkState.reviewedType !== '전체'
+          ? { reviewedType: checkState.reviewedType }
+          : {}),
+        ...(checkState.reviewedProcType !== '전체'
+          ? { reviewedProcType: checkState.reviewedProcType }
+          : {})
+      })
+    );
     setFilter(search);
   };