Properly reset app state and caches from auth screen

src/components/auth/Auth.tsx

@@ -16,12 +16,16 @@ import AuthQrCode from './AuthQrCode.async';
 import './Auth.scss';
 
 type StateProps = Pick<GlobalState, 'authState'>;
-type DispatchProps = Pick<GlobalActions, 'initApi'>;
+type DispatchProps = Pick<GlobalActions, 'reset' | 'initApi'>;
 
-const Auth: FC<StateProps & DispatchProps> = ({ authState, initApi }) => {
+const Auth: FC<StateProps & DispatchProps> = ({ authState, reset, initApi }) => {
   useEffect(() => {
+    reset();
     initApi();
-  }, [initApi]);
+  }, [reset, initApi]);
+
+  useEffect(() => {
+  }, []);
 
   switch (authState) {
     case 'authorizationStateWaitCode':
@@ -40,5 +44,5 @@ const Auth: FC<StateProps & DispatchProps> = ({ 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));

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<GlobalActions, (
 )>;
 
 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<StateProps & DispatchProps> = ({
     }
   }, [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<HTMLInputElement>) => {
     if (authError) {
       clearAuthError();

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) {

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' |

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() {
+addReducer('reset', () => {
-  await unsubscribeFromPush();
-  await callApi('destroy');
   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') {