From 3f3a7d06f4563ea31b71920e51f403b544b60587 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Mon, 7 Aug 2023 13:01:11 +0200
Subject: [PATCH] download project: fixes loop dependency

---
 .../projects/show/status/actions/done.tsx     | 81 +++++++------------
 app/layout/projects/show/status/component.tsx |  3 +-
 2 files changed, 33 insertions(+), 51 deletions(-)

diff --git a/app/layout/projects/show/status/actions/done.tsx b/app/layout/projects/show/status/actions/done.tsx
index 84892534c8..40712a1334 100644
--- a/app/layout/projects/show/status/actions/done.tsx
+++ b/app/layout/projects/show/status/actions/done.tsx
@@ -1,45 +1,29 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, MutableRefObject } from 'react';
 
 import { useQueryClient } from 'react-query';
 
 import { useRouter } from 'next/router';
 
-// import { ScenarioSidebarTabs } from 'utils/tabs';
-// import { mergeScenarioStatusMetaData } from 'utils/utils-scenarios';
-
 import { useSaveProject } from 'hooks/projects';
-// import { useScenarios, useSaveScenario } from 'hooks/scenarios';
 import { useToasts } from 'hooks/toast';
 
+import { Job } from 'types/api/job';
+
 export const useProjectActionsDone = () => {
   const { query } = useRouter();
-  const { pid } = query;
-
+  const { pid } = query as { pid: string };
   const queryClient = useQueryClient();
-
   const { addToast } = useToasts();
 
-  // const { data: scenariosData } = useScenarios(pid, {
-  //   filters: {
-  //     projectId: pid,
-  //   },
-  // });
-
-  // const scenarioMutation = useSaveScenario({
-  //   requestConfig: {
-  //     method: 'PATCH',
-  //   },
-  // });
-
-  const projectMutation = useSaveProject({
+  const { mutate } = useSaveProject({
     requestConfig: {
       method: 'PATCH',
     },
   });
 
   const onDone = useCallback(
-    (JOB_REF) => {
-      projectMutation.mutate(
+    (JOB_REF: MutableRefObject<Job>) => {
+      mutate(
         {
           id: `${pid}`,
           data: {
@@ -66,12 +50,12 @@ export const useProjectActionsDone = () => {
         }
       );
     },
-    [pid, projectMutation, addToast]
+    [pid, mutate, addToast]
   );
 
   const onCloneImportDone = useCallback(
-    (JOB_REF) => {
-      projectMutation.mutate(
+    (JOB_REF: MutableRefObject<Job>) => {
+      mutate(
         {
           id: `${pid}`,
           data: {
@@ -81,10 +65,10 @@ export const useProjectActionsDone = () => {
           },
         },
         {
-          onSuccess: () => {
+          onSuccess: async () => {
             JOB_REF.current = null;
-            queryClient.invalidateQueries('projects');
-            queryClient.invalidateQueries(['scenarios', pid]);
+            await queryClient.invalidateQueries('projects');
+            await queryClient.invalidateQueries(['scenarios', pid]);
           },
           onError: () => {
             addToast(
@@ -100,12 +84,12 @@ export const useProjectActionsDone = () => {
         }
       );
     },
-    [pid, projectMutation, addToast, queryClient]
+    [pid, mutate, addToast, queryClient]
   );
 
   const onLegacyImportDone = useCallback(
-    (JOB_REF) => {
-      projectMutation.mutate(
+    (JOB_REF: MutableRefObject<Job>) => {
+      mutate(
         {
           id: `${pid}`,
           data: {
@@ -115,10 +99,10 @@ export const useProjectActionsDone = () => {
           },
         },
         {
-          onSuccess: () => {
+          onSuccess: async () => {
             JOB_REF.current = null;
-            queryClient.invalidateQueries('projects');
-            queryClient.invalidateQueries(['scenarios', pid]);
+            await queryClient.invalidateQueries('projects');
+            await queryClient.invalidateQueries(['scenarios', pid]);
           },
           onError: () => {
             addToast(
@@ -134,21 +118,18 @@ export const useProjectActionsDone = () => {
         }
       );
     },
-    [
-      pid,
-      projectMutation,
-      addToast,
-      queryClient,
-      // scenariosData,
-    ]
+    [pid, mutate, addToast, queryClient]
   );
 
-  return {
-    default: onDone,
-    planningUnits: onDone,
-    export: onDone,
-    import: onCloneImportDone,
-    clone: onCloneImportDone,
-    legacy: onLegacyImportDone,
-  };
+  return useMemo(
+    () => ({
+      default: onDone,
+      planningUnits: onDone,
+      export: onDone,
+      import: onCloneImportDone,
+      clone: onCloneImportDone,
+      legacy: onLegacyImportDone,
+    }),
+    [onDone, onCloneImportDone, onLegacyImportDone]
+  );
 };
diff --git a/app/layout/projects/show/status/component.tsx b/app/layout/projects/show/status/component.tsx
index 660e854084..b49c4608f7 100644
--- a/app/layout/projects/show/status/component.tsx
+++ b/app/layout/projects/show/status/component.tsx
@@ -9,6 +9,7 @@ import { useScenariosStatus } from 'hooks/scenarios';
 
 import Button from 'components/button';
 import Icon from 'components/icon';
+import { Job } from 'types/api/job';
 
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 import PROCESSING_SVG from 'svgs/ui/processing.svg?sprite';
@@ -44,7 +45,7 @@ export const ProjectStatus: React.FC<ProjectStatusProps> = () => {
   const TEXT_FAILURE = useProjectTextFailure(JOB_FAILURE);
 
   // Done
-  const JOB_DONE_REF = useRef(null);
+  const JOB_DONE_REF = useRef<Job>(null);
   const JOB_DONE = useProjectJobDone(JOBS, new Date(projectData?.lastModifiedAt).getTime());
   const TEXT_DONE = useProjectTextDone(JOB_DONE, JOB_DONE_REF);