Refresh commands when wifiscan, delete when delete

src/components/ConfirmModal.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   CButton,
   CModal,
@@ -7,7 +7,7 @@ import {
   CModalBody,
   CModalFooter,
   CSpinner,
-	CBadge
+  CBadge,
 } from '@coreui/react';
 import PropTypes from 'prop-types';
 
@@ -17,17 +17,21 @@ const ConfirmModal = ({ show, toggle, action }) => {
   const [success, setSuccess] = useState(false);
 
   const getButtonContent = () => {
-		if(haveResult){
-			if(success){
+    if (haveResult) {
+      if (success) {
         return (
-          <CBadge color="success" shape="pill">Success</CBadge>
+          <CBadge color="success" shape="pill">
+            Success
+          </CBadge>
         );
       }
       return (
-				<CBadge color="danger" shape="pill">Error</CBadge>
+        <CBadge color="danger" shape="pill">
+          Error
+        </CBadge>
       );
     }
-		if(loading){
+    if (loading) {
       return (
         <div>
           Loading...
@@ -36,7 +40,7 @@ const ConfirmModal = ({ show, toggle, action }) => {
       );
     }
     return 'Yes';
-	}
+  };
 
   const doAction = async () => {
     setLoading(true);
@@ -44,8 +48,10 @@ const ConfirmModal = ({ show, toggle, action }) => {
     setSuccess(result);
     setHaveResult(true);
     setLoading(false);
-		if(result) toggle();
+    if (result) {
+      toggle();
     }
+  };
 
   useEffect(() => {
     setLoading(false);
@@ -53,8 +59,8 @@ const ConfirmModal = ({ show, toggle, action }) => {
     setSuccess(false);
   }, [show]);
 
-	return(
-		<CModal style= {{color: '#3c4b64'}} show={show} onClose={toggle}>
+  return (
+    <CModal style={{ color: '#3c4b64' }} show={show} onClose={toggle}>
       <CModalHeader closeButton>
         <CModalTitle>Delete Command</CModalTitle>
       </CModalHeader>
@@ -62,11 +68,7 @@ const ConfirmModal = ({ show, toggle, action }) => {
         <h6>Are you sure you want to delete this command? this action is not reversible.</h6>
       </CModalBody>
       <CModalFooter>
-        <CButton
-          disabled={loading}
-          color="primary"
-          onClick={() => doAction()}
-        >
+        <CButton disabled={loading} color="primary" onClick={() => doAction()}>
           {getButtonContent()}
         </CButton>
         <CButton color="secondary" onClick={toggle}>

src/pages/DevicePage/DeviceCommands.js

@@ -22,6 +22,7 @@ import WifiScanResultModalWidget from './WifiScanResultModal';
 import ConfirmModal from '../../components/ConfirmModal';
 import BlueResultIcon from '../../assets/icons/BlueResultsIcon.png';
 import WhiteResultIcon from '../../assets/icons/WhiteResultsIcon.png';
+import eventBus from '../../utils/EventBus';
 
 const DeviceCommands = ({ selectedDeviceId }) => {
   const [showScanModal, setShowScanModal] = useState(false);
@@ -31,6 +32,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
   const [scanDate, setScanDate] = useState('');
   const [collapse, setCollapse] = useState(false);
   const [details, setDetails] = useState([]);
+  const [toDelete, setToDelete] = useState(null);
   const [responses, setResponses] = useState([]);
   const [commands, setCommands] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -46,7 +48,8 @@ const DeviceCommands = ({ selectedDeviceId }) => {
     setShowScanModal(!showScanModal);
   };
 
-  const toggleConfirmModal = (uuid) => {
+  const toggleConfirmModal = (uuid, index) => {
+    setToDelete(index);
     setUuidDelete(uuid);
     setShowConfirmModal(!showConfirmModal);
   };
@@ -59,6 +62,12 @@ const DeviceCommands = ({ selectedDeviceId }) => {
     setEnd(value);
   };
 
+  const deleteCommandFromList = (index) => {
+    const newCommands = commands;
+    newCommands.splice(index, 1);
+    setCommands(newCommands);
+  }
+
   const getCommands = () => {
     setLoading(true);
     const utcStart = new Date(start).toISOString();
@@ -86,8 +95,12 @@ const DeviceCommands = ({ selectedDeviceId }) => {
       });
   };
 
-  const deleteCommand= async () => {
-    if(uuidDelete === ''){
+  eventBus.on("actionCompleted", () =>
+      getCommands()
+  );
+
+  const deleteCommand = async () => {
+    if (uuidDelete === '') {
       return false;
     }
     const options = {
@@ -96,18 +109,17 @@ const DeviceCommands = ({ selectedDeviceId }) => {
         Authorization: `Bearer ${getToken()}`,
       },
     };
-    return (
-      axiosInstance
+    return axiosInstance
       .delete(`/command/${uuidDelete}`, options)
       .then(() => {
+        deleteCommandFromList(toDelete);
         setUuidDelete('');
         return true;
       })
       .catch(() => {
         setUuidDelete('');
         return false;
-      })
-    );
+      });
   };
 
   const toggleDetails = (item, index) => {
@@ -174,8 +186,8 @@ const DeviceCommands = ({ selectedDeviceId }) => {
       label: '',
       sorter: false,
       filter: false,
-      _style: { width: '14%' }
-    }
+      _style: { width: '14%' },
+    },
   ];
 
   useEffect(() => {
@@ -189,6 +201,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
       setStart(addDays(new Date(), -3).toString());
       setEnd(new Date().toString());
       getCommands();
+      setToDelete(null);
     }
   }, [selectedDeviceId]);
 
@@ -272,7 +285,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                       <td>
                         <CRow>
                           <CCol>
-                            <CPopover content='Results'>
+                            <CPopover content="Results">
                               <CButton
                                 color="primary"
                                 variant={details.includes(index) ? '' : 'outline'}
@@ -285,18 +298,26 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                               >
                                 <img
                                   src={details.includes(index) ? WhiteResultIcon : BlueResultIcon}
-                                  onMouseOver={e => (e.currentTarget.src = WhiteResultIcon)}
-                                  onMouseOut={e => (e.currentTarget.src = details.includes(index) ? WhiteResultIcon : BlueResultIcon)}
-                                  onBlur={e => (e.currentTarget.src = details.includes(index) ? WhiteResultIcon : BlueResultIcon)}
-                                  onFocus={e => (e.currentTarget.src = WhiteResultIcon)}
-                                  style={{ height: '26px', width: '25px', color: '#007bff'}} 
+                                  onMouseOver={(e) => (e.currentTarget.src = WhiteResultIcon)}
+                                  onMouseOut={(e) =>
+                                    (e.currentTarget.src = details.includes(index)
+                                      ? WhiteResultIcon
+                                      : BlueResultIcon)
+                                  }
+                                  onBlur={(e) =>
+                                    (e.currentTarget.src = details.includes(index)
+                                      ? WhiteResultIcon
+                                      : BlueResultIcon)
+                                  }
+                                  onFocus={(e) => (e.currentTarget.src = WhiteResultIcon)}
+                                  style={{ height: '26px', width: '25px', color: '#007bff' }}
                                   alt="AP"
                                 />
                               </CButton>
                             </CPopover>
                           </CCol>
                           <CCol>
-                            <CPopover content='Full Details'>
+                            <CPopover content="Full Details">
                               <CButton
                                 color="primary"
                                 variant={responses.includes(index) ? '' : 'outline'}
@@ -311,14 +332,14 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                             </CPopover>
                           </CCol>
                           <CCol>
-                            <CPopover content='Delete'>
+                            <CPopover content="Delete">
                               <CButton
                                 color="primary"
-                                variant='outline'
+                                variant="outline"
                                 shape="square"
                                 size="sm"
                                 onClick={() => {
-                                  toggleConfirmModal(item.UUID);
+                                  toggleConfirmModal(item.UUID, index);
                                 }}
                               >
                                 <CIcon name="cilTrash" size="lg" />

src/pages/DevicePage/WifiScanModal.js

@@ -19,6 +19,7 @@ import WifiChannelTable from './WifiChannelTable';
 import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
 import axiosInstance from '../../utils/axiosInstance';
+import eventBus from '../../utils/EventBus';
 
 const WifiScanModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
@@ -107,6 +108,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
       .finally(() => {
         setCheckingIfSure(false);
         setWaiting(false);
+        eventBus.dispatch("actionCompleted", { message: "An action has been completed" });
       });
   };
 

src/utils/EventBus.js

@@ -0,0 +1,13 @@
+const eventBus = {
+  on(event, callback) {
+    document.addEventListener(event, (e) => callback(e.detail));
+  },
+  dispatch(event, data) {
+    document.dispatchEvent(new CustomEvent(event, { detail: data }));
+  },
+  remove(event, callback) {
+    document.removeEventListener(event, callback);
+  },
+};
+
+export default eventBus;