From 9060b8730dfbac7c180340bc25600df2facb349d Mon Sep 17 00:00:00 2001 From: Jingsi Lu Date: Tue, 6 Aug 2024 12:20:09 -0400 Subject: [PATCH 1/5] don't update searchParams every time a keystroke is types --- web-app/src/app/screens/Feeds/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web-app/src/app/screens/Feeds/index.tsx b/web-app/src/app/screens/Feeds/index.tsx index 1a7fd3d23..d193a0218 100644 --- a/web-app/src/app/screens/Feeds/index.tsx +++ b/web-app/src/app/screens/Feeds/index.tsx @@ -80,6 +80,7 @@ export default function Feed(): React.ReactElement { const dispatch = useAppDispatch(); const feedsData = useSelector(selectFeedsData); const feedStatus = useSelector(selectFeedsStatus); + let searchQuery = ''; const getPaginationOffset = (activePagination?: number): number => { const paginationParam = @@ -90,7 +91,7 @@ export default function Feed(): React.ReactElement { }; const handleSearch = (): void => { - const searchQuery = searchParams.get('q') ?? ''; + searchParams.set('q', searchQuery); const paginationOffset = getPaginationOffset(); if (user !== undefined) { dispatch( @@ -174,11 +175,9 @@ export default function Feed(): React.ReactElement { sx={{ width: 'calc(100% - 100px)', }} - value={searchParams.get('q') ?? ''} placeholder={t('searchPlaceholder')} onChange={(e) => { - const searchValue = e.target.value; - setSearchParams({ q: searchValue }); + searchQuery = e.target.value; }} InputProps={{ startAdornment: ( From 96da011cc6b29940ffdcd03d488d3171891fa150 Mon Sep 17 00:00:00 2001 From: Jingsi Lu Date: Tue, 6 Aug 2024 12:22:34 -0400 Subject: [PATCH 2/5] set search params in URL in handleSearch --- web-app/src/app/screens/Feeds/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-app/src/app/screens/Feeds/index.tsx b/web-app/src/app/screens/Feeds/index.tsx index d193a0218..b4fdeeee4 100644 --- a/web-app/src/app/screens/Feeds/index.tsx +++ b/web-app/src/app/screens/Feeds/index.tsx @@ -91,7 +91,7 @@ export default function Feed(): React.ReactElement { }; const handleSearch = (): void => { - searchParams.set('q', searchQuery); + setSearchParams({ q: searchQuery }); const paginationOffset = getPaginationOffset(); if (user !== undefined) { dispatch( From aff40bef42234de7d9830af31ca683a249da42b1 Mon Sep 17 00:00:00 2001 From: Jingsi Lu Date: Tue, 6 Aug 2024 14:01:13 -0400 Subject: [PATCH 3/5] update q only when there is a query --- web-app/src/app/screens/Feeds/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web-app/src/app/screens/Feeds/index.tsx b/web-app/src/app/screens/Feeds/index.tsx index b4fdeeee4..361006a41 100644 --- a/web-app/src/app/screens/Feeds/index.tsx +++ b/web-app/src/app/screens/Feeds/index.tsx @@ -91,7 +91,9 @@ export default function Feed(): React.ReactElement { }; const handleSearch = (): void => { - setSearchParams({ q: searchQuery }); + if (searchQuery !== '') { + setSearchParams({ q: searchQuery }); + } const paginationOffset = getPaginationOffset(); if (user !== undefined) { dispatch( From 8c15bde98eb04762ec554fae054c037c0b3311e1 Mon Sep 17 00:00:00 2001 From: Jingsi Lu Date: Fri, 9 Aug 2024 12:12:53 -0400 Subject: [PATCH 4/5] 1. Refactored `handleSearch` to prevent multiple `setSearchParams` calls 2. search query in home page is copied over to the text fields of feeds search page --- web-app/src/app/screens/Feeds/index.tsx | 88 +++++++++++-------------- 1 file changed, 39 insertions(+), 49 deletions(-) diff --git a/web-app/src/app/screens/Feeds/index.tsx b/web-app/src/app/screens/Feeds/index.tsx index 361006a41..627f7278e 100644 --- a/web-app/src/app/screens/Feeds/index.tsx +++ b/web-app/src/app/screens/Feeds/index.tsx @@ -71,16 +71,15 @@ 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); const feedStatus = useSelector(selectFeedsStatus); - let searchQuery = ''; const getPaginationOffset = (activePagination?: number): number => { const paginationParam = @@ -90,45 +89,42 @@ export default function Feed(): React.ReactElement { return paginationOffset; }; - const handleSearch = (): void => { - if (searchQuery !== '') { - setSearchParams({ q: searchQuery }); - } - 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'], - }, - }, - }), - ); - setActiveSearch(searchQuery); - } - }; - useEffect(() => { - handleSearch(); - }, [user]); + if (user == null) return; - useEffect(() => { - if (!triggerSearch) return; - handleSearch(); - setTriggerSearch(false); - }, [triggerSearch]); + 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'], + }, + }, + }), + ); + }, [user, activeSearch, activePagination, selectedFeedTypes, searchLimit]); useEffect(() => { - handleSearch(); - }, [selectedFeedTypes]); + const oldSearch = searchParams.get('q') ?? ''; + const oldPagination = + searchParams.get('o') !== null ? Number(searchParams.get('o')) : 1; + if (oldSearch === activeSearch && oldPagination === activePagination) { + return; + } + + const newSearchParams = new URLSearchParams(); + newSearchParams.set('q', activeSearch); + if (activePagination !== 1) { + newSearchParams.set('o', activePagination.toString()); + } + setSearchParams(newSearchParams); + }, [activeSearch, activePagination]); const getSearchResultNumbers = (): string => { if (feedsData?.total !== undefined && feedsData?.total > 0) { @@ -169,7 +165,7 @@ export default function Feed(): React.ReactElement { onSubmit={(event) => { event.preventDefault(); setActivePagination(1); - handleSearch(); + setActiveSearch(searchQuery); }} sx={{ display: 'flex', width: '100%', alignItems: 'center' }} > @@ -177,9 +173,10 @@ export default function Feed(): React.ReactElement { sx={{ width: 'calc(100% - 100px)', }} + defaultValue={searchQuery} placeholder={t('searchPlaceholder')} onChange={(e) => { - searchQuery = e.target.value; + setSearchQuery(e.target.value); }} InputProps={{ startAdornment: ( @@ -189,7 +186,7 @@ export default function Feed(): React.ReactElement { }} onClick={() => { setActivePagination(1); - handleSearch(); + setActiveSearch(searchQuery); }} position='start' > @@ -231,7 +228,6 @@ export default function Feed(): React.ReactElement { { - setSearchParams({ q: activeSearch }); setActivePagination(1); setSelectedFeedTypes({ ...selectedFeedTypes, @@ -247,7 +243,6 @@ export default function Feed(): React.ReactElement { { - setSearchParams({ q: activeSearch }); setActivePagination(1); setSelectedFeedTypes({ ...selectedFeedTypes, @@ -335,7 +330,7 @@ export default function Feed(): React.ReactElement { }, }} color='primary' - defaultPage={activePagination} + page={activePagination} shape='rounded' count={ feedsData.total !== undefined @@ -344,12 +339,7 @@ export default function Feed(): React.ReactElement { } onChange={(event, value) => { event.preventDefault(); - setSearchParams({ - q: activeSearch, - o: String(value), - }); setActivePagination(value); - setTriggerSearch(true); }} /> From bb8dbfd7cd73f5afddddc626a0f93f7df7662ac7 Mon Sep 17 00:00:00 2001 From: Jingsi Lu Date: Mon, 12 Aug 2024 15:42:42 -0400 Subject: [PATCH 5/5] updated searchQuery when back nav is clicked --- web-app/src/app/screens/Feeds/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/web-app/src/app/screens/Feeds/index.tsx b/web-app/src/app/screens/Feeds/index.tsx index 627f7278e..b7e64f33a 100644 --- a/web-app/src/app/screens/Feeds/index.tsx +++ b/web-app/src/app/screens/Feeds/index.tsx @@ -126,6 +126,13 @@ export default function Feed(): React.ReactElement { setSearchParams(newSearchParams); }, [activeSearch, activePagination]); + useEffect(() => { + const newQeury = searchParams.get('q') ?? ''; + if (newQeury !== searchQuery) { + setSearchQuery(newQeury); + } + }, [searchParams]); + const getSearchResultNumbers = (): string => { if (feedsData?.total !== undefined && feedsData?.total > 0) { const offset = getPaginationOffset(activePagination); @@ -173,7 +180,7 @@ export default function Feed(): React.ReactElement { sx={{ width: 'calc(100% - 100px)', }} - defaultValue={searchQuery} + value={searchQuery} placeholder={t('searchPlaceholder')} onChange={(e) => { setSearchQuery(e.target.value);