diff --git a/web-app/src/app/screens/Feeds/index.tsx b/web-app/src/app/screens/Feeds/index.tsx index 1a7fd3d23..b7e64f33a 100644 --- a/web-app/src/app/screens/Feeds/index.tsx +++ b/web-app/src/app/screens/Feeds/index.tsx @@ -71,11 +71,11 @@ export default function Feed(): React.ReactElement { const [selectedFeedTypes, setSelectedFeedTypes] = useState( getInitialSelectedFeedTypes(searchParams), ); - const [activeSearch, setActiveSearch] = useState(''); + const [activeSearch, setActiveSearch] = useState(searchParams.get('q') ?? ''); + const [searchQuery, setSearchQuery] = useState(activeSearch); const [activePagination, setActivePagination] = useState( searchParams.get('o') !== null ? Number(searchParams.get('o')) : 1, ); - const [triggerSearch, setTriggerSearch] = useState(false); const user = useSelector(selectUserProfile); const dispatch = useAppDispatch(); const feedsData = useSelector(selectFeedsData); @@ -89,43 +89,49 @@ export default function Feed(): React.ReactElement { return paginationOffset; }; - const handleSearch = (): void => { - const searchQuery = searchParams.get('q') ?? ''; - const paginationOffset = getPaginationOffset(); - if (user !== undefined) { - dispatch( - loadingFeeds({ - params: { - query: { - limit: searchLimit, - offset: paginationOffset, - search_query: searchQuery, - data_type: - getDataTypeParamFromSelectedFeedTypes(selectedFeedTypes), - // Fixed status values for now, until a status filter is implemented - // Filtering out deprecated feeds - status: ['active', 'inactive', 'development'], - }, + useEffect(() => { + if (user == null) return; + + const paginationOffset = getPaginationOffset(activePagination); + dispatch( + loadingFeeds({ + params: { + query: { + limit: searchLimit, + offset: paginationOffset, + search_query: activeSearch, + data_type: getDataTypeParamFromSelectedFeedTypes(selectedFeedTypes), + // Fixed status values for now, until a status filter is implemented + // Filtering out deprecated feeds + status: ['active', 'inactive', 'development'], }, - }), - ); - setActiveSearch(searchQuery); - } - }; + }, + }), + ); + }, [user, activeSearch, activePagination, selectedFeedTypes, searchLimit]); useEffect(() => { - handleSearch(); - }, [user]); + const oldSearch = searchParams.get('q') ?? ''; + const oldPagination = + searchParams.get('o') !== null ? Number(searchParams.get('o')) : 1; + if (oldSearch === activeSearch && oldPagination === activePagination) { + return; + } - useEffect(() => { - if (!triggerSearch) return; - handleSearch(); - setTriggerSearch(false); - }, [triggerSearch]); + const newSearchParams = new URLSearchParams(); + newSearchParams.set('q', activeSearch); + if (activePagination !== 1) { + newSearchParams.set('o', activePagination.toString()); + } + setSearchParams(newSearchParams); + }, [activeSearch, activePagination]); useEffect(() => { - handleSearch(); - }, [selectedFeedTypes]); + const newQeury = searchParams.get('q') ?? ''; + if (newQeury !== searchQuery) { + setSearchQuery(newQeury); + } + }, [searchParams]); const getSearchResultNumbers = (): string => { if (feedsData?.total !== undefined && feedsData?.total > 0) { @@ -166,7 +172,7 @@ export default function Feed(): React.ReactElement { onSubmit={(event) => { event.preventDefault(); setActivePagination(1); - handleSearch(); + setActiveSearch(searchQuery); }} sx={{ display: 'flex', width: '100%', alignItems: 'center' }} > @@ -174,11 +180,10 @@ export default function Feed(): React.ReactElement { sx={{ width: 'calc(100% - 100px)', }} - value={searchParams.get('q') ?? ''} + value={searchQuery} placeholder={t('searchPlaceholder')} onChange={(e) => { - const searchValue = e.target.value; - setSearchParams({ q: searchValue }); + setSearchQuery(e.target.value); }} InputProps={{ startAdornment: ( @@ -188,7 +193,7 @@ export default function Feed(): React.ReactElement { }} onClick={() => { setActivePagination(1); - handleSearch(); + setActiveSearch(searchQuery); }} position='start' > @@ -230,7 +235,6 @@ export default function Feed(): React.ReactElement { { - setSearchParams({ q: activeSearch }); setActivePagination(1); setSelectedFeedTypes({ ...selectedFeedTypes, @@ -246,7 +250,6 @@ export default function Feed(): React.ReactElement { { - setSearchParams({ q: activeSearch }); setActivePagination(1); setSelectedFeedTypes({ ...selectedFeedTypes, @@ -334,7 +337,7 @@ export default function Feed(): React.ReactElement { }, }} color='primary' - defaultPage={activePagination} + page={activePagination} shape='rounded' count={ feedsData.total !== undefined @@ -343,12 +346,7 @@ export default function Feed(): React.ReactElement { } onChange={(event, value) => { event.preventDefault(); - setSearchParams({ - q: activeSearch, - o: String(value), - }); setActivePagination(value); - setTriggerSearch(true); }} />