Prettier run on whole solution

src/containers/TheSidebar.js

@@ -23,8 +23,18 @@ const TheSidebar = () => {
   return (
     <CSidebar show={show} onShowChange={(val) => dispatch({ type: 'set', sidebarShow: val })}>
       <CSidebarBrand className="d-md-down-none" to="/devices">
-        <img  className="c-sidebar-brand-full" src={logoBar} style={{ height: '75px'}} alt="OpenWifi" />
+        <img
-        <img  className="c-sidebar-brand-minimized" src={logoBar} style={{ height: '75px', width: '75px' }} alt="OpenWifi" />
+          className="c-sidebar-brand-full"
+          src={logoBar}
+          style={{ height: '75px' }}
+          alt="OpenWifi"
+        />
+        <img
+          className="c-sidebar-brand-minimized"
+          src={logoBar}
+          style={{ height: '75px', width: '75px' }}
+          alt="OpenWifi"
+        />
       </CSidebarBrand>
       <CSidebarNav>
         <CCreateElement

src/pages/DeviceListPage/DeviceList.js

@@ -94,7 +94,7 @@ const DeviceList = () => {
       })
       .then((response) => {
         const device = response.data.devicesWithStatus[0];
-        const foundIndex = devices.findIndex(obj => obj.serialNumber === serialNumber);
+        const foundIndex = devices.findIndex((obj) => obj.serialNumber === serialNumber);
         const newList = devices;
         newList[foundIndex] = device;
         setDevices(newList);
@@ -103,7 +103,7 @@ const DeviceList = () => {
       .catch(() => {
         setLoading(false);
       });
-  }
+  };
 
   const updateDevicesPerPage = (value) => {
     setDevicesPerPage(value);
@@ -143,7 +143,14 @@ const DeviceList = () => {
   );
 };
 
-const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount, updatePage, refreshDevice }) => {
+const DeviceListDisplay = ({
+  devices,
+  loading,
+  updateDevicesPerPage,
+  pageCount,
+  updatePage,
+  refreshDevice,
+}) => {
   const columns = [
     { key: 'deviceType', label: '', filter: false, sorter: false, _style: { width: '5%' } },
     { key: 'verifiedCertificate', label: 'Certificate', _style: { width: '1%' } },
@@ -191,23 +198,35 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
   };
 
   const getCertBadge = (cert) => {
-    if(cert === 'NO_CERTIFICATE') {
+    if (cert === 'NO_CERTIFICATE') {
       return (
-        <div style={{position: 'relative'}}>
+        <div style={{ position: 'relative' }}>
-          <CIcon style={{position: 'absolute', left: '31%', marginTop:'8%'}} name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
+          <CIcon
-          <CIcon style={{position: 'absolute', zIndex: 99, left: '21%', color: '#e55353'}} name="cil-ban" content={cilBan} size="3xl" alt="AP" />
+            style={{ position: 'absolute', left: '31%', marginTop: '8%' }}
+            name="cil-badge"
+            content={cilBadge}
+            size="2xl"
+            alt="AP"
+          />
+          <CIcon
+            style={{ position: 'absolute', zIndex: 99, left: '21%', color: '#e55353' }}
+            name="cil-ban"
+            content={cilBan}
+            size="3xl"
+            alt="AP"
+          />
         </div>
       );
     }
 
     let color = 'transparent';
-    switch(cert) {
+    switch (cert) {
       case 'VALID_CERTIFICATE':
-        color = 'danger'
+        color = 'danger';
         break;
       case 'MISMATCH_SERIAL':
         return (
-          <CBadge color={color} style={{backgroundColor: '#FFFF5C'}}>
+          <CBadge color={color} style={{ backgroundColor: '#FFFF5C' }}>
             <CIcon name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
           </CBadge>
         );
@@ -215,10 +234,22 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
         color = 'success';
         break;
       default:
-        return(
+        return (
-        <div style={{position: 'relative'}}>
+          <div style={{ position: 'relative' }}>
-          <CIcon style={{position: 'absolute', left: '31%', marginTop:'8%'}}name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
+            <CIcon
-          <CIcon style={{position: 'absolute', zIndex: 99, left: '21%', color: '#e55353'}} name="cil-ban" content={cilBan} size="3xl" alt="AP" />
+              style={{ position: 'absolute', left: '31%', marginTop: '8%' }}
+              name="cil-badge"
+              content={cilBadge}
+              size="2xl"
+              alt="AP"
+            />
+            <CIcon
+              style={{ position: 'absolute', zIndex: 99, left: '21%', color: '#e55353' }}
+              name="cil-ban"
+              content={cilBan}
+              size="3xl"
+              alt="AP"
+            />
           </div>
         );
     }
@@ -227,8 +258,7 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
         <CIcon name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
       </CBadge>
     );
-  }
+  };
-  
 
   const getStatusBadge = (status) => {
     if (status) {
@@ -286,10 +316,7 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
               ),
               verifiedCertificate: (item) => (
                 <td style={{ textAlign: 'center' }}>
-                  <CPopover
+                  <CPopover content={item.verifiedCertificate ?? 'Unknown'} placement="top">
-                    content={item.verifiedCertificate ?? 'Unknown'}
-                    placement="top"
-                  >
                     {getCertBadge(item.verifiedCertificate)}
                   </CPopover>
                 </td>
@@ -319,7 +346,12 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
               ),
               refresh: (item) => (
                 <td className="py-2">
-                  <CButton onClick={() => refreshDevice(item.serialNumber)} color="primary" variant="outline" size="sm">
+                  <CButton
+                    onClick={() => refreshDevice(item.serialNumber)}
+                    color="primary"
+                    variant="outline"
+                    size="sm"
+                  >
                     <CIcon name="cil-sync" content={cilSync} size="sm" />
                   </CButton>
                 </td>

src/pages/DevicePage/ActionModalWidget.js

@@ -118,12 +118,7 @@ const ActionModalWidget = ({ show, toggleModal, title, directions, action, extra
         <h6>{directions}</h6>
         <CRow style={{ marginTop: '20px' }}>
           <CCol>
-              <CButton 
+            <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
-                onClick={() => doAction(true)} 
-                disabled={waiting} 
-                block 
-                color="primary"
-              >
               {waiting && doingNow ? 'Loading...' : 'Do Now!'}
               <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
             </CButton>
@@ -155,7 +150,7 @@ const ActionModalWidget = ({ show, toggleModal, title, directions, action, extra
 
         <div hidden={!hadSuccess && !hadFailure}>
           <div>
-            <pre className='ignore'>{responseBody}</pre>
+            <pre className="ignore">{responseBody}</pre>
           </div>
         </div>
       </CModalBody>

src/pages/DevicePage/BlinkModalWidget.js

@@ -11,7 +11,7 @@ import {
   CForm,
   CFormGroup,
   CInputRadio,
-    CLabel
+  CLabel,
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
@@ -21,7 +21,7 @@ import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
 import axiosInstance from '../../utils/axiosInstance';
 
-const BlinkModalWidget = ({show, toggleModal}) => {
+const BlinkModalWidget = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
   const [hadFailure, setHadFailure] = useState(false);
   const [doingNow, setDoingNow] = useState(false);
@@ -78,7 +78,7 @@ const BlinkModalWidget = ({show, toggleModal}) => {
       serialNumber: selectedDeviceId,
       when: isNow ? '' : utcDateString,
       pattern: chosenPattern,
-        duration: 30
+      duration: 30,
     };
 
     const headers = {
@@ -112,12 +112,7 @@ const BlinkModalWidget = ({show, toggleModal}) => {
         <h6>When would you like make the LEDs of this device blink?</h6>
         <CRow style={{ marginTop: '20px' }}>
           <CCol>
-              <CButton 
+            <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
-                onClick={() => doAction(true)} 
-                disabled={waiting} 
-                block 
-                color="primary"
-              >
               {waiting && doingNow ? 'Loading...' : 'Do Now!'}
               <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
             </CButton>
@@ -145,29 +140,48 @@ const BlinkModalWidget = ({show, toggleModal}) => {
           </CCol>
         </CRow>
         <CRow style={{ marginTop: '20px' }}>
-            <CCol md="7">
+          <CCol md="7">Choose a pattern you would like to use:</CCol>
-                Choose a pattern you would like to use:
-            </CCol>
           <CCol>
             <CForm>
               <CFormGroup variant="checkbox" onClick={() => setPattern('on')}>
-                        <CInputRadio defaultChecked={chosenPattern === 'on'} id="radio1" name="radios" value="option1" />
+                <CInputRadio
-                        <CLabel variant="checkbox" htmlFor="radio1">On</CLabel>
+                  defaultChecked={chosenPattern === 'on'}
+                  id="radio1"
+                  name="radios"
+                  value="option1"
+                />
+                <CLabel variant="checkbox" htmlFor="radio1">
+                  On
+                </CLabel>
               </CFormGroup>
               <CFormGroup variant="checkbox" onClick={() => setPattern('off')}>
-                        <CInputRadio defaultChecked={chosenPattern === 'off'} id="radio2" name="radios" value="option2" />
+                <CInputRadio
-                        <CLabel variant="checkbox" htmlFor="radio2">Off</CLabel>
+                  defaultChecked={chosenPattern === 'off'}
+                  id="radio2"
+                  name="radios"
+                  value="option2"
+                />
+                <CLabel variant="checkbox" htmlFor="radio2">
+                  Off
+                </CLabel>
               </CFormGroup>
               <CFormGroup variant="checkbox" onClick={() => setPattern('blink')}>
-                        <CInputRadio defaultChecked={chosenPattern === 'blink'} id="radio2" name="radios" value="option2" />
+                <CInputRadio
-                        <CLabel variant="checkbox" htmlFor="radio2">Blink</CLabel>
+                  defaultChecked={chosenPattern === 'blink'}
+                  id="radio2"
+                  name="radios"
+                  value="option2"
+                />
+                <CLabel variant="checkbox" htmlFor="radio2">
+                  Blink
+                </CLabel>
               </CFormGroup>
             </CForm>
           </CCol>
         </CRow>
         <div hidden={!hadSuccess && !hadFailure}>
           <div>
-              <pre className='ignore'>{responseBody}</pre>
+            <pre className="ignore">{responseBody}</pre>
           </div>
         </div>
       </CModalBody>
@@ -196,6 +210,6 @@ const BlinkModalWidget = ({show, toggleModal}) => {
       </CModalFooter>
     </CModal>
   );
-}
+};
 
 export default BlinkModalWidget;

src/pages/DevicePage/DeviceActions.js

@@ -82,7 +82,7 @@ const DeviceActions = () => {
         actionLabel="reboot"
         action="reboot"
       />
-      <BlinkModalWidget show={showBlinkModal} toggleModal={toggleBlinkModal}/>
+      <BlinkModalWidget show={showBlinkModal} toggleModal={toggleBlinkModal} />
       <FirmwareUpgradeModal show={showUpgradeModal} toggleModal={toggleUpgradeModal} />
       <TraceModalWidget show={showTraceModal} toggleModal={toggleTraceModal} />
       <WifiScanModalWidget show={showScanModal} toggleModal={toggleScanModal} />

src/pages/DevicePage/DeviceCommands.js

@@ -18,7 +18,7 @@ import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
 import WifiScanResultModalWidget from './WifiScanResultModal';
 
-const DeviceCommands = ({selectedDeviceId}) => {
+const DeviceCommands = ({ selectedDeviceId }) => {
   const [showModal, setShowModal] = useState(false);
   const [chosenWifiScan, setChosenWifiScan] = useState(null);
   const [scanDate, setScanDate] = useState('');
@@ -40,11 +40,11 @@ const DeviceCommands = ({selectedDeviceId}) => {
 
   const modifyStart = (value) => {
     setStart(value);
-  }
+  };
 
   const modifyEnd = (value) => {
     setEnd(value);
-  }
+  };
 
   const getCommands = () => {
     setLoading(true);
@@ -67,15 +67,14 @@ const DeviceCommands = ({selectedDeviceId}) => {
       .then((response) => {
         setCommands(response.data.commands);
       })
-      .catch(() => {
+      .catch(() => {})
-      })
       .finally(() => {
         setLoading(false);
       });
   };
 
   const toggleDetails = (item, index) => {
-    if(item.command !== 'wifiscan' || !item.results.status){
+    if (item.command !== 'wifiscan' || !item.results.status) {
       const position = details.indexOf(index);
       let newDetails = details.slice();
 
@@ -85,8 +84,7 @@ const DeviceCommands = ({selectedDeviceId}) => {
         newDetails = [...details, index];
       }
       setDetails(newDetails);
-    }
+    } else {
-    else{
       setChosenWifiScan(item.results.status.scan.scan);
       setScanDate(item.completed);
       console.log(scanDate);
@@ -96,20 +94,16 @@ const DeviceCommands = ({selectedDeviceId}) => {
 
   const refreshCommands = () => {
     setEnd(new Date());
-  }
+  };
 
   const getDetails = (command, commandDetails) => {
-    if (command === 'reboot' || command === 'leds'){
+    if (command === 'reboot' || command === 'leds') {
       const result = commandDetails.results;
-      if(result)
+      if (result) return <pre className="ignore">{JSON.stringify(result, null, 4)}</pre>;
-        return (
-          <pre className='ignore'>{JSON.stringify(result, null, 4)}</pre>
-        );
     }
 
-    return <pre className='ignore'>{JSON.stringify(commandDetails, null, 4)}</pre>
+    return <pre className="ignore">{JSON.stringify(commandDetails, null, 4)}</pre>;
-    
+  };
-  }
   const columns = [
     { key: 'UUID', label: 'Id' },
     { key: 'command' },
@@ -124,13 +118,13 @@ const DeviceCommands = ({selectedDeviceId}) => {
   ];
 
   useEffect(() => {
-    if(selectedDeviceId){
+    if (selectedDeviceId) {
       getCommands();
     }
   }, [selectedDeviceId, start, end]);
 
   useEffect(() => {
-    if(selectedDeviceId){
+    if (selectedDeviceId) {
       setStart(addDays(new Date(), -3).toString());
       setEnd(new Date().toString());
       getCommands();
@@ -139,16 +133,16 @@ const DeviceCommands = ({selectedDeviceId}) => {
 
   return (
     <CWidgetDropdown
-      inverse='true'
+      inverse="true"
       color="gradient-primary"
       header="Device Commands"
       footerSlot={
         <div style={{ padding: '20px' }}>
           <CCollapse show={collapse}>
             <CRow>
-              <CCol/>
+              <CCol />
               <CCol>
-                <div  style={{float: 'right'}}>
+                <div style={{ float: 'right' }}>
                   <CButton onClick={() => refreshCommands()} size="sm">
                     <CIcon
                       name="cil-sync"
@@ -190,12 +184,18 @@ const DeviceCommands = ({selectedDeviceId}) => {
                   border
                   sorterValue={{ column: 'completed', desc: 'true' }}
                   scopedSlots={{
-                    completed: (item) => <td>{(item.completed && item.completed !== "") ? prettyDate(item.completed) : 'Pending'}</td>,
+                    completed: (item) => (
+                      <td>
+                        {item.completed && item.completed !== ''
+                          ? prettyDate(item.completed)
+                          : 'Pending'}
+                      </td>
+                    ),
                     show_details: (item, index) => (
                       <td className="py-2">
                         <CButton
                           color="primary"
-                          variant={details.includes(index) ? "" : "outline"}
+                          variant={details.includes(index) ? '' : 'outline'}
                           shape="square"
                           size="sm"
                           onClick={() => {
@@ -210,9 +210,7 @@ const DeviceCommands = ({selectedDeviceId}) => {
                       <CCollapse show={details.includes(index)}>
                         <CCardBody>
                           <h5>Details</h5>
-                          <div>
+                          <div>{getDetails(item.command, item)}</div>
-                            {getDetails(item.command, item)}
-                          </div>
                         </CCardBody>
                       </CCollapse>
                     ),
@@ -231,7 +229,12 @@ const DeviceCommands = ({selectedDeviceId}) => {
         </div>
       }
     >
-    <WifiScanResultModalWidget show={showModal} toggle={toggleModal} scanResults={chosenWifiScan} date={scanDate}/>
+      <WifiScanResultModalWidget
+        show={showModal}
+        toggle={toggleModal}
+        scanResults={chosenWifiScan}
+        date={scanDate}
+      />
       <CIcon name="cilNotes" style={{ color: 'white' }} size="lg" />
     </CWidgetDropdown>
   );

src/pages/DevicePage/DeviceConfiguration.js

@@ -17,7 +17,7 @@ import { cleanTimestamp } from '../../utils/helper';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
 
-const DeviceConfiguration = ({selectedDeviceId}) => {
+const DeviceConfiguration = ({ selectedDeviceId }) => {
   const [collapse, setCollapse] = useState(false);
   const [device, setDevice] = useState(null);
 
@@ -39,13 +39,11 @@ const DeviceConfiguration = ({selectedDeviceId}) => {
       .then((response) => {
         setDevice(response.data);
       })
-      .catch(() => {
+      .catch(() => {});
-      });
   };
 
   useEffect(() => {
-    if(selectedDeviceId)
+    if (selectedDeviceId) getDevice();
-      getDevice();
   }, [selectedDeviceId]);
 
   if (device) {
@@ -145,7 +143,12 @@ const DeviceConfiguration = ({selectedDeviceId}) => {
               </CFormGroup>
             </CCollapse>
             <CCardFooter>
-              <CButton show={collapse ? 'true' : 'false'} color="transparent" onClick={toggle} block>
+              <CButton
+                show={collapse ? 'true' : 'false'}
+                color="transparent"
+                onClick={toggle}
+                block
+              >
                 <CIcon name={collapse ? 'cilChevronTop' : 'cilChevronBottom'} size="lg" />
               </CButton>
             </CCardFooter>

src/pages/DevicePage/DeviceHealth.js

@@ -9,7 +9,7 @@ import {
   CCardBody,
   CRow,
   CCol,
-  CProgress
+  CProgress,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import DatePicker from 'react-widgets/DatePicker';
@@ -17,7 +17,7 @@ import { prettyDate, addDays } from '../../utils/helper';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
 
-const DeviceHealth = ({selectedDeviceId}) => {
+const DeviceHealth = ({ selectedDeviceId }) => {
   const [collapse, setCollapse] = useState(false);
   const [details, setDetails] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -34,11 +34,11 @@ const DeviceHealth = ({selectedDeviceId}) => {
 
   const modifyStart = (value) => {
     setStart(value);
-  }
+  };
 
   const modifyEnd = (value) => {
     setEnd(value);
-  }
+  };
 
   const getDeviceHealth = () => {
     setLoading(true);
@@ -61,8 +61,7 @@ const DeviceHealth = ({selectedDeviceId}) => {
       .then((response) => {
         setHealthChecks(response.data.values);
       })
-      .catch(() => {
+      .catch(() => {})
-      })
       .finally(() => {
         setLoading(false);
       });
@@ -95,19 +94,17 @@ const DeviceHealth = ({selectedDeviceId}) => {
   ];
 
   useEffect(() => {
-    if(selectedDeviceId){
+    if (selectedDeviceId) {
       getDeviceHealth();
     }
   }, [selectedDeviceId, start, end]);
 
-
   if (healthChecks && healthChecks.length > 0) {
-    sanityLevel = healthChecks[healthChecks.length-1].sanity;
+    sanityLevel = healthChecks[healthChecks.length - 1].sanity;
     if (sanityLevel === 100) barColor = 'gradient-success';
     else if (sanityLevel >= 90) barColor = 'gradient-warning';
     else barColor = 'gradient-danger';
-  }
+  } else {
-  else{
     sanityLevel = 0;
     barColor = 'gradient-dark';
   }
@@ -121,7 +118,7 @@ const DeviceHealth = ({selectedDeviceId}) => {
       inverse="true"
       footerSlot={
         <div style={{ padding: '20px' }}>
-          <CProgress style={{marginBottom: '20px'}} color="white" value={sanityLevel ?? 0} />
+          <CProgress style={{ marginBottom: '20px' }} color="white" value={sanityLevel ?? 0} />
           <CCollapse show={collapse}>
             <CRow style={{ marginBottom: '10px' }}>
               <CCol>
@@ -163,7 +160,7 @@ const DeviceHealth = ({selectedDeviceId}) => {
                         <td className="py-2">
                           <CButton
                             color="primary"
-                            variant={details.includes(index) ? "" : "outline"}
+                            variant={details.includes(index) ? '' : 'outline'}
                             shape="square"
                             size="sm"
                             onClick={() => {
@@ -180,7 +177,7 @@ const DeviceHealth = ({selectedDeviceId}) => {
                         <CCardBody>
                           <h5>Details</h5>
                           <div>
-                            <pre className='ignore'>{JSON.stringify(item.values, null, 4)}</pre>
+                            <pre className="ignore">{JSON.stringify(item.values, null, 4)}</pre>
                           </div>
                         </CCardBody>
                       </CCollapse>

src/pages/DevicePage/DeviceLogs.js

@@ -16,7 +16,7 @@ import { addDays, prettyDate } from '../../utils/helper';
 import axiosInstance from '../../utils/axiosInstance';
 import { getToken } from '../../utils/authHelper';
 
-const DeviceLogs = ({selectedDeviceId}) => {
+const DeviceLogs = ({ selectedDeviceId }) => {
   const [collapse, setCollapse] = useState(false);
   const [details, setDetails] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -31,11 +31,11 @@ const DeviceLogs = ({selectedDeviceId}) => {
 
   const modifyStart = (value) => {
     setStart(value);
-  }
+  };
 
   const modifyEnd = (value) => {
     setEnd(value);
-  }
+  };
 
   const getLogs = () => {
     setLoading(true);
@@ -58,8 +58,7 @@ const DeviceLogs = ({selectedDeviceId}) => {
       .then((response) => {
         setLogs(response.data.values);
       })
-      .catch(() => {
+      .catch(() => {})
-      })
       .finally(() => {
         setLoading(false);
       });
@@ -91,14 +90,14 @@ const DeviceLogs = ({selectedDeviceId}) => {
   ];
 
   useEffect(() => {
-    if(selectedDeviceId){
+    if (selectedDeviceId) {
       getLogs();
     }
   }, [start, end, selectedDeviceId]);
 
   return (
     <CWidgetDropdown
-      inverse='true'
+      inverse="true"
       color="gradient-info"
       header="Device Logs"
       footerSlot={
@@ -139,7 +138,7 @@ const DeviceLogs = ({selectedDeviceId}) => {
                       <td className="py-2">
                         <CButton
                           color="primary"
-                          variant={details.includes(index) ? "" : "outline"}
+                          variant={details.includes(index) ? '' : 'outline'}
                           shape="square"
                           size="sm"
                           onClick={() => {
@@ -155,7 +154,7 @@ const DeviceLogs = ({selectedDeviceId}) => {
                         <CCardBody>
                           <h5>Details</h5>
                           <div>
-                            <pre className='ignore'>{JSON.stringify(item, null, 4)}</pre>
+                            <pre className="ignore">{JSON.stringify(item, null, 4)}</pre>
                           </div>
                         </CCardBody>
                       </CCollapse>

src/pages/DevicePage/DevicePage.js

@@ -14,8 +14,7 @@ const DevicePage = () => {
   const { deviceId } = useParams();
 
   useEffect(() => {
-    if(deviceId)
+    if (deviceId) dispatch({ type: 'set', selectedDeviceId: deviceId });
-      dispatch({ type: 'set', selectedDeviceId: deviceId });
   }, [deviceId]);
 
   return (
@@ -23,13 +22,13 @@ const DevicePage = () => {
       <div className="App">
         <CRow>
           <CCol xs="12" sm="6">
-            <DeviceConfiguration selectedDeviceId = {deviceId} />
+            <DeviceConfiguration selectedDeviceId={deviceId} />
-            <DeviceCommands selectedDeviceId = {deviceId} />
+            <DeviceCommands selectedDeviceId={deviceId} />
           </CCol>
           <CCol xs="12" sm="6">
-            <DeviceLogs selectedDeviceId = {deviceId} />
+            <DeviceLogs selectedDeviceId={deviceId} />
-            <DeviceHealth selectedDeviceId = {deviceId} />
+            <DeviceHealth selectedDeviceId={deviceId} />
-            <DeviceActions selectedDeviceId = {deviceId} />
+            <DeviceActions selectedDeviceId={deviceId} />
           </CCol>
         </CRow>
       </div>

src/pages/DevicePage/FirmwareUpgradeModal.js

@@ -69,7 +69,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
 
   const confirmingIfNow = () => {
     setCheckingIfNow(true);
-  }
+  };
 
   useEffect(() => {
     setHadSuccess(false);
@@ -139,7 +139,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
           <CCol>
             <CButton
               color="primary"
-                onClick={() => formValidation() ? confirmingIfNow() : null} 
+              onClick={() => (formValidation() ? confirmingIfNow() : null)}
               disabled={waiting}
               hidden={checkingIfNow}
               block
@@ -148,7 +148,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
             </CButton>
             <CButton
               color="primary"
-                onClick={() => formValidation() ? postUpgrade(true) : null}
+              onClick={() => (formValidation() ? postUpgrade(true) : null)}
               disabled={waiting}
               hidden={!checkingIfNow}
               block
@@ -196,7 +196,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
         <CInvalidFeedback>You need a url...</CInvalidFeedback>
         <div hidden={!hadSuccess && !hadFailure}>
           <div>
-            <pre className='ignore'>{responseBody}</pre>
+            <pre className="ignore">{responseBody}</pre>
           </div>
         </div>
       </CModalBody>

src/pages/DevicePage/TraceModalWidget.js

@@ -10,7 +10,7 @@ import {
   CCol,
   CRow,
   CInvalidFeedback,
-  CSelect
+  CSelect,
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
@@ -63,7 +63,7 @@ const TraceModalWidget = ({ show, toggleModal }) => {
     const now = new Date();
     let utcDateString = dateChosen.toISOString();
 
-    if(dateChosen <= now){
+    if (dateChosen <= now) {
       const newDate = new Date();
       newDate.setSeconds(newDate.getSeconds() + 60);
       utcDateString = newDate.toISOString();
@@ -72,7 +72,7 @@ const TraceModalWidget = ({ show, toggleModal }) => {
     const parameters = {
       serialNumber: selectedDeviceId,
       when: dateChosen <= now ? '' : utcDateString,
-      network: 'lan'
+      network: 'lan',
     };
 
     if (usingDuration) {
@@ -140,17 +140,33 @@ const TraceModalWidget = ({ show, toggleModal }) => {
           <CCol xs="12" md="8">
             {usingDuration ? (
               <CSelect defaultValue="duration" disabled={waiting}>
-                <option value="20" onClick={() => setDuration(20)}>20s</option>
+                <option value="20" onClick={() => setDuration(20)}>
-                <option value="40" onClick={() => setDuration(40)}>40s</option>
+                  20s
-                <option value="60" onClick={() => setDuration(60)}>60s</option>
+                </option>
-                <option value="120" onClick={() => setDuration(120)}>120s</option>
+                <option value="40" onClick={() => setDuration(40)}>
+                  40s
+                </option>
+                <option value="60" onClick={() => setDuration(60)}>
+                  60s
+                </option>
+                <option value="120" onClick={() => setDuration(120)}>
+                  120s
+                </option>
               </CSelect>
             ) : (
               <CSelect defaultValue={packets} disabled={waiting}>
-                <option value="100" onClick={() => setPackets(100)}>100</option>
+                <option value="100" onClick={() => setPackets(100)}>
-                <option value="250" onClick={() => setPackets(250)}>250</option>
+                  100
-                <option value="500" onClick={() => setPackets(500)}>500</option>
+                </option>
-                <option value="1000" onClick={() => setPackets(1000)}>1000</option>
+                <option value="250" onClick={() => setPackets(250)}>
+                  250
+                </option>
+                <option value="500" onClick={() => setPackets(500)}>
+                  500
+                </option>
+                <option value="1000" onClick={() => setPackets(1000)}>
+                  1000
+                </option>
               </CSelect>
             )}
           </CCol>
@@ -175,7 +191,7 @@ const TraceModalWidget = ({ show, toggleModal }) => {
 
         <div hidden={!hadSuccess && !hadFailure}>
           <div>
-            <pre className='ignore'>{responseBody} </pre>
+            <pre className="ignore">{responseBody} </pre>
           </div>
         </div>
       </CModalBody>

src/pages/DevicePage/WifiChannelCard.js

@@ -1,37 +1,22 @@
-import {
+import { CCard, CCardTitle, CCardBody, CDataTable, CCardHeader } from '@coreui/react';
-    CCard,
-    CCardTitle,
-    CCardBody,
-    CDataTable,
-    CCardHeader
-  } from '@coreui/react';
 import React from 'react';
 import 'react-widgets/styles.css';
 
 const WifiChannelCard = ({ channel }) => {
-    const columns = [
+  const columns = [{ key: 'SSID', _style: { width: '70%' } }, { key: 'Signal' }];
-        { key: 'SSID', _style: { width: '70%' }},
-        { key: 'Signal' },
-    ];
 
   return (
     <CCard>
       <CCardHeader>
-                <CCardTitle style={{color:'black'}}>
+        <CCardTitle style={{ color: 'black' }}>Channel #{channel.channel}</CCardTitle>
-                    Channel #{channel.channel}
-                </CCardTitle>
       </CCardHeader>
       <CCardBody>
         <div className="overflow-auto" style={{ height: '250px' }}>
-                <CDataTable
+          <CDataTable items={channel.devices} fields={columns} style={{ color: 'white' }} />
-                    items={channel.devices}
-                    fields={columns}
-                    style={{ color: 'white' }}
-                />
         </div>
       </CCardBody>
     </CCard>
   );
-}
+};
 
 export default WifiChannelCard;

src/pages/DevicePage/WifiChannelTable.js

@@ -1,41 +1,33 @@
-import {
+import { CCol, CRow } from '@coreui/react';
-    CCol,
-    CRow
-  } from '@coreui/react';
 import React, { useEffect } from 'react';
 import { v4 as createUuid } from 'uuid';
 import WifiChannelCard from './WifiChannelCard';
 
-const WifiChannelTable = ({channels}) => {
+const WifiChannelTable = ({ channels }) => {
   const sortChannels = () => {
-        channels.sort((a, b) => (a.channel > b.channel) ? 1 : -1);
+    channels.sort((a, b) => (a.channel > b.channel ? 1 : -1));
   };
 
   useEffect(() => {
-        if (channels)
+    if (channels) sortChannels();
-            sortChannels();
   }, [channels]);
 
   return (
     <CRow>
       <CCol>
-                {
+        {channels.map((channel, index) => {
-                    channels.map((channel, index) => {
+          if (index % 2 === 0) return <WifiChannelCard key={createUuid()} channel={channel} />;
-                        if(index % 2 === 0) return <WifiChannelCard key={createUuid()} channel={channel}/>;
+          return <div key={createUuid()} />;
-                        return <div key={createUuid()}/>
+        })}
-                    })
-                }
       </CCol>
       <CCol>
-                {
+        {channels.map((channel, index) => {
-                    channels.map((channel, index) => {
+          if (index % 2 === 1) return <WifiChannelCard key={createUuid()} channel={channel} />;
-                        if(index % 2 === 1) return <WifiChannelCard key={createUuid()} channel={channel}/>;
+          return <div key={createUuid()} />;
-                        return <div key={createUuid()}/>
+        })}
-                    })
-                }
       </CCol>
     </CRow>
   );
-}
+};
 
 export default WifiChannelTable;

src/pages/DevicePage/WifiScanModal.js

@@ -10,16 +10,16 @@ import {
   CFormGroup,
   CInputRadio,
   CLabel,
-    CForm
+  CForm,
-  } from '@coreui/react';
+} from '@coreui/react';
-  import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
-  import { useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
-  import WifiChannelTable from './WifiChannelTable';
+import WifiChannelTable from './WifiChannelTable';
-  import 'react-widgets/styles.css';
+import 'react-widgets/styles.css';
-  import { getToken } from '../../utils/authHelper';
+import { getToken } from '../../utils/authHelper';
-  import axiosInstance from '../../utils/axiosInstance';
+import axiosInstance from '../../utils/axiosInstance';
 
-  const WifiScanModalWidget = ({ show, toggleModal }) => {
+const WifiScanModalWidget = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
   const [hadFailure, setHadFailure] = useState(false);
   const [waiting, setWaiting] = useState(false);
@@ -46,7 +46,7 @@ import {
     const listOfChannels = [];
 
     scanList.forEach((scan) => {
-            if(!listOfChannels.includes(scan.channel)){
+      if (!listOfChannels.includes(scan.channel)) {
         listOfChannels.push(scan.channel);
       }
     });
@@ -55,11 +55,11 @@ import {
     listOfChannels.forEach((channelNumber) => {
       const channel = {
         channel: channelNumber,
-                devices: []
+        devices: [],
       };
 
       scanList.forEach((device) => {
-               if(device.channel === channelNumber){
+        if (device.channel === channelNumber) {
           const deviceToAdd = {};
           deviceToAdd.SSID = device.ssid ?? 'N/A';
           deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
@@ -70,7 +70,7 @@ import {
       finalList.push(channel);
     });
     return finalList;
-    }
+  };
 
   const doAction = () => {
     setHadFailure(false);
@@ -81,7 +81,7 @@ import {
 
     const parameters = {
       serialNumber: selectedDeviceId,
-        verbose: choseVerbose
+      verbose: choseVerbose,
     };
     const headers = {
       Accept: 'application/json',
@@ -93,14 +93,12 @@ import {
       .then((response) => {
         const scanList = response.data.results.status.scan.scan;
 
-            if(scanList){
+        if (scanList) {
           setChannelList(parseThroughList(scanList));
           setHadSuccess(true);
-            }
+        } else {
-            else{
           setHadFailure(true);
         }
-            
       })
       .catch(() => {
         setHadFailure(true);
@@ -117,29 +115,41 @@ import {
         <CModalTitle>Wifi Scan</CModalTitle>
       </CModalHeader>
       <CModalBody>
-          <h6>
+        <h6>Launch a wifi scan of this device, which should take approximately 25 seconds.</h6>
-            Launch a wifi scan of this device, which should take approximately 25 seconds.
-          </h6>
         <CRow style={{ marginTop: '20px' }}>
-            <CForm style={{paddingLeft: '5%'}}>
+          <CForm style={{ paddingLeft: '5%' }}>
             <CFormGroup variant="checkbox" onClick={() => setVerbose(true)}>
-                    <CInputRadio defaultChecked={choseVerbose} id="radio1" name="radios" value="option1" />
+              <CInputRadio
-                    <CLabel variant="checkbox" htmlFor="radio1">With verbose</CLabel>
+                defaultChecked={choseVerbose}
+                id="radio1"
+                name="radios"
+                value="option1"
+              />
+              <CLabel variant="checkbox" htmlFor="radio1">
+                With verbose
+              </CLabel>
             </CFormGroup>
             <CFormGroup variant="checkbox" onClick={() => setVerbose(false)}>
-                    <CInputRadio defaultChecked={!choseVerbose} id="radio2" name="radios" value="option2" />
+              <CInputRadio
-                    <CLabel variant="checkbox" htmlFor="radio2">Without verbose</CLabel>
+                defaultChecked={!choseVerbose}
+                id="radio2"
+                name="radios"
+                value="option2"
+              />
+              <CLabel variant="checkbox" htmlFor="radio2">
+                Without verbose
+              </CLabel>
             </CFormGroup>
           </CForm>
         </CRow>
-          <div style={{marginTop: '3%'}} hidden={!hadSuccess && !hadFailure}>
+        <div style={{ marginTop: '3%' }} hidden={!hadSuccess && !hadFailure}>
-            <WifiChannelTable channels={channelList}/>
+          <WifiChannelTable channels={channelList} />
         </div>
       </CModalBody>
       <CModalFooter>
         <div hidden={!checkingIfSure}>Are you sure?</div>
         <CButton hidden={checkingIfSure} color="primary" onClick={() => confirmingIfSure()}>
-            {(hadSuccess || hadFailure) ? 'Re-Scan' : 'Scan'}
+          {hadSuccess || hadFailure ? 'Re-Scan' : 'Scan'}
         </CButton>
         <CButton
           hidden={!checkingIfSure}
@@ -156,7 +166,6 @@ import {
       </CModalFooter>
     </CModal>
   );
-  };
+};
-  
-  export default WifiScanModalWidget;
 
+export default WifiScanModalWidget;

src/pages/DevicePage/WifiScanResultModal.js

@@ -6,18 +6,18 @@ import {
   CModalHeader,
   CModalBody,
   CModalTitle,
-  CModalFooter
+  CModalFooter,
 } from '@coreui/react';
 import WifiChannelTable from './WifiChannelTable';
 import { prettyDate } from '../../utils/helper';
 
-const WifiScanResultModalWidget = ({show, toggle, scanResults, date}) => {
+const WifiScanResultModalWidget = ({ show, toggle, scanResults, date }) => {
   const parseThroughList = (scanList) => {
     const dbmNumber = 4294967295;
     const listOfChannels = [];
 
     scanList.forEach((scan) => {
-            if(!listOfChannels.includes(scan.channel)){
+      if (!listOfChannels.includes(scan.channel)) {
         listOfChannels.push(scan.channel);
       }
     });
@@ -26,11 +26,11 @@ const WifiScanResultModalWidget = ({show, toggle, scanResults, date}) => {
     listOfChannels.forEach((channelNumber) => {
       const channel = {
         channel: channelNumber,
-                devices: []
+        devices: [],
       };
 
       scanList.forEach((device) => {
-               if(device.channel === channelNumber){
+        if (device.channel === channelNumber) {
           const deviceToAdd = {};
           deviceToAdd.SSID = device.ssid ?? 'N/A';
           deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
@@ -41,14 +41,18 @@ const WifiScanResultModalWidget = ({show, toggle, scanResults, date}) => {
       finalList.push(channel);
     });
     return finalList;
-    }
+  };
   return (
     <CModal size="lg" show={show} onClose={toggle}>
       <CModalHeader closeButton>
-            <CModalTitle style={{color: 'black'}}>{date !== '' ? prettyDate(date) : ''} Wifi Scan Results</CModalTitle>
+        <CModalTitle style={{ color: 'black' }}>
+          {date !== '' ? prettyDate(date) : ''} Wifi Scan Results
+        </CModalTitle>
       </CModalHeader>
       <CModalBody>
-              {scanResults === null ? null : <WifiChannelTable channels={parseThroughList(scanResults)}/>}
+        {scanResults === null ? null : (
+          <WifiChannelTable channels={parseThroughList(scanResults)} />
+        )}
       </CModalBody>
       <CModalFooter>
         <CButton color="secondary" onClick={toggle}>
@@ -57,5 +61,5 @@ const WifiScanResultModalWidget = ({show, toggle, scanResults, date}) => {
       </CModalFooter>
     </CModal>
   );
-}
+};
 export default WifiScanResultModalWidget;

src/pages/LoginPage/Login.js

@@ -20,7 +20,7 @@ import CIcon from '@coreui/icons-react';
 import { cilUser, cilLockLocked, cilLink } from '@coreui/icons';
 import { useDispatch } from 'react-redux';
 import axiosInstance from '../../utils/axiosInstance';
-import logo from '../../assets/OpenWiFi_LogoLockup_DarkGreyColour.svg'
+import logo from '../../assets/OpenWiFi_LogoLockup_DarkGreyColour.svg';
 
 const Login = () => {
   const dispatch = useDispatch();
@@ -92,7 +92,12 @@ const Login = () => {
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md="8">
-            <img  className="c-sidebar-brand-full" src={logo} style={{ paddingLeft: '17%', width: '85%'}} alt="OpenWifi" />
+            <img
+              className="c-sidebar-brand-full"
+              src={logo}
+              style={{ paddingLeft: '17%', width: '85%' }}
+              alt="OpenWifi"
+            />
             <CCardGroup>
               <CCard className="p-4">
                 <CCardBody>

src/store.js

@@ -3,7 +3,7 @@ import { createStore } from 'redux';
 const initialState = {
   sidebarShow: 'responsive',
   connected: false,
-  selectedDeviceId: null
+  selectedDeviceId: null,
 };
 
 const changeState = (state = initialState, { type, ...rest }) => {

src/utils/axiosInstance.js

@@ -4,11 +4,8 @@ import http from 'http';
 import https from 'https';
 
 const httpAgent = new http.Agent({ keepAlive: true });
-const httpsAgent = new https.Agent({ keepAlive: true});
+const httpsAgent = new https.Agent({ keepAlive: true });
-const axiosInstance = axios.create(
+const axiosInstance = axios.create(httpAgent, httpsAgent);
-  httpAgent,
-  httpsAgent
-);
 
 axiosRetry(axiosInstance, {
   retries: 3,

src/utils/helper.js

@@ -37,14 +37,16 @@ export const addDays = (date, days) => {
 };
 
 const prettyNumber = (number) => {
-  if (number >= 10){
+  if (number >= 10) {
     return number;
   }
   return `0${number}`;
-}
+};
 
 export const prettyDate = (dateString) => {
   const date = new Date(dateString);
   return `${date.getFullYear()}-${prettyNumber(date.getMonth() + 1)}-${prettyNumber(date.getDate())}
-  ${prettyNumber(date.getHours())}:${prettyNumber(date.getMinutes())}:${prettyNumber(date.getSeconds())}`;
+  ${prettyNumber(date.getHours())}:${prettyNumber(date.getMinutes())}:${prettyNumber(
-}
+    date.getSeconds(),
+  )}`;
+};