feat: adding StringComponent

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}>

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>
+  );
+});