diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx index 9ed3c9fd6..001777698 100644 --- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx +++ b/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() {
{ - searchStoreLive.edit({ order: state }) - void searchStoreLive.fetchSessions(); + searchStoreLive.edit({ order: state }); }} sortOrder={filter.order} /> diff --git a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx b/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx index 315e8ae3d..d9f1ddb02 100644 --- a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx +++ b/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 ( diff --git a/frontend/app/mstore/searchStore.ts b/frontend/app/mstore/searchStore.ts index a3e5a48ba..f8767e97f 100644 --- a/frontend/app/mstore/searchStore.ts +++ b/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); diff --git a/frontend/app/mstore/searchStoreLive.ts b/frontend/app/mstore/searchStoreLive.ts index 0a4125cb8..ac042de14 100644 --- a/frontend/app/mstore/searchStoreLive.ts +++ b/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) { 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 }); }; } diff --git a/tracker/tracker-reactnative/android/build.gradle b/tracker/tracker-reactnative/android/build.gradle index 83f0b8cda..ca635ad5c 100644 --- a/tracker/tracker-reactnative/android/build.gradle +++ b/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 { diff --git a/tracker/tracker-reactnative/package.json b/tracker/tracker-reactnative/package.json index 0a787d7c2..ca2b01364 100644 --- a/tracker/tracker-reactnative/package.json +++ b/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", diff --git a/tracker/tracker-reactnative/src/index.tsx b/tracker/tracker-reactnative/src/index.tsx index b58bb0e7b..f630bf1b6 100644 --- a/tracker/tracker-reactnative/src/index.tsx +++ b/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;