refactor(function-context) 🎉 update context logic and robotData

robolaunch · Jan 19, 2024 · a75476b · a75476b
1 parent 88a10e7
commit a75476b
Show file tree

Hide file tree

Showing 42 changed files with 547 additions and 587 deletions.
diff --git a/src/components/CFBuildMapper/CFBuildMapper.tsx b/src/components/CFBuildMapper/CFBuildMapper.tsx
@@ -23,7 +23,7 @@ export default function CFBuildMapper({
       vertical
     >
       <div className="flex flex-col gap-2">
-        {formik?.values?.robotBuildSteps?.map(
+        {formik?.values?.steps?.map(
           (buildStep: any, buildStepIndex: number) => {
             return (
               <CFBuildStepItem

diff --git a/src/components/CFBuildName/CFBuildName.tsx b/src/components/CFBuildName/CFBuildName.tsx
@@ -13,10 +13,10 @@ export default function CFBuildName({ formik }: ICFBuildName): ReactElement {
       dataTut="create-robot-step3-name"
       labelName="Build Manager Name:"
       labelInfoTip="Type a new build manager name."
-      inputError={formik.errors.buildManagerName}
-      inputTouched={formik.touched.buildManagerName}
+      inputError={formik.errors.name}
+      inputTouched={formik.touched.name}
       disabled={formik?.isSubmitting}
-      inputProps={formik.getFieldProps("buildManagerName")}
+      inputProps={formik.getFieldProps("name")}
       inputHoverText="Type a new build manager name."
     />
   );

diff --git a/src/components/CFBuildScope/CFBuildScope.tsx b/src/components/CFBuildScope/CFBuildScope.tsx
@@ -2,8 +2,8 @@ import CreateRobotFormCodeScope from "../CreateRobotFormCodeScope/CreateRobotFor
 import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import { FormikProps } from "formik/dist/types";
-import React, { ReactElement } from "react";
 import useMain from "../../hooks/useMain";
+import { ReactElement } from "react";
 
 interface ICFBuildScope {
   formik: FormikProps<IBuildSteps>;
@@ -21,22 +21,22 @@ export default function CFBuildScope({
     <CreateRobotFormCodeScope
       virtualInstanceDisabled={formik?.isSubmitting}
       physicalInstanceDisabled={formik?.isSubmitting}
-      virtualInstanceChecked={formik.values.robotBuildSteps[
+      virtualInstanceChecked={formik.values.steps[
         buildStepIndex
-      ]?.instancesName?.includes(selectedState?.instance?.name)}
-      physicalInstanceChecked={formik.values.robotBuildSteps[
+      ]?.instanceScope?.includes(selectedState?.instance?.name!)}
+      physicalInstanceChecked={formik.values.steps[
         buildStepIndex
-      ]?.instancesName?.includes(robotData?.step1?.tree.physicalInstance.name)}
+      ]?.instanceScope?.includes(robotData?.step1?.tree.physicalInstance.name)}
       virtualInstanceOnChange={(e) => {
         formik.setValues((prevValues) => ({
           ...prevValues,
-          robotBuildSteps: prevValues.robotBuildSteps.map((item, index) => {
+          steps: prevValues.steps.map((item, index) => {
             if (index === buildStepIndex) {
               return {
                 ...item,
-                instancesName: e.target.checked
-                  ? [...item.instancesName, selectedState?.instance?.name]
-                  : item.instancesName.filter(
+                instanceScope: e.target.checked
+                  ? [...item.instanceScope, selectedState?.instance?.name!]
+                  : item.instanceScope.filter(
                       (name) => name !== selectedState?.instance?.name,
                     ),
               };
@@ -48,16 +48,16 @@ export default function CFBuildScope({
       physicalInstanceOnChange={(e) => {
         formik.setValues((prevValues) => ({
           ...prevValues,
-          robotBuildSteps: prevValues.robotBuildSteps.map((item, index) => {
+          steps: prevValues.steps.map((item, index) => {
             if (index === buildStepIndex) {
               return {
                 ...item,
-                instancesName: e.target.checked
+                instanceScope: e.target.checked
                   ? [
-                      ...item.instancesName,
+                      ...item.instanceScope,
                       robotData?.step1?.tree.physicalInstance.name,
                     ]
-                  : item.instancesName.filter(
+                  : item.instanceScope.filter(
                       (name) =>
                         name !== robotData?.step1?.tree.physicalInstance.name,
                     ),
@@ -69,7 +69,7 @@ export default function CFBuildScope({
       }}
       error={
         // @ts-ignore
-        formik?.errors?.robotBuildSteps?.[buildStepIndex]?.instancesName
+        formik?.errors?.steps?.[buildStepIndex]?.instanceScope
       }
     />
   );

diff --git a/src/components/CFBuildStepItem/CFBuildStepItem.tsx b/src/components/CFBuildStepItem/CFBuildStepItem.tsx
@@ -1,14 +1,14 @@
-import { IBuildStep, IBuildSteps } from "../../interfaces/robotInterfaces";
 import CFBuildStepItemAccordionHeader from "../CFBuildStepItemAccordionHeader/CFBuildStepItemAccordionHeader";
 import CFDeleteBuildButton from "../CFDeleteBuildButton/CFDeleteBuildButton";
-import CFBuildStepName from "../CFBuildStepName/CFBuildStepName";
+import { IBuildStep, IBuildSteps } from "../../interfaces/robotInterfaces";
 import CFBuildWorkspace from "../CFBuildWorkspace/CFBuildWorkspace";
-import React, { ReactElement, useState } from "react";
+import CFBuildStepName from "../CFBuildStepName/CFBuildStepName";
+import CFBuildScope from "../CFBuildScope/CFBuildScope";
 import CFCodeType from "../CFCodeType/CFCodeType";
 import Accordion from "../Accordion/AccordionV2";
 import { FormikProps } from "formik/dist/types";
+import { ReactElement, useState } from "react";
 import CFCode from "../CFCode/CFCode";
-import CFBuildScope from "../CFBuildScope/CFBuildScope";
 
 interface ICFBuildStepItem {
   formik: FormikProps<IBuildSteps>;

diff --git a/src/components/CFBuildStepName/CFBuildStepName.tsx b/src/components/CFBuildStepName/CFBuildStepName.tsx
@@ -19,13 +19,11 @@ export default function CFBuildStepName({
       labelInfoTip="Type a unique build step name."
       inputError={
         // @ts-ignore
-        formik?.errors?.robotBuildSteps?.[buildStepIndex]?.name
+        formik?.errors?.steps?.[buildStepIndex]?.name
       }
-      inputTouched={formik?.touched?.robotBuildSteps?.[buildStepIndex]?.name}
+      inputTouched={formik?.touched?.steps?.[buildStepIndex]?.name}
       disabled={formik?.isSubmitting}
-      inputProps={formik.getFieldProps(
-        `robotBuildSteps.${buildStepIndex}.name`,
-      )}
+      inputProps={formik.getFieldProps(`steps.${buildStepIndex}.name`)}
       inputHoverText="Type a unique build step name."
     />
   );

diff --git a/src/components/CFBuildWorkspace/CFBuildWorkspace.tsx b/src/components/CFBuildWorkspace/CFBuildWorkspace.tsx
@@ -22,17 +22,13 @@ export default function CFBuildWorkspace({
       tip="Select a workspace name."
       inputError={
         // @ts-ignore
-        formik?.errors?.robotBuildSteps?.[buildStepIndex]?.workspace
+        formik?.errors?.steps?.[buildStepIndex]?.workspace
       }
-      inputTouched={
-        formik?.touched?.robotBuildSteps?.[buildStepIndex]?.workspace
-      }
-      inputProps={formik.getFieldProps(
-        `robotBuildSteps.${buildStepIndex}.workspace`,
-      )}
+      inputTouched={formik?.touched?.steps?.[buildStepIndex]?.workspace}
+      inputProps={formik.getFieldProps(`steps.${buildStepIndex}.workspace`)}
       options={
         <Fragment>
-          {!formik?.values?.robotBuildSteps[buildStepIndex]?.workspace && (
+          {!formik?.values?.steps[buildStepIndex]?.workspace && (
             <option value=""></option>
           )}
           {robotData?.step2?.workspaces?.map(

diff --git a/src/components/CFCode/CFCode.tsx b/src/components/CFCode/CFCode.tsx
@@ -21,22 +21,22 @@ export default function CFCode({
       vertical
       error={
         // @ts-ignore
-        formik?.errors?.robotBuildSteps?.[buildStepIndex]?.isCommandCode
+        formik?.errors?.steps?.[buildStepIndex]?.isShellCode
       }
       touched={true}
     >
       <Editor
         height="140px"
         defaultLanguage="shell"
         defaultValue={
-          formik.values.robotBuildSteps[buildStepIndex]?.isCommandCode
-            ? formik.values.robotBuildSteps[buildStepIndex]?.command
-            : formik.values.robotBuildSteps[buildStepIndex]?.script
+          formik.values.steps[buildStepIndex]?.isShellCode
+            ? formik.values.steps[buildStepIndex]?.command
+            : formik.values.steps[buildStepIndex]?.script
         }
         value={
-          formik.values.robotBuildSteps[buildStepIndex]?.isCommandCode
-            ? formik.values.robotBuildSteps[buildStepIndex]?.command
-            : formik.values.robotBuildSteps[buildStepIndex]?.script
+          formik.values.steps[buildStepIndex]?.isShellCode
+            ? formik.values.steps[buildStepIndex]?.command
+            : formik.values.steps[buildStepIndex]?.script
         }
         options={{
           readOnly: formik?.isSubmitting,
@@ -58,21 +58,18 @@ export default function CFCode({
         onChange={(e: any) => {
           formik.setValues({
             ...formik.values,
-            robotBuildSteps: formik.values.robotBuildSteps.map(
-              (item: any, index: number) => {
-                if (index === buildStepIndex) {
-                  return {
-                    ...item,
-                    [formik.values.robotBuildSteps[buildStepIndex]
-                      ?.isCommandCode
-                      ? "command"
-                      : "script"]: e,
-                  };
-                } else {
-                  return item;
-                }
-              },
-            ),
+            steps: formik.values.steps.map((item: any, index: number) => {
+              if (index === buildStepIndex) {
+                return {
+                  ...item,
+                  [formik.values.steps[buildStepIndex]?.isShellCode
+                    ? "command"
+                    : "script"]: e,
+                };
+              } else {
+                return item;
+              }
+            }),
           });
         }}
       />

diff --git a/src/components/CFCodeType/CFCodeType.tsx b/src/components/CFCodeType/CFCodeType.tsx
@@ -21,39 +21,35 @@ export default function CFCodeType({
       vertical
       error={
         // @ts-ignore
-        formik?.errors?.robotBuildSteps?.[buildStepIndex]?.isCommandCode
+        formik?.errors?.steps?.[buildStepIndex]?.isShellCode
       }
       touched={true}
     >
       <InputSelect
-        {...formik.getFieldProps(
-          `robotBuildSteps.${buildStepIndex}.isCommandCode`,
-        )}
+        {...formik.getFieldProps(`steps.${buildStepIndex}.isShellCode`)}
         value={
-          formik.values.robotBuildSteps[buildStepIndex]?.isCommandCode
-            ? "isCommandCode"
+          formik.values.steps[buildStepIndex]?.isShellCode
+            ? "isShellCode"
             : "isScriptCode"
         }
         onChange={(e) => {
-          const isCommandCode = e.target.value === "isCommandCode";
-          const updateValue = isCommandCode ? { script: "" } : { command: "" };
+          const isShellCode = e.target.value === "isShellCode";
+          const updateValue = isShellCode ? { script: "" } : { command: "" };
 
           formik.setValues({
             ...formik.values,
-            robotBuildSteps: formik.values.robotBuildSteps.map(
-              (item, index) => {
-                if (index === buildStepIndex) {
-                  return { ...item, isCommandCode, ...updateValue };
-                }
-                return item;
-              },
-            ),
+            steps: formik.values.steps.map((item, index) => {
+              if (index === buildStepIndex) {
+                return { ...item, isShellCode, ...updateValue };
+              }
+              return item;
+            }),
           });
         }}
         disabled={formik?.isSubmitting}
       >
         <Fragment>
-          <option value="isCommandCode">Bash Code</option>
+          <option value="isShellCode">Bash Code</option>
           <option value="isScriptCode">Script Code</option>
         </Fragment>
       </InputSelect>

diff --git a/src/components/CFRobotButtons/CFRobotButtons.tsx b/src/components/CFRobotButtons/CFRobotButtons.tsx
@@ -74,7 +74,7 @@ export default function CFRobotButtons({
   }
 
   return (
-    <div className="mt-10 flex gap-2">
+    <div className="mt-10 flex w-full gap-2">
       {!isImportRobot && <CFCancelButton disabled={formik?.isSubmitting} />}
       <Button
         type="submit"

diff --git a/src/components/CFRobotName/CFRobotName.tsx b/src/components/CFRobotName/CFRobotName.tsx
@@ -17,7 +17,10 @@ export default function CFRobotName({
       dataTut="create-robot-step1-name"
       labelName="Robot Name:"
       labelInfoTip="Type a new robot name."
-      inputProps={formik.getFieldProps("details.name")}
+      inputProps={{
+        ...formik.getFieldProps("details.name"),
+        inputPlaceholder: "robolaunch-robot",
+      }}
       disabled={formik.isSubmitting || isImportRobot}
       inputHoverText="You can't change robot name because this robot is created before."
       inputError={formik.errors.details?.name}

diff --git a/src/components/CFWorkspaceNameDistro/CFWorkspaceNameDistro.tsx b/src/components/CFWorkspaceNameDistro/CFWorkspaceNameDistro.tsx
@@ -3,7 +3,7 @@ import CFWorkspaceName from "../CFWorkspaceName/CFWorkspaceName";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 import { ReactElement } from "react";
-import { useAppSelector } from "../../hooks/redux";
+import useMain from "../../hooks/useMain";
 
 interface ICFWorkspaceNameDistro {
   formik: FormikProps<IWorkspaces>;
@@ -16,7 +16,7 @@ export default function CFWorkspaceNameDistro({
   workspaceIndex,
   disabled,
 }: ICFWorkspaceNameDistro): ReactElement {
-  const { applicationMode } = useAppSelector((state) => state.user);
+  const { applicationMode } = useMain();
 
   return (
     <div className="flex gap-2">

diff --git a/src/components/CreateForms/CFStep1.tsx b/src/components/CreateForms/CFStep1.tsx
@@ -74,11 +74,11 @@ export default function CFStep1({ isImportRobot }: ICFStep1): ReactElement {
           "Robot updated successfully. Redirecting to fleet page...",
         );
         setTimeout(() => {
-          window.location.href = `/${selectedState?.organization?.organizationName?.split(
-            "_",
-          )[1]}/${selectedState?.roboticsCloud?.name}/${selectedState?.instance
-            ?.name}/${selectedState?.fleet?.name}/${robotData?.step1?.details
-            ?.name}}`;
+          window.location.href = `/${
+            selectedState?.organization?.organizationName?.split("_")[1]
+          }/${selectedState?.roboticsCloud?.name}/${
+            selectedState?.instance?.name
+          }/${selectedState?.fleet?.name}/${robotData?.step1?.details?.name}}`;
         }, 2000);
       } else if (!formik.values?.details?.isVirtualRobot) {
         addPhysicalInstanceToFleet();
@@ -94,7 +94,6 @@ export default function CFStep1({ isImportRobot }: ICFStep1): ReactElement {
       ...robotData,
       step1: formik.values,
     });
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formik.values]);
 

diff --git a/src/components/CreateForms/CFStep2.tsx b/src/components/CreateForms/CFStep2.tsx
@@ -8,7 +8,6 @@ import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import SidebarInfo from "../SidebarInfo/SidebarInfo";
 import useFunctions from "../../hooks/useFunctions";
-import { useAppSelector } from "../../hooks/redux";
 import { useParams } from "react-router-dom";
 import CFLoader from "../CFLoader/CFLoader";
 import useMain from "../../hooks/useMain";
@@ -22,10 +21,13 @@ interface ICFStep2 {
 export default function CFStep2({ isImportRobot }: ICFStep2): ReactElement {
   const [responseFleet, setResponseFleet] = useState<any>(undefined);
   const [responseRobot, setResponseRobot] = useState<any>(undefined);
-  const { applicationMode } = useAppSelector((state) => state.user);
 
-  const { selectedState, handleCreateRobotNextStep, setSidebarState } =
-    useMain();
+  const {
+    selectedState,
+    handleCreateRobotNextStep,
+    setSidebarState,
+    applicationMode,
+  } = useMain();
   const { robotData, setRobotData } = useCreateRobot();
   const [isLoadingImportRobot, setIsLoadingImportRobot] =
     useState<boolean>(true);