From e50a4c6aa8fe028c3fec6dae61e1f8fd0d0743de Mon Sep 17 00:00:00 2001
From: Can-Philipp Tura <c.tura@campus.tu-berlin.de>
Date: Thu, 24 Oct 2024 16:30:13 +0200
Subject: [PATCH] removed outdated use of useRef for editable paragraphs

---
 .../[configId]/custom-field.tsx               | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/custom-field.tsx b/src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/custom-field.tsx
index 2a08bf6cf..d47472e31 100644
--- a/src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/custom-field.tsx
+++ b/src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/custom-field.tsx
@@ -64,23 +64,14 @@ const CustomField: React.FC<CustomFieldProps> = ({ keyId, parameter, editable, p
   const [createFieldOpen, setCreateFieldOpen] = useState<boolean>(false);
   const [deleteFieldOpen, setDeleteFieldOpen] = useState<boolean>(false);
 
-  // TODO: check if this actually works when given the newest data after refresh
-  const currentKeyRef = useRef(keyId);
-  useEffect(() => {
-    if (keyId !== currentKeyRef.current) currentKeyRef.current = keyId;
-  }, [keyId]);
-  const restoreKey = () => {
-    currentKeyRef.current = keyId;
-  };
-  const saveKey = async () => {
-    if (!currentKeyRef.current) return;
-    await updateParameter(parameter.id!, { key: currentKeyRef.current });
+  const handleKeyChange = async (newKey: string) => {
+    if (!newKey) return;
+    await updateParameter(parameter.id!, { key: newKey });
     router.refresh();
   };
 
   const handleDeleteConfirm = async () => {
     if (parameter.id) await removeParameter(parameter.id);
-
     setCreateFieldOpen(false);
     router.refresh();
   };
@@ -177,14 +168,12 @@ const CustomField: React.FC<CustomFieldProps> = ({ keyId, parameter, editable, p
               editable && {
                 icon: <EditOutlined style={{ color: 'rgba(0, 0, 0, 0.88)', margin: '0 10px' }} />,
                 tooltip: 'Edit Parameter Key',
-                onCancel: restoreKey,
-                onChange: (newValue) => (currentKeyRef.current = newValue),
-                onEnd: saveKey,
+                onChange: handleKeyChange,
                 enterIcon: <CheckOutlined />,
               }
             }
           >
-            {currentKeyRef.current}
+            {keyId}
           </Paragraph>
           {editable && (
             <Space.Compact size="small">
@@ -202,11 +191,7 @@ const CustomField: React.FC<CustomFieldProps> = ({ keyId, parameter, editable, p
       </Col>
 
       <Col span={21} className="gutter-row">
-        <Param
-          editingEnabled={editable}
-          field={parameter}
-          label={keyId[0].toUpperCase() + keyId.slice(1)}
-        />
+        <Param editingEnabled={editable} field={parameter} label={keyId} />
 
         {(editable || (parameter.linkedParameters && parameter.linkedParameters.length > 0)) && (
           <Card style={cardStyle} size="small">