From a77916b058e9f7b96406bf8c7ee723e3b3de6bb9 Mon Sep 17 00:00:00 2001 From: bourquecharles Date: Mon, 24 May 2021 17:21:14 -0400 Subject: [PATCH] Refresh commands when wifiscan, delete when delete --- src/components/ConfirmModal.js | 88 +++++++++++++------------- src/pages/DevicePage/DeviceCommands.js | 73 +++++++++++++-------- src/pages/DevicePage/WifiScanModal.js | 2 + src/utils/EventBus.js | 13 ++++ 4 files changed, 107 insertions(+), 69 deletions(-) create mode 100644 src/utils/EventBus.js diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 610c252..9339e7c 100644 --- a/src/components/ConfirmModal.js +++ b/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 [haveResult, setHaveResult] = useState(false); - const [success, setSuccess] = useState(false); + const [loading, setLoading] = useState(false); + const [haveResult, setHaveResult] = useState(false); + const [success, setSuccess] = useState(false); - const getButtonContent = () => { - if(haveResult){ - if(success){ - return ( - Success - ); - } - return ( - Error - ); - } - if(loading){ - return ( -
- Loading... - -
- ); - } - return 'Yes'; - } + const getButtonContent = () => { + if (haveResult) { + if (success) { + return ( + + Success + + ); + } + return ( + + Error + + ); + } + if (loading) { + return ( +
+ Loading... + +
+ ); + } + return 'Yes'; + }; - const doAction = async () => { - setLoading(true); - const result = await action(); - setSuccess(result); - setHaveResult(true); - setLoading(false); - if(result) toggle(); - } + const doAction = async () => { + setLoading(true); + const result = await action(); + setSuccess(result); + setHaveResult(true); + setLoading(false); + if (result) { + toggle(); + } + }; useEffect(() => { setLoading(false); @@ -53,8 +59,8 @@ const ConfirmModal = ({ show, toggle, action }) => { setSuccess(false); }, [show]); - return( - + return ( + Delete Command @@ -62,19 +68,15 @@ const ConfirmModal = ({ show, toggle, action }) => {
Are you sure you want to delete this command? this action is not reversible.
- doAction()} - > - {getButtonContent()} + doAction()}> + {getButtonContent()} Cancel - ); + ); }; ConfirmModal.propTypes = { diff --git a/src/pages/DevicePage/DeviceCommands.js b/src/pages/DevicePage/DeviceCommands.js index ed88b49..fe89254 100644 --- a/src/pages/DevicePage/DeviceCommands.js +++ b/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 }) => { - + { toggleDetails(item, index); }} > - (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" + 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" /> - - + { - - + { - toggleConfirmModal(item.UUID); + toggleConfirmModal(item.UUID, index); }} > @@ -365,9 +386,9 @@ const DeviceCommands = ({ selectedDeviceId }) => { scanResults={chosenWifiScan} date={scanDate} /> - diff --git a/src/pages/DevicePage/WifiScanModal.js b/src/pages/DevicePage/WifiScanModal.js index 0c3590d..8af9298 100644 --- a/src/pages/DevicePage/WifiScanModal.js +++ b/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" }); }); }; diff --git a/src/utils/EventBus.js b/src/utils/EventBus.js new file mode 100644 index 0000000..9ff6f81 --- /dev/null +++ b/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;