diff --git a/frontend/app/components/shared/SessionFilters/SessionFilters.tsx b/frontend/app/components/shared/SessionFilters/SessionFilters.tsx index 84b95a585..54a03b285 100644 --- a/frontend/app/components/shared/SessionFilters/SessionFilters.tsx +++ b/frontend/app/components/shared/SessionFilters/SessionFilters.tsx @@ -52,12 +52,11 @@ function SessionFilters() { onBeforeLoad: async () => { await reloadTags(); }, + onLoaded: () => { + debounceFetch = debounce(() => searchStore.fetchSessions(), 500); + } }); - useEffect(() => { - debounceFetch = debounce(() => searchStore.fetchSessions(), 500); - }, []); - useEffect(() => { debounceFetch(); }, [appliedFilter.filters]); diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx index c6ecbf091..2a99dbff1 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; + import React, { useEffect } from 'react'; import { FilterKey } from 'Types/filter/filterType'; import SessionItem from 'Shared/SessionItem'; import { NoContent, Loader, Pagination, Icon } from 'UI'; @@ -49,11 +49,10 @@ function SessionList() { const hasNoRecordings = !activeSite || !activeSite.recorded; const metaList = customFieldStore.list; - useEffect(() => { - if (!searchStore.urlParsed) return; - void searchStore.fetchSessions(true, isBookmark); - }, [location.pathname]); - + // useEffect(() => { + // if (!searchStore.urlParsed) return; + // void searchStore.fetchSessions(true, isBookmark); + // }, [location.pathname]); const NO_CONTENT = React.useMemo(() => { if (isBookmark && !isEnterprise) { diff --git a/frontend/app/hooks/useSessionSearchQueryHandler.ts b/frontend/app/hooks/useSessionSearchQueryHandler.ts index c9335ce9b..ac31e4913 100644 --- a/frontend/app/hooks/useSessionSearchQueryHandler.ts +++ b/frontend/app/hooks/useSessionSearchQueryHandler.ts @@ -9,9 +9,10 @@ interface Props { onBeforeLoad?: () => Promise; appliedFilter: Record; loading: boolean; + onLoaded?: () => void; } -const useSessionSearchQueryHandler = ({ onBeforeLoad, appliedFilter, loading }: Props) => { +const useSessionSearchQueryHandler = ({ onBeforeLoad, appliedFilter, loading, onLoaded = () => null }: Props) => { const { searchStore } = useStore(); const [beforeHookLoaded, setBeforeHookLoaded] = useState(!onBeforeLoad); const history = useHistory(); @@ -29,17 +30,34 @@ const useSessionSearchQueryHandler = ({ onBeforeLoad, appliedFilter, loading }: const converter = JsonUrlConverter.urlParamsToJson(history.location.search); const json = getFilterFromJson(converter.toJSON()); const filter = new Search(json); + + // // Even if there are no filters, mark URL as parsed + // if (filter.filters.length === 0) { + // searchStore.setUrlParsed(); + // return; + // } + + // Apply filter first + if (filter.filters.length > 0) { + searchStore.applyFilter(filter, true); + } + + // Important: Mark URL as parsed BEFORE fetching + // This prevents the initial fetch when the URL is parsed searchStore.setUrlParsed(); - if (filter.filters.length === 0) return; - searchStore.applyFilter(filter, true); + + // Then fetch sessions - this is the only place that should fetch initially + await searchStore.fetchSessions(); + onLoaded(); } catch (error) { console.error('Error applying filter from query:', error); + searchStore.setUrlParsed(); } } }; void applyFilterFromQuery(); - }, [loading, onBeforeLoad, searchStore, history.location.search]); + }, [loading, searchStore, history.location.search, onBeforeLoad]); // Update the URL whenever the appliedFilter changes useEffect(() => { diff --git a/frontend/app/mstore/searchStore.ts b/frontend/app/mstore/searchStore.ts index 864e28335..4f5a35be7 100644 --- a/frontend/app/mstore/searchStore.ts +++ b/frontend/app/mstore/searchStore.ts @@ -76,6 +76,7 @@ class SearchStore { isSaving: boolean = false; activeTags: any[] = []; urlParsed: boolean = false; + searchInProgress = false; constructor() { makeAutoObservable(this); @@ -362,6 +363,7 @@ class SearchStore { force: boolean = false, bookmarked: boolean = false ): Promise { + if (this.searchInProgress) return; const filter = this.instance.toSearch(); if (this.activeTags[0] && this.activeTags[0] !== 'all') { @@ -395,7 +397,7 @@ class SearchStore { this.latestRequestTime = Date.now(); this.latestList = List(); - + this.searchInProgress = true; await sessionStore.fetchSessions( { ...filter, @@ -405,7 +407,9 @@ class SearchStore { bookmarked: bookmarked ? true : undefined, }, force - ); + ).finally(() => { + this.searchInProgress = false; + }); } }