fix(assist): pagination (#2789)

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -24,7 +24,7 @@ function LiveSessionList() {
   const totalLiveSessions = sessionStore.totalLiveSessions;
   const loading = sessionStore.loadingLiveSessions;
   const { currentPage } = searchStoreLive;
-  const metaList = customFieldStore.list
+  const metaList = customFieldStore.list;
   const metaListLoading = customFieldStore.isLoading;
 
   let timeoutId: any;
@@ -32,7 +32,7 @@ function LiveSessionList() {
   const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
   const sortOptions = [{ label: 'Start Time', value: 'timestamp' }].concat(
     metaList
-      .map(({ key} : any) => ({
+      .map(({ key }: any) => ({
         label: capitalize(key),
         value: key
       }))
@@ -40,21 +40,33 @@ function LiveSessionList() {
 
   useEffect(() => {
     if (metaListLoading) return;
+
     const _filter = { ...filter };
+    let shouldUpdate = false;
+
+    // Set default sort if not already set
     if (sortOptions[1] && !filter.sort) {
       _filter.sort = sortOptions[1].value;
+      shouldUpdate = true;
     }
+
+    // Only update filters if there's a change
+    if (shouldUpdate) {
       searchStoreLive.edit(_filter);
+    }
+
+    // Start auto-refresh timeout
     timeout();
+
+    // Cleanup on component unmount or re-run
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [metaListLoading]);
+  }, [metaListLoading, filter.sort]); // Add necessary dependencies
 
   const refetch = () => {
-    searchStoreLive.edit({ ...filter })
     void searchStoreLive.fetchSessions();
-  }
+  };
 
   const onUserClick = (userId: string, userAnonymousId: string) => {
     if (userId) {
@@ -66,7 +78,6 @@ function LiveSessionList() {
 
   const onSortChange = ({ value }: any) => {
     searchStoreLive.edit({ sort: value.value });
-    void searchStoreLive.fetchSessions();
   };
 
   const timeout = () => {
@@ -102,8 +113,7 @@ function LiveSessionList() {
                 <div className="mx-2" />
                 <SortOrderButton
                   onChange={(state: any) => {
-                    searchStoreLive.edit({ order: state })
-                    void searchStoreLive.fetchSessions();
+                    searchStoreLive.edit({ order: state });
                   }}
                   sortOrder={filter.order}
                 />

frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx

@@ -22,7 +22,6 @@ function LiveSessionSearch() {
 
   const onUpdateFilter = (filterIndex: number, filter: any) => {
     searchStoreLive.updateFilter(filterIndex, filter);
-    void searchStoreLive.fetchSessions();
   };
 
   const onRemoveFilter = (filterIndex: number) => {
@@ -33,16 +32,12 @@ function LiveSessionSearch() {
     searchStoreLive.edit({
       filters: newFilters
     });
-
-    void searchStoreLive.fetchSessions();
   };
 
   const onChangeEventsOrder = (e: any, { name, value }: any) => {
     searchStoreLive.edit({
       eventsOrder: value
     });
-
-    void searchStoreLive.fetchSessions();
   };
 
   return (hasEvents || hasFilters) ? (

frontend/app/mstore/searchStoreLive.ts

@@ -2,10 +2,10 @@ import { FilterCategory, FilterKey } from 'Types/filter/filterType';
 import {
   filtersMap,
   generateFilterOptions,
-  liveFiltersMap,
+  liveFiltersMap
 } from 'Types/filter/newFilter';
 import { List } from 'immutable';
-import { makeAutoObservable } from 'mobx';
+import { makeAutoObservable, reaction } from 'mobx';
 import Search from 'App/mstore/types/search';
 import { checkFilterValue, IFilter } from 'App/mstore/types/filter';
 import FilterItem from 'App/mstore/types/filterItem';
@@ -63,11 +63,29 @@ class SearchStoreLive {
 
   constructor() {
     makeAutoObservable(this);
+
+    // Reset currentPage to 1 only on filter changes
+    reaction(
+      () => this.instance,
+      () => {
+        this.currentPage = 1;
+        void this.fetchSessions();
+      }
+    );
+
+    // Fetch sessions when currentPage changes
+    reaction(
+      () => this.currentPage,
+      () => {
+        void this.fetchSessions();
+      }
+    );
   }
 
   get filterList() {
     return generateFilterOptions(filtersMap);
   }
+
   get filterListLive() {
     return generateFilterOptions(liveFiltersMap);
   }
@@ -96,14 +114,12 @@ class SearchStoreLive {
 
   edit(instance: Partial<Search>) {
     this.instance = new Search(Object.assign({ ...this.instance }, instance));
-    this.currentPage = 1;
   }
 
 
   apply(filter: any, fromUrl: boolean) {
     if (fromUrl) {
       this.instance = new Search(filter);
-      this.currentPage = 1;
     } else {
       this.instance = { ...this.instance, ...filter };
     }
@@ -115,7 +131,6 @@ class SearchStoreLive {
 
   updateCurrentPage(page: number) {
     this.currentPage = page;
-    this.fetchSessions();
   }
 
   clearSearch() {
@@ -140,22 +155,25 @@ class SearchStoreLive {
       : null;
 
     if (index > -1) {
-      const oldFilter = this.instance.filters[index];
-      const updatedFilter = {
-        ...oldFilter,
-        value: oldFilter.value.concat(filter.value)
+      // Update existing filter
+      // @ts-ignore
+      this.instance.filters[index] = {
+        ...this.instance.filters[index],
+        value: this.instance.filters[index].value.concat(filter.value)
       };
-      oldFilter.merge(updatedFilter);
     } else {
-      this.instance.filters.push(filter);
+      // Add new filter (create a new array reference to notify MobX)
+      this.instance.filters = [...this.instance.filters, filter];
+    }
+
+    // Update the instance to trigger reactions
     this.instance = new Search({
       ...this.instance.toData()
     });
-    }
 
-    if (filter.value && filter.value[0] && filter.value[0] !== '') {
-      this.fetchSessions();
-    }
+    // if (filter.value && filter.value[0] && filter.value[0] !== '') {
+    //   void this.fetchSessions();
+    // }
   }
 
   addFilterByKeyAndValue(key: any, value: any, operator?: string, sourceOperator?: string, source?: string) {
@@ -200,7 +218,7 @@ class SearchStoreLive {
   };
 
   async fetchSessions() {
-    await sessionStore.fetchLiveSessions(this.instance.toSearch());
+    await sessionStore.fetchLiveSessions({ ...this.instance.toSearch(), page: this.currentPage });
   };
 }