Optimized Device commands

src/pages/DeviceListPage/DeviceList.js

@@ -351,7 +351,7 @@ const DeviceListDisplay = ({
               ),
               refresh: (item) => (
                 <td className="py-2">
-                  <CPopover content='Refresh Device'>
+                  <CPopover content="Refresh Device">
                     <CButton
                       onClick={() => refreshDevice(item.serialNumber)}
                       color="primary"
@@ -365,7 +365,7 @@ const DeviceListDisplay = ({
               ),
               show_details: (item) => (
                 <td className="py-2">
-                  <CPopover content='Device Details'>
+                  <CPopover content="Device Details">
                     <CLink
                       className="c-subheader-nav-link"
                       aria-current="page"

src/pages/DevicePage/DeviceActions.js

@@ -9,7 +9,7 @@ import BlinkModal from './BlinkModal';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
 
-const DeviceActions = ({selectedDeviceId}) => {
+const DeviceActions = ({ selectedDeviceId }) => {
   const [showRebootModal, setShowRebootModal] = useState(false);
   const [showBlinkModal, setShowBlinkModal] = useState(false);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
@@ -53,8 +53,6 @@ const DeviceActions = ({selectedDeviceId}) => {
       })
       .catch(() => {});
   };
-  
-
 
   return (
     <CCard>
@@ -98,11 +96,11 @@ const DeviceActions = ({selectedDeviceId}) => {
         </CRow>
         <CRow style={{ marginTop: '10px' }}>
           <CCol>
-            <CButton onClick={getRttysInfo} color='primary' block>
+            <CButton onClick={getRttysInfo} color="primary" block>
               Connect
             </CButton>
           </CCol>
-          <CCol/>
+          <CCol />
         </CRow>
       </CCardBody>
       <ActionModal

src/pages/DevicePage/DeviceCommands.js

@@ -8,7 +8,6 @@ import {
   CButton,
   CDataTable,
   CCard,
-  CCardBody,
   CPopover,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
@@ -16,12 +15,13 @@ import DatePicker from 'react-widgets/DatePicker';
 import { cilSync } from '@coreui/icons';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons'
+import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
 import { prettyDate, addDays, dateToUnix } from '../../utils/helper';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
 import WifiScanResultModalWidget from './WifiScanResultModal';
 import ConfirmModal from '../../components/ConfirmModal';
+import DeviceCommandsCollapse from './DeviceCommandsCollapse';
 import eventBus from '../../utils/EventBus';
 
 const DeviceCommands = ({ selectedDeviceId }) => {
@@ -61,14 +61,14 @@ const DeviceCommands = ({ selectedDeviceId }) => {
   };
 
   const deleteCommandFromList = (commandUuid) => {
-    const indexToDelete = commands.map(e => e.UUID).indexOf(commandUuid);
+    const indexToDelete = commands.map((e) => e.UUID).indexOf(commandUuid);
     const newCommands = commands;
     newCommands.splice(indexToDelete, 1);
     setCommands(newCommands);
-  }
+  };
 
   const getCommands = () => {
-    if(loading) return;
+    if (loading) return;
     setLoading(true);
     const utcStart = new Date(start).toISOString();
     const utcEnd = new Date(end).toISOString();
@@ -94,7 +94,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
         setLoading(false);
       });
   };
-  
+
   const deleteCommand = async () => {
     if (uuidDelete === '') {
       return false;
@@ -193,13 +193,11 @@ const DeviceCommands = ({ selectedDeviceId }) => {
   }, [selectedDeviceId, start, end]);
 
   useEffect(() => {
-    eventBus.on("actionCompleted", () =>
-      getCommands()
-    );
+    eventBus.on('actionCompleted', () => getCommands());
 
     return () => {
-      eventBus.remove("actionCompleted");
-    }
+      eventBus.remove('actionCompleted');
+    };
   }, []);
 
   useEffect(() => {
@@ -301,7 +299,11 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                                   toggleDetails(item, index);
                                 }}
                               >
-                                <FontAwesomeIcon icon={faClipboardCheck} className='c-icon c-icon-lg' style={{height:'19px'}}/>
+                                <FontAwesomeIcon
+                                  icon={faClipboardCheck}
+                                  className="c-icon c-icon-lg"
+                                  style={{ height: '19px' }}
+                                />
                               </CButton>
                             </CPopover>
                           </CCol>
@@ -339,20 +341,14 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                       </td>
                     ),
                     details: (item, index) => (
-                      <div>
-                        <CCollapse show={details.includes(index)}>
-                          <CCardBody>
-                            <h5>Result</h5>
-                            <div>{getDetails(item.command, item, index)}</div>
-                          </CCardBody>
-                        </CCollapse>
-                        <CCollapse show={responses.includes(index)}>
-                          <CCardBody>
-                            <h5>Details</h5>
-                            <div>{getResponse(item, index)}</div>
-                          </CCardBody>
-                        </CCollapse>
-                      </div>
+                      <DeviceCommandsCollapse
+                        details={details}
+                        responses={responses}
+                        index={index}
+                        getDetails={getDetails}
+                        getResponse={getResponse}
+                        item={item}
+                      />
                     ),
                   }}
                 />
@@ -375,11 +371,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
         scanResults={chosenWifiScan}
         date={scanDate}
       />
-      <ConfirmModal 
-        show={showConfirmModal} 
-        toggle={toggleConfirmModal} 
-        action={deleteCommand}
-      />
+      <ConfirmModal show={showConfirmModal} toggle={toggleConfirmModal} action={deleteCommand} />
       <CIcon name="cilNotes" style={{ color: 'white' }} size="lg" />
     </CWidgetDropdown>
   );

src/pages/DevicePage/DeviceCommandsCollapse.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { CCollapse, CCardBody } from '@coreui/react';
+import PropTypes from 'prop-types';
+
+const DeviceCommandsCollapse = ({ details, responses, index, item, getDetails, getResponse }) => (
+  <div>
+    <CCollapse show={details.includes(index)}>
+      <CCardBody>
+        <h5>Result</h5>
+        <div>{getDetails(item.command, item, index)}</div>
+      </CCardBody>
+    </CCollapse>
+    <CCollapse show={responses.includes(index)}>
+      <CCardBody>
+        <h5>Details</h5>
+        <div>{getResponse(item, index)}</div>
+      </CCardBody>
+    </CCollapse>
+  </div>
+);
+
+DeviceCommandsCollapse.propTypes = {
+  details: PropTypes.instanceOf(Array).isRequired,
+  responses: PropTypes.instanceOf(Array).isRequired,
+  index: PropTypes.number.isRequired,
+  getDetails: PropTypes.func.isRequired,
+  getResponse: PropTypes.func.isRequired,
+  item: PropTypes.instanceOf(Object).isRequired,
+};
+
+export default DeviceCommandsCollapse;

src/pages/DevicePage/DeviceConfiguration.js

@@ -94,21 +94,21 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
               </CCol>
             </CFormGroup>
             <CFormGroup row>
-                <CCol md="3">
-                  <CLabel>Created : </CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {prettyDate(device.createdTimestamp)}
-                </CCol>
-              </CFormGroup>
-              <CFormGroup row>
-                <CCol md="3">
-                  <CLabel>Last Configuration Download : </CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {prettyDate(device.lastConfigurationDownload)}
-                </CCol>
-              </CFormGroup>
+              <CCol md="3">
+                <CLabel>Created : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {prettyDate(device.createdTimestamp)}
+              </CCol>
+            </CFormGroup>
+            <CFormGroup row>
+              <CCol md="3">
+                <CLabel>Last Configuration Download : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {prettyDate(device.lastConfigurationDownload)}
+              </CCol>
+            </CFormGroup>
             <CCollapse show={collapse}>
               <CFormGroup row>
                 <CCol md="3">

src/pages/DevicePage/DeviceHealth.js

@@ -42,7 +42,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
   };
 
   const getDeviceHealth = () => {
-    if(loading) return;
+    if (loading) return;
     setLoading(true);
     const utcStart = new Date(start).toISOString();
     const utcEnd = new Date(end).toISOString();

src/pages/DevicePage/DeviceLogs.js

@@ -39,7 +39,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
   };
 
   const getLogs = () => {
-    if(loading) return;
+    if (loading) return;
     setLoading(true);
     const utcStart = new Date(start).toISOString();
     const utcEnd = new Date(end).toISOString();

src/pages/DevicePage/WifiScanModal.js

@@ -108,7 +108,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
       .finally(() => {
         setCheckingIfSure(false);
         setWaiting(false);
-        eventBus.dispatch("actionCompleted", { message: "An action has been completed" });
+        eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
       });
   };
 

src/utils/helper.js

@@ -45,7 +45,6 @@ const prettyNumber = (number) => {
 
 const unixToDateString = (unixNumber) => unixNumber * 1000;
 
-
 export const prettyDate = (dateString) => {
   const convertedTimestamp = unixToDateString(dateString);
   const date = new Date(convertedTimestamp);
@@ -55,4 +54,4 @@ export const prettyDate = (dateString) => {
   )}`;
 };
 
-export const dateToUnix = (date) => Math.floor(new Date(date).getTime()/1000);
+export const dateToUnix = (date) => Math.floor(new Date(date).getTime() / 1000);