From b8189256c100a604062de5e049b786f8d63240ce Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Thu, 29 Apr 2021 18:24:13 +0300 Subject: [PATCH] Properly reset app state and caches from auth screen --- src/components/auth/Auth.tsx | 12 ++++++---- src/components/auth/AuthPhoneNumber.tsx | 22 ------------------- src/global/cache.ts | 13 ++++++++++- src/global/types.ts | 2 +- src/modules/actions/api/initial.ts | 29 ++++++++++++++++++++----- 5 files changed, 44 insertions(+), 34 deletions(-) diff --git a/src/components/auth/Auth.tsx b/src/components/auth/Auth.tsx index c557de1c..b791e07b 100644 --- a/src/components/auth/Auth.tsx +++ b/src/components/auth/Auth.tsx @@ -16,12 +16,16 @@ import AuthQrCode from './AuthQrCode.async'; import './Auth.scss'; type StateProps = Pick; -type DispatchProps = Pick; +type DispatchProps = Pick; -const Auth: FC = ({ authState, initApi }) => { +const Auth: FC = ({ authState, reset, initApi }) => { useEffect(() => { + reset(); initApi(); - }, [initApi]); + }, [reset, initApi]); + + useEffect(() => { + }, []); switch (authState) { case 'authorizationStateWaitCode': @@ -40,5 +44,5 @@ const Auth: FC = ({ authState, initApi }) => { export default memo(withGlobal( (global): StateProps => pick(global, ['authState']), - (global, actions): DispatchProps => pick(actions, ['initApi']), + (global, actions): DispatchProps => pick(actions, ['reset', 'initApi']), )(Auth)); diff --git a/src/components/auth/AuthPhoneNumber.tsx b/src/components/auth/AuthPhoneNumber.tsx index b946a6ca..f77f46ed 100644 --- a/src/components/auth/AuthPhoneNumber.tsx +++ b/src/components/auth/AuthPhoneNumber.tsx @@ -3,20 +3,11 @@ import { ChangeEvent } from 'react'; // @ts-ignore import monkeyPath from '../../assets/monkey.svg'; -import { - CUSTOM_BG_CACHE_NAME, - LANG_CACHE_NAME, - MEDIA_CACHE_NAME, - MEDIA_CACHE_NAME_AVATARS, - MEDIA_PROGRESSIVE_CACHE_NAME, -} from '../../config'; - import { GlobalActions, GlobalState } from '../../global/types'; import React, { FC, memo, useCallback, useEffect, useLayoutEffect, useRef, useState, } from '../../lib/teact/teact'; import { withGlobal } from '../../lib/teact/teactn'; -import * as cacheApi from '../../util/cacheApi'; import { IS_TOUCH_ENV } from '../../util/environment'; import { preloadImage } from '../../util/files'; import preloadFonts from '../../util/fonts'; @@ -38,8 +29,6 @@ type DispatchProps = Pick; const MIN_NUMBER_LENGTH = 10; -// Cache clearing may be heavy so we delay it -const CLEAR_CACHE_DELAY = 2000; let isPreloadInitiated = false; @@ -114,17 +103,6 @@ const AuthPhoneNumber: FC = ({ } }, [lastSelection]); - // Media cache storage is always enabled, so we clear it only when user by any chance returned to the auth page - useEffect(() => { - setTimeout(() => { - cacheApi.clear(MEDIA_CACHE_NAME); - cacheApi.clear(MEDIA_CACHE_NAME_AVATARS); - cacheApi.clear(MEDIA_PROGRESSIVE_CACHE_NAME); - cacheApi.clear(CUSTOM_BG_CACHE_NAME); - cacheApi.clear(LANG_CACHE_NAME); - }, CLEAR_CACHE_DELAY); - }, []); - const handlePhoneNumberChange = useCallback((e: ChangeEvent) => { if (authError) { clearAuthError(); diff --git a/src/global/cache.ts b/src/global/cache.ts index 563f3fd9..02804a86 100644 --- a/src/global/cache.ts +++ b/src/global/cache.ts @@ -23,16 +23,20 @@ const UPDATE_THROTTLE = 1000; const updateCacheThrottled = throttle(updateCache, UPDATE_THROTTLE, false); +let isAllowed = false; + export function initCache() { if (GLOBAL_STATE_CACHE_DISABLED) { return; } addReducer('saveSession', () => { + isAllowed = true; addCallback(updateCacheThrottled); }); - addReducer('signOut', () => { + addReducer('reset', () => { + isAllowed = false; removeCallback(updateCacheThrottled); localStorage.removeItem(GLOBAL_STATE_CACHE_KEY); }); @@ -42,8 +46,11 @@ export function loadCache(initialState: GlobalState) { if (!GLOBAL_STATE_CACHE_DISABLED) { const hasActiveSession = localStorage.getItem(GRAMJS_SESSION_ID_KEY); if (hasActiveSession) { + isAllowed = true; addCallback(updateCacheThrottled); return readCache(initialState); + } else { + isAllowed = false; } } @@ -80,6 +87,10 @@ function readCache(initialState: GlobalState) { function updateCache() { onIdle(() => { + if (!isAllowed) { + return; + } + const global = getGlobal(); if (global.isLoggingOut) { diff --git a/src/global/types.ts b/src/global/types.ts index 3a2bbc44..3d6cccf7 100644 --- a/src/global/types.ts +++ b/src/global/types.ts @@ -378,7 +378,7 @@ export type GlobalState = { export type ActionTypes = ( // system - 'init' | 'initApi' | 'apiUpdate' | 'sync' | 'saveSession' | 'afterSync' | + 'init' | 'reset' | 'initApi' | 'apiUpdate' | 'sync' | 'saveSession' | 'afterSync' | 'showNotification' | 'dismissNotification' | 'showError' | 'dismissError' | // ui 'toggleChatInfo' | 'toggleStatistics' | 'setIsUiReady' | 'addRecentEmoji' | 'addRecentSticker' | 'toggleLeftColumn' | diff --git a/src/modules/actions/api/initial.ts b/src/modules/actions/api/initial.ts index e4db496f..dc480218 100644 --- a/src/modules/actions/api/initial.ts +++ b/src/modules/actions/api/initial.ts @@ -4,9 +4,17 @@ import { import { GlobalState } from '../../../global/types'; -import { GRAMJS_SESSION_ID_KEY } from '../../../config'; +import { + LANG_CACHE_NAME, + CUSTOM_BG_CACHE_NAME, + GRAMJS_SESSION_ID_KEY, + MEDIA_CACHE_NAME, + MEDIA_CACHE_NAME_AVATARS, + MEDIA_PROGRESSIVE_CACHE_NAME, +} from '../../../config'; import { initApi, callApi } from '../../../api/gramjs'; import { unsubscribeFromPush } from '../../../util/pushNotifications'; +import * as cacheApi from '../../../util/cacheApi'; addReducer('initApi', (global: GlobalState, actions) => { const sessionId = localStorage.getItem(GRAMJS_SESSION_ID_KEY) || undefined; @@ -98,16 +106,25 @@ addReducer('saveSession', (global, actions, payload) => { }); addReducer('signOut', () => { - void signOut(); + (async () => { + await unsubscribeFromPush(); + await callApi('destroy'); + + getDispatch().reset(); + })(); }); -async function signOut() { - await unsubscribeFromPush(); - await callApi('destroy'); +addReducer('reset', () => { localStorage.removeItem(GRAMJS_SESSION_ID_KEY); + cacheApi.clear(MEDIA_CACHE_NAME); + cacheApi.clear(MEDIA_CACHE_NAME_AVATARS); + cacheApi.clear(MEDIA_PROGRESSIVE_CACHE_NAME); + cacheApi.clear(CUSTOM_BG_CACHE_NAME); + cacheApi.clear(LANG_CACHE_NAME); + getDispatch().init(); -} +}); addReducer('loadNearestCountry', (global) => { if (global.connectionState !== 'connectionStateReady') {