Merge branch 'dev' into live-se-red

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;
     }
-    searchStoreLive.edit(_filter);
+
+    // 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

@@ -18,7 +18,6 @@ function LiveSessionSearch() {
 
   const onUpdateFilter = (filterIndex: number, filter: any) => {
     searchStoreLive.updateFilter(filterIndex, filter);
-    void searchStoreLive.fetchSessions();
   };
 
   const onRemoveFilter = (filterIndex: number) => {
@@ -29,16 +28,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 (

frontend/app/mstore/searchStore.ts

@@ -231,6 +231,9 @@ class SearchStore {
       filter.startDate = newTimestamps.startDate;
       filter.endDate = newTimestamps.endDate;
     }
+    // TODO - dedicated API endpoint to get the count of latest sessions, or show X+ sessions
+    delete filter.limit;
+    delete filter.page;
     searchService.checkLatestSessions(filter).then((response: any) => {
       runInAction(() => {
         this.latestList = List(response);

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);
-      this.instance = new Search({
-        ...this.instance.toData()
-      });
+      // Add new filter (create a new array reference to notify MobX)
+      this.instance.filters = [...this.instance.filters, filter];
     }
 
-    if (filter.value && filter.value[0] && filter.value[0] !== '') {
-      this.fetchSessions();
-    }
+    // Update the instance to trigger reactions
+    this.instance = new Search({
+      ...this.instance.toData()
+    });
+
+    // 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 });
   };
 }
 

tracker/tracker-reactnative/android/build.gradle

@@ -91,7 +91,7 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation("com.facebook.react:react-native:0.20.1")
   implementation("org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version")
-  implementation("com.github.openreplay:android-tracker:v1.0.9")
+  implementation("com.github.openreplay:android-tracker:v1.1.0")
 }
 
 //allprojects {

tracker/tracker-reactnative/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openreplay/react-native",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "Openreplay React-native connector for iOS applications",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

tracker/tracker-reactnative/src/index.tsx

@@ -32,6 +32,7 @@ interface IORTrackerConnector {
     optionsDict: Options,
     projectUrl?: string
   ) => void;
+  stop: () => void;
   setMetadata: (key: string, value: string) => void;
   event: (name: string, payload?: string) => void;
   setUserID: (userID: string) => void;