Page MenuHomePhabricator
Files F3249265

D6324.id21218.diff
No OneTemporary
Actions

D6324.id21218.diff
View Options

diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -37,6 +37,7 @@
import InputStateContainer from './input/input-state-container.react';
import LoadingIndicator from './loading-indicator.react';
import { MenuProvider } from './menu-provider.react';
+import UpdateModalHandler from './modals/update-modal.react';
import { updateNavInfoActionType } from './redux/action-types';
import DeviceIDUpdater from './redux/device-id-updater';
import DisconnectedBar from './redux/disconnected-bar';
@@ -204,6 +205,7 @@
<div className={css.layout}>
<DisconnectedBarVisibilityHandler />
<DisconnectedBar />
+ <UpdateModalHandler />
<header
className={headerClasses}
onDoubleClick={this.onHeaderDoubleClick}
diff --git a/web/electron.js b/web/electron.js
--- a/web/electron.js
+++ b/web/electron.js
@@ -4,7 +4,7 @@
declare var electronContextBridge: void | ElectronBridge;
-const electron: ?ElectronBridge =
+const electron: null | ElectronBridge =
typeof electronContextBridge === 'undefined' ? null : electronContextBridge;
export default electron;
diff --git a/web/modals/update-modal.css b/web/modals/update-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/update-modal.css
@@ -0,0 +1,14 @@
+.container {
+ padding: 0 40px 32px;
+ border-radius: 8px;
+ color: var(--modal-fg);
+}
+.text {
+ font-size: var(--xl-font-20);
+ padding: 5px 0px 20px;
+}
+.buttonContainer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 24px;
+}
diff --git a/web/modals/update-modal.react.js b/web/modals/update-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/update-modal.react.js
@@ -0,0 +1,92 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react';
+
+import Button from '../components/button.react';
+import electron from '../electron';
+import Modal from './modal.react';
+import css from './update-modal.css';
+
+type Props = {
+ +title: string,
+ +text: string,
+ +confirmText: string,
+ +onConfirm: () => void,
+};
+function UpdateModal(props: Props): React.Node {
+ const { title, text, confirmText, onConfirm } = props;
+
+ const { popModal } = useModalContext();
+
+ return (
+ <Modal
+ size="fit-content"
+ name={title}
+ icon="download"
+ withCloseButton={false}
+ onClose={popModal}
+ >
+ <div className={css.container}>
+ <p className={css.text}>{text}</p>
+ <div className={css.buttonContainer}>
+ <Button variant="outline" onClick={popModal}>
+ Later
+ </Button>
+ <Button variant="filled" onClick={onConfirm} type="submit">
+ {confirmText}
+ </Button>
+ </div>
+ </div>
+ </Modal>
+ );
+}
+
+function UpdateModalHandler(): React.Node {
+ const { pushModal, popModal } = useModalContext();
+
+ // This modal is only for the update from the first version (0.0.1)
+ // to the self-updating version
+ React.useEffect(() => {
+ if (electron === null || electron.version !== undefined) {
+ return;
+ }
+
+ pushModal(
+ <UpdateModal
+ title="New version is available!"
+ text="Click here to download a new version."
+ confirmText="Download"
+ onConfirm={() => {
+ window.open(
+ 'https://electron-update.commtechnologies.org/download',
+ '_blank',
+ 'noopener noreferrer',
+ );
+ popModal();
+ }}
+ />,
+ );
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ React.useEffect(
+ () =>
+ electron?.onNewVersionAvailable?.(version => {
+ pushModal(
+ <UpdateModal
+ title={`Version ${version} is available!`}
+ text="Please restart to update."
+ confirmText="Restart"
+ onConfirm={() => electron?.updateToNewVersion?.()}
+ />,
+ );
+ }),
+ [pushModal],
+ );
+
+ return null;
+}
+
+export default UpdateModalHandler;

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 16, 1:25 PM (22 h, 5 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2497944
Default Alt Text
D6324.id21218.diff (4 KB)

Event Timeline