Merge pull request #1628 from Vizzuality/MRXN23-538-minor-when-a-cost…

…-surface

[MRXN23-538] fixes error callbacks condition for project statuses

app/layout/projects/show/status/actions/failure.tsx

@@ -1,34 +1,41 @@
 import React, { useCallback } from 'react';
 
+import { useQueryClient } from 'react-query';
+
 import { useRouter } from 'next/router';
 
 import { useSaveProject } from 'hooks/projects';
 import { useToasts } from 'hooks/toast';
 
 export const useProjectActionsFailure = () => {
   const { query } = useRouter();
-  const { pid } = query;
+  const { pid } = query as { pid: string };
+  const queryClient = useQueryClient();
 
   const projectMutation = useSaveProject({
     requestConfig: {
       method: 'PATCH',
     },
   });
 
+  const onSuccess = useCallback(async () => {
+    await queryClient.invalidateQueries(['project', pid]);
+  }, [queryClient, pid]);
+
   const { addToast } = useToasts();
 
   const onFailure = useCallback(() => {
     projectMutation.mutate(
       {
-        id: `${pid}`,
+        id: pid,
         data: {
           metadata: {
             cache: new Date().getTime(),
           },
         },
       },
       {
-        onSuccess: () => {},
+        onSuccess,
         onError: () => {
           addToast(
             'onFailure',
@@ -42,20 +49,20 @@ export const useProjectActionsFailure = () => {
         },
       }
     );
-  }, [pid, projectMutation, addToast]);
+  }, [pid, projectMutation, addToast, onSuccess]);
 
   const onFailureDownloadProject = useCallback(() => {
     projectMutation.mutate(
       {
-        id: `${pid}`,
+        id: pid,
         data: {
           metadata: {
             cache: new Date().getTime(),
           },
         },
       },
       {
-        onSuccess: () => {},
+        onSuccess,
         onError: () => {
           addToast(
             'onFailureDownloadProject',
@@ -69,11 +76,39 @@ export const useProjectActionsFailure = () => {
         },
       }
     );
-  }, [pid, projectMutation, addToast]);
+  }, [pid, projectMutation, addToast, onSuccess]);
+
+  const onFailureCostSurface = useCallback(() => {
+    projectMutation.mutate(
+      {
+        id: pid,
+        data: {
+          metadata: {
+            cache: new Date().getTime(),
+          },
+        },
+      },
+      {
+        onSuccess,
+        onError: () => {
+          addToast(
+            'onFailureCostSurface',
+            <>
+              <h2 className="font-medium">There was an error processing the cost surface.</h2>
+            </>,
+            {
+              level: 'error',
+            }
+          );
+        },
+      }
+    );
+  }, [pid, projectMutation, addToast, onSuccess]);
 
   return {
     default: onFailure,
     planningUnits: onFailure,
     export: onFailureDownloadProject,
+    costSurface: onFailureCostSurface,
   };
 };

app/layout/projects/show/status/component.tsx

@@ -39,7 +39,7 @@ export const ProjectStatus = (): JSX.Element => {
   const JOBS = useProjectJobs(jobs);
 
   // Failure
-  const JOB_FAILURE = useProjectJobFailure(JOBS, new Date(projectData?.lastModifiedAt).getTime());
+  const JOB_FAILURE = useProjectJobFailure(JOBS, projectData?.metadata?.cache);
   const TEXT_FAILURE = useProjectTextFailure(JOB_FAILURE);
 
   // Done

app/layout/projects/show/status/utils.tsx

@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
+import { MutableRefObject, useMemo } from 'react';
 
 import groupBy from 'lodash/groupBy';
 
 import { Job } from 'types/api/job';
 
 import { TEXTS_FAILURE, TEXTS_RUNNING } from './constants';
 
-const getStatus = (arr) => {
+const getStatus = (arr: Job[]): Job['status'] => {
   if (arr.some((d) => d.status === 'failure')) return 'failure';
   if (arr.some((d) => d.status === 'running')) return 'running';
   return 'done';
@@ -45,7 +45,7 @@ export const useProjectJobs = (jobs): Job[] => {
   }, [jobs]);
 };
 
-export const useProjectJobFailure = (jobs, lastJobCheck) => {
+export const useProjectJobFailure = (jobs: Job[], lastJobCheck: number) => {
   return useMemo(() => {
     return jobs.find((j) => {
       const jobTimestamp = new Date(j.isoDate).getTime();
@@ -54,7 +54,7 @@ export const useProjectJobFailure = (jobs, lastJobCheck) => {
   }, [jobs, lastJobCheck]);
 };
 
-export const useProjectTextFailure = (JOB_FAILURE) => {
+export const useProjectTextFailure = (JOB_FAILURE: Job) => {
   return useMemo(() => {
     if (JOB_FAILURE && TEXTS_FAILURE[JOB_FAILURE.kind]) {
       return TEXTS_FAILURE[JOB_FAILURE.kind]();
@@ -77,13 +77,13 @@ export const useProjectJobDone = (jobs: Job[], lastJobCheck: number) => {
   }, [jobs, lastJobCheck]);
 };
 
-export const useProjectJobRunning = (jobs, JOB_FAILURE) => {
+export const useProjectJobRunning = (jobs: Job[], JOB_FAILURE: Job) => {
   return useMemo(() => {
     return !JOB_FAILURE && jobs.find((j) => j.status === 'running');
   }, [jobs, JOB_FAILURE]);
 };
 
-export const useProjectTextRunning = (JOB_RUNNING, JOB_DONE_REF) => {
+export const useProjectTextRunning = (JOB_RUNNING: Job, JOB_DONE_REF: MutableRefObject<Job>) => {
   return useMemo(() => {
     if (JOB_RUNNING && TEXTS_RUNNING[JOB_RUNNING.kind]) {
       return TEXTS_RUNNING[JOB_RUNNING.kind || JOB_DONE_REF?.current?.kind]();

app/types/api/project.ts

@@ -23,6 +23,7 @@ export interface Project {
   planningAreaName?: string;
   metadata?: {
     [key: string]: unknown;
+    cache: number;
   };
 }