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 @@ + {content} 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 ( + +
+ Your app version is pretty old, and the server doesn’t know how to speak + to it anymore. {actionRequestMessage}. +
+
+ ); +} + +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(); + } + }, [isClientVersionUnsupported, pushModal]); + + return null; +} + +export default MinVersionHandler;