Page MenuHomePhorge
Files F32517018

D11643.1767124215.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D11643.1767124215.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,56 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { allConnectionInfosSelector } from 'lib/selectors/keyserver-selectors.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>
+ );
+}
+
+function MinVersionHandler(): null {
+ const connections = useSelector(allConnectionInfosSelector);
+
+ const isClientVersionUnsupported = React.useMemo(() => {
+ const connectionIssues = Object.values(connections).map(
+ connection => connection?.connectionIssue,
+ );
+ return connectionIssues.includes('client_version_unsupported');
+ }, [connections]);
+
+ const hasShownModalRef = React.useRef(false);
+ const { pushModal } = useModalContext();
+
+ React.useEffect(() => {
+ if (isClientVersionUnsupported && !hasShownModalRef.current) {
+ hasShownModalRef.current = true;
+ pushModal(<VersionUnsupportedModal />);
+ }
+ }, [isClientVersionUnsupported, pushModal]);
+
+ return null;
+}
+
+export default MinVersionHandler;

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 30, 7:50 PM (3 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5867191
Default Alt Text
D11643.1767124215.diff (3 KB)

Event Timeline