From 3e92fe93abe5881be18827b4df0e733b7b6f8df0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?= Date: Wed, 17 Apr 2024 09:31:39 +0200 Subject: [PATCH] blocks UI while shapefile/CSV imports are running --- app/hooks/features/index.ts | 32 ++++++++++++++----- .../features/modals/upload/index.tsx | 29 +++++++++++++++-- .../projects/show/status/actions/done.tsx | 9 +++--- app/layout/projects/show/status/component.tsx | 6 +--- app/types/api/project.ts | 1 + 5 files changed, 56 insertions(+), 21 deletions(-) diff --git a/app/hooks/features/index.ts b/app/hooks/features/index.ts index b5e2b6cd62..e03d8b3284 100644 --- 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 index 01fd3a8519..a97474cb89 100644 --- 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 index 42258705c2..e470a5269e 100644 --- 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) => { mutate( { @@ -162,7 +162,7 @@ export const useProjectActionsDone = () => { }, onError: () => { addToast( - 'onFeatureImportDone', + 'onFeaturesImportDone', <>

Error during importation

@@ -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 index 73a65f0c63..ce318fcee4 100644 --- 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(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 index 925ca61649..80b0501421 100644 --- 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; }; }