blocks UI while shapefile/CSV imports are running

Vizzuality · Apr 18, 2024 · b021796 · b021796
1 parent 1b4df64
commit b021796
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 21 deletions.
diff --git a/app/hooks/features/index.ts b/app/hooks/features/index.ts
@@ -13,6 +13,7 @@ import partition from 'lodash/partition';
 import { useSession } from 'next-auth/react';
 
 import { COLORS } from 'hooks/map/constants';
+import { useSaveProject } from 'hooks/projects';
 
 import { ItemProps as IntersectItemProps } from 'components/features/intersect-item/component';
 import { ItemProps as RawItemProps } from 'components/features/raw-item/component';
@@ -602,12 +603,7 @@ export function useUploadFeaturesShapefile({
     } as typeof requestConfig);
   };
 
-  return useMutation(uploadFeatureShapefile, {
-    onSuccess: async (data, variables) => {
-      const { id: projectId } = variables;
-      await queryClient.invalidateQueries(['all-features', projectId]);
-    },
-  });
+  return useMutation(uploadFeatureShapefile);
 }
 
 export function useUploadFeaturesCSV({
@@ -620,6 +616,12 @@ export function useUploadFeaturesCSV({
   const queryClient = useQueryClient();
   const { data: session } = useSession();
 
+  const { mutate } = useSaveProject({
+    requestConfig: {
+      method: 'PATCH',
+    },
+  });
+
   const uploadFeatureCSV = ({ id, data }: { id: Project['id']; data: FormData }) => {
     return UPLOADS.request<{ success: true }>({
       url: `/projects/${id}/features/csv`,
@@ -633,9 +635,23 @@ export function useUploadFeaturesCSV({
   };
 
   return useMutation(uploadFeatureCSV, {
-    onSuccess: async (data, variables) => {
+    onSuccess: (data, variables) => {
       const { id: projectId } = variables;
-      await queryClient.invalidateQueries(['all-features', projectId]);
+      mutate(
+        {
+          id: projectId,
+          data: {
+            metadata: {
+              lastJobCheck: new Date().getTime(),
+            },
+          },
+        },
+        {
+          onSuccess: async () => {
+            await queryClient.invalidateQueries(['project', projectId]);
+          },
+        }
+      );
     },
   });
 }

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
@@ -17,7 +17,7 @@ import { AxiosError, isAxiosError } from 'axios';
 import { motion } from 'framer-motion';
 
 import { useUploadFeaturesCSV, useUploadFeaturesShapefile } from 'hooks/features';
-import { useDownloadShapefileTemplate } from 'hooks/projects';
+import { useDownloadShapefileTemplate, useSaveProject } from 'hooks/projects';
 import { useProjectTags } from 'hooks/projects';
 import { useToasts } from 'hooks/toast';
 
@@ -72,6 +72,12 @@ export const FeatureUploadModal = ({
 
   const tagsQuery = useProjectTags(pid);
 
+  const { mutate: mutateProject } = useSaveProject({
+    requestConfig: {
+      method: 'PATCH',
+    },
+  });
+
   const uploadFeaturesShapefileMutation = useUploadFeaturesShapefile({
     requestConfig: {
       method: 'POST',
@@ -211,11 +217,26 @@ export const FeatureUploadModal = ({
       };
 
       if (uploadMode === 'shapefile') {
-        uploadFeaturesShapefileMutation.mutate({ data, id: `${pid}` }, mutationResponse);
+        mutateProject(
+          {
+            id: pid,
+            data: {
+              metadata: {
+                lastJobCheck: new Date().getTime(),
+              },
+            },
+          },
+          {
+            onSuccess: async () => {
+              await queryClient.invalidateQueries(['project', pid]);
+              uploadFeaturesShapefileMutation.mutate({ data, id: pid }, mutationResponse);
+            },
+          }
+        );
       }
 
       if (uploadMode === 'csv') {
-        uploadFeaturesCSVMutation.mutate({ data, id: `${pid}` }, mutationResponse);
+        uploadFeaturesCSVMutation.mutate({ data, id: pid }, mutationResponse);
       }
     },
     [
@@ -226,6 +247,8 @@ export const FeatureUploadModal = ({
       uploadFeaturesShapefileMutation,
       uploadFeaturesCSVMutation,
       successFile,
+      queryClient,
+      mutateProject,
     ]
   );
 

diff --git a/app/layout/projects/show/status/actions/done.tsx b/app/layout/projects/show/status/actions/done.tsx
@@ -144,7 +144,7 @@ export const useProjectActionsDone = () => {
     [queryClient, pid, mutate]
   );
 
-  const onFeatureImportDone = useCallback(
+  const onFeaturesImportDone = useCallback(
     (JOB_REF: MutableRefObject<Job>) => {
       mutate(
         {
@@ -162,7 +162,7 @@ export const useProjectActionsDone = () => {
           },
           onError: () => {
             addToast(
-              'onFeatureImportDone',
+              'onFeaturesImportDone',
               <>
                 <h2 className="font-medium">Error during importation</h2>
                 <p className="text-sm">
@@ -189,9 +189,8 @@ export const useProjectActionsDone = () => {
       clone: onCloneImportDone,
       legacy: onLegacyImportDone,
       costSurface: onCostSurfaceUpload,
-      'features.csv.import': onFeatureImportDone,
-      'features.shapefile.import': onFeatureImportDone,
+      features: onFeaturesImportDone,
     }),
-    [onDone, onCloneImportDone, onLegacyImportDone, onCostSurfaceUpload, onFeatureImportDone]
+    [onDone, onCloneImportDone, onLegacyImportDone, onCostSurfaceUpload, onFeaturesImportDone]
   );
 };
diff --git a/app/layout/projects/show/status/component.tsx b/app/layout/projects/show/status/component.tsx
@@ -44,11 +44,7 @@ export const ProjectStatus = (): JSX.Element => {
 
   // Done
   const JOB_DONE_REF = useRef<Job>(null);
-  const JOB_DONE = useProjectJobDone(
-    JOBS,
-    new Date(projectData?.metadata?.cache as number).getTime()
-  );
-
+  const JOB_DONE = useProjectJobDone(JOBS, new Date(projectData?.metadata?.lastJobCheck).getTime());
   // Running
   const JOB_RUNNING = useProjectJobRunning(JOBS, JOB_FAILURE);
   const TEXT_RUNNING = useProjectTextRunning(JOB_RUNNING, JOB_DONE_REF);

diff --git a/app/types/api/project.ts b/app/types/api/project.ts
@@ -24,6 +24,7 @@ export interface Project {
   metadata?: {
     [key: string]: unknown;
     cache: number;
+    lastJobCheck: number;
   };
 }