feat: restore last active conversation when returning to messenger

src/components/messenger/list/conversation-list-panel/index.tsx

@@ -9,10 +9,11 @@ import { itemToOption } from '../../lib/utils';
 import { ScrollbarContainer } from '../../../scrollbar-container';
 import escapeRegExp from 'lodash/escapeRegExp';
 import { getDirectMatches, getIndirectMatches } from './utils';
+import { IconStar1 } from '@zero-tech/zui/icons';
+import { getLastActiveTab, setLastActiveTab } from '../../../../lib/last-tab';
 
 import { bemClassName } from '../../../../lib/bem';
 import './conversation-list-panel.scss';
-import { IconStar1 } from '@zero-tech/zui/icons';
 
 const cn = bemClassName('messages-list');
 
@@ -30,7 +31,7 @@ export interface Properties {
   onRemoveLabel: (payload: { roomId: string; label: string }) => void;
 }
 
-enum Tab {
+export enum Tab {
   All = 'all',
   Favorites = 'favorites',
   Work = 'work',
@@ -61,12 +62,22 @@ export class ConversationListPanel extends React.Component<Properties, State> {
       this.tabListRef.current.addEventListener('wheel', this.horizontalScroll, { passive: false });
     }
 
-    this.setInitialTab();
+    const lastActiveTab = getLastActiveTab();
+    if (lastActiveTab) {
+      this.setState({ selectedTab: lastActiveTab as Tab });
+    } else {
+      this.setInitialTab();
+    }
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.isLabelDataLoaded !== this.props.isLabelDataLoaded) {
-      this.setInitialTab();
+      const lastActiveTab = getLastActiveTab();
+      if (lastActiveTab) {
+        this.setState({ selectedTab: lastActiveTab as Tab });
+      } else {
+        this.setInitialTab();
+      }
     }
   }
 
@@ -161,6 +172,7 @@ export class ConversationListPanel extends React.Component<Properties, State> {
 
   selectTab = (tab) => {
     this.setState({ selectedTab: tab });
+    setLastActiveTab(tab);
   };
 
   onAddLabel = (roomId: string, label) => {

src/lib/last-tab.ts

@@ -0,0 +1,15 @@
+const LAST_TAB_KEY = 'last-active-tab';
+
+export const setLastActiveTab = (tab: string): void => {
+  if (tab) {
+    localStorage.setItem(LAST_TAB_KEY, tab);
+  }
+};
+
+export const getLastActiveTab = (): string | null => {
+  return localStorage.getItem(LAST_TAB_KEY);
+};
+
+export const clearLastActiveTab = (): void => {
+  localStorage.removeItem(LAST_TAB_KEY);
+};

src/store/authentication/saga.test.ts

@@ -34,6 +34,7 @@ import { StoreBuilder } from '../test/store';
 import { throwError } from 'redux-saga-test-plan/providers';
 import { closeUserProfile } from '../user-profile/saga';
 import { clearLastActiveConversation } from '../../lib/last-conversation';
+import { clearLastActiveTab } from '../../lib/last-tab';
 
 describe(nonceOrAuthorize, () => {
   const signedWeb3Token = '0x000000000000000000000000000000000000000A';
@@ -256,6 +257,10 @@ describe(forceLogout, () => {
     await expectLogoutSaga().call(clearLastActiveConversation).call(terminate).run();
   });
 
+  it('clears the last active tab', async () => {
+    await expectLogoutSaga().call(clearLastActiveTab).call(terminate).run();
+  });
+
   it('clears the user session', async () => {
     await expectLogoutSaga().call(terminate).run();
   });

src/store/authentication/saga.ts

@@ -15,6 +15,7 @@ import { getHistory } from '../../lib/browser';
 import { completePendingUserProfile } from '../registration/saga';
 import { closeUserProfile } from '../user-profile/saga';
 import { clearLastActiveConversation } from '../../lib/last-conversation';
+import { clearLastActiveTab } from '../../lib/last-tab';
 
 export const currentUserSelector = () => (state) => {
   return getDeepProperty(state, 'authentication.user.data', null);
@@ -110,6 +111,7 @@ export function* closeLogoutModal() {
 export function* forceLogout() {
   yield closeLogoutModal();
   yield call(clearLastActiveConversation);
+  yield call(clearLastActiveTab);
   yield call(terminate);
 }