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,45 +7,51 @@ import {
   CModalBody,
   CModalFooter,
   CSpinner,
-	CBadge
+  CBadge,
 } from '@coreui/react';
 import PropTypes from 'prop-types';
 
 const ConfirmModal = ({ show, toggle, action }) => {
-	const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-	const [haveResult, setHaveResult] = useState(false);
+  const [haveResult, setHaveResult] = useState(false);
-	const [success, setSuccess] = useState(false);
+  const [success, setSuccess] = useState(false);
 
-	const getButtonContent = () => {
+  const getButtonContent = () => {
-		if(haveResult){
+    if (haveResult) {
-			if(success){
+      if (success) {
-				return (
+        return (
-          <CBadge color="success" shape="pill">Success</CBadge>
+          <CBadge color="success" shape="pill">
-				);
+            Success
-			}
+          </CBadge>
-			return (
+        );
-				<CBadge color="danger" shape="pill">Error</CBadge>
+      }
-			);
+      return (
-		}
+        <CBadge color="danger" shape="pill">
-		if(loading){
+          Error
-			return (
+        </CBadge>
-				<div>
+      );
-					Loading...
+    }
-					<CSpinner component="span" size="sm" />
+    if (loading) {
-				</div>
+      return (
-			);
+        <div>
-		}
+          Loading...
-		return 'Yes';
+          <CSpinner component="span" size="sm" />
-	}
+        </div>
+      );
+    }
+    return 'Yes';
+  };
 
-	const doAction = async () => {
+  const doAction = async () => {
-		setLoading(true);
+    setLoading(true);
-		const result = await action();
+    const result = await action();
-		setSuccess(result);
+    setSuccess(result);
-		setHaveResult(true);
+    setHaveResult(true);
-		setLoading(false);
+    setLoading(false);
-		if(result) toggle();
+    if (result) {
-	}
+      toggle();
+    }
+  };
 
   useEffect(() => {
     setLoading(false);
@@ -53,8 +59,8 @@ const ConfirmModal = ({ show, toggle, action }) => {
     setSuccess(false);
   }, [show]);
 
-	return(
+  return (
-		<CModal style= {{color: '#3c4b64'}} show={show} onClose={toggle}>
+    <CModal style={{ color: '#3c4b64' }} show={show} onClose={toggle}>
       <CModalHeader closeButton>
         <CModalTitle>Delete Command</CModalTitle>
       </CModalHeader>
@@ -62,19 +68,15 @@ const ConfirmModal = ({ show, toggle, action }) => {
         <h6>Are you sure you want to delete this command? this action is not reversible.</h6>
       </CModalBody>
       <CModalFooter>
-        <CButton
+        <CButton disabled={loading} color="primary" onClick={() => doAction()}>
-          disabled={loading}
+          {getButtonContent()}
-          color="primary"
-          onClick={() => doAction()}
-        >
-					{getButtonContent()}
         </CButton>
         <CButton color="secondary" onClick={toggle}>
           Cancel
         </CButton>
       </CModalFooter>
     </CModal>
-	);
+  );
 };
 
 ConfirmModal.propTypes = {

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 () => {
+  eventBus.on("actionCompleted", () =>
-    if(uuidDelete === ''){
+      getCommands()
+  );
+
+  const deleteCommand = async () => {
+    if (uuidDelete === '') {
       return false;
     }
     const options = {
@@ -96,18 +109,17 @@ const DeviceCommands = ({ selectedDeviceId }) => {
         Authorization: `Bearer ${getToken()}`,
       },
     };
-    return (
+    return axiosInstance
-      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'}
@@ -283,21 +296,29 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                                   toggleDetails(item, index);
                                 }}
                               >
-                                <img 
+                                <img
                                   src={details.includes(index) ? WhiteResultIcon : BlueResultIcon}
-                                  onMouseOver={e => (e.currentTarget.src = WhiteResultIcon)}
+                                  onMouseOver={(e) => (e.currentTarget.src = WhiteResultIcon)}
-                                  onMouseOut={e => (e.currentTarget.src = details.includes(index) ? WhiteResultIcon : BlueResultIcon)}
+                                  onMouseOut={(e) =>
-                                  onBlur={e => (e.currentTarget.src = details.includes(index) ? WhiteResultIcon : BlueResultIcon)}
+                                    (e.currentTarget.src = details.includes(index)
-                                  onFocus={e => (e.currentTarget.src = WhiteResultIcon)}
+                                      ? WhiteResultIcon
-                                  style={{ height: '26px', width: '25px', color: '#007bff'}} 
+                                      : BlueResultIcon)
-                                  alt="AP" 
+                                  }
+                                  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
+                              <CButton
                                 color="primary"
                                 variant={responses.includes(index) ? '' : 'outline'}
                                 shape="square"
@@ -311,14 +332,14 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                             </CPopover>
                           </CCol>
                           <CCol>
-                            <CPopover content='Delete'>
+                            <CPopover content="Delete">
-                                <CButton
+                              <CButton
                                 color="primary"
-                                variant='outline'
+                                variant="outline"
                                 shape="square"
                                 size="sm"
                                 onClick={() => {
-                                  toggleConfirmModal(item.UUID);
+                                  toggleConfirmModal(item.UUID, index);
                                 }}
                               >
                                 <CIcon name="cilTrash" size="lg" />
@@ -365,9 +386,9 @@ const DeviceCommands = ({ selectedDeviceId }) => {
         scanResults={chosenWifiScan}
         date={scanDate}
       />
-      <ConfirmModal
+      <ConfirmModal 
-        show={showConfirmModal}
+        show={showConfirmModal} 
-        toggle={toggleConfirmModal}
+        toggle={toggleConfirmModal} 
         action={deleteCommand}
       />
       <CIcon name="cilNotes" style={{ color: 'white' }} 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;