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,86 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import ashoat from 'lib/facts/ashoat.js'; + +import KeyserverPill from './keyserver-pill.react.js'; +import css from './version-handler.css'; +import Modal from '../modals/modal.react.js'; +import { useSelector } from '../redux/redux-utils.js'; + +type ModalProps = { + +keyserverName: string, +}; + +function VersionUnsupportedModal(props: ModalProps): React.Node { + const { popModal } = useModalContext(); + + const subheader = React.useMemo( + () => ( +
+ +
+ ), + [props.keyserverName], + ); + + return ( + +
+ Your app version is pretty old, and the server doesn’t know how to speak + to it anymore. Please reload the app. +
+
+ ); +} + +type Props = { + +keyserverID: string, +}; + +function SingleKeyserverMinVersionHandler(props: Props): null { + const { keyserverID } = props; + + const connectionIssue = useSelector( + state => + state.keyserverStore.keyserverInfos[keyserverID].connection + .connectionIssue, + ); + + const admin = useSelector(state => state.userStore[keyserverID]); + let keyserverName = admin?.username; + if (!keyserverName) { + keyserverName = keyserverID === ashoat.id ? ashoat.username : keyserverID; + } + + const { pushModal } = useModalContext(); + + React.useEffect(() => { + if (connectionIssue === 'client_version_unsupported') { + pushModal(); + } + }, [keyserverName, connectionIssue, keyserverID, pushModal]); + + return null; +} +const MemoizedSingleKeyserverMinVersionHandler: React.ComponentType = + React.memo(SingleKeyserverMinVersionHandler); + +function MinVersionHandler(): React.Node { + const keyserverIDs = useSelector(state => + Object.keys(state.keyserverStore.keyserverInfos), + ); + + return keyserverIDs.map(id => ( + + )); +} + +export default MinVersionHandler;