Page MenuHomePhabricator
Files F3383894

D11643.id39129.diff
No OneTemporary
Actions

D11643.id39129.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
@@ -47,6 +47,7 @@
import { EditModalProvider } from './chat/edit-message-provider.js';
import { MemberListSidebarProvider } from './chat/member-list-sidebar/member-list-sidebar-provider.react.js';
import NavigationArrows from './components/navigation-arrows.react.js';
+import MinVersionHandler from './components/version-handler.react.js';
import { olmAPI } from './crypto/olm-api.js';
import electron from './electron.js';
import InputStateContainer from './input/input-state-container.react.js';
@@ -226,6 +227,7 @@
<PushNotificationsHandler />
<InviteLinkHandler />
<InviteLinksRefresher />
+ <MinVersionHandler />
{content}
</ChatMentionContextProvider>
</MessageSearchStateProvider>
diff --git a/web/components/version-handler.css b/web/components/version-handler.css
new file mode 100644
--- /dev/null
+++ b/web/components/version-handler.css
@@ -0,0 +1,21 @@
+.modalContent {
+ color: var(--text-background-primary-default);
+ font-size: var(--s-font-14);
+ margin-top: 8px;
+ display: flex;
+}
+
+.wrapper {
+ display: flex;
+ flex-shrink: 1;
+ justify-content: center;
+}
+
+.ancestryContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 40px;
+ background-color: var(--frame-background-tertiary-default);
+ margin-top: 20px;
+}
diff --git a/web/components/version-handler.react.js b/web/components/version-handler.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/version-handler.react.js
@@ -0,0 +1,78 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { isDesktopPlatform } from 'lib/types/device-types.js';
+import { getConfig } from 'lib/utils/config.js';
+
+import css from './version-handler.css';
+import Modal from '../modals/modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+function VersionUnsupportedModal(): React.Node {
+ const { popModal } = useModalContext();
+
+ const actionRequestMessage = isDesktopPlatform(
+ getConfig().platformDetails.platform,
+ )
+ ? 'Please reload the app'
+ : 'Please refresh the page';
+
+ return (
+ <Modal name="App version unsupported" onClose={popModal} size="large">
+ <div className={css.modalContent}>
+ Your app version is pretty old, and the server doesn’t know how to speak
+ to it anymore. {actionRequestMessage}.
+ </div>
+ </Modal>
+ );
+}
+
+type Props = {
+ +keyserverID: string,
+};
+
+function SingleKeyserverMinVersionHandler(props: Props): null {
+ const { keyserverID } = props;
+
+ const connectionIssue = useSelector(
+ state =>
+ state.keyserverStore.keyserverInfos[keyserverID].connection
+ .connectionIssue,
+ );
+
+ const { pushModal } = useModalContext();
+
+ const prevConnectionIssueRef = React.useRef<?string>(null);
+
+ React.useEffect(() => {
+ if (
+ connectionIssue === 'client_version_unsupported' &&
+ connectionIssue !== prevConnectionIssueRef.current
+ ) {
+ prevConnectionIssueRef.current = connectionIssue;
+ pushModal(<VersionUnsupportedModal />);
+ }
+ }, [connectionIssue, keyserverID, pushModal]);
+
+ return null;
+}
+const MemoizedSingleKeyserverMinVersionHandler: React.ComponentType<Props> =
+ React.memo<Props>(SingleKeyserverMinVersionHandler);
+
+function MinVersionHandler(): React.Node {
+ const keyserverIDs = useSelector(state =>
+ Object.keys(state.keyserverStore.keyserverInfos),
+ );
+
+ return React.useMemo(
+ () =>
+ keyserverIDs.map(id => (
+ <MemoizedSingleKeyserverMinVersionHandler keyserverID={id} key={id} />
+ )),
+ [keyserverIDs],
+ );
+}
+
+export default MinVersionHandler;

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 6:12 PM (21 h, 17 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2597742
Default Alt Text
D11643.id39129.diff (3 KB)

Event Timeline