Add useProjectQuery for handling project detail fetching

- Added `useProjectQuery` hook to handle project detail fetching for `ProjectDetailPage` component - Updated network handler to reflect axios' error response in msw implementation - Updated test cases to reflect changes and removed unnecessary props in `ProjectDetailPage`
hotosm · Jun 29, 2023 · fe2353c · fe2353c
1 parent d583d81
commit fe2353c
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 35 deletions.
diff --git a/frontend/src/api/projects.js b/frontend/src/api/projects.js
@@ -36,6 +36,20 @@ export const useProjectsQuery = (fullProjectsQuery, action) => {
   });
 };
 
+export const useProjectQuery = (projectId) => {
+  const fetchProject = ({ signal, queryKey }) => {
+    const [, projectId] = queryKey;
+    return api().get(`projects/${projectId}/`, {
+      signal,
+    });
+  };
+
+  return useQuery({
+    queryKey: ['project', projectId],
+    queryFn: fetchProject,
+  });
+};
+
 const backendToQueryConversion = {
   difficulty: 'difficulty',
   campaign: 'campaign',

diff --git a/frontend/src/network/tests/server-handlers.js b/frontend/src/network/tests/server-handlers.js
@@ -372,7 +372,14 @@ const faultyHandlers = [
       }),
     );
   }),
-  rest.get(API_URL + 'projects/:id/', failedToConnectError),
+  rest.get(API_URL + 'projects/:id/', async (req, res, ctx) => {
+    return res.once(
+      ctx.status(403),
+      ctx.json({
+        SubCode: `Project Not Found`,
+      }),
+    );
+  }),
   rest.get('http://127.0.0.1:8111/version', failedToConnectError),
   rest.post(
     API_URL + 'projects/:projectId/tasks/actions/lock-for-mapping/:taskId',

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
@@ -15,7 +15,7 @@ import { useExploreProjectsQueryParams, stringify } from '../hooks/UseProjectsQu
 import { useSetTitleTag } from '../hooks/UseMetaTags';
 import { NotFound } from './notFound';
 import { ProjectDetailPlaceholder } from '../components/projectDetail/projectDetailPlaceholder';
-import { useProjectsQuery } from '../api/projects';
+import { useProjectsQuery, useProjectQuery } from '../api/projects';
 
 const ProjectCreate = React.lazy(() => import('../components/projectCreate/index'));
 
@@ -163,39 +163,35 @@ export const MoreFilters = () => {
 export const ProjectDetailPage = () => {
   const { id } = useParams();
   const navigate = useNavigate();
-  const [error, loading, data] = useFetch(`projects/${id}/`, id);
+  const { data: project, status, error } = useProjectQuery(id);
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [id]);
 
-  return (
+  return status === 'loading' ? (
     <ReactPlaceholder
       showLoadingAnimation={true}
       customPlaceholder={<ProjectDetailPlaceholder />}
-      delay={1000}
-      ready={loading === false}
-    >
-      {!error && (
-        <ProjectDetail
-          project={data}
-          projectLoading={loading}
-          tasksError={error}
-          tasks={data.tasks}
-          navigate={navigate}
-          type="detail"
-        />
-      )}
-      {error && (
-        <>
-          {error.message === 'PrivateProject' ? (
-            <PrivateProjectError />
-          ) : (
-            <NotFound projectId={id} />
-          )}
-        </>
+      ready={false}
+    />
+  ) : status === 'error' ? (
+    <>
+      {error.response.data.SubCode === 'PrivateProject' ? (
+        <PrivateProjectError />
+      ) : (
+        <NotFound projectId={id} />
       )}
-    </ReactPlaceholder>
+    </>
+  ) : (
+    <ProjectDetail
+      project={project.data}
+      projectLoading={false}
+      tasksError={false}
+      tasks={project.data.tasks}
+      navigate={navigate}
+      type="detail"
+    />
   );
 };
 

diff --git a/frontend/src/views/tests/project.test.js b/frontend/src/views/tests/project.test.js
@@ -226,9 +226,11 @@ describe('Project Detail Page', () => {
       store.dispatch({ type: 'SET_LOCALE', locale: 'es-AR' });
     });
     renderWithRouter(
-      <ReduxIntlProviders>
-        <ProjectDetailPage id={123} navigate={() => jest.fn()} />
-      </ReduxIntlProviders>,
+      <QueryClientProviders>
+        <ReduxIntlProviders>
+          <ProjectDetailPage />
+        </ReduxIntlProviders>
+      </QueryClientProviders>,
     );
     await waitFor(() => {
       expect(screen.getByText(/sample project/i)).toBeInTheDocument();
@@ -244,9 +246,11 @@ describe('Project Detail Page', () => {
           <Route
             path="projects/:id"
             element={
-              <ReduxIntlProviders>
-                <ProjectDetailPage id={123} navigate={() => jest.fn()} />
-              </ReduxIntlProviders>
+              <QueryClientProviders>
+                <ReduxIntlProviders>
+                  <ProjectDetailPage />
+                </ReduxIntlProviders>
+              </QueryClientProviders>
             }
           />
         </Routes>
@@ -268,9 +272,11 @@ describe('Project Detail Page', () => {
           <Route
             path="projects/:id"
             element={
-              <ReduxIntlProviders>
-                <ProjectDetailPage id={123} navigate={() => jest.fn()} />
-              </ReduxIntlProviders>
+              <QueryClientProviders>
+                <ReduxIntlProviders>
+                  <ProjectDetailPage />
+                </ReduxIntlProviders>
+              </QueryClientProviders>
             }
           />
         </Routes>