diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index aa043a42a..1f48ab0b5 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 82303564c..5c180f982 100644
--- a/frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx
+++ b/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) ? (
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 });
};
}