⚡️ perf: improve performance of session navigation (lobehub#2815)

* ⚡️ perf: improve performance of session navigation * 🐛 fix: fix mobile navigation * ♻️ refactor: clean code
whyliam · Jun 8, 2024 · b32f428 · b32f428
1 parent 41d96be
commit b32f428
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 21 deletions.
diff --git a/src/app/(main)/chat/@session/features/SessionListContent/Inbox/index.tsx b/src/app/(main)/chat/@session/features/SessionListContent/Inbox/index.tsx
@@ -9,14 +9,23 @@ import { useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
 import ListItem from '../ListItem';
+import { useSwitchSession } from '../useSwitchSession';
 
 const Inbox = memo(() => {
   const { t } = useTranslation('chat');
   const mobile = useServerConfigStore((s) => s.isMobile);
   const activeId = useSessionStore((s) => s.activeId);
+  const switchSession = useSwitchSession();
 
   return (
-    <Link aria-label={t('inbox.title')} href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}>
+    <Link
+      aria-label={t('inbox.title')}
+      href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
+      onClick={(e) => {
+        e.preventDefault();
+        switchSession(INBOX_SESSION_ID);
+      }}
+    >
       <ListItem
         active={activeId === INBOX_SESSION_ID}
         avatar={DEFAULT_INBOX_AVATAR}

diff --git a/src/app/(main)/chat/@session/features/SessionListContent/List/index.tsx b/src/app/(main)/chat/@session/features/SessionListContent/List/index.tsx
@@ -13,6 +13,7 @@ import { sessionSelectors } from '@/store/session/selectors';
 import { LobeAgentSession } from '@/types/session';
 
 import SkeletonList from '../../SkeletonList';
+import { useSwitchSession } from '../useSwitchSession';
 import AddButton from './AddButton';
 import SessionItem from './Item';
 
@@ -28,19 +29,28 @@ interface SessionListProps {
 }
 const SessionList = memo<SessionListProps>(({ dataSource, groupId, showAddButton = true }) => {
   const { t } = useTranslation('chat');
-  const isInit = useSessionStore((s) => sessionSelectors.isSessionListInit(s));
-  const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
-
   const { styles } = useStyles();
 
+  const isInit = useSessionStore(sessionSelectors.isSessionListInit);
+  const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
   const mobile = useServerConfigStore((s) => s.isMobile);
+
+  const switchSession = useSwitchSession();
+
   const isEmpty = !dataSource || dataSource.length === 0;
   return !isInit ? (
     <SkeletonList />
   ) : !isEmpty ? (
     dataSource.map(({ id }) => (
       <LazyLoad className={styles} key={id}>
-        <Link aria-label={id} href={SESSION_CHAT_URL(id, mobile)}>
+        <Link
+          aria-label={id}
+          href={SESSION_CHAT_URL(id, mobile)}
+          onClick={(e) => {
+            e.preventDefault();
+            switchSession(id);
+          }}
+        >
           <SessionItem id={id} />
         </Link>
       </LazyLoad>

diff --git a/src/app/(main)/chat/@session/features/SessionListContent/useSwitchSession.ts b/src/app/(main)/chat/@session/features/SessionListContent/useSwitchSession.ts
@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { useSessionStore } from '@/store/session';
+
+export const useSwitchSession = () => {
+  const switchSession = useSessionStore((s) => s.switchSession);
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  const router = useQueryRoute();
+
+  return useCallback(
+    (id: string) => {
+      switchSession(id);
+
+      if (mobile) {
+        setTimeout(() => {
+          router.push('/chat', {
+            query: { session: id, showMobileWorkspace: 'true' },
+          });
+        }, 50);
+      }
+    },
+    [mobile],
+  );
+};
diff --git a/src/store/session/slices/session/action.test.ts b/src/store/session/slices/session/action.test.ts
@@ -141,7 +141,7 @@ describe('SessionAction', () => {
       const sessionId = 'active-session-id';
 
       act(() => {
-        result.current.activeSession(sessionId);
+        result.current.switchSession(sessionId);
       });
 
       expect(result.current.activeId).toBe(sessionId);

diff --git a/src/store/session/slices/session/action.ts b/src/store/session/slices/session/action.ts
@@ -35,10 +35,9 @@ const SEARCH_SESSIONS_KEY = 'searchSessions';
 /* eslint-disable typescript-sort-keys/interface */
 export interface SessionAction {
   /**
-   * active the session
-   * @param sessionId
+   * switch the session
    */
-  activeSession: (sessionId: string) => void;
+  switchSession: (sessionId: string) => void;
   /**
    * reset sessions to default
    */
@@ -94,19 +93,13 @@ export const createSessionSlice: StateCreator<
   [],
   SessionAction
 > = (set, get) => ({
-  activeSession: (sessionId) => {
-    if (get().activeId === sessionId) return;
-
-    set({ activeId: sessionId }, false, n(`activeSession/${sessionId}`));
-  },
-
   clearSessions: async () => {
     await sessionService.removeAllSessions();
     await get().refreshSessions();
   },
 
   createSession: async (agent, isSwitchSession = true) => {
-    const { activeSession, refreshSessions } = get();
+    const { switchSession, refreshSessions } = get();
 
     // merge the defaultAgent in settings
     const defaultAgent = merge(
@@ -120,12 +113,13 @@ export const createSessionSlice: StateCreator<
     await refreshSessions();
 
     // Whether to goto  to the new session after creation, the default is to switch to
-    if (isSwitchSession) activeSession(id);
+    if (isSwitchSession) switchSession(id);
 
     return id;
   },
+
   duplicateSession: async (id) => {
-    const { activeSession, refreshSessions } = get();
+    const { switchSession, refreshSessions } = get();
     const session = sessionSelectors.getSessionById(id)(get());
 
     if (!session) return;
@@ -154,9 +148,8 @@ export const createSessionSlice: StateCreator<
     message.destroy(messageLoadingKey);
     message.success(t('duplicateSession.success', { ns: 'chat' }));
 
-    activeSession(newId);
+    switchSession(newId);
   },
-
   pinSession: async (id, pinned) => {
     await get().internal_updateSession(id, { pinned });
   },
@@ -167,10 +160,16 @@ export const createSessionSlice: StateCreator<
 
     // If the active session deleted, switch to the inbox session
     if (sessionId === get().activeId) {
-      get().activeSession(INBOX_SESSION_ID);
+      get().switchSession(INBOX_SESSION_ID);
     }
   },
 
+  switchSession: (sessionId) => {
+    if (get().activeId === sessionId) return;
+
+    set({ activeId: sessionId }, false, n(`activeSession/${sessionId}`));
+  },
+
   updateSearchKeywords: (keywords) => {
     set(
       { isSearching: !!keywords, sessionSearchKeywords: keywords },