feat(front): duplicate projects and scenarios [MARXAN-599]

app/hooks/projects/index.ts

@@ -24,6 +24,8 @@ import {
   UseUploadProjectPAProps,
   UploadProjectPAProps,
   UsePublishedProjectsProps,
+  UseDuplicateProjectProps,
+  DuplicateProjectProps,
 } from './types';
 
 export function useProjects(options: UseProjectsOptionsProps): UseProjectsResponse {
@@ -365,3 +367,36 @@ export function usePublishedProject(id) {
     };
   }, [query, data?.data]);
 }
+
+export function useDuplicateProject({
+  requestConfig = {
+    method: 'POST',
+  },
+}: UseDuplicateProjectProps) {
+  const queryClient = useQueryClient();
+  const [session] = useSession();
+
+  const duplicateProject = ({ id }: DuplicateProjectProps) => {
+    return PROJECTS.request({
+      // Pending endpoint
+      url: `/${id}`,
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+      ...requestConfig,
+    });
+  };
+
+  return useMutation(duplicateProject, {
+    onSuccess: (data: any, variables, context) => {
+      const { id } = data;
+      queryClient.invalidateQueries('projects');
+      queryClient.invalidateQueries(['projects', id]);
+      console.info('Succces', data, variables, context);
+    },
+    onError: (error, variables, context) => {
+      // An error happened!
+      console.info('Error', error, variables, context);
+    },
+  });
+}

app/hooks/projects/types.ts

@@ -44,3 +44,12 @@ export interface UsePublishedProjectsProps {
   sort?: string,
   filters?: Record<string, unknown>
 }
+
+// useDuplicateProject
+export interface UseDuplicateProjectProps {
+  requestConfig?: AxiosRequestConfig;
+}
+
+export interface DuplicateProjectProps {
+  id: string | string[];
+}

app/hooks/scenarios/index.ts

@@ -29,6 +29,8 @@ import {
   UploadScenarioPUProps,
   UseSaveScenarioPUProps,
   SaveScenarioPUProps,
+  UseDuplicateScenarioProps,
+  DuplicateScenarioProps,
 } from './types';
 
 export function useScenarios(pId, options: UseScenariosOptionsProps = {}) {
@@ -355,3 +357,36 @@ export function useSaveScenarioPU({
     },
   });
 }
+
+export function useDuplicateScenario({
+  requestConfig = {
+    method: 'POST',
+  },
+}: UseDuplicateScenarioProps) {
+  const queryClient = useQueryClient();
+  const [session] = useSession();
+
+  const duplicateScenario = ({ id }: DuplicateScenarioProps) => {
+    // Pending endpoint
+    return SCENARIOS.request({
+      url: `/${id}`,
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+      ...requestConfig,
+    });
+  };
+
+  return useMutation(duplicateScenario, {
+    onSuccess: (data: any, variables, context) => {
+      const { id, projectId } = data;
+      queryClient.invalidateQueries(['scenarios', projectId]);
+      queryClient.invalidateQueries(['scenarios', id]);
+      console.info('Succces', data, variables, context);
+    },
+    onError: (error, variables, context) => {
+      // An error happened!
+      console.info('Error', error, variables, context);
+    },
+  });
+}

app/hooks/scenarios/types.ts

@@ -56,3 +56,12 @@ export interface SaveScenarioPUProps {
   id?: string,
   data: any
 }
+
+// useDuplicateScenario
+export interface UseDuplicateScenarioProps {
+  requestConfig?: AxiosRequestConfig
+}
+
+export interface DuplicateScenarioProps {
+  id: string | string[];
+}

app/layout/community/published-projects/detail/component.tsx

