diff --git a/src/components/left/main/LeftMain.scss b/src/components/left/main/LeftMain.scss index 0d9f1fc3a..7791d66d0 100644 --- a/src/components/left/main/LeftMain.scss +++ b/src/components/left/main/LeftMain.scss @@ -66,4 +66,12 @@ height: 100%; overflow-y: auto; } + + .btn-update { + position: absolute; + bottom: 1rem; + left: 1rem; + right: 1rem; + margin: 0 auto; + } } diff --git a/src/components/left/main/LeftMain.tsx b/src/components/left/main/LeftMain.tsx index ddb46b2f3..45de22650 100644 --- a/src/components/left/main/LeftMain.tsx +++ b/src/components/left/main/LeftMain.tsx @@ -8,7 +8,11 @@ import { LeftColumnContent } from '../../../types'; import { IS_TOUCH_ENV } from '../../../util/environment'; import { pick } from '../../../util/iteratees'; +import buildClassName from '../../../util/buildClassName'; import useBrowserOnline from '../../../hooks/useBrowserOnline'; +import useFlag from '../../../hooks/useFlag'; +import useShowTransition from '../../../hooks/useShowTransition'; +import useLang from '../../../hooks/useLang'; import Transition from '../../ui/Transition'; import LeftMainHeader from './LeftMainHeader'; @@ -18,6 +22,7 @@ import LeftSearch from '../search/LeftSearch.async'; import ContactList from './ContactList.async'; import NewChatButton from '../NewChatButton'; import ShowTransition from '../../ui/ShowTransition'; +import Button from '../../ui/Button'; import './LeftMain.scss'; @@ -35,6 +40,8 @@ type StateProps = Pick; const TRANSITION_RENDER_COUNT = Object.keys(LeftColumnContent).length / 2; const BUTTON_CLOSE_DELAY_MS = 250; +const APP_OUTDATED_TIMEOUT = 3 * 24 * 60 * 60 * 1000; // 3 days + let closeTimeout: number | undefined; const LeftMain: FC = ({ @@ -115,6 +122,10 @@ const LeftMain: FC = ({ }; }, [content]); + const [shouldRenderUpdateButton, updateButtonClassNames, handleUpdateClick] = useAppOutdatedCheck(); + + const lang = useLang(); + return (
= ({ } }} + {shouldRenderUpdateButton && ( + + )} = ({ ); }; +function useAppOutdatedCheck() { + const [isAppOutdated, markIsAppOutdated] = useFlag(false); + + useEffect(() => { + const timeout = window.setTimeout(markIsAppOutdated, APP_OUTDATED_TIMEOUT); + + return () => { + clearTimeout(timeout); + }; + }, [markIsAppOutdated]); + + const { shouldRender, transitionClassNames } = useShowTransition(isAppOutdated); + + const handleUpdateClick = () => { + window.location.reload(); + }; + + return [shouldRender, transitionClassNames, handleUpdateClick] as const; +} + export default withGlobal( (global): StateProps => pick(global, ['connectionState']), )(LeftMain); diff --git a/src/util/fallbackLangPack.ts b/src/util/fallbackLangPack.ts index fa59f3a45..f4626a381 100644 --- a/src/util/fallbackLangPack.ts +++ b/src/util/fallbackLangPack.ts @@ -1701,4 +1701,8 @@ export default { key: 'Chat.Quiz.TotalVotesEmpty', value: 'No answers yet', }, + lng_update_telegram: { + key: 'lng_update_telegram', + value: 'Update Telegram', + }, } as ApiLangPack;