From 837f02b0d3aad2755acf47318bd6c77d3122ab6f 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] frontend: adding GenericComponent

---
 .../src/components/DataServiceComponent.tsx   | 137 ++----------------
 frontend/src/components/GenericComponent.tsx  | 136 +++++++++++++++++
 2 files changed, 145 insertions(+), 128 deletions(-)
 create mode 100644 frontend/src/components/GenericComponent.tsx

diff --git a/frontend/src/components/DataServiceComponent.tsx b/frontend/src/components/DataServiceComponent.tsx
index 4f257ae..ae386d5 100644
--- a/frontend/src/components/DataServiceComponent.tsx
+++ b/frontend/src/components/DataServiceComponent.tsx
@@ -1,35 +1,9 @@
 import { useState } from 'react';
-import { ButtonComponent } from './ButtonComponent';
-import { NumberComponent } from './NumberComponent';
-import { SliderComponent } from './SliderComponent';
-import { EnumComponent } from './EnumComponent';
-import { MethodComponent } from './MethodComponent';
-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';
+import { Attribute, GenericComponent } from './GenericComponent';
 
-type AttributeType =
-  | 'str'
-  | 'bool'
-  | 'float'
-  | 'int'
-  | 'method'
-  | 'DataService'
-  | 'Enum'
-  | 'NumberSlider';
-
-type ValueType = boolean | string | number | object;
-interface Attribute {
-  type: AttributeType;
-  value?: ValueType;
-  readonly: boolean;
-  doc?: string | null;
-  parameters?: Record<string, string>;
-  async?: boolean;
-  enum?: Record<string, string>;
-}
 type DataServiceProps = {
   props: DataServiceJSON;
   parentPath?: string;
@@ -53,107 +27,14 @@ export const DataServiceComponent = React.memo(
           <Collapse in={open}>
             <Card.Body>
               {Object.entries(props).map(([key, value]) => {
-                if (value.type === 'bool') {
-                  return (
-                    <div key={key}>
-                      <ButtonComponent
-                        name={key}
-                        parent_path={parentPath}
-                        docString={value.doc}
-                        readOnly={value.readonly}
-                        value={Boolean(value.value)}
-                      />
-                    </div>
-                  );
-                } else if (value.type === 'float' || value.type === 'int') {
-                  return (
-                    <div key={key}>
-                      <NumberComponent
-                        name={key}
-                        type={value.type}
-                        parent_path={parentPath}
-                        docString={value.doc}
-                        readOnly={value.readonly}
-                        value={Number(value.value)}
-                      />
-                    </div>
-                  );
-                } else if (value.type === 'NumberSlider') {
-                  return (
-                    <div key={key}>
-                      <SliderComponent
-                        name={key}
-                        parent_path={parentPath}
-                        docString={value.doc}
-                        readOnly={value.readonly}
-                        value={value.value['value']['value']}
-                        min={value.value['min']['value']}
-                        max={value.value['max']['value']}
-                        stepSize={value.value['step_size']['value']}
-                      />
-                    </div>
-                  );
-                } else if (value.type === 'Enum') {
-                  return (
-                    <div key={key}>
-                      <EnumComponent
-                        name={key}
-                        parent_path={parentPath}
-                        docString={value.doc}
-                        value={String(value.value)}
-                        enumDict={value.enum}
-                      />
-                    </div>
-                  );
-                } else if (value.type === 'method') {
-                  if (!value.async) {
-                    return (
-                      <div key={key}>
-                        <MethodComponent
-                          name={key}
-                          parent_path={parentPath}
-                          docString={value.doc}
-                          parameters={value.parameters}
-                        />
-                      </div>
-                    );
-                  } else {
-                    return (
-                      <div key={key}>
-                        <AsyncMethodComponent
-                          name={key}
-                          parent_path={parentPath}
-                          docString={value.doc}
-                          parameters={value.parameters}
-                          value={value.value as Record<string, string>}
-                        />
-                      </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}>
-                      <DataServiceComponent
-                        props={value.value as DataServiceJSON}
-                        parentPath={parentPath.concat('.', key)}
-                      />
-                    </div>
-                  );
-                } else {
-                  return <div key={key}></div>;
-                }
+                return (
+                  <GenericComponent
+                    key={key}
+                    attribute={value}
+                    name={key}
+                    parentPath={parentPath}
+                  />
+                );
               })}
             </Card.Body>
           </Collapse>
diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx
new file mode 100644
index 0000000..395af63
--- /dev/null
+++ b/frontend/src/components/GenericComponent.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { ButtonComponent } from './ButtonComponent';
+import { NumberComponent } from './NumberComponent';
+import { SliderComponent } from './SliderComponent';
+import { EnumComponent } from './EnumComponent';
+import { MethodComponent } from './MethodComponent';
+import { AsyncMethodComponent } from './AsyncMethodComponent';
+import { StringComponent } from './StringComponent';
+import { ListComponent } from './ListComponent';
+import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
+
+export type AttributeType =
+  | 'str'
+  | 'bool'
+  | 'float'
+  | 'int'
+  | 'list'
+  | 'method'
+  | 'DataService'
+  | 'Enum'
+  | 'NumberSlider';
+
+type ValueType = boolean | string | number | object;
+interface Attribute {
+  type: AttributeType;
+  value?: ValueType | ValueType[];
+  readonly: boolean;
+  doc?: string | null;
+  parameters?: Record<string, string>;
+  async?: boolean;
+  enum?: Record<string, string>;
+}
+type GenericComponentProps = {
+  attribute: Attribute;
+  name: string;
+  parentPath: string;
+};
+
+export const GenericComponent = React.memo(
+  ({ attribute, name, parentPath }: GenericComponentProps) => {
+    if (attribute.type === 'bool') {
+      return (
+        <ButtonComponent
+          name={name}
+          parent_path={parentPath}
+          docString={attribute.doc}
+          readOnly={attribute.readonly}
+          value={Boolean(attribute.value)}
+        />
+      );
+    } else if (attribute.type === 'float' || attribute.type === 'int') {
+      return (
+        <NumberComponent
+          name={name}
+          type={attribute.type}
+          parent_path={parentPath}
+          docString={attribute.doc}
+          readOnly={attribute.readonly}
+          value={Number(attribute.value)}
+        />
+      );
+    } else if (attribute.type === 'NumberSlider') {
+      return (
+        <SliderComponent
+          name={name}
+          parent_path={parentPath}
+          docString={attribute.doc}
+          readOnly={attribute.readonly}
+          value={attribute.value['value']['value']}
+          min={attribute.value['min']['value']}
+          max={attribute.value['max']['value']}
+          stepSize={attribute.value['step_size']['value']}
+        />
+      );
+    } else if (attribute.type === 'Enum') {
+      return (
+        <EnumComponent
+          name={name}
+          parent_path={parentPath}
+          docString={attribute.doc}
+          value={String(attribute.value)}
+          enumDict={attribute.enum}
+        />
+      );
+    } else if (attribute.type === 'method') {
+      if (!attribute.async) {
+        return (
+          <MethodComponent
+            name={name}
+            parent_path={parentPath}
+            docString={attribute.doc}
+            parameters={attribute.parameters}
+          />
+        );
+      } else {
+        return (
+          <AsyncMethodComponent
+            name={name}
+            parent_path={parentPath}
+            docString={attribute.doc}
+            parameters={attribute.parameters}
+            value={attribute.value as Record<string, string>}
+          />
+        );
+      }
+    } else if (attribute.type === 'str') {
+      return (
+        <StringComponent
+          name={name}
+          value={attribute.value as string}
+          readOnly={attribute.readonly}
+          docString={attribute.doc}
+          parent_path={parentPath}
+        />
+      );
+    } else if (attribute.type === 'DataService') {
+      return (
+        <DataServiceComponent
+          props={attribute.value as DataServiceJSON}
+          parentPath={parentPath.concat('.', name)}
+        />
+      );
+    } else if (attribute.type === 'list') {
+      return (
+        <ListComponent
+          name={name}
+          value={attribute.value as object[]}
+          docString={attribute.doc}
+          parent_path={parentPath}
+        />
+      );
+    } else {
+      return <div key={name}>{name}</div>;
+    }
+  }
+);