@@ -23,6 +23,7 @@ export interface CommunityProjectsDetailProps {
 export const CommunityProjectsDetail: React.FC<CommunityProjectsDetailProps> = () => {
   const { query } = useRouter();
   const { pid } = query;
+
   const {
     data: publishedProject,
     isFetching: publishedProjectIsFetching,
@@ -78,10 +79,12 @@ export const CommunityProjectsDetail: React.FC<CommunityProjectsDetailProps> = (
                 </p>
 
                 <div className="flex flex-row items-center mb-10">
+
                   <DuplicateButton
                     id={id}
                     name={name}
                   />
+
                   {timesDuplicated && (
                     <p className="ml-5 text-sm text-white">
                       Duplicated

app/layout/community/published-projects/duplicate-button/component.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
+import { useDuplicateProject } from 'hooks/projects';
 import { useToasts } from 'hooks/toast';
 
 import Button from 'components/button';
@@ -18,32 +19,62 @@ export const DuplicateButton: React.FC<DuplicateButtonProps> = ({
 }: DuplicateButtonProps) => {
   const { addToast } = useToasts();
 
-  const handleDuplicated = () => {
-    addToast(`success-project-duplicated-${id}`, (
-      <>
-        <h2 className="font-medium">Success!</h2>
-        <p className="text-sm">
-          Project
-          {' '}
-          {name}
-          {' '}
-          duplicated
-        </p>
-      </>
-    ), {
-      level: 'success',
+  const duplicateProjectMutation = useDuplicateProject({
+    requestConfig: {
+      method: 'POST',
+    },
+  });
+
+  const onDuplicate = useCallback(() => {
+    // Name must be the new one defined by the user
+    duplicateProjectMutation.mutate({ id }, {
+      onSuccess: ({ data: { data: s } }) => {
+        addToast('success-duplicate-project', (
+          <>
+            <h2 className="font-medium">Success!</h2>
+            <p className="text-sm">
+              Project
+              {' '}
+              {name}
+              {' '}
+              duplicated
+            </p>
+          </>
+        ), {
+          level: 'success',
+        });
+
+        console.info('Project duplicated succesfully', s);
+      },
+      onError: () => {
+        addToast('error-duplicate-project', (
+          <>
+            <h2 className="font-medium">Error!</h2>
+            <p className="text-sm">
+              Project
+              {' '}
+              {name}
+              {' '}
+              not duplicated
+            </p>
+          </>
+        ), {
+          level: 'error',
+        });
+
+        console.error('Project not duplicated');
+      },
     });
-  };
+  }, [id, addToast, duplicateProjectMutation, name]);
 
   return (
     <Button
       className="px-6 group"
-      onClick={handleDuplicated}
       size="s"
       theme="transparent-white"
+      onClick={onDuplicate}
     >
       Duplicate
-
       <Icon
         className="w-3.5 h-3.5 ml-2 text-white group-hover:text-black"
         icon={DOWNLOAD_SVG}

app/layout/projects/all/list/component.tsx

@@ -10,7 +10,7 @@ import Loading from 'components/loading';
 import ConfirmationPrompt from 'components/confirmation-prompt';
 import Item from 'components/projects/item';
 
-import { useProjects, useDeleteProject } from 'hooks/projects';
+import { useProjects, useDeleteProject, useDuplicateProject } from 'hooks/projects';
 import { useToasts } from 'hooks/toast';
 
 import DELETE_WARNING_SVG from 'svgs/notifications/delete-warning.svg?sprite';
@@ -61,6 +61,53 @@ export const ProjectsList: React.FC<ProjectsListProps> = () => {
     });
   }, [deleteProject, deleteMutation, addToast]);
 
+  const duplicateProjectMutation = useDuplicateProject({
+    requestConfig: {
+      method: 'POST',
+    },
+  });
+
+  const onDuplicate = useCallback((projectId, projectName) => {
+    duplicateProjectMutation.mutate({ id: projectId }, {
+      onSuccess: ({ data: { data: s } }) => {
+        addToast('success-duplicate-project', (
+          <>
+            <h2 className="font-medium">Success!</h2>
+            <p className="text-sm">
+              Project
+              {' '}
+              {projectName}
+              {' '}
+              duplicated
+            </p>
+          </>
+        ), {
+          level: 'success',
+        });
+
+        console.info('Project duplicated succesfully', s);
+      },
+      onError: () => {
+        addToast('error-duplicate-project', (
+          <>
+            <h2 className="font-medium">Error!</h2>
+            <p className="text-sm">
+              Project
+              {' '}
+              {projectName}
+              {' '}
+              not duplicated
+            </p>
+          </>
+        ), {
+          level: 'error',
+        });
+
+        console.error('Project not duplicated');
+      },
+    });
+  }, [addToast, duplicateProjectMutation]);
+
   return (
     <Wrapper>
       <div className="relative pb-10">
@@ -97,6 +144,7 @@ export const ProjectsList: React.FC<ProjectsListProps> = () => {
                     onDelete={() => {
                       setDelete(d);
                     }}
+                    onDuplicate={() => onDuplicate(d.id, d.name)}
                   />
                 );
               })}

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

@@ -5,7 +5,9 @@ import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import { useProject } from 'hooks/projects';
 import { useRouter } from 'next/router';
-import { useDeleteScenario, useScenarios, useScenariosStatus } from 'hooks/scenarios';
+import {
+  useDeleteScenario, useScenarios, useScenariosStatus, useDuplicateScenario,
+} from 'hooks/scenarios';
 import { useToasts } from 'hooks/toast';
 import useBottomScrollListener from 'hooks/scroll';
 
@@ -123,6 +125,53 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
     });
   }, [deleteScenario, deleteMutation, queryClient, pid, addToast]);
 
+  const duplicateScenarioMutation = useDuplicateScenario({
+    requestConfig: {
+      method: 'POST',
+    },
+  });
+
+  const onDuplicate = useCallback((scenarioId, scenarioName) => {
+    duplicateScenarioMutation.mutate({ id: scenarioId }, {
+      onSuccess: ({ data: { data: s } }) => {
+        addToast('success-duplicate-project', (
+          <>
+            <h2 className="font-medium">Success!</h2>
+            <p className="text-sm">
+              Scenario
+              {' '}
+              {scenarioName}
+              {' '}
+              duplicated
+            </p>
+          </>
+        ), {
+          level: 'success',
+        });
+
+        console.info('Scenario duplicated succesfully', s);
+      },
+      onError: () => {
+        addToast('error-duplicate-scenario', (
+          <>
+            <h2 className="font-medium">Error!</h2>
+            <p className="text-sm">
+              Scenario
+              {' '}
+              {scenarioName}
+              {' '}
+              not duplicated
+            </p>
+          </>
+        ), {
+          level: 'error',
+        });
+
+        console.error('Scenario not duplicated');
+      },
+    });
+  }, [addToast, duplicateScenarioMutation]);
+
   return (
     <AnimatePresence>
       <div key="project-scenarios-sidebar" className="flex flex-col flex-grow col-span-7 overflow-hidden">
@@ -202,14 +251,17 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
                           'mt-3': i !== 0,
                         })}
                       >
+
                         <ScenarioItem
                           {...s}
                           status="draft"
                           onDelete={() => {
                             setDelete(s);
                           }}
+                          onDuplicate={() => onDuplicate(s.id, s.name)}
                           SettingsC={<ScenarioSettings sid={s.id} />}
                         />
+
                       </div>
                     </TAG>
                   );