update: address review comments by @Awambeng

Author: forkimenjeckayang

js/apps/admin-ui/src/components/dynamic/ClaimDisplayComponent.tsx

@@ -11,7 +11,7 @@ import {
   TextInput,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "@keycloak/keycloak-ui-shared";
@@ -23,10 +23,10 @@ type ClaimDisplayEntry = {
 };
 
 type IdClaimDisplayEntry = ClaimDisplayEntry & {
-  id: number;
+  id: string;
 };
 
-const generateId = () => Date.now() + Math.random();
+const generateId = () => crypto.randomUUID();
 
 export const ClaimDisplayComponent = ({
   name,
@@ -41,6 +41,7 @@ export const ClaimDisplayComponent = ({
   const { getValues, setValue, register } = useFormContext();
   const [displays, setDisplays] = useState<IdClaimDisplayEntry[]>([]);
   const fieldName = convertToName(name!);
+  const debounceTimeoutRef = useRef<number | null>(null);
 
   useEffect(() => {
     register(fieldName);
@@ -58,10 +59,24 @@ export const ClaimDisplayComponent = ({
     }
   }, [defaultValue, fieldName, getValues, register]);
 
-  const appendNew = () =>
-    setDisplays([...displays, { name: "", locale: "", id: generateId() }]);
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current !== null) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const appendNew = () => {
+    const newDisplays = [
+      ...displays,
+      { name: "", locale: "", id: generateId() },
+    ];
+    setDisplays(newDisplays);
+    syncFormValue(newDisplays);
+  };
 
-  const update = (val = displays) => {
+  const syncFormValue = (val = displays) => {
     const filteredEntries = val
       .filter((e) => e.name !== "" && e.locale !== "")
       .map((entry) => ({ name: entry.name, locale: entry.locale }));
@@ -72,25 +87,48 @@ export const ClaimDisplayComponent = ({
     });
   };
 
-  const updateName = (index: number, name: string) => {
-    updateEntry(index, { ...displays[index], name });
+  const debouncedUpdate = (val: IdClaimDisplayEntry[]) => {
+    if (debounceTimeoutRef.current !== null) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+    debounceTimeoutRef.current = window.setTimeout(() => {
+      syncFormValue(val);
+      debounceTimeoutRef.current = null;
+    }, 300);
   };
 
-  const updateLocale = (index: number, locale: string) => {
-    updateEntry(index, { ...displays[index], locale });
+  const flushUpdate = () => {
+    if (debounceTimeoutRef.current !== null) {
+      clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = null;
+    }
+    syncFormValue();
   };
 
-  const updateEntry = (index: number, entry: IdClaimDisplayEntry) =>
-    setDisplays([
+  const updateName = (index: number, name: string) => {
+    const newDisplays = [
       ...displays.slice(0, index),
-      entry,
+      { ...displays[index], name },
       ...displays.slice(index + 1),
-    ]);
+    ];
+    setDisplays(newDisplays);
+    debouncedUpdate(newDisplays);
+  };
+
+  const updateLocale = (index: number, locale: string) => {
+    const newDisplays = [
+      ...displays.slice(0, index),
+      { ...displays[index], locale },
+      ...displays.slice(index + 1),
+    ];
+    setDisplays(newDisplays);
+    debouncedUpdate(newDisplays);
+  };
 
   const remove = (index: number) => {
     const value = [...displays.slice(0, index), ...displays.slice(index + 1)];
     setDisplays(value);
-    update(value);
+    syncFormValue(value);
   };
 
   return displays.length !== 0 ? (
@@ -117,7 +155,7 @@ export const ClaimDisplayComponent = ({
                 data-testid={`${fieldName}.${index}.name`}
                 value={display.name}
                 onChange={(_event, value) => updateName(index, value)}
-                onBlur={() => update()}
+                onBlur={() => flushUpdate()}
                 isDisabled={isDisabled}
                 placeholder={t("claimDisplayNamePlaceholder")}
               />
@@ -128,7 +166,7 @@ export const ClaimDisplayComponent = ({
                 data-testid={`${fieldName}.${index}.locale`}
                 value={display.locale}
                 onChange={(_event, value) => updateLocale(index, value)}
-                onBlur={() => update()}
+                onBlur={() => flushUpdate()}
                 isDisabled={isDisabled}
                 placeholder={t("claimDisplayLocalePlaceholder")}
               />
@@ -163,14 +201,14 @@ export const ClaimDisplayComponent = ({
     </FormGroup>
   ) : (
     <EmptyState
-      data-testid={`${name}-empty-state`}
+      data-testid={`${fieldName}-empty-state`}
       className="pf-v5-u-p-0"
       variant="xs"
     >
       <EmptyStateBody>{t("noClaimDisplayEntries")}</EmptyStateBody>
       <EmptyStateFooter>
         <Button
-          data-testid={`${name}-add-row`}
+          data-testid={`${fieldName}-add-row`}
           variant="link"
           icon={<PlusCircleIcon />}
           size="sm"