From 4af5aa56c279fcd5fdd2380f2676ea07556d0795 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Jan 2024 14:23:39 -0300
Subject: [PATCH] chore(IOInputField): rename onChange prop to updateValue for
 better semantics chore(IOInputField): remove styleClasses and placeholder
 props as they are not used chore(IOView): remove TODO comment for extending
 and improving view mode and adding other types of views chore(IOView): remove
 unused onChange prop from IOInputProps type

---
 .../src/components/IOInputField/index.tsx     | 25 ++++++++---------
 src/frontend/src/components/IOview/index.tsx  | 28 ++++++++++---------
 src/frontend/src/types/components/index.ts    |  8 ++----
 3 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
index 68d442648..feec2ce3b 100644
--- a/src/frontend/src/components/IOInputField/index.tsx
+++ b/src/frontend/src/components/IOInputField/index.tsx
@@ -1,23 +1,20 @@
-import { Textarea } from "../ui/textarea";
-import InputFileComponent from "../inputFileComponent";
 import { IOInputProps } from "../../types/components";
+import { Textarea } from "../ui/textarea";
 
 export default function IOInputField({
   inputType,
   value,
-  onChange,
-  styleClasses,
-  placeholder,
+  updateValue,
 }: IOInputProps): JSX.Element | undefined {
-   switch (inputType) {
+  switch (inputType) {
     case "TextInput":
-        return (
-            <Textarea
-              className={styleClasses}
-              placeholder={placeholder}
-              value={value}
-              onChange={onChange}
-            />
-        );
+      return (
+        <Textarea
+          className="custom-scroll"
+          placeholder={"Enter text..."}
+          value={value}
+          onChange={updateValue}
+        />
+      );
   }
 }
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index cf7e10270..654db86ff 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -4,11 +4,10 @@ import useFlowStore from "../../stores/flowStore";
 import { NodeType } from "../../types/flow";
 import { extractTypeFromLongId } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
+import IOInputField from "../IOInputField";
 import IconComponent from "../genericIconComponent";
 import NewChatView from "../newChatView";
 import { Badge } from "../ui/badge";
-import { Textarea } from "../ui/textarea";
-import IOInputField from "../IOInputField";
 
 export default function IOView(): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs);
@@ -18,6 +17,7 @@ export default function IOView(): JSX.Element {
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
   const options = inputIds.concat(outputIds);
+  //TODO: show output options for view
   const [selectedView, setSelectedView] = useState<ReactNode>(
     handleSelectChange(options[0])
   );
@@ -33,7 +33,7 @@ export default function IOView(): JSX.Element {
         break;
     }
   }
-  console.log(inputs)
+  console.log(inputs);
   return (
     <div className="form-modal-iv-box">
       <div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
@@ -64,22 +64,24 @@ export default function IOView(): JSX.Element {
                   key={index}
                   keyValue={inputId}
                 >
-                  {/* TODO: EXTEND AND IMPROVE VIEW MODE AND ADD OTHER TYPES OF VIEWS */}
                   <div className="file-component-tab-column">
                     <IOInputField
-                      value={nodes.find((node) => node.id === inputId)?.data.node.template.value.value}
-                      styleClasses="custom-scroll"
-                      placeholder="Enter text..."
-                      inputType={inputs.find((input) => input.id === inputId)?.type!}
-                      onChange={(e) => {
+                      value={
+                        nodes.find((node) => node.id === inputId)?.data.node
+                          .template.value.value
+                      }
+                      inputType={
+                        inputs.find((input) => input.id === inputId)?.type!
+                      }
+                      updateValue={(e) => {
                         e.target.value;
                         if (node) {
-                            let newNode = cloneDeep(node);
-                            newNode.data.node!.template["value"].value =
+                          let newNode = cloneDeep(node);
+                          newNode.data.node!.template["value"].value =
                             e.target.value;
-                            setNode(node.id, newNode);
+                          setNode(node.id, newNode);
                         }
-                        }}
+                      }}
                     />
                   </div>
                 </AccordionComponent>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index e641ef1a3..4fcb5a1cf 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactElement, ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
 import { APIClassType, APITemplateType, TemplateVariableType } from "../api";
 import { ChatMessageType } from "../chat";
@@ -649,7 +649,5 @@ export type dropdownButtonPropsType = {
 export type IOInputProps = {
   inputType: string;
   value: string;
-  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
-  styleClasses: string;
-  placeholder: string;
-}
+  updateValue: (e: any) => void;
+};