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

src/components/websocket/WebsocketClient.js

@@ -5,7 +5,8 @@ import { useHistory } from 'react-router-dom';
 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 WebsocketClient = props => {
   const dispatch = useDispatch();
   const history = useHistory();
   const reConnectionTime = 5000; //5초
@@ -21,6 +22,8 @@ const WebsocketClient = () => {
   const dosWebsocket = useRef(null);
   const dosTimeout = useRef(null);
 
+  const { hidden } = props;
+
   useEffect(() => {
     connect();
     dosConnect();
@@ -91,7 +94,7 @@ const WebsocketClient = () => {
     /* socket_off = 클래스명 변경시 빨간색! 접속이 원할하지않을때 */
   }
   return (
-    <div>
+    <div style={hidden ? { display: 'none' } : undefined}>
       <span
         className={isConnection && isDosConnection ? 'socket_on' : 'socket_off'}
       >

src/containers/flight/popup/ControlApprovalsPopupContainer.js

@@ -4,6 +4,8 @@ import { useDispatch } from '@src/redux/store';
 import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk';
 import ControlApprovalsTable from '@src/components/flight/ControlApprovalsTable';
 import NewFlightApprovalsReport from '@src/components/flight/NewFlightApprovalsReport';
+import { clientRefreshAprvListParam } from '@src/redux/features/laanc/laancSlice';
+import WebsocketClient from '@src/components/websocket/WebsocketClient';
 
 function ControlApprovalsPopupContainer() {
   const [filter, setFilter] = useState('');
@@ -82,30 +84,32 @@ function ControlApprovalsPopupContainer() {
     setStartDate(searchDate.startDate);
     setEndDate(searchDate.endDate);
     setFilter(search);
-    dispatch(
-      getLaancAprvList({
-        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 }
-          : {})
-      })
-    );
+
+    const param = {
+      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 }
+        : {})
+    };
+    dispatch(getLaancAprvList(param));
+    dispatch(clientRefreshAprvListParam(param));
+
     localStorage.setItem(
       'popupState',
       JSON.stringify({
         filter: search,
-        ctprvn: filterArea.ctprvn === '전체' ? '' : filterArea.ctprvn,
-        sig: filterArea.sig === '전체' ? '' : filterArea.sig,
+        ctprvn: filterArea.ctprvn === '시/도' ? '' : filterArea.ctprvn,
+        sig: filterArea.sig === '군/구' ? '' : filterArea.sig,
         address: filterArea.address,
         startDate: searchDate.startDate,
         endDate: searchDate.endDate,
@@ -179,6 +183,7 @@ function ControlApprovalsPopupContainer() {
             handlerSearch={handlerSearch}
             checkState={checkState}
           />
+          <WebsocketClient hidden={true} />
         </div>
       </div>
     </div>

src/containers/flight/popup/OperationApprovalsPopupContainer.js

@@ -4,6 +4,8 @@ import { useDispatch } from '@src/redux/store';
 import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk';
 import OperationApprovalsTable from '@src/components/flight/OperationApprovalsTable';
 import NewFlightApprovalsReport from '@src/components/flight/NewFlightApprovalsReport';
+import { clientRefreshAprvListParam } from '@src/redux/features/laanc/laancSlice';
+import WebsocketClient from '@src/components/websocket/WebsocketClient';
 
 function OperationApprovalsPopupContainer() {
   const [filter, setFilter] = useState('');
@@ -106,30 +108,33 @@ function OperationApprovalsPopupContainer() {
     setStartDate(searchDate.startDate);
     setEndDate(searchDate.endDate);
     setFilter(search);
-    dispatch(
-      getLaancAprvList({
-        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 }
-          : {})
-      })
-    );
+
+    const param = {
+      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 }
+        : {})
+    };
+
+    dispatch(getLaancAprvList(param));
+    dispatch(clientRefreshAprvListParam(param));
+
     localStorage.setItem(
       'popupState',
       JSON.stringify({
         filter: search,
-        ctprvn: filterArea.ctprvn === '전체' ? '' : filterArea.ctprvn,
-        sig: filterArea.sig === '전체' ? '' : filterArea.sig,
+        ctprvn: filterArea.ctprvn === '시/도' ? '' : filterArea.ctprvn,
+        sig: filterArea.sig === '군/구' ? '' : filterArea.sig,
         address: filterArea.address,
         startDate: searchDate.startDate,
         endDate: searchDate.endDate,
@@ -214,6 +219,7 @@ function OperationApprovalsPopupContainer() {
             handlerDetail={handlerDetail}
             handlerSearch={handlerSearch}
           />
+          <WebsocketClient hidden={true} />
         </div>
       </div>
     </div>