Migrated from redux to context API

2025-11-02 11:47:54 +00:00 · 2021-07-01 16:42:51 -04:00
parent f42b3d48d3
commit ae7200815d
40 changed files with 337 additions and 420 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,6 @@
        "react-dom": "^17.0.2",
        "react-i18next": "^11.11.0",
        "react-paginate": "^7.1.3",
-        "react-redux": "^7.2.4",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "react-select": "^4.3.1",
@@ -3210,15 +3209,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
-      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "dependencies": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
    "node_modules/@types/html-minifier-terser": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -3300,17 +3290,6 @@
        "csstype": "^3.0.2"
      }
    },
-    "node_modules/@types/react-redux": {
-      "version": "7.1.16",
-      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz",
-      "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==",
-      "dependencies": {
-        "@types/hoist-non-react-statics": "^3.3.0",
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0",
-        "redux": "^4.0.0"
-      }
-    },
    "node_modules/@types/react-transition-group": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -16717,30 +16696,6 @@
        "react": "^16.0.0 || ^17.0.0"
      }
    },
-    "node_modules/react-redux": {
-      "version": "7.2.4",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
-      "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "@types/react-redux": "^7.1.16",
-        "hoist-non-react-statics": "^3.3.2",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.13.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.3 || ^17"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/react-refresh": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -24519,15 +24474,6 @@
        "@types/node": "*"
      }
    },
-    "@types/hoist-non-react-statics": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
-      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
-      "requires": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
    "@types/html-minifier-terser": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -24609,17 +24555,6 @@
        "csstype": "^3.0.2"
      }
    },
-    "@types/react-redux": {
-      "version": "7.1.16",
-      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz",
-      "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==",
-      "requires": {
-        "@types/hoist-non-react-statics": "^3.3.0",
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0",
-        "redux": "^4.0.0"
-      }
-    },
    "@types/react-transition-group": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -35151,19 +35086,6 @@
        "prop-types": "^15.6.1"
      }
    },
-    "react-redux": {
-      "version": "7.2.4",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
-      "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "@types/react-redux": "^7.1.16",
-        "hoist-non-react-statics": "^3.3.2",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.13.1"
-      }
-    },
    "react-refresh": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
    "react-dom": "^17.0.2",
    "react-i18next": "^11.11.0",
    "react-paginate": "^7.1.3",
