From 8c8e22cf70e72b85aba1cae0d40a6a8c9c344f71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Wed, 2 Aug 2023 12:06:20 +0200
Subject: [PATCH] feat: adding StringComponent

---
 .../src/components/DataServiceComponent.tsx   | 15 +++++-
 frontend/src/components/StringComponent.tsx   | 52 +++++++++++++++++++
 2 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/StringComponent.tsx

diff --git a/frontend/src/components/DataServiceComponent.tsx b/frontend/src/components/DataServiceComponent.tsx
index 4c4771f..4f257ae 100644
--- a/frontend/src/components/DataServiceComponent.tsx
+++ b/frontend/src/components/DataServiceComponent.tsx
@@ -8,6 +8,7 @@ import { AsyncMethodComponent } from './AsyncMethodComponent';
 import React from 'react';
 import { Card, Collapse } from 'react-bootstrap';
 import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
+import { StringComponent } from './StringComponent';
 
 type AttributeType =
   | 'str'
@@ -39,9 +40,7 @@ export type DataServiceJSON = Record<string, Attribute>;
 export const DataServiceComponent = React.memo(
   ({ props, parentPath = 'DataService' }: DataServiceProps) => {
     const [open, setOpen] = useState(true);
-    // useEffect(() => {}, []);
 
-    // While the data is loading
     return (
       <div className="App">
         <Card className="mb-3">
@@ -131,6 +130,18 @@ export const DataServiceComponent = React.memo(
                       </div>
                     );
                   }
+                } else if (value.type === 'str') {
+                  return (
+                    <div key={key}>
+                      <StringComponent
+                        name={key}
+                        value={value.value as string}
+                        readOnly={value.readonly}
+                        docString={value.doc}
+                        parent_path={parentPath}
+                      />
+                    </div>
+                  );
                 } else if (value.type === 'DataService') {
                   return (
                     <div key={key}>
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
new file mode 100644
index 0000000..ca80e1b
--- /dev/null
+++ b/frontend/src/components/StringComponent.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from 'react';
+import { Form, InputGroup } from 'react-bootstrap';
+import { socket } from '../socket';
+import { DocStringComponent } from './DocStringComponent';
+
+// TODO: add button functionality
+
+interface StringComponentProps {
+  name: string;
+  parent_path?: string;
+  value: string;
+  readOnly: boolean;
+  docString: string;
+}
+
+export const StringComponent = React.memo((props: StringComponentProps) => {
+  const renderCount = useRef(0);
+
+  useEffect(() => {
+    renderCount.current++;
+  });
+
+  const { name, parent_path, value, readOnly, docString } = props;
+  const handleChange = (event) => {
+    socket.emit('frontend_update', {
+      name: name,
+      parent_path: parent_path,
+      value: event.target.value
+    });
+  };
+
+  return (
+    <div className={'component boolean'} id={parent_path.concat(name)}>
+      <p>Render count: {renderCount.current}</p>
+      <DocStringComponent docString={docString} />
+      <div className="row">
+        <div className="col-5 d-flex">
+          <InputGroup>
+            <InputGroup.Text>{name}</InputGroup.Text>
+            <Form.Control
+              type="text"
+              value={value}
+              disabled={readOnly}
+              name={name}
+              onChange={handleChange}
+            />
+          </InputGroup>
+        </div>
+      </div>
+    </div>
+  );
+});