fix toast/devices context usage

src/components/device/tabPane/boot.jsx

@@ -15,8 +15,8 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
-import { DevicesContext } from '../../../context/devices';
-import { ToastContext } from '../../../context/toast';
+import { ACTIONS as DevicesActions, DevicesContext } from '../../../context/devices';
+import { ACTIONS as ToastActions, ToastContext } from '../../../context/toast';
 import * as deviceController from '../../../controllers/devices';
 import * as helpers from '../../../controllers/helpers';
 
@@ -34,23 +34,26 @@ function loading() {
 function BootLogsTable(props) {
   const { dongleId } = props;
 
-  const [state, dispatch] = useContext(DevicesContext);
-  const [, notifDispatch] = useContext(ToastContext);
+  const [state, devicesDispatch] = useContext(DevicesContext);
+  const [, toastDispatch] = useContext(ToastContext);
 
   useEffect(() => {
     deviceController.getBootlogs(dongleId).then((res) => {
       // TODO: why set timeout 1?
       setTimeout(() => {
-        dispatch({
-          type: 'update_dongle_bootlogs',
+        devicesDispatch({
+          type: DevicesActions.UPDATE_DONGLE_BOOTLOGS,
           dongle_id: dongleId,
           bootlogs: res.data,
         });
       }, 1);
     }).catch(() => {
-      notifDispatch({ type: 'NEW_TOAST', msg: 'Failed to load bootlogs' });
+      toastDispatch({
+        type: ToastActions.NEW_TOAST,
+        msg: 'Failed to load bootlogs',
+      });
     });
-  }, [dispatch, notifDispatch, dongleId]);
+  }, [devicesDispatch, toastDispatch, dongleId]);
 
   return (
     <Box sx={{ width: '100%' }}>
@@ -74,6 +77,7 @@ function BootLogsTable(props) {
               {/* if you don't need to support IE11, you can replace the `stableSort` call with:
                  rows.slice().sort(getComparator(order, orderBy)) */}
               {state.dongles[dongleId].boot ? state.dongles[dongleId].boot.map((row) => (
+                // TODO: extract to function
                 <TableRow hover>
                   <TableCell>{helpers.formatDate(row.date)}</TableCell>
                   <TableCell>{row.name}</TableCell>

src/components/device/tabPane/crash.jsx

@@ -15,20 +15,21 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
-import { ACTIONS, DevicesContext } from '../../../context/devices';
+import { ACTIONS as DevicesActions, DevicesContext } from '../../../context/devices';
+import { ACTIONS as ToastActions, ToastContext } from '../../../context/toast';
 import * as deviceController from '../../../controllers/devices';
 import * as helpers from '../../../controllers/helpers';
 
-function buildContent(row) {
+function buildRow(crash) {
   return (
     <TableRow hover>
-      <TableCell>{helpers.formatDate(row.date)}</TableCell>
-      <TableCell>{row.name}</TableCell>
-      <TableCell>{`${Math.round(row.size / 1024)} MiB`}</TableCell>
+      <TableCell>{helpers.formatDate(crash.date)}</TableCell>
+      <TableCell>{crash.name}</TableCell>
+      <TableCell>{`${Math.round(crash.size / 1024)} MiB`}</TableCell>
 
       <TableCell>
         <Tooltip title="Open in new window">
-          <IconButton size="small" onClick={() => window.open(row.permalink, '_blank')}>
+          <IconButton size="small" onClick={() => window.open(crash.permalink, '_blank')}>
             <OpenInNewIcon fontSize="inherit" />
           </IconButton>
         </Tooltip>
@@ -60,23 +61,39 @@ function loading() {
   );
 }
 
+function buildBody(dongle) {
+  if (!dongle.crash) {
+    return [1, 1, 1, 1, 1].map(loading);
+  }
+  if (dongle.crash.length === 0) {
+    return <p>No drives</p>;
+  }
+  return dongle.crash.map(buildRow);
+}
+
 function CrashLogsTable(props) {
   const { dongleId } = props;
 
-  // eslint-disable-next-line no-unused-vars
-  const [state, dispatch] = useContext(DevicesContext);
+  const [state, devicesDispatch] = useContext(DevicesContext);
+  const [, toastDispatch] = useContext(ToastContext);
   useEffect(() => {
     deviceController.getCrashlogs(dongleId).then((res) => {
-      dispatch({
-        type: ACTIONS.UPDATE_DONGLE_BOOTLOGS,
+      devicesDispatch({
+        type: DevicesActions.UPDATE_DONGLE_CRASHLOGS,
         dongle_id: dongleId,
-        bootlogs: res.data,
+        crashlogs: res.data,
+      });
+    }).catch(() => {
+      toastDispatch({
+        type: ToastActions.NEW_TOAST,
+        msg: 'Failed to load crashlogs',
       });
     });
-  }, [dispatch, dongleId]);
+  }, [devicesDispatch, toastDispatch, dongleId]);
 
-  console.log('drives', state.dongles[dongleId]);
-  console.log('drives', typeof state.dongles[dongleId]);
+  const dongle = state.dongles[dongleId];
+  console.log('drives', dongle);
+  console.log('drives', typeof dongle);
 
   return (
     <Box sx={{ width: '100%' }}>
@@ -97,15 +114,10 @@ function CrashLogsTable(props) {
             </TableHead>
 
             <TableBody>
-              {state.dongles[dongleId].crash
-                ? (state.dongles[dongleId].crash.length > 0
-                  ? state.dongles[dongleId].crash.map(buildContent)
-                  : <p> No drives </p>)
-                : [1, 1, 1, 1, 1].map(loading)}
+              {buildBody(dongle)}
             </TableBody>
           </Table>
         </TableContainer>
-
       </Paper>
     </Box>
   );

src/components/device/tabPane/drives.jsx

@@ -15,8 +15,8 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
-import { DevicesContext } from '../../../context/devices';
-import { ToastContext } from '../../../context/toast';
+import { ACTIONS as DevicesActions, DevicesContext } from '../../../context/devices';
+import { ACTIONS as ToastActions, ToastContext } from '../../../context/toast';
 import * as deviceController from '../../../controllers/devices';
 import * as helpers from '../../../controllers/helpers';
 import ViewDrive from './view_drive';
@@ -24,19 +24,28 @@ import ViewDrive from './view_drive';
 function DrivesLogTable(props) {
   const { dongleId } = props;
 
-  const [devicesState, dispatch] = useContext(DevicesContext);
-  const [, notifDispatch] = useContext(ToastContext);
+  const [devicesState, devicesDispatch] = useContext(DevicesContext);
+  const [, toastDispatch] = useContext(ToastContext);
   const [state, setState] = useState({ selectedSegment: null });
 
   useEffect(() => {
     deviceController.getDrives(dongleId).then((res) => {
       setTimeout(() => {
-        dispatch({ type: 'update_dongle_drive', dongle_id: dongleId, drives: res.data });
+        devicesDispatch({
+          type: DevicesActions.UPDATE_DONGLE_DRIVES,
+          dongle_id: dongleId,
+          drives: res.data,
+        });
       }, 1);
     }).catch(() => {
-      notifDispatch({ type: 'NEW_TOAST', msg: 'Failed to load drives' });
+      toastDispatch({
+        type: ToastActions.NEW_TOAST,
+        msg: 'Failed to load drives',
+      });
     });
-  }, [dispatch, notifDispatch, dongleId]);
+  }, [devicesDispatch, toastDispatch, dongleId]);
+
+  const dongle = devicesState.dongles[dongleId];
 
   return (
     <Box sx={{ width: '100%' }}>
@@ -65,8 +74,9 @@ function DrivesLogTable(props) {
             <TableBody>
               {/* if you don't need to support IE11, you can replace the `stableSort` call with:
                  rows.slice().sort(getComparator(order, orderBy)) */}
-              {devicesState.dongles[dongleId].drives
-                ? devicesState.dongles[dongleId].drives.map((row, index) => {
+              {dongle.drives
+                ? dongle.drives.map((row, index) => {
+                  // TODO: extract to function
                   let metadata;
 
                   try {

src/context/devices/actions.js

@@ -1,7 +1,7 @@
 const ACTIONS = {
   ADD_DATA: 'add_data',
   FETCH_ALL_DONGLES: 'fetch_all_dongles',
-  UPDATE_DONGLE_DRIVE: 'update_dongle_drive',
+  UPDATE_DONGLE_DRIVES: 'update_dongle_drives',
   UPDATE_DONGLE_BOOTLOGS: 'update_dongle_bootlogs',
   UPDATE_DONGLE_CRASHLOGS: 'update_dongle_crashlogs',
   USER_AUTHENTICATION: 'user_authentication',

src/context/devices/reducer.js

@@ -37,7 +37,7 @@ function reducer(state, action) {
         dongles: action.data,
       };
 
-    case ACTIONS.UPDATE_DONGLE_DRIVE:
+    case ACTIONS.UPDATE_DONGLE_DRIVES:
       return {
         ...state,
         dongles: {