From 6ed6fe5be169dae80ca7c827c6003000c2e02f0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Wed, 28 Feb 2024 10:59:28 +0100
Subject: [PATCH] cleanup: changing some frontend components

---
 frontend/src/components/GenericComponent.tsx |  9 ++++-----
 frontend/src/components/ImageComponent.tsx   |  5 -----
 frontend/src/components/MethodComponent.tsx  | 16 ++++++----------
 3 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx
index f477fca..6338c3c 100644
--- a/frontend/src/components/GenericComponent.tsx
+++ b/frontend/src/components/GenericComponent.tsx
@@ -238,14 +238,13 @@ export const GenericComponent = React.memo(
         <ImageComponent
           name={name}
           parentPath={parentPath}
-          value={attribute.value['value']['value'] as string}
-          readOnly={attribute.readonly}
           docString={attribute.value['value'].doc}
-          // Add any other specific props for the ImageComponent here
-          format={attribute.value['format']['value'] as string}
-          addNotification={addNotification}
           displayName={displayName}
           id={id}
+          addNotification={addNotification}
+          // Add any other specific props for the ImageComponent here
+          value={attribute.value['value']['value'] as string}
+          format={attribute.value['format']['value'] as string}
         />
       );
     } else if (attribute.type === 'ColouredEnum') {
diff --git a/frontend/src/components/ImageComponent.tsx b/frontend/src/components/ImageComponent.tsx
index 43c5af6..c3f2d02 100644
--- a/frontend/src/components/ImageComponent.tsx
+++ b/frontend/src/components/ImageComponent.tsx
@@ -8,7 +8,6 @@ type ImageComponentProps = {
   name: string;
   parentPath: string;
   value: string;
-  readOnly: boolean;
   docString: string;
   format: string;
   addNotification: (message: string, levelname?: LevelName) => void;
@@ -35,9 +34,6 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
 
   return (
     <div className="component imageComponent" id={id}>
-      {process.env.NODE_ENV === 'development' && (
-        <div>Render count: {renderCount.current}</div>
-      )}
       <Card>
         <Card.Header
           onClick={() => setOpen(!open)}
@@ -52,7 +48,6 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
             {process.env.NODE_ENV === 'development' && (
               <p>Render count: {renderCount.current}</p>
             )}
-            {/* Your component JSX here */}
             {format === '' && value === '' ? (
               <p>No image set in the backend.</p>
             ) : (
diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx
index a8051f1..5ff062c 100644
--- a/frontend/src/components/MethodComponent.tsx
+++ b/frontend/src/components/MethodComponent.tsx
@@ -39,15 +39,6 @@ export const MethodComponent = React.memo((props: MethodProps) => {
     triggerNotification();
   };
 
-  const formContent = (
-    <Form onSubmit={execute} ref={formRef}>
-      <Button className="component" variant="primary" type="submit">
-        {`${displayName} `}
-        <DocStringComponent docString={docString} />
-      </Button>
-    </Form>
-  );
-
   useEffect(() => {
     renderCount.current++;
   });
@@ -57,7 +48,12 @@ export const MethodComponent = React.memo((props: MethodProps) => {
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
-      <div>{formContent}</div>
+      <Form onSubmit={execute} ref={formRef}>
+        <Button className="component" variant="primary" type="submit">
+          {`${displayName} `}
+          <DocStringComponent docString={docString} />
+        </Button>
+      </Form>
     </div>
   );
 });