fix(ui): sessions list persist page, show latest sessions (#2777)

frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx

@@ -37,9 +37,11 @@ function SessionsTabOverview() {
       ) : null}
       <SessionHeader />
       <div className="border-b" />
-      <LatestSessionsMessage />
       {!isNotesRoute ? (
-        <SessionList />
+        <>
+          <LatestSessionsMessage />
+          <SessionList />
+        </>
       ) : (
         <NotesList />
       )}

frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx

@@ -7,11 +7,16 @@ import { observer } from 'mobx-react-lite';
 function LatestSessionsMessage() {
   const { searchStore } = useStore();
   const count = searchStore.latestList.size;
+
+  const onShowNewSessions = () => {
+    void searchStore.updateCurrentPage(1, true);
+  };
+
   return count > 0 ? (
     <div
       className="bg-amber-50 p-1 flex w-full border-b text-center justify-center link"
       style={{ backgroundColor: 'rgb(255 251 235)' }}
-      onClick={() => searchStore.updateCurrentPage(1)}
+      onClick={onShowNewSessions}
     >
       Show {numberWithCommas(count)} New {count > 1 ? 'Sessions' : 'Session'}
     </div>

frontend/app/mstore/searchStore.ts

@@ -162,15 +162,14 @@ class SearchStore {
       });
   }
 
-  updateCurrentPage(page: number) {
+  updateCurrentPage(page: number, force = false) {
     this.currentPage = page;
-    void this.fetchSessions();
+    void this.fetchSessions(force);
   }
 
   setActiveTab(tab: string) {
     runInAction(() => {
       this.activeTab = TAB_MAP[tab];
-      this.currentPage = 1;
     });
   }
 
@@ -233,8 +232,9 @@ class SearchStore {
       filter.endTimestamp = newTimestamps.endDate;
     }
     searchService.checkLatestSessions(filter).then((response: any) => {
-      this.latestList = response;
+      runInAction(() => {
-      this.latestRequestTime = Date.now();
+        this.latestList = List(response);
+      });
     });
   }
 
@@ -265,7 +265,7 @@ class SearchStore {
     }
 
     if (filter.value && filter.value[0] && filter.value[0] !== '') {
-      this.fetchSessions();
+      void this.fetchSessions();
     }
   }
 
@@ -336,6 +336,8 @@ class SearchStore {
       filter.filters = filter.filters.concat(tagFilter);
     }
 
+    this.latestRequestTime = Date.now();
+
     await sessionStore.fetchSessions({
       ...filter,
       page: this.currentPage,

frontend/app/mstore/sessionStore.ts

@@ -170,7 +170,7 @@ export default class SessionStore {
     }
     const nextEntryNum =
       keys.length > 0
-      ? Math.max(...keys.map((key) => this.prefetchedMobUrls[key].entryNum || 0)) + 1
+      ? Math.max(...keys.map((key) => this.prefetchedMobUrls[key]?.entryNum || 0)) + 1
       : 0;
     this.prefetchedMobUrls[sessionId] = {
       data: fileData,