From cae905bf4ecab9cc4cc2a7df5ef6d60a160882ef Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Sat, 23 Jul 2022 12:05:19 +0530
Subject: [PATCH] feat(frontend): updated `ModelServiceEdit` component to use
 form utilities

---
 .../src/components/Modal/Service/Edit.tsx     | 49 ++++++-------------
 1 file changed, 15 insertions(+), 34 deletions(-)

diff --git a/services/frontend/src/components/Modal/Service/Edit.tsx b/services/frontend/src/components/Modal/Service/Edit.tsx
index 8077b4f..4d7bd72 100644
--- a/services/frontend/src/components/Modal/Service/Edit.tsx
+++ b/services/frontend/src/components/Modal/Service/Edit.tsx
@@ -1,19 +1,15 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Formik } from "formik";
-import * as yup from "yup";
+
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
 import Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
-import {
-  CallbackFunction,
-  ICanvasConfig,
-  IService,
-  IServiceNodeItem
-} from "../../../types";
+import type { CallbackFunction, IServiceNodeItem } from "../../../types";
+import { getInitialValues, validationSchema } from "./form-utils";
 
-interface IModalServiceProps {
+export interface IModalServiceProps {
   node: IServiceNodeItem;
   onHide: CallbackFunction;
   onUpdateEndpoint: CallbackFunction;
@@ -25,25 +21,13 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
   const [selectedNode, setSelectedNode] = useState<IServiceNodeItem>();
 
   const handleUpdate = (values: any) => {
+    // TODO
     const updated = { ...selectedNode };
     updated.canvasConfig = values.canvasConfig;
     updated.serviceConfig = values.serviceConfig;
     onUpdateEndpoint(updated);
   };
-  const validationSchema = yup.object({
-    canvasConfig: yup.object({
-      node_name: yup
-        .string()
-        .max(256, "service name should be 256 characters or less")
-        .required("service name is required")
-    }),
-    serviceConfig: yup.object({
-      container_name: yup
-        .string()
-        .max(256, "container name should be 256 characters or less")
-        .required("container name is required")
-    })
-  });
+
   const tabs = [
     {
       name: "General",
@@ -70,6 +54,12 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
       hidden: false
     }
   ];
+
+  const initialValues = useMemo(
+    () => getInitialValues(selectedNode),
+    [selectedNode]
+  );
+
   const classNames = (...classes: string[]) => {
     return classes.filter(Boolean).join(" ");
   };
@@ -103,18 +93,9 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
 
             {selectedNode && (
               <Formik
-                initialValues={{
-                  canvasConfig: {
-                    ...selectedNode.canvasConfig
-                  } as ICanvasConfig,
-                  serviceConfig: {
-                    ...selectedNode.serviceConfig
-                  } as IService
-                }}
+                initialValues={initialValues}
                 enableReinitialize={true}
-                onSubmit={(values) => {
-                  handleUpdate(values);
-                }}
+                onSubmit={handleUpdate}
                 validationSchema={validationSchema}
               >
                 {(formik) => (