Prevent api call before filter apply in Explore Projects page

- Related to hotosm#6328
spnayan · Apr 11, 2024 · 67eee80 · 67eee80
1 parent 0ff9686
commit 67eee80
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/frontend/src/api/projects.js b/frontend/src/api/projects.js
@@ -7,7 +7,7 @@ import { remapParamsToAPI } from '../utils/remapParamsToAPI';
 import api from './apiClient';
 import { UNDERPASS_URL } from '../config';
 
-export const useProjectsQuery = (fullProjectsQuery, action) => {
+export const useProjectsQuery = (fullProjectsQuery, action, queryOptions) => {
   const token = useSelector((state) => state.auth.token);
   const locale = useSelector((state) => state.preferences['locale']);
 
@@ -35,6 +35,7 @@ export const useProjectsQuery = (fullProjectsQuery, action) => {
     queryKey: ['projects', fullProjectsQuery, action],
     queryFn: ({ signal, queryKey }) => fetchProjects(signal, queryKey),
     keepPreviousData: true,
+    ...queryOptions,
   });
 };
 

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
@@ -29,12 +29,20 @@ export const CreateProject = () => {
 
 export const ProjectsPage = () => {
   useSetTitleTag('Explore projects');
+  const { pathname } = useLocation();
   const action = useSelector((state) => state.preferences['action']);
   const [fullProjectsQuery, setProjectQuery] = useExploreProjectsQueryParams();
   const isMapShown = useSelector((state) => state.preferences['mapShown']);
   const searchResultWidth = isMapShown ? 'two-column' : 'one-column';
 
-  const { data: projects, status, refetch } = useProjectsQuery(fullProjectsQuery, action);
+  const {
+    data: projects,
+    status,
+    refetch,
+  } = useProjectsQuery(fullProjectsQuery, action, {
+    // prevent api call until the filters are applied
+    enabled: !pathname.includes('/explore/filters/'),
+  });
 
   return (
     <div className="pull-center">