diff --git a/web/components/version-handler.react.js b/web/components/version-handler.react.js index 38d7008d0..6cdce5ecc 100644 --- a/web/components/version-handler.react.js +++ b/web/components/version-handler.react.js @@ -1,56 +1,46 @@ // @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'; +import { getVersionUnsupportedError } from '../utils/version-utils.js'; function VersionUnsupportedModal(): React.Node { const { popModal } = useModalContext(); - - const actionRequestMessage = isDesktopPlatform( - getConfig().platformDetails.platform, - ) - ? 'Please reload the app' - : 'Please refresh the page'; - + const message = getVersionUnsupportedError(); return ( -
- Your app version is pretty old, and the server doesn’t know how to speak - to it anymore. {actionRequestMessage}. -
+
{message}
); } 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; diff --git a/web/utils/version-utils.js b/web/utils/version-utils.js new file mode 100644 index 000000000..ff53a3a17 --- /dev/null +++ b/web/utils/version-utils.js @@ -0,0 +1,18 @@ +// @flow + +import { isDesktopPlatform } from 'lib/types/device-types.js'; +import { getConfig } from 'lib/utils/config.js'; + +function getVersionUnsupportedError(): string { + 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}.` + ); +} + +export { getVersionUnsupportedError };