CEC-1216 Remove unused components (#129)
* CEC-1216 Remove unused components * Remove import
This commit is contained in:
@@ -5374,23 +5374,7 @@ exports[`App Route /packages authenticated 1`] = `
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiGrid-root makeStyles-textJustifyAlign-1187 MuiGrid-item MuiGrid-grid-md-4"
|
class="MuiGrid-root makeStyles-textJustifyAlign-1187 MuiGrid-item MuiGrid-grid-md-4"
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="makeStyles-labelInline-1147"
|
|
||||||
href="/package-create"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
|
|
||||||
/>
|
/>
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="MuiGrid-root makeStyles-textCenterAlign-1188 MuiGrid-item MuiGrid-grid-md-4"
|
class="MuiGrid-root makeStyles-textCenterAlign-1188 MuiGrid-item MuiGrid-grid-md-4"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,159 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableFooter,
|
|
||||||
TablePagination,
|
|
||||||
TableRow,
|
|
||||||
} from "@material-ui/core";
|
|
||||||
import clsx from "clsx";
|
|
||||||
|
|
||||||
import { LocalDateTimeString } from "../../../utils/dates";
|
|
||||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
|
||||||
import { useVehicleContext } from "../../Contexts/VehicleContext";
|
|
||||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
|
||||||
import useStyles from "../../useStyles";
|
|
||||||
import { logger } from "../../../services/monitoring";
|
|
||||||
|
|
||||||
const tableColumns = [
|
|
||||||
{
|
|
||||||
id: "ecu",
|
|
||||||
label: "ECU",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "version",
|
|
||||||
label: "SW Version",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "hw_version",
|
|
||||||
label: "HW Version",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "mode",
|
|
||||||
label: "Flash Mode",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "self_download",
|
|
||||||
label: "Flash Mode",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "created_at",
|
|
||||||
label: "Created",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "updated_at",
|
|
||||||
label: "Updated",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const CarECUs = ({ vin, token }) => {
|
|
||||||
const [ecus, setECUs] = useState([]);
|
|
||||||
const [total, setTotal] = useState(0);
|
|
||||||
const classes = useStyles();
|
|
||||||
const [pageSize, setPageSize] = useState(10);
|
|
||||||
const [pageIndex, setPageIndex] = useState(0);
|
|
||||||
const [orderBy, setOrderBy] = useState("ecu");
|
|
||||||
const [order, setOrder] = useState("desc");
|
|
||||||
const { getECUs } = useVehicleContext();
|
|
||||||
const { setMessage } = useStatusContext();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
if (!vin || !token) return;
|
|
||||||
const result = await getECUs(
|
|
||||||
{
|
|
||||||
vin,
|
|
||||||
limit: pageSize,
|
|
||||||
offset: pageSize * pageIndex,
|
|
||||||
order: `${orderBy} ${order}`,
|
|
||||||
},
|
|
||||||
token
|
|
||||||
);
|
|
||||||
setECUs(result.data);
|
|
||||||
if (result.total > -1) setTotal(result.total);
|
|
||||||
} catch (e) {
|
|
||||||
setMessage(e.message);
|
|
||||||
logger.warn(e.stack);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [vin, token, pageIndex, pageSize, orderBy, order]);
|
|
||||||
|
|
||||||
const handleChangePageIndex = (event, newIndex) => {
|
|
||||||
setPageIndex(newIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChangePageSize = (event) => {
|
|
||||||
setPageSize(parseInt(event.target.value, 10));
|
|
||||||
setPageIndex(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSort = (event, property) => {
|
|
||||||
try {
|
|
||||||
if (property === orderBy) {
|
|
||||||
if (order === "asc") {
|
|
||||||
setOrder("desc");
|
|
||||||
} else {
|
|
||||||
setOrder("asc");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setOrderBy(property);
|
|
||||||
setOrder("asc");
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
logger.warn(e.stack);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
|
||||||
<Table>
|
|
||||||
<TableHeaderSortable
|
|
||||||
classes={classes}
|
|
||||||
orderBy={orderBy}
|
|
||||||
order={order}
|
|
||||||
columnData={tableColumns}
|
|
||||||
onSortRequest={handleSort}
|
|
||||||
/>
|
|
||||||
<TableBody>
|
|
||||||
{ecus.map((row) => (
|
|
||||||
<TableRow key={row.ecu}>
|
|
||||||
<TableCell align="center">{row.ecu}</TableCell>
|
|
||||||
<TableCell align="center">{row.version}</TableCell>
|
|
||||||
<TableCell align="center">{row.hw_version}</TableCell>
|
|
||||||
<TableCell align="center">{row.mode}</TableCell>
|
|
||||||
<TableCell align="center">{row.self_download}</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
{LocalDateTimeString(row.created)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
{LocalDateTimeString(row.updated)}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
<TableFooter>
|
|
||||||
<TableRow>
|
|
||||||
<TablePagination
|
|
||||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
|
||||||
colSpan={10}
|
|
||||||
count={total}
|
|
||||||
rowsPerPage={pageSize}
|
|
||||||
page={pageIndex}
|
|
||||||
SelectProps={{
|
|
||||||
inputProps: { "aria-label": "rows per page" },
|
|
||||||
native: true,
|
|
||||||
}}
|
|
||||||
onPageChange={handleChangePageIndex}
|
|
||||||
onRowsPerPageChange={handleChangePageSize}
|
|
||||||
/>
|
|
||||||
</TableRow>
|
|
||||||
</TableFooter>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CarECUs;
|
|
||||||
@@ -1,159 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableFooter,
|
|
||||||
TablePagination,
|
|
||||||
TableRow,
|
|
||||||
} from "@material-ui/core";
|
|
||||||
|
|
||||||
import { LocalDateTimeString } from "../../../utils/dates";
|
|
||||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
|
||||||
import {
|
|
||||||
UpdatesProvider,
|
|
||||||
useUpdatesContext,
|
|
||||||
} from "../../Contexts/UpdatesContext";
|
|
||||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
|
||||||
import useStyles from "../../useStyles";
|
|
||||||
import { logger } from "../../../services/monitoring";
|
|
||||||
|
|
||||||
const tableColumns = [
|
|
||||||
{
|
|
||||||
id: "id",
|
|
||||||
label: "ID",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "update_package_id",
|
|
||||||
label: "Name",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "status",
|
|
||||||
label: "Status",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "created_at",
|
|
||||||
label: "Created",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "updated_at",
|
|
||||||
label: "Updated",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const MainForm = ({ vin, token }) => {
|
|
||||||
const classes = useStyles();
|
|
||||||
const [pageSize, setPageSize] = useState(10);
|
|
||||||
const [pageIndex, setPageIndex] = useState(0);
|
|
||||||
const [orderBy, setOrderBy] = useState("id");
|
|
||||||
const [order, setOrder] = useState("desc");
|
|
||||||
const { getCarUpdates, carUpdates, totalCarUpdates } = useUpdatesContext();
|
|
||||||
const { setMessage } = useStatusContext();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
if (!vin || !token) return;
|
|
||||||
await getCarUpdates(
|
|
||||||
{
|
|
||||||
vin,
|
|
||||||
limit: pageSize,
|
|
||||||
offset: pageSize * pageIndex,
|
|
||||||
order: `${orderBy} ${order}`,
|
|
||||||
},
|
|
||||||
token
|
|
||||||
);
|
|
||||||
} catch (e) {
|
|
||||||
setMessage(e.message);
|
|
||||||
logger.warn(e.stack);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [vin, token, pageIndex, pageSize, orderBy, order]);
|
|
||||||
|
|
||||||
const handleChangePageIndex = (event, newIndex) => {
|
|
||||||
setPageIndex(newIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChangePageSize = (event) => {
|
|
||||||
setPageSize(parseInt(event.target.value, 10));
|
|
||||||
setPageIndex(0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSort = (event, property) => {
|
|
||||||
try {
|
|
||||||
if (property === orderBy) {
|
|
||||||
if (order === "asc") {
|
|
||||||
setOrder("desc");
|
|
||||||
} else {
|
|
||||||
setOrder("asc");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setOrderBy(property);
|
|
||||||
setOrder("asc");
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
logger.warn(e.stack);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateName = (row) => {
|
|
||||||
if (row.updatepackage)
|
|
||||||
return `${row.updatepackage.package_name} ${row.updatepackage.version}`;
|
|
||||||
if (row.updatemanifest)
|
|
||||||
return `${row.updatemanifest.name} ${row.updatemanifest.version}`;
|
|
||||||
return "None";
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Table>
|
|
||||||
<TableHeaderSortable
|
|
||||||
classes={classes}
|
|
||||||
orderBy={orderBy}
|
|
||||||
order={order}
|
|
||||||
columnData={tableColumns}
|
|
||||||
onSortRequest={handleSort}
|
|
||||||
/>
|
|
||||||
<TableBody>
|
|
||||||
{carUpdates.map((row) => (
|
|
||||||
<TableRow key={row.id}>
|
|
||||||
<TableCell align="center">{row.id}</TableCell>
|
|
||||||
<TableCell align="center">{updateName(row)}</TableCell>
|
|
||||||
<TableCell align="center">{row.status}</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
{LocalDateTimeString(row.created)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
{LocalDateTimeString(row.updated)}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
<TableFooter>
|
|
||||||
<TableRow>
|
|
||||||
<TablePagination
|
|
||||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
|
||||||
colSpan={5}
|
|
||||||
count={totalCarUpdates}
|
|
||||||
rowsPerPage={pageSize}
|
|
||||||
page={pageIndex}
|
|
||||||
SelectProps={{
|
|
||||||
inputProps: { "aria-label": "rows per page" },
|
|
||||||
native: true,
|
|
||||||
}}
|
|
||||||
onPageChange={handleChangePageIndex}
|
|
||||||
onRowsPerPageChange={handleChangePageSize}
|
|
||||||
/>
|
|
||||||
</TableRow>
|
|
||||||
</TableFooter>
|
|
||||||
</Table>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const CarUpdates = (props) => (
|
|
||||||
<UpdatesProvider>
|
|
||||||
<MainForm {...props} />
|
|
||||||
</UpdatesProvider>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default CarUpdates;
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import {
|
|
||||||
Backdrop,
|
|
||||||
Modal,
|
|
||||||
Fade,
|
|
||||||
Table,
|
|
||||||
TableHead,
|
|
||||||
TableRow,
|
|
||||||
TableCell,
|
|
||||||
TableBody,
|
|
||||||
} from "@material-ui/core";
|
|
||||||
|
|
||||||
import useStyles from "../../useStyles";
|
|
||||||
import { useUpdatesContext } from "../../Contexts/UpdatesContext";
|
|
||||||
import { useUserContext } from "../../Contexts/UserContext";
|
|
||||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
|
||||||
import { LocalDateTimeString } from "../../../utils/dates";
|
|
||||||
|
|
||||||
export default function CarStatusModal(props) {
|
|
||||||
const classes = useStyles();
|
|
||||||
const [updates, setUpdates] = useState([]);
|
|
||||||
const { setMessage } = useStatusContext();
|
|
||||||
const { getVINUpdates } = useUpdatesContext();
|
|
||||||
const {
|
|
||||||
token: {
|
|
||||||
idToken: { jwtToken: token },
|
|
||||||
},
|
|
||||||
} = useUserContext();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
if (!props.vin) return;
|
|
||||||
const result = await getVINUpdates(props.vin, token);
|
|
||||||
if (result.error) {
|
|
||||||
throw new Error(`Get VIN updates error. ${result.message}`);
|
|
||||||
} else {
|
|
||||||
setUpdates(result.data);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setMessage(e.message);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [props.vin]);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Modal
|
|
||||||
aria-labelledby="transition-modal-title"
|
|
||||||
aria-describedby="transition-modal-description"
|
|
||||||
className={classes.modal}
|
|
||||||
open={props.vin !== null && props.vin !== undefined}
|
|
||||||
onClose={props.handleClose}
|
|
||||||
BackdropComponent={Backdrop}
|
|
||||||
BackdropProps={{
|
|
||||||
timeout: 500,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Fade in={props.vin}>
|
|
||||||
<div className={classes.modaldialog}>
|
|
||||||
<h2 id="transition-modal-title">{props.vin} Updates</h2>
|
|
||||||
<Table>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell align="center">Date</TableCell>
|
|
||||||
<TableCell align="center">Update</TableCell>
|
|
||||||
<TableCell align="center">Status</TableCell>
|
|
||||||
<TableCell align="center">Updated</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{updates.map((update) => (
|
|
||||||
<TableRow key={update.id}>
|
|
||||||
<TableCell align="center">
|
|
||||||
{LocalDateTimeString(update.created)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center">{`${update.updatepackage.package_name} ${update.updatepackage.version}`}</TableCell>
|
|
||||||
<TableCell align="center">{update.status}</TableCell>
|
|
||||||
<TableCell align="center">
|
|
||||||
{LocalDateTimeString(update.updated)}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</Fade>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
import { Select } from "@material-ui/core";
|
|
||||||
|
|
||||||
const ManifestECUFlashModes = (props) => {
|
|
||||||
const changeHandler = (e) => {
|
|
||||||
if (!props.changeHandler) return;
|
|
||||||
props.changeHandler(e);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Select
|
|
||||||
id={props.id}
|
|
||||||
native
|
|
||||||
variant="outlined"
|
|
||||||
value={props.value}
|
|
||||||
onChange={changeHandler}
|
|
||||||
>
|
|
||||||
{FlashModeTypes.map((item, index) => (
|
|
||||||
<option key={index} value={item[0]}>
|
|
||||||
{item[1]}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ManifestECUFlashModes;
|
|
||||||
|
|
||||||
const FlashModeTypes = [
|
|
||||||
["A", "Mode A"],
|
|
||||||
["D", "Mode D"],
|
|
||||||
["SELF", "Self"],
|
|
||||||
];
|
|
||||||
@@ -10,7 +10,6 @@ import {
|
|||||||
TableRow,
|
TableRow,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
} from "@material-ui/core";
|
} from "@material-ui/core";
|
||||||
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
|
||||||
import SendIcon from "@material-ui/icons/Send";
|
import SendIcon from "@material-ui/icons/Send";
|
||||||
import VisibilityIcon from "@material-ui/icons/Visibility";
|
import VisibilityIcon from "@material-ui/icons/Visibility";
|
||||||
import DeleteIcon from "@material-ui/icons/Delete";
|
import DeleteIcon from "@material-ui/icons/Delete";
|
||||||
@@ -150,15 +149,15 @@ const MainForm = () => {
|
|||||||
actions.push({
|
actions.push({
|
||||||
tip: `Deploy "${row.name} ${row.version}"`,
|
tip: `Deploy "${row.name} ${row.version}"`,
|
||||||
link: `/package-deploy/${row.id}`,
|
link: `/package-deploy/${row.id}`,
|
||||||
icon: <SendIcon aria-label={`Deploy ${row.name} ${row.version}`} />
|
icon: <SendIcon aria-label={`Deploy ${row.name} ${row.version}`} />,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
if (hasRole([Roles.DELETE], groups)) {
|
if (hasRole([Roles.DELETE], groups)) {
|
||||||
actions.push({
|
actions.push({
|
||||||
tip: `Delete "${row.name} ${row.version}"`,
|
tip: `Delete "${row.name} ${row.version}"`,
|
||||||
id: row.id,
|
id: row.id,
|
||||||
icon: <DeleteIcon aria-label={`Delete ${row.name} ${row.version}`} />
|
icon: <DeleteIcon aria-label={`Delete ${row.name} ${row.version}`} />,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
if (actions.length === 0) return ["No actions"];
|
if (actions.length === 0) return ["No actions"];
|
||||||
|
|
||||||
@@ -186,11 +185,7 @@ const MainForm = () => {
|
|||||||
return (
|
return (
|
||||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
<Grid container className={classes.root} spacing={2}>
|
<Grid container className={classes.root} spacing={2}>
|
||||||
<Grid item md={4} className={classes.textJustifyAlign}>
|
<Grid item md={4} className={classes.textJustifyAlign}></Grid>
|
||||||
<Link to="/package-create" className={classes.labelInline}>
|
|
||||||
<AddCircleIcon fontSize="large" />
|
|
||||||
</Link>
|
|
||||||
</Grid>
|
|
||||||
<Grid item md={4} className={classes.textCenterAlign}>
|
<Grid item md={4} className={classes.textCenterAlign}>
|
||||||
<SearchField classes={classes} onSearch={handleSearch} />
|
<SearchField classes={classes} onSearch={handleSearch} />
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|||||||
@@ -1,57 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import Modal from "@material-ui/core/Modal";
|
|
||||||
|
|
||||||
import { Button, LinearProgress } from "@material-ui/core";
|
|
||||||
import { useFileUploadContext } from "../Contexts/FileUploadContext";
|
|
||||||
|
|
||||||
const getModalStyle = () => {
|
|
||||||
const top = 30;
|
|
||||||
const left = 50;
|
|
||||||
|
|
||||||
return {
|
|
||||||
width: `350px`,
|
|
||||||
top: `${top}%`,
|
|
||||||
left: `${left}%`,
|
|
||||||
transform: `translate(-${left}%, -${top}%)`,
|
|
||||||
backgroundColor: `white`,
|
|
||||||
border: `none`,
|
|
||||||
position: `absolute`,
|
|
||||||
margin: `1em`,
|
|
||||||
padding: `1em`,
|
|
||||||
textAlign: `center`,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const ModalProgressBar = () => {
|
|
||||||
const {
|
|
||||||
uploading,
|
|
||||||
progress,
|
|
||||||
status,
|
|
||||||
linkURL,
|
|
||||||
cancel,
|
|
||||||
} = useFileUploadContext();
|
|
||||||
|
|
||||||
const modalStyle = getModalStyle();
|
|
||||||
const onClickCancel = cancel;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal open={uploading}>
|
|
||||||
<div style={modalStyle}>
|
|
||||||
{status && <p>{status}</p>}
|
|
||||||
{linkURL && (
|
|
||||||
<p>
|
|
||||||
<a href={linkURL} target="_blank" rel="noreferrer">
|
|
||||||
View
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<LinearProgress variant="determinate" value={progress} />
|
|
||||||
<Button onClick={onClickCancel}>
|
|
||||||
{progress === 100 || progress === -1 ? "Done" : "Cancel"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModalProgressBar;
|
|
||||||
Reference in New Issue
Block a user