refactor(robot-context): 🎉 update all form handler

robolaunch · Feb 8, 2024 · af220ad · af220ad
1 parent d585309
commit af220ad
Show file tree

Hide file tree

Showing 29 changed files with 246 additions and 320 deletions.
diff --git a/src/components/CFAddBuildButton/CFAddBuildButton.tsx b/src/components/CFAddBuildButton/CFAddBuildButton.tsx
@@ -1,22 +1,20 @@
 import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { handleAddBuild } from "../../functions/form.build.function";
+import { IEnvironmentStep3 } from "../../interfaces/environment/environment.step3.interface";
 
 interface ICFAddBuildButton {
-  formik?: FormikProps<IBuildSteps>;
+  formik: FormikProps<IEnvironmentStep3>;
 }
 
 export default function CFAddBuildButton({
   formik,
 }: ICFAddBuildButton): ReactElement {
-  const { handleAddBuildStep } = useCreateRobot();
-
   return (
     <div data-tut="create-robot-step3-build-add-button">
       <CreateRobotFormAddButton
-        onClick={() => handleAddBuildStep(formik)}
+        onClick={() => handleAddBuild(formik)}
         disabled={formik?.isSubmitting}
       />
     </div>

diff --git a/src/components/CFAddEnvButton/CFAddEnvButton.tsx b/src/components/CFAddEnvButton/CFAddEnvButton.tsx
@@ -1,24 +1,23 @@
 import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { handleAddEnv } from "../../functions/form.env.function";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFAddEnvButton {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 
 export default function CFAddEnvButton({
   formik,
   disabled,
 }: ICFAddEnvButton): ReactElement {
-  const { handleAddENVToLaunchStep } = useCreateRobot();
-
   return (
     <div data-tut="create-robot-step4-environments-add-button">
       <CreateRobotFormAddButton
-        onClick={() => handleAddENVToLaunchStep(formik)}
+        // @ts-ignore
+        onClick={() => handleAddEnv(formik)}
         disabled={disabled || formik?.isSubmitting}
       />
     </div>

diff --git a/src/components/CFAddRepositoryButton/CFAddRepositoryButton.tsx b/src/components/CFAddRepositoryButton/CFAddRepositoryButton.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import useCreateRobot from "../../hooks/useCreateRobot";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { handleAddRepository } from "../../functions/form.repository.function";
 
 interface ICFAddRepositoryButton {
   formik: FormikProps<IWorkspaces>;
@@ -15,14 +15,10 @@ export default function CFAddRepositoryButton({
   workspaceIndex,
   disabled,
 }: ICFAddRepositoryButton): ReactElement {
-  const { handleAddRepositoryToWorkspaceStep } = useCreateRobot();
-
   return (
     <div data-tut="create-robot-step2-repository-add-button">
       <CreateRobotFormAddButton
-        onClick={() =>
-          handleAddRepositoryToWorkspaceStep(formik, workspaceIndex)
-        }
+        onClick={() => handleAddRepository(formik, workspaceIndex)}
         disabled={formik.isSubmitting || disabled}
       />
     </div>

diff --git a/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx b/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx
@@ -1,8 +1,8 @@
 import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import useCreateRobot from "../../hooks/useCreateRobot";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { handleAddWorkspace } from "../../functions/form.workspace.function";
 
 interface ICFAddWorkspaceButton {
   formik: FormikProps<IWorkspaces>;
@@ -13,12 +13,10 @@ export default function CFAddWorkspaceButton({
   formik,
   disabled,
 }: ICFAddWorkspaceButton): ReactElement {
-  const { handleAddWorkspaceStep } = useCreateRobot();
-
   return (
     <div data-tut="create-robot-step2-workspace-add-button">
       <CreateRobotFormAddButton
-        onClick={() => handleAddWorkspaceStep(formik)}
+        onClick={() => handleAddWorkspace(formik)}
         disabled={formik.isSubmitting || disabled}
       />
     </div>

diff --git a/src/components/CFDeleteBuildButton/CFDeleteBuildButton.tsx b/src/components/CFDeleteBuildButton/CFDeleteBuildButton.tsx
@@ -1,8 +1,8 @@
 import { Fragment, ReactElement } from "react";
 import { FormikProps } from "formik/dist/types";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
-import useCreateRobot from "../../hooks/useCreateRobot";
 import { IEnvironmentStep3 } from "../../interfaces/environment/environment.step3.interface";
+import { handleRemoveBuild } from "../../functions/form.build.function";
 
 interface ICFDeleteBuildButton {
   formik: FormikProps<IEnvironmentStep3>;
@@ -13,14 +13,12 @@ export default function CFDeleteBuildButton({
   formik,
   buildStepIndex,
 }: ICFDeleteBuildButton): ReactElement {
-  const { handleRemoveStepFromBuildStep } = useCreateRobot();
-
   return (
     <Fragment>
       {formik.values?.steps?.length > 1 && (
         <CreateRobotFormDeleteButton
           onClick={() => {
-            handleRemoveStepFromBuildStep(formik, buildStepIndex);
+            handleRemoveBuild(formik, buildStepIndex);
           }}
           text={`Delete ${
             formik.values.steps?.[buildStepIndex]?.name || "this"

diff --git a/src/components/CFDeleteRepositoryButton/CFDeleteRepositoryButton.tsx b/src/components/CFDeleteRepositoryButton/CFDeleteRepositoryButton.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import { FormikProps } from "formik/dist/types";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { handleRemoveRepository } from "../../functions/form.repository.function";
 
 interface ICFDeleteRepositoryButton {
   formik: FormikProps<IWorkspaces>;
@@ -17,8 +17,6 @@ export default function CFDeleteRepositoryButton({
   repositoryIndex,
   disabled,
 }: ICFDeleteRepositoryButton): ReactElement {
-  const { handleRemoveRepositoryFromWorkspaceStep } = useCreateRobot();
-
   return (
     <div
       data-tut="create-robot-step2-workspace-repository-delete-button"
@@ -33,11 +31,7 @@ export default function CFDeleteRepositoryButton({
             : true
         }
         onClick={() => {
-          handleRemoveRepositoryFromWorkspaceStep(
-            formik,
-            workspaceIndex,
-            repositoryIndex,
-          );
+          handleRemoveRepository(formik, workspaceIndex, repositoryIndex);
         }}
         text={`Delete ${
           formik.values?.workspaces?.[workspaceIndex]?.robotRepositories[

diff --git a/src/components/CFDeleteWorkspaceButton/CFDeleteWorkspaceButton.tsx b/src/components/CFDeleteWorkspaceButton/CFDeleteWorkspaceButton.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { ReactElement } from "react";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { handleRemoveWorkspace } from "../../functions/form.workspace.function";
 
 interface ICFDeleteWorkspaceButton {
   formik: FormikProps<IWorkspaces>;
@@ -15,8 +15,6 @@ export default function CFDeleteWorkspaceButton({
   workspaceIndex,
   disabled,
 }: ICFDeleteWorkspaceButton): ReactElement {
-  const { handleRemoveWorkspaceStep } = useCreateRobot();
-
   return (
     <div
       className="flex items-center"
@@ -25,7 +23,7 @@ export default function CFDeleteWorkspaceButton({
       <CreateRobotFormDeleteButton
         disabled={formik.values.workspaces.length > 1 ? false : true}
         onClick={() => {
-          handleRemoveWorkspaceStep(formik, workspaceIndex);
+          handleRemoveWorkspace(formik, workspaceIndex);
         }}
         text={`Delete ${
           formik.values.workspaces[workspaceIndex]?.name || "this"

diff --git a/src/components/CFEnvMapper/CFEnvMapper.tsx b/src/components/CFEnvMapper/CFEnvMapper.tsx
@@ -2,11 +2,11 @@ import { Fragment, ReactElement } from "react";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import CreateRobotFormEnvItem from "../CreateRobotFormEnvItem/CreateRobotFormEnvItem";
 import CFAddEnvButton from "../CFAddEnvButton/CFAddEnvButton";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFEnvMapper {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 

diff --git a/src/components/CFHostDirectories/CFHostDirectories.tsx b/src/components/CFHostDirectories/CFHostDirectories.tsx
@@ -5,6 +5,7 @@ import { FormikProps } from "formik";
 import { ReactElement } from "react";
 import HostDirectoriesSearchIframe from "../HostDirectoriesSearchIframe/HostDirectoriesSearchIframe";
 import { IEnvironmentStep1 } from "../../interfaces/environment/environment.step1.interface";
+import { handleAddHostDirectory } from "../../functions/form.directory.host.function";
 
 interface ICFDirectories {
   formik: FormikProps<IEnvironmentStep1>;
@@ -42,15 +43,7 @@ export default function CFDirectories({
       </CFInfoBar>
 
       <CreateRobotFormAddButton
-        onClick={() => {
-          formik.setFieldValue("directories.hostDirectories", [
-            ...formik.values.directories.hostDirectories,
-            {
-              hostDirectory: "",
-              mountPath: "",
-            },
-          ]);
-        }}
+        onClick={() => handleAddHostDirectory(formik)}
         disabled={disabled}
       />
     </div>

diff --git a/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx b/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx
@@ -6,6 +6,7 @@ import FormInputText from "../FormInputText/FormInputText";
 import useFunctions from "../../hooks/useFunctions";
 import useMain from "../../hooks/useMain";
 import { IEnvironmentStep1 } from "../../interfaces/environment/environment.step1.interface";
+import { handleRemoveHostDirectory } from "../../functions/form.directory.host.function";
 
 interface ICFDirectoriesInputGroup {
   formik: FormikProps<IEnvironmentStep1>;
@@ -94,16 +95,7 @@ export default function CFDirectoriesInputGroup({
       <div className="flex items-center justify-center pt-3 text-sm text-light-800">
         <CFDellButton
           disabled={disabled}
-          onClick={() => {
-            const hostDirectories = [
-              ...formik.values.directories.hostDirectories,
-            ];
-            hostDirectories.splice(index, 1);
-            formik.setFieldValue(
-              "directories.hostDirectories",
-              hostDirectories,
-            );
-          }}
+          onClick={() => handleRemoveHostDirectory(formik, index)}
         />
       </div>
     </div>

diff --git a/src/components/CFLaunchCode/CFLaunchCode.tsx b/src/components/CFLaunchCode/CFLaunchCode.tsx
@@ -1,11 +1,11 @@
 import React, { ReactElement } from "react";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import { Editor } from "@monaco-editor/react";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFLaunchCode {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 

diff --git a/src/components/CFLaunchName/CFLaunchName.tsx b/src/components/CFLaunchName/CFLaunchName.tsx
@@ -1,10 +1,10 @@
 import { ReactElement } from "react";
 import FormInputText from "../FormInputText/FormInputText";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFBuildName {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 

diff --git a/src/components/CFLaunchScope/CFLaunchScope.tsx b/src/components/CFLaunchScope/CFLaunchScope.tsx
@@ -1,12 +1,12 @@
 import CreateRobotFormCodeScope from "../CreateRobotFormCodeScope/CreateRobotFormCodeScope";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import { FormikProps } from "formik/dist/types";
 import useMain from "../../hooks/useMain";
 import { ReactElement } from "react";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFLaunchScope {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 

diff --git a/src/components/CFLaunchWorkspace/CFLaunchWorkspace.tsx b/src/components/CFLaunchWorkspace/CFLaunchWorkspace.tsx
@@ -1,11 +1,12 @@
 import { Fragment, ReactElement } from "react";
 import FormInputSelect from "../FormInputSelect/FormInputSelect";
-import { ILaunchStep, IWorkspace } from "../../interfaces/robotInterfaces";
+import { IWorkspace } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 import useCreateRobot from "../../hooks/useCreateRobot";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFBuildWorkspace {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 

diff --git a/src/components/CFPortInput/CFPortInput.tsx b/src/components/CFPortInput/CFPortInput.tsx
@@ -4,6 +4,7 @@ import { FormikProps } from "formik/dist/types";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import { ReactElement } from "react";
 import { IEnvironmentStep1 } from "../../interfaces/environment/environment.step1.interface";
+import { handleRemovePortForService } from "../../functions/form.port.function";
 
 interface ICFPortInput {
   formik: FormikProps<IEnvironmentStep1>;
@@ -145,28 +146,7 @@ export default function CFPortInput({
 
       <div className="flex items-center justify-center pt-2.5 text-sm text-light-800">
         <CFDellButton
-          onClick={() => {
-            switch (type) {
-              case "jupyterNotebook":
-                formik.setFieldValue(
-                  `services.jupyterNotebook.customPorts`,
-                  // @ts-ignore
-                  formik.values?.services.jupyterNotebook?.customPorts.filter(
-                    (port: any, index: number) => index !== portIndex,
-                  ),
-                );
-                break;
-              default:
-                formik.setFieldValue(
-                  `services.${type}.customPorts`,
-                  // @ts-ignore
-                  formik.values?.services?.[type].customPorts.filter(
-                    (port: any, index: number) => index !== portIndex,
-                  ),
-                );
-                break;
-            }
-          }}
+          onClick={() => handleRemovePortForService(formik, type, portIndex)}
           disabled={disabled}
         />
       </div>