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

@@ -54,8 +54,6 @@ const DeviceActions = ({selectedDeviceId}) => {
       .catch(() => {});
   };
 
-
-
   return (
     <CCard>
       <CCardHeader>Device Actions</CCardHeader>
@@ -98,7 +96,7 @@ const DeviceActions = ({selectedDeviceId}) => {
         </CRow>
         <CRow style={{ marginTop: '10px' }}>
           <CCol>
-            <CButton onClick={getRttysInfo} color='primary' block>
+            <CButton onClick={getRttysInfo} color="primary" block>
               Connect
             </CButton>
           </CCol>

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,11 +61,11 @@ 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;
@@ -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/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);