Files
imexrps/src/components/organisms/update-manager/update-manager.organism.jsx
2020-10-27 10:21:55 -07:00

125 lines
3.8 KiB
JavaScript

import { AlertFilled } from "@ant-design/icons";
import { Button, Layout, Progress } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ipcTypes from "../../../ipc.types";
import {
selectUpdateAvailable,
selectUpdateProgress,
} from "../../../redux/application/application.selectors";
const { ipcRenderer } = window;
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
updateAvailable: selectUpdateAvailable,
updateProgress: selectUpdateProgress,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function UpdateManagerOrganism({ updateAvailable, updateProgress }) {
if (!updateAvailable) return null;
return (
<Layout.Footer>
{updateAvailable && !updateProgress && (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<div>
<AlertFilled
style={{ marginRight: ".5rem", color: "tomato" }}
className="blink_me"
/>
<span>{`An update to ImEX RPS is available. (Version ${updateAvailable.version})`}</span>
</div>
<Button
type="primary"
style={{ margin: "0rem .5rem" }}
onClick={() =>
ipcRenderer.send(ipcTypes.default.app.toMain.downloadUpdates)
}
>
Download
</Button>
</div>
)}
{updateAvailable && updateProgress && (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Progress
style={{ flex: 1, margin: "0rem .5rem" }}
status={updateProgress.percent === 100 ? "success" : "active"}
percent={updateProgress.percent.toFixed(1)}
/>
{updateProgress.percent === 100 ? (
<div tyle={{ margin: "0rem .5rem" }}>
<span
style={{ margin: "0rem .5rem" }}
>{`Updated downloaded.`}</span>
<Button
type="primary"
style={{ margin: "0rem .5rem" }}
onClick={() =>
ipcRenderer.send(ipcTypes.default.app.toMain.installUpdates)
}
>
Install
</Button>
</div>
) : (
<span
style={{ margin: "0rem .5rem" }}
>{`Downloading update at ${formatBytes(
updateProgress.bytesPerSecond
)})`}</span>
)}
</div>
)}
</Layout.Footer>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(UpdateManagerOrganism);
// download Info
// {
// // bytesPerSecond: 6633258;
// // delta: 2479242;
// // percent: 100;
// // total: 95651575;
// // transferred: 95651575;
// }
function formatBytes(bytes) {
var marker = 1024; // Change to 1000 if required
var decimal = 1; // Change as required
var kiloBytes = marker; // One Kilobyte is 1024 bytes
var megaBytes = marker * marker; // One MB is 1024 KB
var gigaBytes = marker * marker * marker; // One GB is 1024 MB
//var teraBytes = marker * marker * marker * marker; // One TB is 1024 GB
// return bytes if less than a KB
if (bytes < kiloBytes) return bytes + " Bytes/sec";
// return KB if less than a MB
else if (bytes < megaBytes)
return (bytes / kiloBytes).toFixed(decimal) + " KB/sec";
// return MB if less than a GB
else if (bytes < gigaBytes)
return (bytes / megaBytes).toFixed(decimal) + " MB/sec";
// return GB if less than a TB
else return (bytes / gigaBytes).toFixed(decimal) + " GB/sec";
}