fix toast/devices context usage
parent
cdbd809a0a
commit
f41ae0c8db
|
@ -15,8 +15,8 @@ import DeleteIcon from '@mui/icons-material/Delete';
|
||||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||||
|
|
||||||
import { DevicesContext } from '../../../context/devices';
|
import { ACTIONS as DevicesActions, DevicesContext } from '../../../context/devices';
|
||||||
import { ToastContext } from '../../../context/toast';
|
import { ACTIONS as ToastActions, ToastContext } from '../../../context/toast';
|
||||||
import * as deviceController from '../../../controllers/devices';
|
import * as deviceController from '../../../controllers/devices';
|
||||||
import * as helpers from '../../../controllers/helpers';
|
import * as helpers from '../../../controllers/helpers';
|
||||||
|
|
||||||
|
@ -34,23 +34,26 @@ function loading() {
|
||||||
function BootLogsTable(props) {
|
function BootLogsTable(props) {
|
||||||
const { dongleId } = props;
|
const { dongleId } = props;
|
||||||
|
|
||||||
const [state, dispatch] = useContext(DevicesContext);
|
const [state, devicesDispatch] = useContext(DevicesContext);
|
||||||
const [, notifDispatch] = useContext(ToastContext);
|
const [, toastDispatch] = useContext(ToastContext);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
deviceController.getBootlogs(dongleId).then((res) => {
|
deviceController.getBootlogs(dongleId).then((res) => {
|
||||||
// TODO: why set timeout 1?
|
// TODO: why set timeout 1?
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
dispatch({
|
devicesDispatch({
|
||||||
type: 'update_dongle_bootlogs',
|
type: DevicesActions.UPDATE_DONGLE_BOOTLOGS,
|
||||||
dongle_id: dongleId,
|
dongle_id: dongleId,
|
||||||
bootlogs: res.data,
|
bootlogs: res.data,
|
||||||
});
|
});
|
||||||
}, 1);
|
}, 1);
|
||||||
}).catch(() => {
|
}).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 (
|
return (
|
||||||
<Box sx={{ width: '100%' }}>
|
<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:
|
{/* if you don't need to support IE11, you can replace the `stableSort` call with:
|
||||||
rows.slice().sort(getComparator(order, orderBy)) */}
|
rows.slice().sort(getComparator(order, orderBy)) */}
|
||||||
{state.dongles[dongleId].boot ? state.dongles[dongleId].boot.map((row) => (
|
{state.dongles[dongleId].boot ? state.dongles[dongleId].boot.map((row) => (
|
||||||
|
// TODO: extract to function
|
||||||
<TableRow hover>
|
<TableRow hover>
|
||||||
<TableCell>{helpers.formatDate(row.date)}</TableCell>
|
<TableCell>{helpers.formatDate(row.date)}</TableCell>
|
||||||
<TableCell>{row.name}</TableCell>
|
<TableCell>{row.name}</TableCell>
|
||||||
|
|
|
@ -15,20 +15,21 @@ import DeleteIcon from '@mui/icons-material/Delete';
|
||||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
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 deviceController from '../../../controllers/devices';
|
||||||
import * as helpers from '../../../controllers/helpers';
|
import * as helpers from '../../../controllers/helpers';
|
||||||
|
|
||||||
function buildContent(row) {
|
function buildRow(crash) {
|
||||||
return (
|
return (
|
||||||
<TableRow hover>
|
<TableRow hover>
|
||||||
<TableCell>{helpers.formatDate(row.date)}</TableCell>
|
<TableCell>{helpers.formatDate(crash.date)}</TableCell>
|
||||||
<TableCell>{row.name}</TableCell>
|
<TableCell>{crash.name}</TableCell>
|
||||||
<TableCell>{`${Math.round(row.size / 1024)} MiB`}</TableCell>
|
<TableCell>{`${Math.round(crash.size / 1024)} MiB`}</TableCell>
|
||||||
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Tooltip title="Open in new window">
|
<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" />
|
<OpenInNewIcon fontSize="inherit" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</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) {
|
function CrashLogsTable(props) {
|
||||||
const { dongleId } = props;
|
const { dongleId } = props;
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
const [state, devicesDispatch] = useContext(DevicesContext);
|
||||||
const [state, dispatch] = useContext(DevicesContext);
|
const [, toastDispatch] = useContext(ToastContext);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
deviceController.getCrashlogs(dongleId).then((res) => {
|
deviceController.getCrashlogs(dongleId).then((res) => {
|
||||||
dispatch({
|
devicesDispatch({
|
||||||
type: ACTIONS.UPDATE_DONGLE_BOOTLOGS,
|
type: DevicesActions.UPDATE_DONGLE_CRASHLOGS,
|
||||||
dongle_id: dongleId,
|
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]);
|
const dongle = state.dongles[dongleId];
|
||||||
console.log('drives', typeof state.dongles[dongleId]);
|
console.log('drives', dongle);
|
||||||
|
console.log('drives', typeof dongle);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box sx={{ width: '100%' }}>
|
<Box sx={{ width: '100%' }}>
|
||||||
|
@ -97,15 +114,10 @@ function CrashLogsTable(props) {
|
||||||
</TableHead>
|
</TableHead>
|
||||||
|
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{state.dongles[dongleId].crash
|
{buildBody(dongle)}
|
||||||
? (state.dongles[dongleId].crash.length > 0
|
|
||||||
? state.dongles[dongleId].crash.map(buildContent)
|
|
||||||
: <p> No drives </p>)
|
|
||||||
: [1, 1, 1, 1, 1].map(loading)}
|
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</TableContainer>
|
</TableContainer>
|
||||||
|
|
||||||
</Paper>
|
</Paper>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
|
@ -15,8 +15,8 @@ import DeleteIcon from '@mui/icons-material/Delete';
|
||||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||||
|
|
||||||
import { DevicesContext } from '../../../context/devices';
|
import { ACTIONS as DevicesActions, DevicesContext } from '../../../context/devices';
|
||||||
import { ToastContext } from '../../../context/toast';
|
import { ACTIONS as ToastActions, ToastContext } from '../../../context/toast';
|
||||||
import * as deviceController from '../../../controllers/devices';
|
import * as deviceController from '../../../controllers/devices';
|
||||||
import * as helpers from '../../../controllers/helpers';
|
import * as helpers from '../../../controllers/helpers';
|
||||||
import ViewDrive from './view_drive';
|
import ViewDrive from './view_drive';
|
||||||
|
@ -24,19 +24,28 @@ import ViewDrive from './view_drive';
|
||||||
function DrivesLogTable(props) {
|
function DrivesLogTable(props) {
|
||||||
const { dongleId } = props;
|
const { dongleId } = props;
|
||||||
|
|
||||||
const [devicesState, dispatch] = useContext(DevicesContext);
|
const [devicesState, devicesDispatch] = useContext(DevicesContext);
|
||||||
const [, notifDispatch] = useContext(ToastContext);
|
const [, toastDispatch] = useContext(ToastContext);
|
||||||
const [state, setState] = useState({ selectedSegment: null });
|
const [state, setState] = useState({ selectedSegment: null });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
deviceController.getDrives(dongleId).then((res) => {
|
deviceController.getDrives(dongleId).then((res) => {
|
||||||
setTimeout(() => {
|
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);
|
}, 1);
|
||||||
}).catch(() => {
|
}).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 (
|
return (
|
||||||
<Box sx={{ width: '100%' }}>
|
<Box sx={{ width: '100%' }}>
|
||||||
|
@ -65,8 +74,9 @@ function DrivesLogTable(props) {
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{/* if you don't need to support IE11, you can replace the `stableSort` call with:
|
{/* if you don't need to support IE11, you can replace the `stableSort` call with:
|
||||||
rows.slice().sort(getComparator(order, orderBy)) */}
|
rows.slice().sort(getComparator(order, orderBy)) */}
|
||||||
{devicesState.dongles[dongleId].drives
|
{dongle.drives
|
||||||
? devicesState.dongles[dongleId].drives.map((row, index) => {
|
? dongle.drives.map((row, index) => {
|
||||||
|
// TODO: extract to function
|
||||||
let metadata;
|
let metadata;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
const ACTIONS = {
|
const ACTIONS = {
|
||||||
ADD_DATA: 'add_data',
|
ADD_DATA: 'add_data',
|
||||||
FETCH_ALL_DONGLES: 'fetch_all_dongles',
|
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_BOOTLOGS: 'update_dongle_bootlogs',
|
||||||
UPDATE_DONGLE_CRASHLOGS: 'update_dongle_crashlogs',
|
UPDATE_DONGLE_CRASHLOGS: 'update_dongle_crashlogs',
|
||||||
USER_AUTHENTICATION: 'user_authentication',
|
USER_AUTHENTICATION: 'user_authentication',
|
||||||
|
|
|
@ -37,7 +37,7 @@ function reducer(state, action) {
|
||||||
dongles: action.data,
|
dongles: action.data,
|
||||||
};
|
};
|
||||||
|
|
||||||
case ACTIONS.UPDATE_DONGLE_DRIVE:
|
case ACTIONS.UPDATE_DONGLE_DRIVES:
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
dongles: {
|
dongles: {
|
||||||
|
|
Loading…
Reference in New Issue