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

robolaunch · Jan 9, 2024 · d7b0d6c · d7b0d6c
1 parent ac6b000
commit d7b0d6c
Show file tree

Hide file tree

Showing 18 changed files with 513 additions and 361 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1488,6 +1488,13 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-90 {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-\[0\.25\] {
   --tw-scale-x: 0.25;
   --tw-scale-y: 0.25;
@@ -2495,16 +2502,16 @@ video {
   line-height: 1.25rem;
 }
 
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .\!font-semibold {
   font-weight: 600 !important;
 }

diff --git a/src/components/CFBridgeToggle/CFBridgeToggle.tsx b/src/components/CFBridgeToggle/CFBridgeToggle.tsx
@@ -18,9 +18,9 @@ export default function CFBridgeToggle({
       labelInfoTip="The ROS2 Bridge allows you to connect your robot to the ecosystem. This allows you to use ROS2 tools to interact with your robot."
       dataTut="create-robot-step1-ros2-bridge"
       disabled={isImportRobot}
-      checked={formik?.values?.isEnabledROS2Bridge}
+      checked={formik?.values?.services.ros.isEnabled}
       onChange={(e: any) => {
-        formik.setFieldValue("isEnabledROS2Bridge", e);
+        formik.setFieldValue("services.ros.isEnabled", e);
       }}
     />
   );

diff --git a/src/components/CFEnvCategories/CFEnvCategories.tsx b/src/components/CFEnvCategories/CFEnvCategories.tsx
@@ -143,9 +143,9 @@ export default function CFEnvCategories({
                         });
                     }}
                     text={
-                      <div className="flex w-full">
+                      <div className="flex w-full gap-2 p-1">
                         <img
-                          className="flex h-full w-20 scale-75 items-center justify-center"
+                          className="flex h-full w-14 scale-90 items-center justify-center"
                           src={
                             environment?.application?.icon ||
                             "/svg/general/rocket.svg"
@@ -156,7 +156,7 @@ export default function CFEnvCategories({
                           }}
                         />
                         <div className=" flex flex-col justify-around">
-                          <div className="flex items-center justify-between gap-2  ">
+                          <div className="flex items-center justify-between gap-2">
                             <p className="font-medium">
                               {environment?.application?.alias ||
                                 environment?.application?.name}

diff --git a/src/components/CFGPUToggle/CFGPUToggle.tsx b/src/components/CFGPUToggle/CFGPUToggle.tsx
@@ -18,9 +18,9 @@ export default function CFGPUToggle({
       labelInfoTip="If you want or need to GPU resource on cloud instance set active"
       dataTut="create-robot-step1-gpu-resource"
       disabled={formik.isSubmitting || isImportRobot}
-      checked={formik?.values?.gpuEnabledForCloudInstance}
+      checked={formik?.values?.resources.gpu.enabledForCloudInstance}
       onChange={(e: any) =>
-        formik.setFieldValue("gpuEnabledForCloudInstance", e)
+        formik.setFieldValue("resources.gpu.enabledForCloudInstance", e)
       }
     />
   );

diff --git a/src/components/CFRobotName/CFRobotName.tsx b/src/components/CFRobotName/CFRobotName.tsx
@@ -17,11 +17,11 @@ export default function CFRobotName({
       dataTut="create-robot-step1-name"
       labelName="Robot Name:"
       labelInfoTip="Type a new robot name."
-      inputProps={formik.getFieldProps("robotName")}
+      inputProps={formik.getFieldProps("details.name")}
       disabled={formik.isSubmitting || isImportRobot}
       inputHoverText="You can't change robot name because this robot is created before."
-      inputError={formik.errors.robotName}
-      inputTouched={formik.touched.robotName}
+      inputError={formik.errors.details?.name}
+      inputTouched={formik.touched.details?.name}
     />
   );
 }
diff --git a/src/components/CFRosDistros/CFRosDistros.tsx b/src/components/CFRosDistros/CFRosDistros.tsx
@@ -1,11 +1,11 @@
-import React, { ReactElement } from "react";
-import InfoTip from "../InfoTip/InfoTip";
-import { toast } from "sonner";
 import { stringSlugify } from "../../functions/GeneralFunctions";
-import { MdVerified } from "react-icons/md";
-import InputError from "../InputError/InputError";
 import { IDetails } from "../../interfaces/robotInterfaces";
+import InputError from "../InputError/InputError";
+import { MdVerified } from "react-icons/md";
+import InfoTip from "../InfoTip/InfoTip";
+import { ReactElement } from "react";
 import { FormikProps } from "formik";
+import { toast } from "sonner";
 
 interface ICFRosDistros {
   formik: FormikProps<IDetails>;
@@ -17,20 +17,16 @@ export default function CFRosDistros({
   isImportRobot,
 }: ICFRosDistros): ReactElement {
   function handleRosDistroFilter(item: string) {
+    const { rosDistros } = formik.values.services.ros;
+
     if (item === "HUMBLE" || item === "IRON") {
-      if (
-        formik.values.rosDistros?.includes("GALACTIC") ||
-        formik.values.rosDistros?.includes("FOXY")
-      ) {
+      if (rosDistros?.includes("GALACTIC") || rosDistros?.includes("FOXY")) {
         return 1;
       }
 
       return 0;
     } else {
-      if (
-        formik.values.rosDistros?.includes("IRON") ||
-        formik.values.rosDistros?.includes("HUMBLE")
-      ) {
+      if (rosDistros?.includes("IRON") || rosDistros?.includes("HUMBLE")) {
         return 1;
       }
 
@@ -43,7 +39,7 @@ export default function CFRosDistros({
       data-tut="create-robot-step1-ros-distrobutions"
       className="flex flex-col gap-2"
     >
-      <div className="text-light-700 flex min-w-fit gap-1 text-xs font-medium">
+      <div className="flex min-w-fit gap-1 text-xs font-medium text-light-700">
         Ros Distrobutions:
         <InfoTip
           content="
@@ -61,7 +57,7 @@ export default function CFRosDistros({
               }
               key={index}
               className={`relative flex w-full items-center justify-center gap-1 rounded  border-2 p-2 transition-all duration-300 ${
-                formik.values.rosDistros?.includes(item)
+                formik.values.services.ros.rosDistros?.includes(item)
                   ? isImportRobot
                     ? "border-primary-300"
                     : "border-primary-400 shadow"
@@ -74,11 +70,11 @@ export default function CFRosDistros({
                   );
                 }
 
-                const { rosDistros } = formik.values;
+                const { rosDistros } = formik.values.services.ros;
 
                 if (rosDistros.includes(item)) {
                   formik.setFieldValue(
-                    "rosDistros",
+                    "services.ros.rosDistros",
                     rosDistros.filter((ros: string) => ros !== item),
                   );
                 } else if (
@@ -96,7 +92,10 @@ export default function CFRosDistros({
                     "You can't select Galactic or Foxy with Humble or Iron",
                   );
                 } else {
-                  formik.setFieldValue("rosDistros", [...rosDistros, item]);
+                  formik.setFieldValue("services.ros.rosDistros", [
+                    ...rosDistros,
+                    item,
+                  ]);
                 }
               }}
             >
@@ -109,18 +108,18 @@ export default function CFRosDistros({
                     filter: `grayscale(${handleRosDistroFilter(item)})`,
                   }}
                 />
-                <span className="text-light-700 text-center text-[0.68rem]">
+                <span className="text-center text-[0.68rem] text-light-700">
                   ROS2{" "}
                   {item === "FOXY"
                     ? "Foxy"
                     : item === "HUMBLE"
-                    ? "Humble"
-                    : item === "GALACTIC"
-                    ? "Galactic"
-                    : item === "IRON" && "Iron"}
+                      ? "Humble"
+                      : item === "GALACTIC"
+                        ? "Galactic"
+                        : item === "IRON" && "Iron"}
                 </span>
               </div>
-              {formik.values.rosDistros?.includes(item) && (
+              {formik.values.services.ros.rosDistros?.includes(item) && (
                 <div className="absolute inset-0 flex items-start justify-end p-2">
                   <MdVerified
                     size={16}
@@ -136,7 +135,7 @@ export default function CFRosDistros({
       </div>
       <InputError
         // @ts-ignore
-        error={formik?.errors?.rosDistros}
+        error={formik?.errors?.services?.ros?.rosDistros}
         touched={true}
       />
     </div>

diff --git a/src/components/CreateRobotTypes/CreateRobotTypes.tsx b/src/components/CreateRobotTypes/CreateRobotTypes.tsx
@@ -1,13 +1,12 @@
-import React, { Fragment, ReactElement, useEffect, useState } from "react";
-import { getPhysicalInstances } from "../../toolkit/InstanceSlice";
+import { Fragment, ReactElement, useEffect, useState } from "react";
+import { IDetails } from "../../interfaces/robotInterfaces";
 import SidebarInfo from "../SidebarInfo/SidebarInfo";
-import { useAppDispatch } from "../../hooks/redux";
+import useFunctions from "../../hooks/useFunctions";
 import InputError from "../InputError/InputError";
 import useMain from "../../hooks/useMain";
 import InfoTip from "../InfoTip/InfoTip";
-import { toast } from "sonner";
-import { IDetails } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik";
+import { toast } from "sonner";
 
 interface ICreateRobotTypes {
   formik: FormikProps<IDetails>;
@@ -20,46 +19,52 @@ export default function CreateRobotTypes({
 }: ICreateRobotTypes): ReactElement {
   const [responsePhysicalInstances, setResponsePhysicalInstances] =
     useState<any>(undefined);
-  const dispatch = useAppDispatch();
   const { selectedState } = useMain();
 
+  const { getPhysicalInstances } = useFunctions();
+
   useEffect(() => {
-    !formik.values?.isVirtualRobot &&
-      !Array.isArray(responsePhysicalInstances) &&
-      dispatch(
-        getPhysicalInstances({
-          organizationId: selectedState?.organization?.organizationId,
-          roboticsCloudName: selectedState?.roboticsCloud?.name,
-          instanceId: selectedState?.instance?.instanceId,
-          region: selectedState?.instance?.region,
-        }),
-      ).then((response: any) => {
-        setResponsePhysicalInstances(
-          response?.payload?.data[0]?.roboticsClouds[0]?.cloudInstances[0]?.robolaunchPhysicalInstances?.filter(
-            (instance: any) =>
-              instance?.federationPhase === "Connected" &&
-              instance?.multicastPhase === "Connected" &&
-              instance?.phase === "Connected",
-          ) || [],
-        );
-      });
+    if (!responsePhysicalInstances && !formik.values.details.isVirtualRobot) {
+      handleGetPhysicalInstances();
+    }
+
+    responsePhysicalInstances?.filter(
+      (instance: any) =>
+        instance?.federationPhase !== "Connected" ||
+        instance?.multicastPhase !== "Connected" ||
+        instance?.phase !== "Connected",
+    )?.length &&
+      setResponsePhysicalInstances(
+        responsePhysicalInstances?.filter(
+          (instance: any) =>
+            instance?.federationPhase === "Connected" &&
+            instance?.multicastPhase === "Connected" &&
+            instance?.phase === "Connected",
+        ) || [],
+      );
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    dispatch,
-    formik.values.isVirtualRobot,
-    selectedState?.instance?.instanceId,
-    selectedState?.instance?.region,
-    selectedState?.organization?.organizationId,
-    selectedState?.roboticsCloud?.name,
-  ]);
+  }, [responsePhysicalInstances, formik.values.details.isVirtualRobot]);
+
+  function handleGetPhysicalInstances() {
+    getPhysicalInstances(
+      {
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
+        instanceId: selectedState?.instance?.instanceId!,
+        region: selectedState?.instance?.region!,
+      },
+      { setResponse: setResponsePhysicalInstances },
+    );
+  }
 
   return (
     <Fragment>
       <div
         data-tut="create-robot-step1-type"
         className="flex flex-col gap-2 pb-2"
       >
-        <div className="text-light-700 flex min-w-fit gap-1 text-xs font-medium">
+        <div className="flex min-w-fit gap-1 text-xs font-medium text-light-700">
           Robot Type:
           <InfoTip content="Select the type of robot you want to create." />
         </div>
@@ -83,7 +88,8 @@ export default function CreateRobotTypes({
               }
               key={index}
               className={`relative flex w-full items-center justify-center gap-1 rounded border-2 p-3 transition-all duration-300 ${
-                formik.values?.isVirtualRobot === robotType?.isVirtualRobot
+                formik.values.details.isVirtualRobot ===
+                robotType?.isVirtualRobot
                   ? robotType?.disabled
                     ? "border-primary-300"
                     : "border-primary-400 shadow"
@@ -95,13 +101,13 @@ export default function CreateRobotTypes({
                 robotType?.disabled
                   ? toast.error("You can't change robot type in update mode")
                   : formik.setFieldValue(
-                      "isVirtualRobot",
+                      "details.isVirtualRobot",
                       robotType?.isVirtualRobot,
                     );
               }}
             >
               <div className="flex flex-col items-center gap-2">
-                <span className="text-light-800 text-xs">
+                <span className="text-xs text-light-800">
                   {robotType?.name}
                 </span>
               </div>
@@ -111,11 +117,11 @@ export default function CreateRobotTypes({
         </div>
       </div>
 
-      {!formik.values?.isVirtualRobot &&
+      {!formik.values?.details.isVirtualRobot &&
       Array.isArray(responsePhysicalInstances) ? (
         responsePhysicalInstances?.length > 0 ? (
           <div className="flex flex-col gap-2 pt-1">
-            <div className="text-light-700 flex min-w-fit gap-1 text-xs font-medium">
+            <div className="flex min-w-fit gap-1 text-xs font-medium text-light-700">
               Physical Instances:
               <InfoTip content="Select the physical instance you want to hybrid robot to be deployed on." />
             </div>
@@ -125,7 +131,8 @@ export default function CreateRobotTypes({
                   <div
                     key={index}
                     className={`relative flex w-40 cursor-pointer items-center justify-center gap-1 rounded border-2 p-4  ${
-                      formik.values?.physicalInstanceName === instance?.name
+                      formik.values.tree.physicalInstance.name ===
+                      instance?.name
                         ? "border-primary-400 shadow"
                         : "border-light-100"
                     } transition-all duration-300
@@ -136,13 +143,13 @@ export default function CreateRobotTypes({
                             "You can't change physical instance in update mode",
                           )
                         : formik.setFieldValue(
-                            "physicalInstanceName",
+                            "tree.physicalInstance.name",
                             instance?.name,
                           );
                     }}
                   >
                     <div className="flex flex-col items-center gap-2">
-                      <span className="text-light-800 text-xs">
+                      <span className="text-xs text-light-800">
                         {instance?.name}
                       </span>
                     </div>
@@ -152,7 +159,7 @@ export default function CreateRobotTypes({
               )}
             </div>
             <InputError
-              error={formik.errors?.physicalInstanceName}
+              error={formik.errors.tree?.physicalInstance?.name}
               touched={true}
             />
           </div>
@@ -162,7 +169,7 @@ export default function CreateRobotTypes({
           </div>
         )
       ) : (
-        !formik.values?.isVirtualRobot && (
+        !formik.values.details.isVirtualRobot && (
           <div className="relative h-8">
             <img
               className="mx-auto w-12"