Absolute imports

.eslintrc

@@ -19,5 +19,12 @@
     "react/jsx-props-no-spreading": ["off"],
     "react/destructuring-assignment": ["off"],
     "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"]
-  }
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"]
+      }
+    },
+  },
 }

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "*": ["*"]
+    }
+  }, 
+  "include": ["src"]
+}

src/App.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import './scss/style.scss';
+import 'scss/style.scss';
 import { useSelector, useDispatch } from 'react-redux';
 
 const loading = (
@@ -9,8 +9,8 @@ const loading = (
   </div>
 );
 
-const TheLayout = React.lazy(() => import('./containers/TheLayout'));
-const Login = React.lazy(() => import('./pages/LoginPage/Login'));
+const TheLayout = React.lazy(() => import('containers/TheLayout'));
+const Login = React.lazy(() => import('pages/LoginPage/Login'));
 
 const App = () => {
   const isLoggedIn = useSelector((state) => state.connected);

src/App.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
-import { store } from './app/store';
-import App from './App';
+import { store } from 'app/store';
+import App from 'App';
 
 test('renders learn react link', () => {
   const { getByText } = render(

src/containers/TheContent.js

@@ -3,7 +3,7 @@ import React, { Suspense } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { v4 as createUuid } from 'uuid';
 import { CContainer, CFade } from '@coreui/react';
-import routes from '../routes';
+import routes from 'routes';
 
 const loading = (
   <div className="pt-3 text-center">

src/containers/TheHeader.js

@@ -11,8 +11,8 @@ import {
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import { cilAccountLogout } from '@coreui/icons';
-import { logout } from '../utils/authHelper';
-import routes from '../routes';
+import { logout } from 'utils/authHelper';
+import routes from 'routes';
 
 const TheHeader = () => {
   const dispatch = useDispatch();

src/containers/TheSidebar.js

@@ -11,7 +11,7 @@ import {
   CSidebarNavDropdown,
   CSidebarNavItem,
 } from '@coreui/react';
-import logoBar from '../assets/OpenWiFi_LogoLockup_WhiteColour.svg';
+import logoBar from 'assets/OpenWiFi_LogoLockup_WhiteColour.svg';
 
 // sidebar nav config
 import navigation from './_nav';

src/containers/_nav.js

@@ -4,7 +4,7 @@ const nav = [
     name: 'List of Devices',
     to: '/devices',
     icon: 'cilNotes',
-  }
+  },
 ];
 
 export default nav;

src/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import 'index.css';
 import { Provider } from 'react-redux';
-import App from './App';
-import store from './store';
+import App from 'App';
+import store from 'store';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { icons } from './assets/icons';
+import { icons } from 'assets/icons';
 
 React.icons = icons;
 

src/pages/DeviceListPage/DeviceList.js

@@ -16,13 +16,13 @@ import Select from 'react-select';
 import PropTypes from 'prop-types';
 import { cilSync, cilInfo, cilBadge, cilBan } from '@coreui/icons';
 import CIcon from '@coreui/icons-react';
-import { getToken } from '../../utils/authHelper';
-import axiosInstance from '../../utils/axiosInstance';
-import { cleanBytesString, cropStringWithEllipsis } from '../../utils/helper';
-import meshIcon from '../../assets/icons/Mesh.png';
-import apIcon from '../../assets/icons/AP.png';
-import internetSwitch from '../../assets/icons/Switch.png';
-import iotIcon from '../../assets/icons/IotIcon.png';
+import { getToken } from 'utils/authHelper';
+import axiosInstance from 'utils/axiosInstance';
+import { cleanBytesString, cropStringWithEllipsis } from 'utils/helper';
+import meshIcon from 'assets/icons/Mesh.png';
+import apIcon from 'assets/icons/AP.png';
+import internetSwitch from 'assets/icons/Switch.png';
+import iotIcon from 'assets/icons/IotIcon.png';
 
 const DeviceList = () => {
   const [loadedSerials, setLoadedSerials] = useState(false);

src/pages/DevicePage/ActionModal.js

@@ -14,13 +14,13 @@ import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { convertDateToUtc, convertDateFromUtc, dateToUnix } from '../../utils/helper';
+import { convertDateToUtc, convertDateFromUtc, dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from '../../utils/authHelper';
-import axiosInstance from '../../utils/axiosInstance';
-import eventBus from '../../utils/EventBus';
-import LoadingButton from '../../components/LoadingButton';
-import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody';
+import { getToken } from 'utils/authHelper';
+import axiosInstance from 'utils/axiosInstance';
+import eventBus from 'utils/EventBus';
+import LoadingButton from 'components/LoadingButton';
+import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
 
 const ActionModal = ({ show, toggleModal, title, directions, action }) => {
   const [hadSuccess, setHadSuccess] = useState(false);

src/pages/DevicePage/BlinkModal.js

@@ -17,13 +17,13 @@ import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { convertDateFromUtc, convertDateToUtc, dateToUnix } from '../../utils/helper';
+import { convertDateFromUtc, convertDateToUtc, dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from '../../utils/authHelper';
-import axiosInstance from '../../utils/axiosInstance';
-import eventBus from '../../utils/EventBus';
-import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody';
-import LoadingButton from '../../components/LoadingButton';
+import { getToken } from 'utils/authHelper';
+import axiosInstance from 'utils/axiosInstance';
+import eventBus from 'utils/EventBus';
+import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
+import LoadingButton from 'components/LoadingButton';
 
 const BlinkModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);

src/pages/DevicePage/ConfigureModal.js

@@ -17,11 +17,11 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import 'react-widgets/styles.css';
-import { getToken } from '../../utils/authHelper';
-import { checkIfJson } from '../../utils/helper';
-import axiosInstance from '../../utils/axiosInstance';
-import eventBus from '../../utils/EventBus';
-import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody';
+import { getToken } from 'utils/authHelper';
+import { checkIfJson } from 'utils/helper';
+import axiosInstance from 'utils/axiosInstance';
+import eventBus from 'utils/EventBus';
+import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
 
 const ConfigureModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);

src/pages/DevicePage/DeviceActions.js

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { CButton, CCard, CCardHeader, CCardBody, CRow, CCol } from '@coreui/react';
+import axiosInstance from 'utils/axiosInstance';
+import { getToken } from 'utils/authHelper';
+import LoadingButton from 'components/LoadingButton';
 import ActionModal from './ActionModal';
 import FirmwareUpgradeModal from './FirmwareUpgradeModal';
 import ConfigureModal from './ConfigureModal';
@@ -8,9 +11,6 @@ import TraceModal from './TraceModal';
 import WifiScanModal from './WifiScanModal';
 import BlinkModal from './BlinkModal';
 import FactoryResetModal from './FactoryResetModal';
-import axiosInstance from '../../utils/axiosInstance';
-import { getToken } from '../../utils/authHelper';
-import LoadingButton from '../../components/LoadingButton';
 
 const DeviceActions = ({ selectedDeviceId }) => {
   const [showRebootModal, setShowRebootModal] = useState(false);
@@ -48,7 +48,7 @@ const DeviceActions = ({ selectedDeviceId }) => {
 
   const toggleFactoryResetModal = () => {
     setShowFactoryModal(!showFactoryModal);
-  }
+  };
 
   const getRttysInfo = () => {
     setConnectLoading(true);

src/pages/DevicePage/DeviceCommands.js

@@ -16,14 +16,14 @@ import { cilCloudDownload, cilSync } from '@coreui/icons';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
-import { prettyDate, dateToUnix } from '../../utils/helper';
-import axiosInstance from '../../utils/axiosInstance';
-import { getToken } from '../../utils/authHelper';
+import { prettyDate, dateToUnix } from 'utils/helper';
+import axiosInstance from 'utils/axiosInstance';
+import { getToken } from 'utils/authHelper';
+import eventBus from 'utils/EventBus';
+import ConfirmModal from 'components/ConfirmModal';
+import LoadingButton from 'components/LoadingButton';
 import WifiScanResultModalWidget from './WifiScanResultModal';
-import ConfirmModal from '../../components/ConfirmModal';
 import DeviceCommandsCollapse from './DeviceCommandsCollapse';
-import LoadingButton from '../../components/LoadingButton';
-import eventBus from '../../utils/EventBus';
 
 const DeviceCommands = ({ selectedDeviceId }) => {
   const [showScanModal, setShowScanModal] = useState(false);

src/pages/DevicePage/DeviceConfiguration.js

@@ -12,15 +12,15 @@ import {
   CCardFooter,
   CButton,
   CRow,
-  CPopover
+  CPopover,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import PropTypes from 'prop-types';
 import { cilWindowMaximize } from '@coreui/icons';
-import { prettyDate } from '../../utils/helper';
-import axiosInstance from '../../utils/axiosInstance';
-import { getToken } from '../../utils/authHelper';
-import DeviceConfigurationModal from './DeviceConfigurationModal'
+import { prettyDate } from 'utils/helper';
+import axiosInstance from 'utils/axiosInstance';
+import { getToken } from 'utils/authHelper';
+import DeviceConfigurationModal from './DeviceConfigurationModal';
 
 const DeviceConfiguration = ({ selectedDeviceId }) => {
   const [collapse, setCollapse] = useState(false);
@@ -34,7 +34,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
 
   const toggleModal = () => {
     setShowModal(!showModal);
-  }
+  };
 
   const getDevice = () => {
     const options = {
@@ -48,7 +48,6 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
       .get(`/device/${encodeURIComponent(selectedDeviceId)}`, options)
       .then((response) => {
         setDevice(response.data);
-
       })
       .catch(() => {});
   };
@@ -62,23 +61,26 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
       <div>
         <CCard>
           <CCardHeader>
-          <CRow>
-            <CCol>
-              Device Details
-            </CCol>
-            <CCol>
-              <div style={{ float: 'right'}}>
-                <CPopover content="View raw JSON">
-                  <CButton color="secondary" onClick={() => toggleModal()} size="sm">
-                    <CIcon content={cilWindowMaximize}/>
-                  </CButton>
-                </CPopover>
-              </div>
-            </CCol>
-          </CRow>
+            <CRow>
+              <CCol>Device Details</CCol>
+              <CCol>
+                <div style={{ float: 'right' }}>
+                  <CPopover content="View raw JSON">
+                    <CButton color="secondary" onClick={() => toggleModal()} size="sm">
+                      <CIcon content={cilWindowMaximize} />
+                    </CButton>
+                  </CPopover>
+                </div>
+              </CCol>
+            </CRow>
           </CCardHeader>
           <CCardBody>
-            <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
+            <CForm
+              action=""
+              method="post"
+              encType="multipart/form-data"
+              className="form-horizontal"
+            >
               <CFormGroup row>
                 <CCol md="3">
                   <CLabel>UUID : </CLabel>
@@ -181,7 +183,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
             </CForm>
           </CCardBody>
         </CCard>
-        <DeviceConfigurationModal show={showModal} toggle={toggleModal} configuration={device}/>
+        <DeviceConfigurationModal show={showModal} toggle={toggleModal} configuration={device} />
       </div>
     );
   }

src/pages/DevicePage/DeviceConfigurationModal.js

@@ -11,21 +11,19 @@ import {
 import PropTypes from 'prop-types';
 
 const DeviceConfigurationModal = ({ show, toggle, configuration }) => (
-    <CModal size="lg" show={show} onClose={toggle}>
-      <CModalHeader closeButton>
-        <CModalTitle style={{ color: 'black' }}>
-          Device Configuration
-        </CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <pre className="ignore">{JSON.stringify(configuration, null, 4)}</pre>
-      </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={toggle}>
-          Close
-        </CButton>
-      </CModalFooter>
-    </CModal>
+  <CModal size="lg" show={show} onClose={toggle}>
+    <CModalHeader closeButton>
+      <CModalTitle style={{ color: 'black' }}>Device Configuration</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <pre className="ignore">{JSON.stringify(configuration, null, 4)}</pre>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" onClick={toggle}>
+        Close
+      </CButton>
+    </CModalFooter>
+  </CModal>
 );
 
 DeviceConfigurationModal.propTypes = {

src/pages/DevicePage/DeviceHealth.js

@@ -14,10 +14,10 @@ import {
 import CIcon from '@coreui/icons-react';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
-import { prettyDate, dateToUnix } from '../../utils/helper';
-import axiosInstance from '../../utils/axiosInstance';
-import { getToken } from '../../utils/authHelper';
-import LoadingButton from '../../components/LoadingButton';
+import { prettyDate, dateToUnix } from 'utils/helper';
+import axiosInstance from 'utils/axiosInstance';
+import { getToken } from 'utils/authHelper';
+import LoadingButton from 'components/LoadingButton';
 
 const DeviceHealth = ({ selectedDeviceId }) => {
   const [collapse, setCollapse] = useState(false);
@@ -30,7 +30,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
   const [loadingMore, setLoadingMore] = useState(false);
   const [showLoadingMore, setShowLoadingMore] = useState(true);
   const [sanityLevel, setSanityLevel] = useState(null);
-  const [barColor, setBarColor] = useState('gradient-dark')
+  const [barColor, setBarColor] = useState('gradient-dark');
 
   const toggle = (e) => {
     setCollapse(!collapse);
@@ -147,28 +147,25 @@ const DeviceHealth = ({ selectedDeviceId }) => {
       setSanityLevel(tempSanityLevel);
       if (tempSanityLevel === 100) {
         setBarColor('gradient-success');
-      }
-      else if (tempSanityLevel >= 90) {
+      } else if (tempSanityLevel >= 90) {
         setBarColor('gradient-warning');
-      }
-      else {
+      } else {
         setBarColor('gradient-danger');
       }
-    } 
-    else {
+    } else {
       setBarColor('gradient-dark');
     }
   }, [healthChecks]);
 
   useEffect(() => {
     if (selectedDeviceId && start !== '' && end !== '') {
-        getDeviceHealth();
-      } else if (selectedDeviceId && start === '' && end === '') {
-        getDeviceHealth();
-      }
-    }, [start, end, selectedDeviceId]);
-    
-    return (
+      getDeviceHealth();
+    } else if (selectedDeviceId && start === '' && end === '') {
+      getDeviceHealth();
+    }
+  }, [start, end, selectedDeviceId]);
+
+  return (
     <CWidgetDropdown
       header={sanityLevel ? `${sanityLevel}%` : 'Unknown'}
       text="Device Health"

src/pages/DevicePage/DeviceLogs.js

@@ -13,10 +13,10 @@ import {
 import CIcon from '@coreui/icons-react';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
-import { prettyDate, dateToUnix } from '../../utils/helper';
-import axiosInstance from '../../utils/axiosInstance';
-import { getToken } from '../../utils/authHelper';
-import LoadingButton from '../../components/LoadingButton';
+import { prettyDate, dateToUnix } from 'utils/helper';
+import axiosInstance from 'utils/axiosInstance';
+import { getToken } from 'utils/authHelper';
+import LoadingButton from 'components/LoadingButton';
 
 const DeviceLogs = ({ selectedDeviceId }) => {
   const [collapse, setCollapse] = useState(false);

src/pages/DevicePage/DeviceStatistics/DeviceLifetimeStatisics.js

@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { CChartLine } from '@coreui/react-chartjs';
-import axiosInstance from '../../../utils/axiosInstance';
-import { getToken } from '../../../utils/authHelper';
-import { addDays, dateToUnix } from '../../../utils/helper';
+import axiosInstance from 'utils/axiosInstance';
+import { getToken } from 'utils/authHelper';
 
 const DeviceLifetimeStatistics = ({ selectedDeviceId }) => {
   const [loading, setLoading] = useState(false);

src/pages/DevicePage/DeviceStatistics/StatisticsChartList.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as createUuid } from 'uuid';
+import axiosInstance from 'utils/axiosInstance';
+import { getToken } from 'utils/authHelper';
+import { unixToTime, capitalizeFirstLetter } from 'utils/helper';
 import DeviceStatisticsChart from './DeviceStatisticsChart';
-import axiosInstance from '../../../utils/axiosInstance';
-import { getToken } from '../../../utils/authHelper';
-import { unixToTime, capitalizeFirstLetter } from '../../../utils/helper';
 
 const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
   const [loading, setLoading] = useState(false);

src/pages/DevicePage/FactoryResetModal.js

@@ -1,146 +1,143 @@
 import {
-    CButton,
-    CModal,
-    CModalHeader,
-    CModalTitle,
-    CModalBody,
-    CModalFooter,
-    CSpinner,
-    CRow,
-    CForm,
-    CSwitch,
-    CAlert
-  } from '@coreui/react';
-  import React, { useState, useEffect } from 'react';
-  import PropTypes from 'prop-types';
-  import { useSelector } from 'react-redux';
-  import 'react-widgets/styles.css';
-  import { getToken } from '../../utils/authHelper';
-  import axiosInstance from '../../utils/axiosInstance';
-  import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody';
-  
-  const ConfigureModal = ({ show, toggleModal }) => {
-    const [hadSuccess, setHadSuccess] = useState(false);
-    const [hadFailure, setHadFailure] = useState(false);
-    const [doingNow, setDoingNow] = useState(false);
-    const [waiting, setWaiting] = useState(false);
-    const [keepRedirector, setKeepRedirector] = useState(true);
-    const [responseBody, setResponseBody] = useState('');
-    const [checkingIfSure, setCheckingIfSure] = useState(false);
-    const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
-  
-    const toggleRedirector = () => {
-        setKeepRedirector(!keepRedirector);
-    }
+  CButton,
+  CModal,
+  CModalHeader,
+  CModalTitle,
+  CModalBody,
+  CModalFooter,
+  CSpinner,
+  CRow,
+  CForm,
+  CSwitch,
+  CAlert,
+} from '@coreui/react';
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import 'react-widgets/styles.css';
+import { getToken } from 'utils/authHelper';
+import axiosInstance from 'utils/axiosInstance';
+import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
 
-    const confirmingIfSure = () => {
-        setCheckingIfSure(true);
+const ConfigureModal = ({ show, toggleModal }) => {
+  const [hadSuccess, setHadSuccess] = useState(false);
+  const [hadFailure, setHadFailure] = useState(false);
+  const [doingNow, setDoingNow] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+  const [keepRedirector, setKeepRedirector] = useState(true);
+  const [responseBody, setResponseBody] = useState('');
+  const [checkingIfSure, setCheckingIfSure] = useState(false);
+  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
+
+  const toggleRedirector = () => {
+    setKeepRedirector(!keepRedirector);
+  };
+
+  const confirmingIfSure = () => {
+    setCheckingIfSure(true);
+  };
+
+  useEffect(() => {
+    setHadSuccess(false);
+    setHadFailure(false);
+    setWaiting(false);
+    setResponseBody('');
+    setCheckingIfSure(false);
+  }, [show]);
+
+  const doAction = () => {
+    setHadFailure(false);
+    setHadSuccess(false);
+    setWaiting(true);
+
+    const parameters = {
+      serialNumber: selectedDeviceId,
+      keepRedirector,
     };
-  
-    useEffect(() => {
-      setHadSuccess(false);
-      setHadFailure(false);
-      setWaiting(false);
-      setResponseBody('');
-      setCheckingIfSure(false);
-    }, [show]);
-  
-    const doAction = () => {
-      setHadFailure(false);
-      setHadSuccess(false);
-      setWaiting(true);
-  
-      const parameters = {
-        serialNumber: selectedDeviceId,
-        keepRedirector,
-      };
-  
-      const headers = {
-        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
-      };
-  
-      axiosInstance
-        .post(`/device/${encodeURIComponent(selectedDeviceId)}/factory`, parameters, { headers })
-        .then(() => {
-          setResponseBody('Command submitted!');
-          setHadSuccess(true);
-        })
-        .catch(() => {
-          setResponseBody('Error while submitting command!');
-          setHadFailure(true);
-        })
-        .finally(() => {
-          setDoingNow(false);
-          setCheckingIfSure(false);
-          setWaiting(false);
-        });
+
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${getToken()}`,
     };
-  
-    return (
-      <CModal show={show} onClose={toggleModal}>
-        <CModalHeader closeButton>
-          <CModalTitle>Factory Reset Device</CModalTitle>
-        </CModalHeader>
-        {hadSuccess ? (
-          <SuccessfulActionModalBody toggleModal={toggleModal} />
-        ) : (
-          <div>
-            <CModalBody>
-              <CAlert color="danger">
-                Warning: Once you submit this cannot be reverted
-              </CAlert>
-              <CRow style={{ marginTop: '20px' }}>
-                    <p style={{ paddingLeft: '5%' }}>Keep redirector :</p>
-                    <CForm style={{ paddingLeft: '5%' }}>
-                        <CSwitch
-                            color="primary"
-                            defaultChecked={keepRedirector}
-                            onClick={() => toggleRedirector()}
-                            labelOn="Yes"
-                            labelOff="No"
-                        />
-                    </CForm>
-                </CRow>
-              <div hidden={!hadSuccess && !hadFailure}>
-                <div>
-                  <pre className="ignore">{responseBody}</pre>
-                </div>
+
+    axiosInstance
+      .post(`/device/${encodeURIComponent(selectedDeviceId)}/factory`, 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>Factory Reset Device</CModalTitle>
+      </CModalHeader>
+      {hadSuccess ? (
+        <SuccessfulActionModalBody toggleModal={toggleModal} />
+      ) : (
+        <div>
+          <CModalBody>
+            <CAlert color="danger">Warning: Once you submit this cannot be reverted</CAlert>
+            <CRow style={{ marginTop: '20px' }}>
+              <p style={{ paddingLeft: '5%' }}>Keep redirector :</p>
+              <CForm style={{ paddingLeft: '5%' }}>
+                <CSwitch
+                  color="primary"
+                  defaultChecked={keepRedirector}
+                  onClick={() => toggleRedirector()}
+                  labelOn="Yes"
+                  labelOff="No"
+                />
+              </CForm>
+            </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()}
-              >
-                Submit
-              </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>
-          </div>
-        )}
-      </CModal>
-    );
-  };
-  
-  ConfigureModal.propTypes = {
-    show: PropTypes.bool.isRequired,
-    toggleModal: PropTypes.func.isRequired,
-  };
-  
-  export default ConfigureModal;
-  
+            </div>
+          </CModalBody>
+          <CModalFooter>
+            <div hidden={!checkingIfSure}>Are you sure?</div>
+            <CButton
+              disabled={waiting}
+              hidden={checkingIfSure}
+              color="primary"
+              onClick={() => confirmingIfSure()}
+            >
+              Submit
+            </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>
+        </div>
+      )}
+    </CModal>
+  );
+};
+
+ConfigureModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+};
+
+export default ConfigureModal;

src/pages/DevicePage/FirmwareUpgradeModal.js

@@ -15,11 +15,11 @@ import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { convertDateToUtc, convertDateFromUtc, dateToUnix } from '../../utils/helper';
+import { convertDateToUtc, convertDateFromUtc, dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from '../../utils/authHelper';
-import axiosInstance from '../../utils/axiosInstance';
-import eventBus from '../../utils/EventBus';
+import { getToken } from 'utils/authHelper';
+import axiosInstance from 'utils/axiosInstance';
+import eventBus from 'utils/EventBus';
 
 const FirmwareUpgradeModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);

src/pages/DevicePage/TraceModal.js

@@ -18,13 +18,13 @@ import React, { useState, useEffect } from 'react';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { convertDateToUtc, dateToUnix } from '../../utils/helper';
+import { convertDateToUtc, dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from '../../utils/authHelper';
-import axiosInstance from '../../utils/axiosInstance';
-import eventBus from '../../utils/EventBus';
-import LoadingButton from '../../components/LoadingButton';
-import SuccessfulActionModalBody from '../../components/SuccessfulActionModalBody';
+import { getToken } from 'utils/authHelper';
+import axiosInstance from 'utils/axiosInstance';
+import eventBus from 'utils/EventBus';
+import LoadingButton from 'components/LoadingButton';
+import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
 
 const TraceModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);

src/pages/DevicePage/WifiScanModal.js

@@ -8,17 +8,17 @@ import {
   CRow,
   CForm,
   CSwitch,
-  CCol
+  CCol,
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { getToken } from 'utils/authHelper';
+import axiosInstance from 'utils/axiosInstance';
+import eventBus from 'utils/EventBus';
+import LoadingButton from 'components/LoadingButton';
 import WifiChannelTable from './WifiChannelTable';
 import 'react-widgets/styles.css';
-import { getToken } from '../../utils/authHelper';
-import axiosInstance from '../../utils/axiosInstance';
-import eventBus from '../../utils/EventBus';
-import LoadingButton from '../../components/LoadingButton';
 
 const WifiScanModal = ({ show, toggleModal }) => {
   const [hadSuccess, setHadSuccess] = useState(false);
@@ -35,7 +35,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
 
   const toggleActiveScan = () => {
     setActiveScan(!activeScan);
-  }
+  };
 
   useEffect(() => {
     setHadSuccess(false);
@@ -87,7 +87,7 @@ const WifiScanModal = ({ show, toggleModal }) => {
     const parameters = {
       serialNumber: selectedDeviceId,
       verbose: choseVerbose,
-      activeScan
+      activeScan,
     };
     const headers = {
       Accept: 'application/json',

src/pages/DevicePage/WifiScanResultModal.js

@@ -9,8 +9,8 @@ import {
   CModalFooter,
 } from '@coreui/react';
 import PropTypes from 'prop-types';
+import { prettyDate } from 'utils/helper';
 import WifiChannelTable from './WifiChannelTable';
-import { prettyDate } from '../../utils/helper';
 
 const WifiScanResultModal = ({ show, toggle, scanResults, date }) => {
   const parseThroughList = (scanList) => {

src/pages/LoginPage/Login.js

@@ -19,8 +19,8 @@ import {
 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 axiosInstance from 'utils/axiosInstance';
+import logo from 'assets/OpenWiFi_LogoLockup_DarkGreyColour.svg';
 
 const Login = () => {
   const dispatch = useDispatch();
@@ -183,7 +183,7 @@ const Login = () => {
                           Login
                         </CButton>
                       </CCol>
-                      <CCol xs="6" className="text-right"/>
+                      <CCol xs="6" className="text-right" />
                     </CRow>
                   </CForm>
                 </CCardBody>

src/routes.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const DevicePage = React.lazy(() => import('./pages/DevicePage/DevicePage'));
-const DeviceListPage = React.lazy(() => import('./pages/DeviceListPage/DeviceListPage'));
+const DevicePage = React.lazy(() => import('pages/DevicePage/DevicePage'));
+const DeviceListPage = React.lazy(() => import('pages/DeviceListPage/DeviceListPage'));
 
 const routes = [
   { path: '/devices', exact: true, name: 'Devices', component: DeviceListPage },