-    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-select": "^4.3.1",
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -195,7 +195,7 @@
 	"trace": {
 		"choose_network": "Netzwerk auswählen",
 		"directions": "Starten Sie eine Tcpdump auf diesem Geräts für eine bestimmte Dauer oder eine Anzahl von Paketen",
-		"download_trace": "Klicke hier zum herunterladen",
+		"download_trace": "Trace-Datei herunterladen",
 		"packets": "Pakete",
 		"title": "Tcpdump",
 		"trace": "Spur",
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -195,7 +195,7 @@
 	"trace": {
 		"choose_network": "Choose network",
 		"directions": "Launch a remote trace of this device for either a specific duration or a number of packets",
-		"download_trace": "Click here to download",
+		"download_trace": "Download Trace File",
 		"packets": "Packets",
 		"title": "Trace",
 		"trace": "Trace",
--- a/public/locales/es/translation.json
+++ b/public/locales/es/translation.json
@@ -195,7 +195,7 @@
 	"trace": {
 		"choose_network": "Elija la red",
 		"directions": "Lanzar un rastreo remoto de este dispositivo por una duración específica o por una cantidad de paquetes",
-		"download_trace": "Haga click aquí para descargar",
+		"download_trace": "Descargar archivo de seguimiento",
 		"packets": "Paquetes",
 		"title": "Rastro",
 		"trace": "Rastro",
--- a/public/locales/fr/translation.json
+++ b/public/locales/fr/translation.json
@@ -195,7 +195,7 @@
 	"trace": {
 		"choose_network": "Choisir le réseau",
 		"directions": "Lancer une trace à distance de cet appareil pour une durée spécifique ou un nombre de paquets",
-		"download_trace": "Cliquez ici pour télécharger",
+		"download_trace": "Télécharger le fichier de trace",
 		"packets": "Paquets",
 		"title": "Trace",
 		"trace": "Trace",
--- a/public/locales/pt/translation.json
+++ b/public/locales/pt/translation.json
@@ -195,7 +195,7 @@
 	"trace": {
 		"choose_network": "Escolha a rede",
 		"directions": "Lançar um rastreamento remoto deste dispositivo para uma duração específica ou um número de pacotes",
-		"download_trace": "Clique aqui para baixar",
+		"download_trace": "Baixar arquivo de rastreamento",
 		"packets": "Pacotes",
 		"title": "Vestígio",
 		"trace": "Vestígio",
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react';
-import { HashRouter, Route, Switch } from 'react-router-dom';
+import React from 'react';
+import { HashRouter, Switch } from 'react-router-dom';
 import 'scss/style.scss';
-import { useSelector, useDispatch } from 'react-redux';
+import Router from 'router';
+import { AuthProvider } from 'contexts/AuthProvider';

 const loading = (
  <div className="pt-3 text-center">
@@ -9,32 +10,19 @@ const loading = (
  </div>
 );

-const TheLayout = React.lazy(() => import('layout'));
-const Login = React.lazy(() => import('pages/LoginPage'));
-
 const App = () => {
-  const isLoggedIn = useSelector((state) => state.connected);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    const token = sessionStorage.getItem('access_token');
-    if (token !== undefined && token !== null) {
-      dispatch({ type: 'set', connected: true });
-    }
-  }, [dispatch]);
+  const storageToken = sessionStorage.getItem('access_token');

  return (
+    <AuthProvider token={storageToken ?? ''}>
      <HashRouter>
        <React.Suspense fallback={loading}>
          <Switch>
-          <Route
-            path="/"
-            name="Devices"
-            render={(props) => (isLoggedIn ? <TheLayout {...props} /> : <Login {...props} />)}
-          />
+            <Router />
          </Switch>
        </React.Suspense>
      </HashRouter>
+    </AuthProvider>
  );
 };

--- a/src/components/BlinkModal/index.js
+++ b/src/components/BlinkModal/index.js
@@ -16,10 +16,10 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
 import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
@@ -29,12 +29,13 @@ import styles from './index.module.scss';

 const BlinkModal = ({ show, toggleModal }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [isNow, setIsNow] = useState(false);
  const [waiting, setWaiting] = useState(false);
  const [chosenDate, setChosenDate] = useState(new Date().toString());
  const [chosenPattern, setPattern] = useState('on');
  const [result, setResult] = useState(null);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

  const toggleNow = () => {
    setIsNow(!isNow);
@@ -57,12 +58,10 @@ const BlinkModal = ({ show, toggleModal }) => {

  const doAction = () => {
    setWaiting(true);
-
-    const token = getToken();
    const utcDate = new Date(chosenDate);

    const parameters = {
-      serialNumber: selectedDeviceId,
+      serialNumber: deviceSerialNumber,
      when: isNow ? 0 : dateToUnix(utcDate),
      pattern: chosenPattern,
      duration: 30,
@@ -70,11 +69,11 @@ const BlinkModal = ({ show, toggleModal }) => {

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/leds`, parameters, { headers })
+      .post(`/device/${encodeURIComponent(deviceSerialNumber)}/leds`, parameters, { headers })
      .then(() => {
        setResult('success');
      })
--- a/src/components/CommandHistory/index.js
+++ b/src/components/CommandHistory/index.js
@@ -14,10 +14,10 @@ import {
 import CIcon from '@coreui/icons-react';
 import DatePicker from 'react-widgets/DatePicker';
 import { cilCloudDownload, cilSync, cilCalendarCheck } from '@coreui/icons';
-import PropTypes from 'prop-types';
 import { prettyDate, dateToUnix } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import eventBus from 'utils/eventBus';
 import ConfirmModal from 'components/ConfirmModal';
 import LoadingButton from 'components/LoadingButton';
@@ -25,8 +25,10 @@ import WifiScanResultModalWidget from 'components/WifiScanResultModal';
 import DeviceCommandsCollapse from './DeviceCommandsCollapse';
 import styles from './index.module.scss';

-const DeviceCommands = ({ selectedDeviceId }) => {
+const DeviceCommands = () => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  // Wifiscan result related
  const [chosenWifiScan, setChosenWifiScan] = useState(null);
  const [showScanModal, setShowScanModal] = useState(false);
@@ -90,7 +92,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
      params: {
        limit: commandLimit,
@@ -107,7 +109,10 @@ const DeviceCommands = ({ selectedDeviceId }) => {
    }

    axiosInstance
-      .get(`/commands?serialNumber=${encodeURIComponent(selectedDeviceId)}${extraParams}`, options)
+      .get(
+        `/commands?serialNumber=${encodeURIComponent(deviceSerialNumber)}${extraParams}`,
+        options,
+      )
      .then((response) => {
        setCommands(response.data.commands);
      })
@@ -122,13 +127,13 @@ const DeviceCommands = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/octet-stream',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
      responseType: 'arraybuffer',
    };

    axiosInstance
-      .get(`/file/${uuid}?serialNumber=${selectedDeviceId}`, options)
+      .get(`/file/${uuid}?serialNumber=${deviceSerialNumber}`, options)
      .then((response) => {
        const blob = new Blob([response.data], { type: 'application/octet-stream' });
        const link = document.createElement('a');
@@ -145,7 +150,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
    };
    return axiosInstance
@@ -231,12 +236,12 @@ const DeviceCommands = ({ selectedDeviceId }) => {
  ];

  useEffect(() => {
-    if (selectedDeviceId && start !== '' && end !== '') {
+    if (deviceSerialNumber && start !== '' && end !== '') {
      getCommands();
-    } else if (selectedDeviceId && start === '' && end === '') {
+    } else if (deviceSerialNumber && start === '' && end === '') {
      getCommands();
    }
-  }, [selectedDeviceId, start, end]);
+  }, [deviceSerialNumber, start, end]);

  useEffect(() => {
    eventBus.on('actionCompleted', () => refreshCommands());
@@ -247,7 +252,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
  }, []);

  useEffect(() => {
-    if (selectedDeviceId) {
+    if (deviceSerialNumber) {
      setCommandLimit(25);
      setLoadingMore(false);
      setShowLoadingMore(true);
@@ -255,7 +260,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
      setEnd('');
      getCommands();
    }
-  }, [selectedDeviceId]);
+  }, [deviceSerialNumber]);

  useEffect(() => {
    if (commandLimit !== 25) {
@@ -446,8 +451,4 @@ const DeviceCommands = ({ selectedDeviceId }) => {
  );
 };

-DeviceCommands.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceCommands;
--- a/src/components/ConfigureModal/index.js
+++ b/src/components/ConfigureModal/index.js
@@ -16,9 +16,9 @@ import {
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import { checkIfJson } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
@@ -27,6 +27,8 @@ import styles from './index.module.scss';

 const ConfigureModal = ({ show, toggleModal }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [hadSuccess, setHadSuccess] = useState(false);
  const [hadFailure, setHadFailure] = useState(false);
  const [doingNow, setDoingNow] = useState(false);
@@ -36,7 +38,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
  const [checkingIfSure, setCheckingIfSure] = useState(false);
  const [errorJson, setErrorJson] = useState(false);
  const [inputKey, setInputKey] = useState(0);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
+
  let fileReader;

  const confirmingIfSure = () => {
@@ -69,10 +71,8 @@ const ConfigureModal = ({ show, toggleModal }) => {
    setHadSuccess(false);
    setWaiting(true);

-    const token = getToken();
-
    const parameters = {
-      serialNumber: selectedDeviceId,
+      serialNumber: deviceSerialNumber,
      when: 0,
      UUID: 1,
      configuration: JSON.parse(newConfig),
@@ -80,11 +80,11 @@ const ConfigureModal = ({ show, toggleModal }) => {

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/configure`, parameters, { headers })
+      .post(`/device/${encodeURIComponent(deviceSerialNumber)}/configure`, parameters, { headers })
      .then(() => {
        setHadSuccess(true);
      })
--- a/src/components/DeleteLogModal/index.js
+++ b/src/components/DeleteLogModal/index.js
@@ -6,12 +6,15 @@ import PropTypes from 'prop-types';
 import ConfirmFooter from 'components/ConfirmFooter';
 import { dateToUnix } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
+import { useDevice } from 'contexts/DeviceProvider';
+import { useAuth } from 'contexts/AuthProvider';
 import eventBus from 'utils/eventBus';
 import styles from './index.module.scss';

-const DeleteLogModal = ({ serialNumber, show, toggle, object }) => {
+const DeleteLogModal = ({ show, toggle, object }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [loading, setLoading] = useState(false);
  const [maxDate, setMaxDate] = useState(new Date().toString());

@@ -27,14 +30,14 @@ const DeleteLogModal = ({ serialNumber, show, toggle, object }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
      params: {
        endDate: dateToUnix(maxDate),
      },
    };
    return axiosInstance
-      .delete(`/device/${serialNumber}/${object}`, options)
+      .delete(`/device/${deviceSerialNumber}/${object}`, options)
      .then(() => {})
      .catch(() => {})
      .finally(() => {
@@ -94,7 +97,6 @@ DeleteLogModal.propTypes = {
  show: PropTypes.bool.isRequired,
  toggle: PropTypes.func.isRequired,
  object: PropTypes.string.isRequired,
-  serialNumber: PropTypes.string.isRequired,
 };

 export default DeleteLogModal;
--- a/src/components/DeviceActionCard/index.js
+++ b/src/components/DeviceActionCard/index.js
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-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 { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import LoadingButton from 'components/LoadingButton';
 import RebootModal from 'components/RebootModal';
 import FirmwareUpgradeModal from 'components/FirmwareUpgradeModal';
@@ -15,8 +15,10 @@ import FactoryResetModal from 'components/FactoryResetModal';

 import styles from './index.module.scss';

-const DeviceActions = ({ selectedDeviceId }) => {
+const DeviceActions = () => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [showRebootModal, setShowRebootModal] = useState(false);
  const [showBlinkModal, setShowBlinkModal] = useState(false);
  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
@@ -59,12 +61,12 @@ const DeviceActions = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
    };

    axiosInstance
-      .get(`/device/${encodeURIComponent(selectedDeviceId)}/rtty`, options)
+      .get(`/device/${encodeURIComponent(deviceSerialNumber)}/rtty`, options)
      .then((response) => {
        const url = `https://${response.data.server}:${response.data.viewport}/connect/${response.data.connectionId}`;
        const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
@@ -145,8 +147,4 @@ const DeviceActions = ({ selectedDeviceId }) => {
  );
 };

-DeviceActions.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceActions;
--- a/src/components/DeviceConfiguration/index.js
+++ b/src/components/DeviceConfiguration/index.js
@@ -14,17 +14,19 @@ import {
  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 { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import CopyToClipboardButton from 'components/CopyToClipboardButton';
 import DeviceConfigurationModal from './DeviceConfigurationModal';
 import styles from './index.module.scss';

-const DeviceConfiguration = ({ selectedDeviceId }) => {
+const DeviceConfiguration = () => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [collapse, setCollapse] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [device, setDevice] = useState(null);
@@ -42,12 +44,12 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
    };

    axiosInstance
-      .get(`/device/${encodeURIComponent(selectedDeviceId)}`, options)
+      .get(`/device/${encodeURIComponent(deviceSerialNumber)}`, options)
      .then((response) => {
        setDevice(response.data);
      })
@@ -55,8 +57,8 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
  };

  useEffect(() => {
-    if (selectedDeviceId) getDevice();
-  }, [selectedDeviceId]);
+    if (deviceSerialNumber) getDevice();
+  }, [deviceSerialNumber]);

  if (device) {
    return (
@@ -206,8 +208,4 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
  );
 };

-DeviceConfiguration.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceConfiguration;
--- a/src/components/DeviceHealth/index.js
+++ b/src/components/DeviceHealth/index.js
@@ -15,17 +15,19 @@ import {
 import CIcon from '@coreui/icons-react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-widgets/DatePicker';
-import PropTypes from 'prop-types';
 import { prettyDate, dateToUnix } from 'utils/helper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
 import eventBus from 'utils/eventBus';
 import LoadingButton from 'components/LoadingButton';
 import DeleteLogModal from 'components/DeleteLogModal';
 import styles from './index.module.scss';

-const DeviceHealth = ({ selectedDeviceId }) => {
+const DeviceHealth = () => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [collapse, setCollapse] = useState(false);
  const [details, setDetails] = useState([]);
  const [loading, setLoading] = useState(false);
@@ -68,7 +70,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
      params: {
        limit: logLimit,
@@ -85,7 +87,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
    }

    axiosInstance
-      .get(`/device/${encodeURIComponent(selectedDeviceId)}/healthchecks${extraParams}`, options)
+      .get(`/device/${encodeURIComponent(deviceSerialNumber)}/healthchecks${extraParams}`, options)
      .then((response) => {
        setHealthChecks(response.data.values);
      })
@@ -128,7 +130,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
  ];

  useEffect(() => {
-    if (selectedDeviceId) {
+    if (deviceSerialNumber) {
      setLogLimit(25);
      setLoadingMore(false);
      setShowLoadingMore(true);
@@ -136,7 +138,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
      setEnd('');
      getDeviceHealth();
    }
-  }, [selectedDeviceId]);
+  }, [deviceSerialNumber]);

  useEffect(() => {
    if (logLimit !== 25) {
@@ -168,12 +170,12 @@ const DeviceHealth = ({ selectedDeviceId }) => {
  }, [healthChecks]);

  useEffect(() => {
-    if (selectedDeviceId && start !== '' && end !== '') {
+    if (deviceSerialNumber && start !== '' && end !== '') {
      getDeviceHealth();
-    } else if (selectedDeviceId && start === '' && end === '') {
+    } else if (deviceSerialNumber && start === '' && end === '') {
      getDeviceHealth();
    }
-  }, [start, end, selectedDeviceId]);
+  }, [start, end, deviceSerialNumber]);

  useEffect(() => {
    eventBus.on('deletedHealth', () => getDeviceHealth());
@@ -281,7 +283,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
            />
          </CButton>
          <DeleteLogModal
-            serialNumber={selectedDeviceId}
+            serialNumber={deviceSerialNumber}
            object="healthchecks"
            show={showDeleteModal}
            toggle={toggleDeleteModal}
@@ -292,8 +294,4 @@ const DeviceHealth = ({ selectedDeviceId }) => {
  );
 };

-DeviceHealth.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceHealth;
--- a/src/components/DeviceListTable/index.js
+++ b/src/components/DeviceListTable/index.js
@@ -17,7 +17,7 @@ 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 { useAuth } from 'contexts/AuthProvider';
 import axiosInstance from 'utils/axiosInstance';
 import { cleanBytesString } from 'utils/helper';
 import meshIcon from 'assets/icons/Mesh.png';
@@ -29,6 +29,7 @@ import styles from './index.module.scss';

 const DeviceList = () => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
  const [loadedSerials, setLoadedSerials] = useState(false);
  const [serialNumbers, setSerialNumbers] = useState([]);
  const [page, setPage] = useState(0);
@@ -38,12 +39,11 @@ const DeviceList = () => {
  const [loading, setLoading] = useState(true);

  const getSerialNumbers = () => {
-    const token = getToken();
    setLoading(true);

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    axiosInstance
@@ -60,12 +60,11 @@ const DeviceList = () => {
  };

  const getDeviceInformation = () => {
-    const token = getToken();
    setLoading(true);

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    const startIndex = page * devicesPerPage;
@@ -89,12 +88,11 @@ const DeviceList = () => {
  };

  const refreshDevice = (serialNumber) => {
-    const token = getToken();
    setLoading(true);

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    axiosInstance
--- a/src/components/DeviceLogs/index.js
+++ b/src/components/DeviceLogs/index.js
@@ -14,17 +14,19 @@ import {
 import CIcon from '@coreui/icons-react';
 import { useTranslation } from 'react-i18next';
 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 { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import eventBus from 'utils/eventBus';
 import LoadingButton from 'components/LoadingButton';
 import DeleteLogModal from 'components/DeleteLogModal';
 import styles from './index.module.scss';

-const DeviceLogs = ({ selectedDeviceId }) => {
+const DeviceLogs = () => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [collapse, setCollapse] = useState(false);
  const [details, setDetails] = useState([]);
  const [loading, setLoading] = useState(false);
@@ -65,7 +67,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
      params: {
        limit: logLimit,
@@ -82,7 +84,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
    }

    axiosInstance
-      .get(`/device/${encodeURIComponent(selectedDeviceId)}/logs${extraParams}`, options)
+      .get(`/device/${encodeURIComponent(deviceSerialNumber)}/logs${extraParams}`, options)
      .then((response) => {
        setLogs(response.data.values);
      })
@@ -125,7 +127,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
  ];

  useEffect(() => {
-    if (selectedDeviceId) {
+    if (deviceSerialNumber) {
      setLogLimit(25);
      setLoadingMore(false);
      setShowLoadingMore(true);
@@ -133,7 +135,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
      setEnd('');
      getLogs();
    }
-  }, [selectedDeviceId]);
+  }, [deviceSerialNumber]);

  useEffect(() => {
    if (logLimit !== 25) {
@@ -150,12 +152,12 @@ const DeviceLogs = ({ selectedDeviceId }) => {
  }, [logs]);

  useEffect(() => {
-    if (selectedDeviceId && start !== '' && end !== '') {
+    if (deviceSerialNumber && start !== '' && end !== '') {
      getLogs();
-    } else if (selectedDeviceId && start === '' && end === '') {
+    } else if (deviceSerialNumber && start === '' && end === '') {
      getLogs();
    }
-  }, [start, end, selectedDeviceId]);
+  }, [start, end, deviceSerialNumber]);

  useEffect(() => {
    eventBus.on('deletedLogs', () => getLogs());
@@ -258,7 +260,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
        }
      />
      <DeleteLogModal
-        serialNumber={selectedDeviceId}
+        serialNumber={deviceSerialNumber}
        object="logs"
        show={showDeleteModal}
        toggle={toggleDeleteModal}
@@ -267,8 +269,4 @@ const DeviceLogs = ({ selectedDeviceId }) => {
  );
 };

-DeviceLogs.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceLogs;
--- a/src/components/DeviceStatusCard/index.js
+++ b/src/components/DeviceStatusCard/index.js
@@ -13,18 +13,20 @@ import {
  CSpinner,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import { cilSync } from '@coreui/icons';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
 import { prettyDate, secondsToDetailed } from 'utils/helper';
 import MemoryBar from './MemoryBar';

 import styles from './index.module.scss';

-const DeviceStatusCard = ({ selectedDeviceId }) => {
+const DeviceStatusCard = () => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [lastStats, setLastStats] = useState(null);
  const [status, setStatus] = useState(null);
  const [error, setError] = useState(false);
@@ -40,16 +42,16 @@ const DeviceStatusCard = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
    };

    const lastStatsRequest = axiosInstance.get(
-      `/device/${encodeURIComponent(selectedDeviceId)}/statistics?lastOnly=true`,
+      `/device/${encodeURIComponent(deviceSerialNumber)}/statistics?lastOnly=true`,
      options,
    );
    const statusRequest = axiosInstance.get(
-      `/device/${encodeURIComponent(selectedDeviceId)}/status`,
+      `/device/${encodeURIComponent(deviceSerialNumber)}/status`,
      options,
    );

@@ -68,8 +70,8 @@ const DeviceStatusCard = ({ selectedDeviceId }) => {

  useEffect(() => {
    setError(false);
-    if (selectedDeviceId) getData();
-  }, [selectedDeviceId]);
+    if (deviceSerialNumber) getData();
+  }, [deviceSerialNumber]);

  if (!error) {
    return (
@@ -78,7 +80,7 @@ const DeviceStatusCard = ({ selectedDeviceId }) => {
          <CRow>
            <CCol>
              <div className="text-value-lg">
-                {t('status.title', { serialNumber: selectedDeviceId })}
+                {t('status.title', { serialNumber: deviceSerialNumber })}
              </div>
            </CCol>
            <CCol>
@@ -154,8 +156,12 @@ const DeviceStatusCard = ({ selectedDeviceId }) => {
                <CCol md="5">{t('status.memory')} :</CCol>
                <CCol xs="9" md="6" style={{ paddingTop: '5px' }}>
                  <MemoryBar
-                    usedBytes={lastStats?.unit?.memory?.total - lastStats?.unit?.memory?.free}
-                    totalBytes={lastStats?.unit?.memory?.total}
+                    usedBytes={
+                      lastStats?.unit?.memory?.total && lastStats?.unit?.memory?.free
+                        ? lastStats?.unit?.memory?.total - lastStats?.unit?.memory?.free
+                        : 0
+                    }
+                    totalBytes={lastStats?.unit?.memory?.total ?? 0}
                  />
                </CCol>
              </CRow>
@@ -172,7 +178,7 @@ const DeviceStatusCard = ({ selectedDeviceId }) => {
        <CRow>
          <CCol>
            <div className="text-value-lg">
-              {t('status.title', { serialNumber: selectedDeviceId })}
+              {t('status.title', { serialNumber: deviceSerialNumber })}
            </div>
          </CCol>
        </CRow>
@@ -186,8 +192,4 @@ const DeviceStatusCard = ({ selectedDeviceId }) => {
  );
 };

-DeviceStatusCard.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default React.memo(DeviceStatusCard);
--- a/src/components/FactoryResetModal/index.js
+++ b/src/components/FactoryResetModal/index.js
@@ -14,15 +14,17 @@ import {
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import axiosInstance from 'utils/axiosInstance';
 import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
 import styles from './index.module.scss';

 const ConfigureModal = ({ show, toggleModal }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [hadSuccess, setHadSuccess] = useState(false);
  const [hadFailure, setHadFailure] = useState(false);
  const [doingNow, setDoingNow] = useState(false);
@@ -30,7 +32,6 @@ const ConfigureModal = ({ show, toggleModal }) => {
  const [keepRedirector, setKeepRedirector] = useState(true);
  const [responseBody, setResponseBody] = useState('');
  const [checkingIfSure, setCheckingIfSure] = useState(false);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

  const toggleRedirector = () => {
    setKeepRedirector(!keepRedirector);
@@ -54,17 +55,17 @@ const ConfigureModal = ({ show, toggleModal }) => {
    setWaiting(true);

    const parameters = {
-      serialNumber: selectedDeviceId,
+      serialNumber: deviceSerialNumber,
      keepRedirector,
    };

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${getToken()}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/factory`, parameters, { headers })
+      .post(`/device/${encodeURIComponent(deviceSerialNumber)}/factory`, parameters, { headers })
      .then(() => {
        setHadSuccess(true);
      })
--- a/src/components/FirmwareUpgradeModal/UpgradeWaitingBody.js
+++ b/src/components/FirmwareUpgradeModal/UpgradeWaitingBody.js
@@ -3,11 +3,12 @@ import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { CModalBody } from '@coreui/react';
 import { v4 as createUuid } from 'uuid';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
 import axiosInstance from 'utils/axiosInstance';

 const UpgradeWaitingBody = ({ serialNumber }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
  const [currentStep, setCurrentStep] = useState(0);
  const [secondsElapsed, setSecondsElapsed] = useState(0);
  const [labelsToShow, setLabelsToShow] = useState(['upgrade.command_submitted']);
@@ -16,7 +17,7 @@ const UpgradeWaitingBody = ({ serialNumber }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
    };

@@ -30,7 +31,7 @@ const UpgradeWaitingBody = ({ serialNumber }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
    };

--- a/src/components/FirmwareUpgradeModal/index.js
+++ b/src/components/FirmwareUpgradeModal/index.js
@@ -15,10 +15,10 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
 import getDeviceConnection from 'utils/deviceHelper';
@@ -28,6 +28,8 @@ import UpgradeWaitingBody from './UpgradeWaitingBody';

 const FirmwareUpgradeModal = ({ show, toggleModal }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [isNow, setIsNow] = useState(true);
  const [waitForUpgrade, setWaitForUpgrade] = useState(false);
  const [date, setDate] = useState(new Date().toString());
@@ -39,7 +41,6 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
  const [waitingForUpgrade, setWaitingForUpgrade] = useState(false);
  const [showWaitingConsole, setShowWaitingConsole] = useState(false);
  const [deviceConnected, setDeviceConnected] = useState(true);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

  const toggleNow = () => {
    if (isNow) {
@@ -81,9 +82,9 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
  }, [firmware, date]);

  useEffect(() => {
-    if (selectedDeviceId !== null && show) {
+    if (deviceSerialNumber !== null && show) {
      const asyncGet = async () => {
-        const isConnected = await getDeviceConnection(selectedDeviceId);
+        const isConnected = await getDeviceConnection(deviceSerialNumber, currentToken);
        setDisableWaiting(!isConnected);
        setDeviceConnected(isConnected);
      };
@@ -97,17 +98,17 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
      setBlockFields(true);
      const headers = {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
-        serialNumber: selectedDeviceId,
+        Authorization: `Bearer ${currentToken}`,
+        serialNumber: deviceSerialNumber,
      };

      const parameters = {
-        serialNumber: selectedDeviceId,
+        serialNumber: deviceSerialNumber,
        when: isNow ? 0 : dateToUnix(date),
        uri: firmware,
      };
      axiosInstance
-        .post(`/device/${encodeURIComponent(selectedDeviceId)}/upgrade`, parameters, { headers })
+        .post(`/device/${encodeURIComponent(deviceSerialNumber)}/upgrade`, parameters, { headers })
        .then(() => {
          if (waitForUpgrade) {
            setShowWaitingConsole(true);
@@ -129,7 +130,7 @@ const FirmwareUpgradeModal = ({ show, toggleModal }) => {
          <CModalTitle>{t('upgrade.title')}</CModalTitle>
        </CModalHeader>
        <CModalBody>
-          <UpgradeWaitingBody serialNumber={selectedDeviceId} />
+          <UpgradeWaitingBody serialNumber={deviceSerialNumber} />
        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={toggleModal}>
--- a/src/components/InterfaceStatistics/LatestStatisticsModal.js
+++ b/src/components/InterfaceStatistics/LatestStatisticsModal.js
@@ -10,23 +10,26 @@ import {
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import styles from './index.module.scss';

-const LatestStatisticsModal = ({ show, toggle, serialNumber }) => {
+const LatestStatisticsModal = ({ show, toggle }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [latestStats, setLatestStats] = useState('');

  const getLatestStats = () => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
    };

    axiosInstance
-      .get(`/device/${serialNumber}/statistics?lastOnly=true`, options)
+      .get(`/device/${deviceSerialNumber}/statistics?lastOnly=true`, options)
      .then((response) => {
        setLatestStats(response.data);
      })
@@ -57,7 +60,6 @@ const LatestStatisticsModal = ({ show, toggle, serialNumber }) => {
 };

 LatestStatisticsModal.propTypes = {
-  serialNumber: PropTypes.string.isRequired,
  toggle: PropTypes.func.isRequired,
  show: PropTypes.bool.isRequired,
 };
--- a/src/components/InterfaceStatistics/StatisticsChartList.js
+++ b/src/components/InterfaceStatistics/StatisticsChartList.js
@@ -1,15 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 import { v4 as createUuid } from 'uuid';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import { unixToTime, capitalizeFirstLetter } from 'utils/helper';
 import eventBus from 'utils/eventBus';
 import DeviceStatisticsChart from './DeviceStatisticsChart';

-const StatisticsChartList = ({ selectedDeviceId }) => {
+const StatisticsChartList = () => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [statOptions, setStatOptions] = useState({
    interfaceList: [],
    settings: {},
@@ -118,7 +120,7 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
      params: {
        serialNumber: '24f5a207a130',
@@ -126,7 +128,7 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
    };

    axiosInstance
-      .get(`/device/${selectedDeviceId}/statistics?newest=true&limit=50`, options)
+      .get(`/device/${deviceSerialNumber}/statistics?newest=true&limit=50`, options)
      .then((response) => {
        transformIntoDataset(response.data.data);
      })
@@ -134,10 +136,10 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
  };

  useEffect(() => {
-    if (selectedDeviceId) {
+    if (deviceSerialNumber) {
      getStatistics();
    }
-  }, [selectedDeviceId]);
+  }, [deviceSerialNumber]);

  useEffect(() => {
    eventBus.on('refreshInterfaceStatistics', () => getStatistics());
@@ -173,8 +175,4 @@ const StatisticsChartList = ({ selectedDeviceId }) => {
  );
 };

-StatisticsChartList.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default React.memo(StatisticsChartList);
--- a/src/components/InterfaceStatistics/index.js
+++ b/src/components/InterfaceStatistics/index.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 import {
  CDropdown,
  CDropdownToggle,
@@ -19,7 +18,7 @@ import StatisticsChartList from './StatisticsChartList';
 import LatestStatisticsModal from './LatestStatisticsModal';
 import styles from './index.module.scss';

-const DeviceStatisticsCard = ({ selectedDeviceId }) => {
+const DeviceStatisticsCard = () => {
  const { t } = useTranslation();
  const [showLatestModal, setShowLatestModal] = useState(false);

@@ -57,20 +56,12 @@ const DeviceStatisticsCard = ({ selectedDeviceId }) => {
          </CRow>
        </CCardHeader>
        <CCardBody className={styles.statsBody}>
-          <StatisticsChartList selectedDeviceId={selectedDeviceId} />
+          <StatisticsChartList />
        </CCardBody>
      </CCard>
-      <LatestStatisticsModal
-        show={showLatestModal}
-        toggle={toggleLatestModal}
-        serialNumber={selectedDeviceId}
-      />
+      <LatestStatisticsModal show={showLatestModal} toggle={toggleLatestModal} />
    </div>
  );
 };

-DeviceStatisticsCard.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceStatisticsCard;
--- a/src/components/RebootModal/index.js
+++ b/src/components/RebootModal/index.js
@@ -13,10 +13,10 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
 import LoadingButton from 'components/LoadingButton';
@@ -25,11 +25,12 @@ import styles from './index.module.scss';

 const ActionModal = ({ show, toggleModal }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [waiting, setWaiting] = useState(false);
  const [result, setResult] = useState(null);
  const [chosenDate, setChosenDate] = useState(new Date().toString());
  const [isNow, setIsNow] = useState(false);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

  const toggleNow = () => {
    setIsNow(!isNow);
@@ -52,21 +53,20 @@ const ActionModal = ({ show, toggleModal }) => {
  const doAction = () => {
    setWaiting(true);

-    const token = getToken();
    const utcDate = new Date(chosenDate);

    const parameters = {
-      serialNumber: selectedDeviceId,
+      serialNumber: deviceSerialNumber,
      when: isNow ? 0 : dateToUnix(utcDate),
    };

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/reboot`, parameters, { headers })
+      .post(`/device/${encodeURIComponent(deviceSerialNumber)}/reboot`, parameters, { headers })
      .then(() => {
        setResult('success');
      })
--- a/src/components/TraceModal/WaitingForTraceBody.js
+++ b/src/components/TraceModal/WaitingForTraceBody.js
@@ -2,13 +2,14 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { CModalBody, CButton, CSpinner, CModalFooter } from '@coreui/react';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
 import axiosInstance from 'utils/axiosInstance';

 import styles from './index.module.scss';

 const WaitingForTraceBody = ({ serialNumber, commandUuid, toggle }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
  const [secondsElapsed, setSecondsElapsed] = useState(0);
  const [waitingForFile, setWaitingForFile] = useState(true);

@@ -16,7 +17,7 @@ const WaitingForTraceBody = ({ serialNumber, commandUuid, toggle }) => {
    const options = {
      headers: {
        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
    };

@@ -34,7 +35,7 @@ const WaitingForTraceBody = ({ serialNumber, commandUuid, toggle }) => {
    const options = {
      headers: {
        Accept: 'application/octet-stream',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
      },
      responseType: 'arraybuffer',
    };
--- a/src/components/TraceModal/index.js
+++ b/src/components/TraceModal/index.js
@@ -17,9 +17,9 @@ import {
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
 import getDeviceConnection from 'utils/deviceHelper';
@@ -30,6 +30,8 @@ import styles from './index.module.scss';

 const TraceModal = ({ show, toggleModal }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [hadSuccess, setHadSuccess] = useState(false);
  const [hadFailure, setHadFailure] = useState(false);
  const [blockFields, setBlockFields] = useState(false);
@@ -43,8 +45,6 @@ const TraceModal = ({ show, toggleModal }) => {
  const [waitingForTrace, setWaitingForTrace] = useState(false);
  const [commandUuid, setCommandUuid] = useState(null);

-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
-
  const toggleWaitForTrace = () => {
    setWaitForTrace(!waitForTrace);
  };
@@ -65,10 +65,8 @@ const TraceModal = ({ show, toggleModal }) => {
    setHadFailure(false);
    setHadSuccess(false);

-    const token = getToken();
-
    const parameters = {
-      serialNumber: selectedDeviceId,
+      serialNumber: deviceSerialNumber,
      when: 0,
      network: chosenInterface,
    };
@@ -81,11 +79,11 @@ const TraceModal = ({ show, toggleModal }) => {

    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/trace`, parameters, { headers })
+      .post(`/device/${encodeURIComponent(deviceSerialNumber)}/trace`, parameters, { headers })
      .then((response) => {
        setHadSuccess(true);
        if (waitForTrace) {
@@ -105,9 +103,9 @@ const TraceModal = ({ show, toggleModal }) => {
  };

  useEffect(() => {
-    if (selectedDeviceId !== null && show) {
+    if (deviceSerialNumber !== null && show) {
      const asyncGet = async () => {
-        const isConnected = await getDeviceConnection(selectedDeviceId);
+        const isConnected = await getDeviceConnection(deviceSerialNumber, currentToken);
        setIsDeviceConnected(isConnected);
      };
      asyncGet();
@@ -119,7 +117,7 @@ const TraceModal = ({ show, toggleModal }) => {
      return (
        <WaitingForTraceBody
          toggle={toggleModal}
-          serialNumber={selectedDeviceId}
+          serialNumber={deviceSerialNumber}
          commandUuid={commandUuid}
        />
      );
--- a/src/components/WifiScanModal/index.js
+++ b/src/components/WifiScanModal/index.js
@@ -13,9 +13,9 @@ import {
 } from '@coreui/react';
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { getToken } from 'utils/authHelper';
+import { useAuth } from 'contexts/AuthProvider';
+import { useDevice } from 'contexts/DeviceProvider';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
 import LoadingButton from 'components/LoadingButton';
@@ -25,6 +25,8 @@ import styles from './index.module.scss';

 const WifiScanModal = ({ show, toggleModal }) => {
  const { t } = useTranslation();
+  const { currentToken } = useAuth();
+  const { deviceSerialNumber } = useDevice();
  const [hadSuccess, setHadSuccess] = useState(false);
  const [hadFailure, setHadFailure] = useState(false);
  const [waiting, setWaiting] = useState(false);
@@ -32,7 +34,6 @@ const WifiScanModal = ({ show, toggleModal }) => {
  const [activeScan, setActiveScan] = useState(false);
  const [hideOptions, setHideOptions] = useState(false);
  const [channelList, setChannelList] = useState([]);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);

  const toggleVerbose = () => {
    setVerbose(!choseVerbose);
@@ -88,20 +89,18 @@ const WifiScanModal = ({ show, toggleModal }) => {
    setHadSuccess(false);
    setWaiting(true);

-    const token = getToken();
-
    const parameters = {
-      serialNumber: selectedDeviceId,
+      serialNumber: deviceSerialNumber,
      verbose: choseVerbose,
      activeScan,
    };
    const headers = {
      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
    };

    axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/wifiscan`, parameters, { headers })
+      .post(`/device/${encodeURIComponent(deviceSerialNumber)}/wifiscan`, parameters, { headers })
      .then((response) => {
        const scanList = response?.data?.results?.status?.scan;

--- a/src/contexts/AuthProvider/index.js
+++ b/src/contexts/AuthProvider/index.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const AuthContext = React.createContext();
+
+export const AuthProvider = ({ token, children }) => {
+  const [currentToken, setCurrentToken] = useState(token);
+
+  return (
+    <AuthContext.Provider value={{ currentToken, setCurrentToken }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+AuthProvider.propTypes = {
+  token: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export const useAuth = () => React.useContext(AuthContext);
--- a/src/contexts/DeviceProvider/index.js
+++ b/src/contexts/DeviceProvider/index.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const DeviceContext = React.createContext();
+
+export const DeviceProvider = ({ serialNumber, children }) => {
+  const [deviceSerialNumber, setDeviceSerialNumber] = useState(serialNumber);
+
+  return (
+    <DeviceContext.Provider value={{ deviceSerialNumber, setDeviceSerialNumber }}>
+      {children}
+    </DeviceContext.Provider>
+  );
+};
+
+DeviceProvider.propTypes = {
+  serialNumber: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export const useDevice = () => React.useContext(DeviceContext);
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'index.css';
-import { Provider } from 'react-redux';
 import App from 'App';
-import store from 'store';
 import { icons } from 'assets/icons';
 import 'i18n';

@@ -11,9 +9,7 @@ React.icons = icons;

 ReactDOM.render(
  <React.StrictMode>
-    <Provider store={store}>
    <App />
-    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
 );
--- a/src/layout/Header/index.js
+++ b/src/layout/Header/index.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import {
  CHeader,
@@ -11,26 +10,25 @@ import {
  CLink,
  CPopover,
 } from '@coreui/react';
+import PropTypes from 'prop-types';
 import CIcon from '@coreui/icons-react';
 import { cilAccountLogout } from '@coreui/icons';
 import { logout } from 'utils/authHelper';
 import routes from 'routes';
 import LanguageSwitcher from 'components/LanguageSwitcher';

-const TheHeader = () => {
+const TheHeader = ({ showSidebar, setShowSidebar }) => {
  const { t, i18n } = useTranslation();
-  const dispatch = useDispatch();
  const [translatedRoutes, setTranslatedRoutes] = useState(routes);
-  const sidebarShow = useSelector((state) => state.sidebarShow);

  const toggleSidebar = () => {
-    const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive';
-    dispatch({ type: 'set', sidebarShow: val });
+    const val = [true, 'responsive'].includes(showSidebar) ? false : 'responsive';
+    setShowSidebar(val);
  };

  const toggleSidebarMobile = () => {
-    const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive';
-    dispatch({ type: 'set', sidebarShow: val });
+    const val = [false, 'responsive'].includes(showSidebar) ? true : 'responsive';
+    setShowSidebar(val);
  };

  useEffect(() => {
@@ -69,4 +67,9 @@ const TheHeader = () => {
  );
 };

+TheHeader.propTypes = {
+  showSidebar: PropTypes.string.isRequired,
+  setShowSidebar: PropTypes.func.isRequired,
+};
+
 export default TheHeader;
--- a/src/layout/Sidebar/index.js
+++ b/src/layout/Sidebar/index.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
 import {
  CCreateElement,
  CSidebar,
@@ -11,14 +10,13 @@ import {
  CSidebarNavDropdown,
  CSidebarNavItem,
 } from '@coreui/react';
+import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import logoBar from 'assets/OpenWiFi_LogoLockup_WhiteColour.svg';
 import styles from './index.module.scss';

-const TheSidebar = () => {
+const TheSidebar = ({ showSidebar, setShowSidebar }) => {
  const { t } = useTranslation();
-  const dispatch = useDispatch();
-  const show = useSelector((state) => state.sidebarShow);

  const navigation = [
    {
@@ -30,7 +28,7 @@ const TheSidebar = () => {
  ];

  return (
-    <CSidebar show={show} onShowChange={(val) => dispatch({ type: 'set', sidebarShow: val })}>
+    <CSidebar show={showSidebar} onShowChange={(val) => setShowSidebar(val)}>
      <CSidebarBrand className="d-md-down-none" to="/devices">
        <img
          className={[styles.sidebarImgFull, 'c-sidebar-brand-full'].join(' ')}
@@ -59,4 +57,9 @@ const TheSidebar = () => {
  );
 };

+TheSidebar.propTypes = {
+  showSidebar: PropTypes.string.isRequired,
+  setShowSidebar: PropTypes.func.isRequired,
+};
+
 export default React.memo(TheSidebar);
--- a/src/layout/index.js
+++ b/src/layout/index.js
@@ -1,21 +1,17 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
 import TheContent from './Content';
 import TheSidebar from './Sidebar';
 import TheFooter from './Footer';
 import TheHeader from './Header';

-const TheLayout = (props) => {
-  const { isLoggedIn } = useSelector((state) => state.connected);
-  if (isLoggedIn) {
-    return <div>{props.children}</div>;
-  }
+const TheLayout = () => {
+  const [showSidebar, setShowSidebar] = useState('responsive');
+
  return (
    <div className="c-app c-default-layout">
-      <TheSidebar />
+      <TheSidebar showSidebar={showSidebar} setShowSidebar={setShowSidebar} />
      <div className="c-wrapper">
-        <TheHeader />
+        <TheHeader showSidebar={showSidebar} setShowSidebar={setShowSidebar} />
        <div className="c-body">
          <TheContent />
        </div>
@@ -25,12 +21,4 @@ const TheLayout = (props) => {
  );
 };

-TheLayout.propTypes = {
-  children: PropTypes.instanceOf(Object),
-};
-
-TheLayout.defaultProps = {
-  children: {},
-};
-
 export default TheLayout;
--- a/src/pages/DevicePage/index.js
+++ b/src/pages/DevicePage/index.js
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
 import { useParams } from 'react-router-dom';
 import { CRow, CCol } from '@coreui/react';
 import DeviceHealth from 'components/DeviceHealth';
@@ -9,40 +8,33 @@ import DeviceLogs from 'components/DeviceLogs';
 import DeviceStatisticsCard from 'components/InterfaceStatistics';
 import DeviceActionCard from 'components/DeviceActionCard';
 import DeviceStatusCard from 'components/DeviceStatusCard';
+import { DeviceProvider } from 'contexts/DeviceProvider';

 const DevicePage = () => {
-  const dispatch = useDispatch();
-
  const { deviceId } = useParams();
-  const previouslySelectedDeviceId = useSelector((state) => state.selectedDeviceId);
-
-  useEffect(() => {
-    if (deviceId && deviceId !== previouslySelectedDeviceId)
-      dispatch({ type: 'set', selectedDeviceId: deviceId });
-  }, [deviceId]);

  return (
-    <>
    <div className="App">
+      <DeviceProvider serialNumber={deviceId}>
        <CRow>
          <CCol xs="12" sm="6">
-            <DeviceStatusCard selectedDeviceId={deviceId} />
-            <DeviceConfiguration selectedDeviceId={deviceId} />
+            <DeviceStatusCard />
+            <DeviceConfiguration />
          </CCol>
          <CCol xs="12" sm="6">
-            <DeviceLogs selectedDeviceId={deviceId} />
-            <DeviceHealth selectedDeviceId={deviceId} />
-            <DeviceActionCard selectedDeviceId={deviceId} />
+            <DeviceLogs />
+            <DeviceHealth />
+            <DeviceActionCard />
          </CCol>
        </CRow>
        <CRow>
          <CCol>
-            <DeviceStatisticsCard selectedDeviceId={deviceId} />
-            <CommandHistory selectedDeviceId={deviceId} />
+            <DeviceStatisticsCard />
+            <CommandHistory />
          </CCol>
        </CRow>
+      </DeviceProvider>
    </div>
-    </>
  );
 };

--- a/src/pages/LoginPage/index.js
+++ b/src/pages/LoginPage/index.js
@@ -18,8 +18,8 @@ import {
  CInvalidFeedback,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
+import { useAuth } from 'contexts/AuthProvider';
 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 LanguageSwitcher from 'components/LanguageSwitcher';
@@ -27,7 +27,7 @@ import styles from './index.module.scss';

 const Login = () => {
  const { t } = useTranslation();
-  const dispatch = useDispatch();
+  const { setCurrentToken } = useAuth();
  const [userId, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [gatewayUrl, setGatewayUrl] = useState('');
@@ -87,7 +87,7 @@ const Login = () => {
      .then((response) => {
        sessionStorage.setItem('gw_url', `${gatewayUrlToUse}/api/v1`);
        sessionStorage.setItem('access_token', response.data.access_token);
-        dispatch({ type: 'set', connected: true });
+        setCurrentToken(response.data.access_token);
      })
      .catch(() => {
        setHadError(true);
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,20 @@
+import { useAuth } from 'contexts/AuthProvider';
+import { Route } from 'react-router-dom';
+import React from 'react';
+
+const TheLayout = React.lazy(() => import('layout'));
+const Login = React.lazy(() => import('pages/LoginPage'));
+
+const Routes = () => {
+  const { currentToken } = useAuth();
+
+  return (
+    <Route
+      path="/"
+      name="Devices"
+      render={(props) => (currentToken !== '' ? <TheLayout {...props} /> : <Login {...props} />)}
+    />
+  );
+};
+
+export default Routes;
--- a/src/routes.js
+++ b/src/routes.js
@@ -3,9 +3,7 @@ import React from 'react';
 const DevicePage = React.lazy(() => import('pages/DevicePage'));
 const DeviceListPage = React.lazy(() => import('pages/DeviceListPage'));

-const routes = [
+export default [
  { path: '/devices', exact: true, name: 'common.devices', component: DeviceListPage },
  { path: '/devices/:deviceId', name: 'common.device_page', component: DevicePage },
 ];
-
-export default routes;
--- a/src/store.js
+++ b/src/store.js
@@ -1,19 +0,0 @@
-import { createStore } from 'redux';
-
-const initialState = {
-  sidebarShow: 'responsive',
-  connected: false,
-  selectedDeviceId: null,
-};
-
-const changeState = (state = initialState, { type, ...rest }) => {
-  switch (type) {
-    case 'set':
-      return { ...state, ...rest };
-    default:
-      return state;
-  }
-};
-
-const store = createStore(changeState);
-export default store;
--- a/src/utils/deviceHelper.js
+++ b/src/utils/deviceHelper.js
@@ -1,11 +1,10 @@
-import { getToken } from 'utils/authHelper';
 import axiosInstance from 'utils/axiosInstance';

-export default async (deviceId) => {
+export default async (deviceId, token) => {
  const options = {
    headers: {
      Accept: 'application/json',
-      Authorization: `Bearer ${getToken()}`,
+      Authorization: `Bearer ${token}`,
    },
  };