Prettier run on whole solution

2025-10-30 17:57:46 +00:00 · 2021-05-21 18:22:27 -04:00
parent 99e11cee88
commit 8e68f12558
21 changed files with 687 additions and 625 deletions
--- a/src/containers/TheSidebar.js
+++ b/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  className="c-sidebar-brand-minimized" src={logoBar} style={{ height: '75px', width: '75px' }} alt="OpenWifi" />
+        <img
+          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
--- a/src/pages/DeviceListPage/DeviceList.js
+++ b/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'}}>
-          <CIcon 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 style={{ position: 'relative' }}>
+          <CIcon
+            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,11 +234,23 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
        color = 'success';
        break;
      default:
-        return(
-        <div style={{position: 'relative'}}>
-          <CIcon 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>
+        return (
+          <div style={{ position: 'relative' }}>
+            <CIcon
+              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>
        );
    }
    return (
@@ -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) {
@@ -264,11 +294,11 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
              serialNumber: (item) => (
                <td style={{ textAlign: 'center' }}>
                  <CLink
-                      className="c-subheader-nav-link"
-                      aria-current="page"
-                      to={() => `/devices/${item.serialNumber}`}
-                    >
-                      {item.serialNumber}
+                    className="c-subheader-nav-link"
+                    aria-current="page"
+                    to={() => `/devices/${item.serialNumber}`}
+                  >
+                    {item.serialNumber}
                  </CLink>
                </td>
              ),
@@ -286,10 +316,7 @@ const DeviceListDisplay = ({ devices, loading, updateDevicesPerPage, pageCount,
              ),
              verifiedCertificate: (item) => (
                <td style={{ textAlign: 'center' }}>
-                  <CPopover
-                    content={item.verifiedCertificate ?? 'Unknown'}
-                    placement="top"
-                  >
+                  <CPopover 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>
--- a/src/pages/DevicePage/ActionModalWidget.js
+++ b/src/pages/DevicePage/ActionModalWidget.js
@@ -118,15 +118,10 @@ const ActionModalWidget = ({ show, toggleModal, title, directions, action, extra
        <h6>{directions}</h6>
        <CRow style={{ marginTop: '20px' }}>
          <CCol>
-              <CButton 
-                onClick={() => doAction(true)} 
-                disabled={waiting} 
-                block 
-                color="primary"
-              >
-                {waiting && doingNow ? 'Loading...' : 'Do Now!'}
-                <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
-              </CButton>
+            <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
+              {waiting && doingNow ? 'Loading...' : 'Do Now!'}
+              <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
+            </CButton>
          </CCol>
          <CCol>
            <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
@@ -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>
--- a/src/pages/DevicePage/BlinkModalWidget.js
+++ b/src/pages/DevicePage/BlinkModalWidget.js
@@ -1,17 +1,17 @@
 import {
-    CButton,
-    CModal,
-    CModalHeader,
-    CModalTitle,
-    CModalBody,
-    CModalFooter,
-    CSpinner,
-    CCol,
-    CRow,
-    CForm,
-    CFormGroup,
-    CInputRadio,
-    CLabel
+  CButton,
+  CModal,
+  CModalHeader,
+  CModalTitle,
+  CModalBody,
+  CModalFooter,
+  CSpinner,
+  CCol,
+  CRow,
+  CForm,
+  CFormGroup,
+  CInputRadio,
+  CLabel,
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
@@ -21,181 +21,195 @@ import 'react-widgets/styles.css';
 import { getToken } from '../../utils/authHelper';
 import axiosInstance from '../../utils/axiosInstance';

-const BlinkModalWidget = ({show, toggleModal}) => {
-    const [hadSuccess, setHadSuccess] = useState(false);
-    const [hadFailure, setHadFailure] = useState(false);
-    const [doingNow, setDoingNow] = useState(false);
-    const [waiting, setWaiting] = useState(false);
-    const [chosenDate, setChosenDate] = useState(new Date().toString());
-    const [chosenPattern, setPattern] = useState('on');
-    const [responseBody, setResponseBody] = useState('');
-    const [checkingIfSure, setCheckingIfSure] = useState(false);
-    const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
+const BlinkModalWidget = ({ show, toggleModal }) => {
+  const [hadSuccess, setHadSuccess] = useState(false);
+  const [hadFailure, setHadFailure] = useState(false);
+  const [doingNow, setDoingNow] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+  const [chosenDate, setChosenDate] = useState(new Date().toString());
+  const [chosenPattern, setPattern] = useState('on');
+  const [responseBody, setResponseBody] = useState('');
+  const [checkingIfSure, setCheckingIfSure] = useState(false);
+  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

-    const setDateToLate = () => {
-      const date = convertDateToUtc(new Date());
-      if (date.getHours() >= 3) {
-        date.setDate(date.getDate() + 1);
-      }
-      date.setHours(3);
-      date.setMinutes(0);
+  const setDateToLate = () => {
+    const date = convertDateToUtc(new Date());
+    if (date.getHours() >= 3) {
+      date.setDate(date.getDate() + 1);
+    }
+    date.setHours(3);
+    date.setMinutes(0);

-      setChosenDate(convertDateFromUtc(date).toString());
+    setChosenDate(convertDateFromUtc(date).toString());
+  };
+
+  const setDate = (date) => {
+    if (date) {
+      setChosenDate(date.toString());
+    }
+  };
+
+  const confirmingIfSure = () => {
+    setCheckingIfSure(true);
+  };
+
+  useEffect(() => {
+    setHadSuccess(false);
+    setHadFailure(false);
+    setWaiting(false);
+    setChosenDate(new Date().toString());
+    setResponseBody('');
+    setPattern('on');
+    setCheckingIfSure(false);
+    setDoingNow(false);
+  }, [show]);
+
+  const doAction = (isNow) => {
+    setDoingNow(isNow);
+    setHadFailure(false);
+    setHadSuccess(false);
+    setWaiting(true);
+
+    const token = getToken();
+    const utcDate = new Date(chosenDate);
+    const utcDateString = utcDate.toISOString();
+
+    const parameters = {
+      serialNumber: selectedDeviceId,
+      when: isNow ? '' : utcDateString,
+      pattern: chosenPattern,
+      duration: 30,
    };

-    const setDate = (date) => {
-      if (date) {
-        setChosenDate(date.toString());
-      }
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${token}`,
    };

-    const confirmingIfSure = () => {
-      setCheckingIfSure(true);
-    };
+    axiosInstance
+      .post(`/device/${selectedDeviceId}/leds`, parameters, { headers })
+      .then(() => {
+        setResponseBody('Command submitted!');
+        setHadSuccess(true);
+      })
+      .catch(() => {
+        setResponseBody('Error while submitting command!');
+        setHadFailure(true);
+      })
+      .finally(() => {
+        setDoingNow(false);
+        setCheckingIfSure(false);
+        setWaiting(false);
+      });
+  };

-    useEffect(() => {
-      setHadSuccess(false);
-      setHadFailure(false);
-      setWaiting(false);
-      setChosenDate(new Date().toString());
-      setResponseBody('');
-      setPattern('on');
-      setCheckingIfSure(false);
-      setDoingNow(false);
-    }, [show]);
-  
-    const doAction = (isNow) => {
-      setDoingNow(isNow);
-      setHadFailure(false);
-      setHadSuccess(false);
-      setWaiting(true);
-  
-      const token = getToken();
-      const utcDate = new Date(chosenDate);
-      const utcDateString = utcDate.toISOString();
-  
-      const parameters = {
-        serialNumber: selectedDeviceId,
-        when: isNow ? '' : utcDateString,
-        pattern: chosenPattern,
-        duration: 30
-      };
-  
-      const headers = {
-        Accept: 'application/json',
-        Authorization: `Bearer ${token}`,
-      };
-  
-      axiosInstance
-        .post(`/device/${selectedDeviceId}/leds`, parameters, { headers })
-        .then(() => {
-          setResponseBody('Command submitted!');
-          setHadSuccess(true);
-        })
-        .catch(() => {
-          setResponseBody('Error while submitting command!');
-          setHadFailure(true);
-        })
-        .finally(() => {
-          setDoingNow(false);
-          setCheckingIfSure(false);
-          setWaiting(false);
-        });
-    };
-  
-    return (
-      <CModal show={show} onClose={toggleModal}>
-        <CModalHeader closeButton>
-          <CModalTitle>LEDs of Device</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <h6>When would you like make the LEDs of this device blink?</h6>
-          <CRow style={{ marginTop: '20px' }}>
-            <CCol>
-              <CButton 
-                onClick={() => doAction(true)} 
-                disabled={waiting} 
-                block 
-                color="primary"
-              >
-                {waiting && doingNow ? 'Loading...' : 'Do Now!'}
-                <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
-              </CButton>
-            </CCol>
-            <CCol>
-              <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
-                Later tonight
-              </CButton>
-            </CCol>
-          </CRow>
-          <CRow style={{ marginTop: '20px' }}>
-            <CCol md="4" style={{ marginTop: '7px' }}>
-              <p>Date:</p>
-            </CCol>
-            <CCol xs="12" md="8">
-              <DatePicker
-                selected={new Date(chosenDate)}
-                includeTime
-                value={new Date(chosenDate)}
-                placeholder="Select custom date"
-                disabled={waiting}
-                onChange={(date) => setDate(date)}
-                min={convertDateToUtc(new Date())}
-              />
-            </CCol>
-          </CRow>
-          <CRow style={{ marginTop: '20px' }}>
-            <CCol md="7">
-                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" />
-                        <CLabel variant="checkbox" htmlFor="radio1">On</CLabel>
-                    </CFormGroup>
-                    <CFormGroup variant="checkbox" onClick={() => setPattern('off')}>
-                        <CInputRadio 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" />
-                        <CLabel variant="checkbox" htmlFor="radio2">Blink</CLabel>
-                    </CFormGroup>
-                </CForm>
-            </CCol>
-          </CRow>
-          <div hidden={!hadSuccess && !hadFailure}>
-            <div>
-              <pre className='ignore'>{responseBody}</pre>
-            </div>
+  return (
+    <CModal show={show} onClose={toggleModal}>
+      <CModalHeader closeButton>
+        <CModalTitle>LEDs of Device</CModalTitle>
+      </CModalHeader>
+      <CModalBody>
+        <h6>When would you like make the LEDs of this device blink?</h6>
+        <CRow style={{ marginTop: '20px' }}>
+          <CCol>
+            <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
+              {waiting && doingNow ? 'Loading...' : 'Do Now!'}
+              <CSpinner hidden={!waiting || !doingNow} component="span" size="sm" />
+            </CButton>
+          </CCol>
+          <CCol>
+            <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
+              Later tonight
+            </CButton>
+          </CCol>
+        </CRow>
+        <CRow style={{ marginTop: '20px' }}>
+          <CCol md="4" style={{ marginTop: '7px' }}>
+            <p>Date:</p>
+          </CCol>
+          <CCol xs="12" md="8">
+            <DatePicker
+              selected={new Date(chosenDate)}
+              includeTime
+              value={new Date(chosenDate)}
+              placeholder="Select custom date"
+              disabled={waiting}
+              onChange={(date) => setDate(date)}
+              min={convertDateToUtc(new Date())}
+            />
+          </CCol>
+        </CRow>
+        <CRow style={{ marginTop: '20px' }}>
+          <CCol md="7">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"
+                />
+                <CLabel variant="checkbox" htmlFor="radio1">
+                  On
+                </CLabel>
+              </CFormGroup>
+              <CFormGroup variant="checkbox" onClick={() => setPattern('off')}>
+                <CInputRadio
+                  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"
+                />
+                <CLabel variant="checkbox" htmlFor="radio2">
+                  Blink
+                </CLabel>
+              </CFormGroup>
+            </CForm>
+          </CCol>
+        </CRow>
+        <div hidden={!hadSuccess && !hadFailure}>
+          <div>
+            <pre className="ignore">{responseBody}</pre>
          </div>
-        </CModalBody>
-        <CModalFooter>
-          <div hidden={!checkingIfSure}>Are you sure?</div>
-          <CButton
-            disabled={waiting}
-            hidden={checkingIfSure}
-            color="primary"
-            onClick={() => confirmingIfSure()}
-          >
-            Schedule
-          </CButton>
-          <CButton
-            hidden={!checkingIfSure}
-            disabled={waiting}
-            color="primary"
-            onClick={() => doAction(false)}
-          >
-            {waiting && !doingNow ? 'Loading...' : 'Yes'} {'   '}
-            <CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
-          </CButton>
-          <CButton color="secondary" onClick={toggleModal}>
-            Cancel
-          </CButton>
-        </CModalFooter>
-      </CModal>
-    );
-}
+        </div>
+      </CModalBody>
+      <CModalFooter>
+        <div hidden={!checkingIfSure}>Are you sure?</div>
+        <CButton
+          disabled={waiting}
+          hidden={checkingIfSure}
+          color="primary"
+          onClick={() => confirmingIfSure()}
+        >
+          Schedule
+        </CButton>
+        <CButton
+          hidden={!checkingIfSure}
+          disabled={waiting}
+          color="primary"
+          onClick={() => doAction(false)}
+        >
+          {waiting && !doingNow ? 'Loading...' : 'Yes'} {'   '}
+          <CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
+        </CButton>
+        <CButton color="secondary" onClick={toggleModal}>
+          Cancel
+        </CButton>
+      </CModalFooter>
+    </CModal>
+  );
+};

 export default BlinkModalWidget;
--- a/src/pages/DevicePage/DeviceActions.js
+++ b/src/pages/DevicePage/DeviceActions.js
@@ -82,10 +82,10 @@ 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} />
+      <WifiScanModalWidget show={showScanModal} toggleModal={toggleScanModal} />
    </CCard>
  );
 };
--- a/src/pages/DevicePage/DeviceCommands.js
+++ b/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)
-        return (
-          <pre className='ignore'>{JSON.stringify(result, null, 4)}</pre>
-        );
+      if (result) 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,23 +133,23 @@ 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'}}>
-                <CButton onClick={() => refreshCommands()} size="sm">
+                <div style={{ float: 'right' }}>
+                  <CButton onClick={() => refreshCommands()} size="sm">
                    <CIcon
                      name="cil-sync"
                      content={cilSync}
                      style={{ color: 'white' }}
                      size="2xl"
-                      />
+                    />
                  </CButton>
                </div>
              </CCol>
@@ -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>
-                            {getDetails(item.command, item)}
-                          </div>
+                          <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>
  );
--- a/src/pages/DevicePage/DeviceConfiguration.js
+++ b/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)
-      getDevice();
+    if (selectedDeviceId) 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>
--- a/src/pages/DevicePage/DeviceHealth.js
+++ b/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>
--- a/src/pages/DevicePage/DeviceLogs.js
+++ b/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>
--- a/src/pages/DevicePage/DevicePage.js
+++ b/src/pages/DevicePage/DevicePage.js
@@ -11,11 +11,10 @@ import DeviceLogs from './DeviceLogs';
 const DevicePage = () => {
  const dispatch = useDispatch();

-  const { deviceId }  = useParams();
+  const { deviceId } = useParams();

  useEffect(() => {
-    if(deviceId)
-      dispatch({ type: 'set', selectedDeviceId: deviceId });
+    if (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} />
-            <DeviceCommands selectedDeviceId = {deviceId} />
+            <DeviceConfiguration selectedDeviceId={deviceId} />
+            <DeviceCommands selectedDeviceId={deviceId} />
          </CCol>
          <CCol xs="12" sm="6">
-            <DeviceLogs selectedDeviceId = {deviceId} />
-            <DeviceHealth selectedDeviceId = {deviceId} />
-            <DeviceActions selectedDeviceId = {deviceId} />
+            <DeviceLogs selectedDeviceId={deviceId} />
+            <DeviceHealth selectedDeviceId={deviceId} />
+            <DeviceActions selectedDeviceId={deviceId} />
          </CCol>
        </CRow>
      </div>
--- a/src/pages/DevicePage/FirmwareUpgradeModal.js
+++ b/src/pages/DevicePage/FirmwareUpgradeModal.js
@@ -69,7 +69,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {

  const confirmingIfNow = () => {
    setCheckingIfNow(true);
-  }
+  };

  useEffect(() => {
    setHadSuccess(false);
@@ -137,25 +137,25 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
        <h6>Choose a time and a firmware version for this device</h6>
        <CRow style={{ marginTop: '20px' }}>
          <CCol>
-              <CButton
-                color="primary"
-                onClick={() => formValidation() ? confirmingIfNow() : null} 
-                disabled={waiting} 
-                hidden={checkingIfNow}
-                block 
-              >
-                Do Now!
-              </CButton>
-              <CButton
-                color="primary"
-                onClick={() => formValidation() ? postUpgrade(true) : null}
-                disabled={waiting}
-                hidden={!checkingIfNow}
-                block
-              >
-                {waiting && doingNow ? 'Loading...' : 'Confirm'}
-                <CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
-              </CButton>
+            <CButton
+              color="primary"
+              onClick={() => (formValidation() ? confirmingIfNow() : null)}
+              disabled={waiting}
+              hidden={checkingIfNow}
+              block
+            >
+              Do Now!
+            </CButton>
+            <CButton
+              color="primary"
+              onClick={() => (formValidation() ? postUpgrade(true) : null)}
+              disabled={waiting}
+              hidden={!checkingIfNow}
+              block
+            >
+              {waiting && doingNow ? 'Loading...' : 'Confirm'}
+              <CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
+            </CButton>
          </CCol>
          <CCol>
            <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
@@ -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>
--- a/src/pages/DevicePage/TraceModalWidget.js
+++ b/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="40" onClick={() => setDuration(40)}>40s</option>
-                <option value="60" onClick={() => setDuration(60)}>60s</option>
-                <option value="120" onClick={() => setDuration(120)}>120s</option>
+                <option value="20" onClick={() => setDuration(20)}>
+                  20s
+                </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="250" onClick={() => setPackets(250)}>250</option>
-                <option value="500" onClick={() => setPackets(500)}>500</option>
-                <option value="1000" onClick={() => setPackets(1000)}>1000</option>
+                <option value="100" onClick={() => setPackets(100)}>
+                  100
+                </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>
--- a/src/pages/DevicePage/WifiChannelCard.js
+++ b/src/pages/DevicePage/WifiChannelCard.js
@@ -1,37 +1,22 @@
-import {
-    CCard,
-    CCardTitle,
-    CCardBody,
-    CDataTable,
-    CCardHeader
-  } from '@coreui/react';
+import { CCard, CCardTitle, CCardBody, CDataTable, CCardHeader } from '@coreui/react';
 import React from 'react';
 import 'react-widgets/styles.css';

 const WifiChannelCard = ({ channel }) => {
-    const columns = [
-        { key: 'SSID', _style: { width: '70%' }},
-        { key: 'Signal' },
-    ];
+  const columns = [{ key: 'SSID', _style: { width: '70%' } }, { key: 'Signal' }];

-    return (
-        <CCard>
-            <CCardHeader>
-                <CCardTitle style={{color:'black'}}>
-                    Channel #{channel.channel}
-                </CCardTitle>
-            </CCardHeader>
-            <CCardBody>
-            <div className="overflow-auto" style={{ height: '250px' }}>
-                <CDataTable
-                    items={channel.devices}
-                    fields={columns}
-                    style={{ color: 'white' }}
-                />
-            </div>
-            </CCardBody>
-        </CCard>
-    );
-}
+  return (
+    <CCard>
+      <CCardHeader>
+        <CCardTitle style={{ color: 'black' }}>Channel #{channel.channel}</CCardTitle>
+      </CCardHeader>
+      <CCardBody>
+        <div className="overflow-auto" style={{ height: '250px' }}>
+          <CDataTable items={channel.devices} fields={columns} style={{ color: 'white' }} />
+        </div>
+      </CCardBody>
+    </CCard>
+  );
+};

 export default WifiChannelCard;
--- a/src/pages/DevicePage/WifiChannelTable.js
+++ b/src/pages/DevicePage/WifiChannelTable.js
@@ -1,41 +1,33 @@
-import {
-    CCol,
-    CRow
-  } from '@coreui/react';
+import { CCol, CRow } from '@coreui/react';
 import React, { useEffect } from 'react';
 import { v4 as createUuid } from 'uuid';
 import WifiChannelCard from './WifiChannelCard';

-const WifiChannelTable = ({channels}) => {
-    const sortChannels = () => {
-        channels.sort((a, b) => (a.channel > b.channel) ? 1 : -1);
-    };
+const WifiChannelTable = ({ channels }) => {
+  const sortChannels = () => {
+    channels.sort((a, b) => (a.channel > b.channel ? 1 : -1));
+  };

-    useEffect(() => {
-        if (channels)
-            sortChannels();
-    }, [channels]);
+  useEffect(() => {
+    if (channels) sortChannels();
+  }, [channels]);

-    return (
-        <CRow>
-            <CCol>
-                {
-                    channels.map((channel, index) => {
-                        if(index % 2 === 0) return <WifiChannelCard key={createUuid()} channel={channel}/>;
-                        return <div key={createUuid()}/>
-                    })
-                }
-            </CCol>
-            <CCol>
-                {
-                    channels.map((channel, index) => {
-                        if(index % 2 === 1) return <WifiChannelCard key={createUuid()} channel={channel}/>;
-                        return <div key={createUuid()}/>
-                    })
-                }
-            </CCol>
-        </CRow>
-    );
-}
+  return (
+    <CRow>
+      <CCol>
+        {channels.map((channel, index) => {
+          if (index % 2 === 0) return <WifiChannelCard key={createUuid()} channel={channel} />;
+          return <div key={createUuid()} />;
+        })}
+      </CCol>
+      <CCol>
+        {channels.map((channel, index) => {
+          if (index % 2 === 1) return <WifiChannelCard key={createUuid()} channel={channel} />;
+          return <div key={createUuid()} />;
+        })}
+      </CCol>
+    </CRow>
+  );
+};

 export default WifiChannelTable;
--- a/src/pages/DevicePage/WifiScanModal.js
+++ b/src/pages/DevicePage/WifiScanModal.js
@@ -1,162 +1,171 @@
 import {
-    CButton,
-    CModal,
-    CModalHeader,
-    CModalTitle,
-    CModalBody,
-    CModalFooter,
-    CSpinner,
-    CRow,
-    CFormGroup,
-    CInputRadio,
-    CLabel,
-    CForm
-  } from '@coreui/react';
-  import React, { useState, useEffect } from 'react';
-  import { useSelector } from 'react-redux';
-  import WifiChannelTable from './WifiChannelTable';
-  import 'react-widgets/styles.css';
-  import { getToken } from '../../utils/authHelper';
-  import axiosInstance from '../../utils/axiosInstance';
+  CButton,
+  CModal,
+  CModalHeader,
+  CModalTitle,
+  CModalBody,
+  CModalFooter,
+  CSpinner,
+  CRow,
+  CFormGroup,
+  CInputRadio,
+  CLabel,
+  CForm,
+} from '@coreui/react';
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import WifiChannelTable from './WifiChannelTable';
+import 'react-widgets/styles.css';
+import { getToken } from '../../utils/authHelper';
+import axiosInstance from '../../utils/axiosInstance';

-  const WifiScanModalWidget = ({ show, toggleModal }) => {
-    const [hadSuccess, setHadSuccess] = useState(false);
-    const [hadFailure, setHadFailure] = useState(false);
-    const [waiting, setWaiting] = useState(false);
-    const [choseVerbose, setVerbose] = useState(true);
-    const [channelList, setChannelList] = useState([]);
-    const [checkingIfSure, setCheckingIfSure] = useState(false);
-    const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
+const WifiScanModalWidget = ({ show, toggleModal }) => {
+  const [hadSuccess, setHadSuccess] = useState(false);
+  const [hadFailure, setHadFailure] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+  const [choseVerbose, setVerbose] = useState(true);
+  const [channelList, setChannelList] = useState([]);
+  const [checkingIfSure, setCheckingIfSure] = useState(false);
+  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

-    const confirmingIfSure = () => {
-      setCheckingIfSure(true);
-    };
-  
-    useEffect(() => {
-      setHadSuccess(false);
-      setHadFailure(false);
-      setWaiting(false);
-      setChannelList([]);
-      setCheckingIfSure(false);
-      setVerbose(true);
-    }, [show]);
-  
-    const parseThroughList = (scanList) => {
-        const dbmNumber = 4294967295;
-        const listOfChannels = [];
-
-        scanList.forEach((scan) => {
-            if(!listOfChannels.includes(scan.channel)){
-                listOfChannels.push(scan.channel);
-            }
-        });
-
-        const finalList = [];
-        listOfChannels.forEach((channelNumber) => {
-            const channel = { 
-                channel: channelNumber,
-                devices: []
-            };
-
-            scanList.forEach((device) => {
-               if(device.channel === channelNumber){
-                   const deviceToAdd = {};
-                   deviceToAdd.SSID = device.ssid ?? 'N/A';
-                   deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
-                   channel.devices.push(deviceToAdd);
-               } 
-            });
-
-            finalList.push(channel);
-        });
-        return finalList;
-    }
-
-    const doAction = () => {
-      setHadFailure(false);
-      setHadSuccess(false);
-      setWaiting(true);
-  
-      const token = getToken();
-  
-      const parameters = {
-        serialNumber: selectedDeviceId,
-        verbose: choseVerbose
-      };
-      const headers = {
-        Accept: 'application/json',
-        Authorization: `Bearer ${token}`,
-      };
-  
-      axiosInstance
-        .post(`/device/${selectedDeviceId}/wifiscan`, parameters, { headers })
-        .then((response) => {
-            const scanList = response.data.results.status.scan.scan;
-
-            if(scanList){
-              setChannelList(parseThroughList(scanList));
-              setHadSuccess(true);
-            }
-            else{
-              setHadFailure(true);
-            }
-            
-        })
-        .catch(() => {
-          setHadFailure(true);
-        })
-        .finally(() => {
-          setCheckingIfSure(false);
-          setWaiting(false);
-        });
-    };
-
-    return (
-      <CModal size="lg" show={show} onClose={toggleModal}>
-        <CModalHeader closeButton>
-          <CModalTitle>Wifi Scan</CModalTitle>
-        </CModalHeader>
-        <CModalBody>
-          <h6>
-            Launch a wifi scan of this device, which should take approximately 25 seconds.
-          </h6>
-          <CRow style={{ marginTop: '20px' }}>
-            <CForm style={{paddingLeft: '5%'}}>
-                <CFormGroup variant="checkbox" onClick={() => setVerbose(true)}>
-                    <CInputRadio 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" />
-                    <CLabel variant="checkbox" htmlFor="radio2">Without verbose</CLabel>
-                </CFormGroup>
-            </CForm>
-          </CRow>
-          <div style={{marginTop: '3%'}} hidden={!hadSuccess && !hadFailure}>
-            <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'}
-          </CButton>
-          <CButton
-            hidden={!checkingIfSure}
-            disabled={waiting}
-            color="primary"
-            onClick={() => doAction()}
-          >
-            {waiting ? 'Loading...' : 'Yes'} {'   '}
-            <CSpinner hidden={!waiting} component="span" size="sm" />
-          </CButton>
-          <CButton color="secondary" onClick={toggleModal}>
-            Cancel
-          </CButton>
-        </CModalFooter>
-      </CModal>
-    );
+  const confirmingIfSure = () => {
+    setCheckingIfSure(true);
  };

-  export default WifiScanModalWidget;
+  useEffect(() => {
+    setHadSuccess(false);
+    setHadFailure(false);
+    setWaiting(false);
+    setChannelList([]);
+    setCheckingIfSure(false);
+    setVerbose(true);
+  }, [show]);

+  const parseThroughList = (scanList) => {
+    const dbmNumber = 4294967295;
+    const listOfChannels = [];
+
+    scanList.forEach((scan) => {
+      if (!listOfChannels.includes(scan.channel)) {
+        listOfChannels.push(scan.channel);
+      }
+    });
+
+    const finalList = [];
+    listOfChannels.forEach((channelNumber) => {
+      const channel = {
+        channel: channelNumber,
+        devices: [],
+      };
+
+      scanList.forEach((device) => {
+        if (device.channel === channelNumber) {
+          const deviceToAdd = {};
+          deviceToAdd.SSID = device.ssid ?? 'N/A';
+          deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
+          channel.devices.push(deviceToAdd);
+        }
+      });
+
+      finalList.push(channel);
+    });
+    return finalList;
+  };
+
+  const doAction = () => {
+    setHadFailure(false);
+    setHadSuccess(false);
+    setWaiting(true);
+
+    const token = getToken();
+
+    const parameters = {
+      serialNumber: selectedDeviceId,
+      verbose: choseVerbose,
+    };
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${token}`,
+    };
+
+    axiosInstance
+      .post(`/device/${selectedDeviceId}/wifiscan`, parameters, { headers })
+      .then((response) => {
+        const scanList = response.data.results.status.scan.scan;
+
+        if (scanList) {
+          setChannelList(parseThroughList(scanList));
+          setHadSuccess(true);
+        } else {
+          setHadFailure(true);
+        }
+      })
+      .catch(() => {
+        setHadFailure(true);
+      })
+      .finally(() => {
+        setCheckingIfSure(false);
+        setWaiting(false);
+      });
+  };
+
+  return (
+    <CModal size="lg" show={show} onClose={toggleModal}>
+      <CModalHeader closeButton>
+        <CModalTitle>Wifi Scan</CModalTitle>
+      </CModalHeader>
+      <CModalBody>
+        <h6>Launch a wifi scan of this device, which should take approximately 25 seconds.</h6>
+        <CRow style={{ marginTop: '20px' }}>
+          <CForm style={{ paddingLeft: '5%' }}>
+            <CFormGroup variant="checkbox" onClick={() => setVerbose(true)}>
+              <CInputRadio
+                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"
+              />
+              <CLabel variant="checkbox" htmlFor="radio2">
+                Without verbose
+              </CLabel>
+            </CFormGroup>
+          </CForm>
+        </CRow>
+        <div style={{ marginTop: '3%' }} hidden={!hadSuccess && !hadFailure}>
+          <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'}
+        </CButton>
+        <CButton
+          hidden={!checkingIfSure}
+          disabled={waiting}
+          color="primary"
+          onClick={() => doAction()}
+        >
+          {waiting ? 'Loading...' : 'Yes'} {'   '}
+          <CSpinner hidden={!waiting} component="span" size="sm" />
+        </CButton>
+        <CButton color="secondary" onClick={toggleModal}>
+          Cancel
+        </CButton>
+      </CModalFooter>
+    </CModal>
+  );
+};
+
+export default WifiScanModalWidget;
--- a/src/pages/DevicePage/WifiScanResultModal.js
+++ b/src/pages/DevicePage/WifiScanResultModal.js
@@ -6,56 +6,60 @@ 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 parseThroughList = (scanList) => {
-        const dbmNumber = 4294967295;
-        const listOfChannels = [];
+const WifiScanResultModalWidget = ({ show, toggle, scanResults, date }) => {
+  const parseThroughList = (scanList) => {
+    const dbmNumber = 4294967295;
+    const listOfChannels = [];

-        scanList.forEach((scan) => {
-            if(!listOfChannels.includes(scan.channel)){
-                listOfChannels.push(scan.channel);
-            }
-        });
+    scanList.forEach((scan) => {
+      if (!listOfChannels.includes(scan.channel)) {
+        listOfChannels.push(scan.channel);
+      }
+    });

-        const finalList = [];
-        listOfChannels.forEach((channelNumber) => {
-            const channel = { 
-                channel: channelNumber,
-                devices: []
-            };
+    const finalList = [];
+    listOfChannels.forEach((channelNumber) => {
+      const channel = {
+        channel: channelNumber,
+        devices: [],
+      };

-            scanList.forEach((device) => {
-               if(device.channel === channelNumber){
-                   const deviceToAdd = {};
-                   deviceToAdd.SSID = device.ssid ?? 'N/A';
-                   deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
-                   channel.devices.push(deviceToAdd);
-               } 
-            });
+      scanList.forEach((device) => {
+        if (device.channel === channelNumber) {
+          const deviceToAdd = {};
+          deviceToAdd.SSID = device.ssid ?? 'N/A';
+          deviceToAdd.Signal = (dbmNumber - device.signal) * -1;
+          channel.devices.push(deviceToAdd);
+        }
+      });

-            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>
-          </CModalHeader>
-          <CModalBody>
-              {scanResults === null ? null : <WifiChannelTable channels={parseThroughList(scanResults)}/>}
-          </CModalBody>
-          <CModalFooter>
-            <CButton color="secondary" onClick={toggle}>
-              Close
-            </CButton>
-          </CModalFooter>
-        </CModal>
-    );
-}
+      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>
+      </CModalHeader>
+      <CModalBody>
+        {scanResults === null ? null : (
+          <WifiChannelTable channels={parseThroughList(scanResults)} />
+        )}
+      </CModalBody>
+      <CModalFooter>
+        <CButton color="secondary" onClick={toggle}>
+          Close
+        </CButton>
+      </CModalFooter>
+    </CModal>
+  );
+};
 export default WifiScanResultModalWidget;
--- a/src/pages/LoginPage/Login.js
+++ b/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>
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -1,4 +1,4 @@
 // Here you can add other styles
 pre.ignore {
-    font-family: inherit;
+  font-family: inherit;
 }
--- a/src/store.js
+++ b/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 }) => {
--- a/src/utils/axiosInstance.js
+++ b/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 axiosInstance = axios.create(
-  httpAgent,
-  httpsAgent
-);
+const httpsAgent = new https.Agent({ keepAlive: true });
+const axiosInstance = axios.create(httpAgent, httpsAgent);

 axiosRetry(axiosInstance, {
  retries: 3,
--- a/src/utils/helper.js
+++ b/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(),
+  )}`;
+};