chore(CreateFullPage): use new custom hook (#1164)

* chore(CreateFullPage): add new custom hook * fix(CreateFullPage): fix path to hook * fix(CreateFullPage): import hook from index Co-authored-by: Matt Gallo <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 18, 2021 · b716393 · b716393
1 parent b0479c6
commit b716393
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 121 deletions.
diff --git a/packages/cloud-cognitive/src/components/CreateFullPage/CreateFullPage.js b/packages/cloud-cognitive/src/components/CreateFullPage/CreateFullPage.js
@@ -30,6 +30,7 @@ import {
   usePreviousValue,
   useValidCreateStepCount,
   useCreateComponentFocus,
+  useCreateComponentStepChange,
 } from '../../global/js/hooks';
 import { hasValidChildType } from '../../global/js/utils/hasValidChildType';
 
@@ -91,129 +92,25 @@ export let CreateFullPage = React.forwardRef(
       blockClass
     );
     useValidCreateStepCount(getFullPageSteps, componentName);
-
-    useEffect(() => {
-      const onUnmount = () => {
-        setIsSubmitting(false);
-        setShouldViewAll(false);
-        onClose();
-      };
-      const handleOnRequestSubmit = async () => {
-        // check if onRequestSubmit returns a promise
-        try {
-          await onRequestSubmit();
-          onUnmount();
-        } catch (error) {
-          setIsSubmitting(false);
-          console.warn(`${componentName} submit error: ${error}`);
-        }
-      };
-      const isSubmitDisabled = () => {
-        let step = 0;
-        let submitDisabled = false;
-        let viewAllSubmitDisabled = false;
-        const createFullPageSteps = getFullPageSteps();
-        createFullPageSteps.forEach((child) => {
-          step++;
-          if (currentStep === step) {
-            submitDisabled = child.props.disableSubmit;
-          }
-          if (shouldViewAll && child.props.disableSubmit) {
-            viewAllSubmitDisabled = true;
-          }
-        });
-        if (!shouldViewAll) {
-          return submitDisabled;
-        }
-        return viewAllSubmitDisabled;
-      };
-      const handleNext = async () => {
-        setIsSubmitting(true);
-        const createSteps = getFullPageSteps();
-        if (createSteps[currentStep - 1].props.onNext) {
-          try {
-            await createSteps[currentStep - 1].props.onNext();
-            continueToNextStep();
-          } catch (error) {
-            setIsSubmitting(false);
-            console.warn(`${componentName} onNext error: ${error}`);
-          }
-        } else {
-          continueToNextStep();
-        }
-      };
-      const handleSubmit = async () => {
-        setIsSubmitting(true);
-        const createSteps = getFullPageSteps();
-        // last step should have onNext as well
-        if (createSteps[currentStep - 1].props.onNext) {
-          try {
-            await createSteps[currentStep - 1].props.onNext();
-            await handleOnRequestSubmit();
-          } catch (error) {
-            setIsSubmitting(false);
-            console.warn(`${componentName} onNext error: ${error}`);
-          }
-        } else {
-          await handleOnRequestSubmit();
-        }
-      };
-      if (getFullPageSteps()?.length) {
-        const createSteps = getFullPageSteps();
-        const total = createSteps.length;
-        const buttons = [];
-        if (total > 1 && !shouldViewAll) {
-          buttons.push({
-            label: backButtonText,
-            onClick: () => setCurrentStep((prev) => prev - 1),
-            kind: 'secondary',
-            disabled: currentStep === 1,
-          });
-        }
-        buttons.push({
-          label: cancelButtonText,
-          onClick: () => {
-            setModalIsOpen(true);
-          },
-          kind: 'ghost',
-        });
-        buttons.push({
-          label: shouldViewAll
-            ? submitButtonText
-            : currentStep < total
-            ? nextButtonText
-            : submitButtonText,
-          onClick: shouldViewAll
-            ? handleSubmit
-            : currentStep < total
-            ? handleNext
-            : handleSubmit,
-          disabled: isSubmitDisabled(),
-          kind: 'primary',
-          loading: isSubmitting,
-          className: `${blockClass}__create-button`,
-        });
-        setCreateFullPageActions(buttons);
-      }
-    }, [
-      getFullPageSteps,
-      children,
+    useCreateComponentStepChange({
+      setCurrentStep,
+      setIsSubmitting,
+      setShouldViewAll,
+      onClose,
+      onRequestSubmit,
+      componentName,
+      getComponentSteps: getFullPageSteps,
+      currentStep,
+      shouldViewAll,
       backButtonText,
       cancelButtonText,
-      currentStep,
-      onClose,
-      nextButtonText,
       submitButtonText,
-      onRequestSubmit,
+      nextButtonText,
       isSubmitting,
-      modalIsOpen,
-      shouldViewAll,
-    ]);
-
-    const continueToNextStep = () => {
-      setIsSubmitting(false);
-      setCurrentStep((prev) => prev + 1);
-    };
+      componentBlockClass: blockClass,
+      setCreateComponentActions: setCreateFullPageActions,
+      setModalIsOpen,
+    });
 
     // Log a warning to the console in the event there are no CreateFullPageSection components
     // inside of the CreateFullPageSteps when the viewAll toggle is provided and turned on.

diff --git a/packages/cloud-cognitive/src/global/js/hooks/useCreateComponentStepChange.js b/packages/cloud-cognitive/src/global/js/hooks/useCreateComponentStepChange.js
@@ -24,11 +24,14 @@ export const useCreateComponentStepChange = ({
   isSubmitting,
   componentBlockClass,
   setCreateComponentActions,
+  setModalIsOpen,
 }) => {
   // useEffect to handle multi step logic
   useEffect(() => {
     const onUnmount = () => {
-      setCurrentStep(0);
+      if (componentName !== 'CreateFullPage') {
+        setCurrentStep(0);
+      }
       setIsSubmitting(false);
       setShouldViewAll(false);
       onClose();
@@ -109,7 +112,10 @@ export const useCreateComponentStepChange = ({
       buttons.push({
         key: 'create-action-button-cancel',
         label: cancelButtonText,
-        onClick: onUnmount,
+        onClick:
+          componentName === 'CreateFullPage'
+            ? () => setModalIsOpen(true)
+            : onUnmount,
         kind: 'ghost',
       });
       buttons.push({
@@ -149,6 +155,7 @@ export const useCreateComponentStepChange = ({
     setCreateComponentActions,
     setIsSubmitting,
     setShouldViewAll,
+    setModalIsOpen,
   ]);
 
   const continueToNextStep = useCallback(() => {