Merge pull request #660 from MobilityData/649-search-screen-back-and-…

…forward-browsers-actions-reacting-on-typying fix: 649 search screen back and forward browsers actions reacting on typying
MobilityData · Aug 13, 2024 · 9f6000e · 9f6000e
2 parents 036bad2 + ce83a07
commit 9f6000e
Showing 1 changed file with 44 additions and 46 deletions.
diff --git 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,19 +172,18 @@ export default function Feed(): React.ReactElement {
               onSubmit={(event) => {
                 event.preventDefault();
                 setActivePagination(1);
-                handleSearch();
+                setActiveSearch(searchQuery);
               }}
               sx={{ display: 'flex', width: '100%', alignItems: 'center' }}
             >
               <TextField
                 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 {
                           <Checkbox
                             checked={selectedFeedTypes.gtfs}
                             onChange={(e) => {
-                              setSearchParams({ q: activeSearch });
                               setActivePagination(1);
                               setSelectedFeedTypes({
                                 ...selectedFeedTypes,
@@ -246,7 +250,6 @@ export default function Feed(): React.ReactElement {
                           <Checkbox
                             checked={selectedFeedTypes.gtfs_rt}
                             onChange={(e) => {
-                              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);
                               }}
                             />
                           </TableContainer>