Use graphql mutation to clone analytical framework

the-deep · May 17, 2024 · ffdf3fe · ffdf3fe
1 parent 4643781
commit ffdf3fe
Showing 1 changed file with 81 additions and 40 deletions.
diff --git a/app/views/ProjectEdit/Framework/CloneFrameworkModal/index.tsx b/app/views/ProjectEdit/Framework/CloneFrameworkModal/index.tsx
@@ -1,8 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
     _cs,
     isDefined,
 } from '@togglecorp/fujs';
+import { useMutation, gql } from '@apollo/client';
 import {
     Modal,
     useAlert,
@@ -20,21 +21,38 @@ import {
     createSubmitHandler,
 } from '@togglecorp/toggle-form';
 
-import { useLazyRequest } from '#base/utils/restRequest';
+import {
+    CloneFrameworkMutation,
+    CloneFrameworkMutationVariables,
+} from '#generated/types';
 import _ts from '#ts';
 
 import styles from './styles.css';
 
-type FormType = {
-    title: string;
-    description?: string;
-};
+const CLONE_FRAMEWORK = gql`
+    mutation CloneFramework (
+        $id: ID!,
+        $data: AnalysisFrameworkCloneInputType!,
+    ) {
+        analysisFramework(id: $id){
+            analysisFrameworkClone(
+            data: $data
+            ) {
+                errors
+                ok
+                result {
+                    id
+                    title
+                }
+            }
+        }
+    }
+`;
 
-interface Framework {
-    id: number;
-}
+type FormType = NonNullable<CloneFrameworkMutationVariables['data']>;
+type PartialFormType = Partial<FormType>;
 
-type FormSchema = ObjectSchema<PartialForm<FormType>>;
+type FormSchema = ObjectSchema<PartialForm<PartialFormType>>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>
 
 const schema: FormSchema = {
@@ -44,12 +62,7 @@ const schema: FormSchema = {
     }),
 };
 
-const defaultFormValue: PartialForm<FormType> = {};
-
-interface ValueToSend {
-    title: string;
-    description?: string;
-}
+const defaultFormValue: PartialFormType = {};
 
 interface Props {
     className?: string;
@@ -70,10 +83,12 @@ function CloneFrameworkModal(props: Props) {
         onModalClose,
     } = props;
 
-    const formValueFromProps: PartialForm<FormType> = frameworkTitle ? {
-        title: `${frameworkTitle} (cloned)`,
-        description: frameworkDescription,
-    } : defaultFormValue;
+    const formValueFromProps: PartialFormType = useMemo(() => (
+        frameworkTitle ? {
+            title: `${frameworkTitle} (cloned)`,
+            description: frameworkDescription,
+        } : defaultFormValue
+    ), [frameworkDescription, frameworkTitle]);
 
     const {
         pristine,
@@ -87,36 +102,62 @@ function CloneFrameworkModal(props: Props) {
 
     const error = getErrorObject(riskyError);
 
-    const {
-        pending: pendingCloneAction,
-        trigger: triggerCreateFramework,
-    } = useLazyRequest<Framework, ValueToSend>({
-        url: `server://clone-analysis-framework/${frameworkToClone}/`,
-        method: 'POST',
-        body: (ctx) => ctx,
-        onSuccess: (response) => {
-            onCloneSuccess(String(response.id));
-            alert.show(
-                _ts('projectEdit', 'cloneFrameworkSuccessMessage'),
-                { variant: 'success' },
-            );
+    const [
+        cloneFramework,
+        { loading: cloneFrameworkPending },
+    ] = useMutation<CloneFrameworkMutation, CloneFrameworkMutationVariables>(
+        CLONE_FRAMEWORK,
+        {
+            onCompleted: (response) => {
+                const cloneFrameworkResponse = response
+                    ?.analysisFramework?.analysisFrameworkClone;
+                if (!cloneFrameworkResponse?.result) {
+                    return;
+                }
+                if (cloneFrameworkResponse?.ok) {
+                    alert.show(
+                        'Successfully cloned framework.',
+                        { variant: 'success' },
+                    );
+                    onCloneSuccess(cloneFrameworkResponse?.result?.id);
+                } else {
+                    alert.show(
+                        'Failed to clone framework.',
+                        { variant: 'error' },
+                    );
+                }
+            },
+            onError: () => {
+                alert.show(
+                    'Failed to clone framework',
+                    { variant: 'error' },
+                );
+            },
         },
-        failureMessage: _ts('projectEdit', 'projectMembershipPostFailed'),
-    });
-
+    );
     const handleSubmit = useCallback(
         () => {
             const submit = createSubmitHandler(
                 validate,
                 setError,
-                (val) => triggerCreateFramework(val as ValueToSend),
+                (val) => cloneFramework({
+                    variables: {
+                        id: frameworkToClone,
+                        data: val as FormType,
+                    },
+                }),
             );
             submit();
         },
-        [setError, validate, triggerCreateFramework],
+        [
+            setError,
+            validate,
+            cloneFramework,
+            frameworkToClone,
+        ],
     );
 
-    const pendingRequests = pendingCloneAction;
+    const pendingRequests = cloneFrameworkPending;
 
     return (
         <Modal
@@ -135,7 +176,7 @@ function CloneFrameworkModal(props: Props) {
                     name="submit"
                     variant="primary"
                     type="submit"
-                    disabled={pristine || pendingCloneAction}
+                    disabled={pristine || cloneFrameworkPending}
                     onClick={handleSubmit}
                 >
                     {_ts('projectEdit', 'submitLabel')}