chore: rabbit-review

Author: tractorss

src/lib/draggable-list/index.tsx

@@ -12,13 +12,8 @@ import { cn } from "../../utils";
 import DragAndDropIcon from "../../assets/svgs/drag-and-drop.svg";
 import Trash from "../../assets/svgs/trash.svg";
 import clsx from "clsx";
-import { useList } from "./useList";
+import { ListItem, useList } from "./useList";
 
-type ListItem = {
-  id: string | number;
-  name: string;
-  value: any;
-};
 interface IDraggableList
   extends Omit<
     ListBoxProps<ListBoxItemProps>,

src/lib/draggable-list/useList.ts

@@ -17,22 +17,15 @@ interface UseListOptions {
 export function useList({ initialItems, onChange }: UseListOptions) {
   const [items, setItems] = useState<ListItem[]>(initialItems);
 
+  // track updates to initialItems
   useEffect(() => {
-    // preventing callback loop, we cannot rely on useEffect dependency since that does not utilize deep comparison
-    if (_.isEqual(initialItems, items)) return;
-
-    setItems(initialItems);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setItems((prevItems) => {
+      // preventing callback loop
+      if (_.isEqual(initialItems, prevItems)) return prevItems;
+      return initialItems;
+    });
   }, [initialItems]);
 
-  const updateItems = useCallback(
-    (newItems: ListItem[]) => {
-      setItems(newItems);
-      onChange?.(newItems);
-    },
-    [onChange],
-  );
-
   const itemsMap = useMemo(() => {
     const map = new Map<Key, ListItem>();
     for (const item of items) {
@@ -45,46 +38,59 @@ export function useList({ initialItems, onChange }: UseListOptions) {
 
   const remove = useCallback(
     (key: Key) => {
-      updateItems(items.filter((item) => key !== item.id));
+      // updateItems(items.filter((item) => key !== item.id));
+      setItems((prevItems) => {
+        const newItems = prevItems.filter((item) => key !== item.id);
+        onChange?.(newItems);
+        return newItems;
+      });
     },
-    [items, updateItems],
+    [onChange],
   );
 
   const moveBefore = useCallback(
     (targetKey: Key, keys: Iterable<Key>) => {
-      const key = Array.from(keys)[0];
-      if (key === targetKey) return;
+      setItems((prevItems) => {
+        const key = Array.from(keys)[0];
+        if (key === targetKey) return prevItems;
+
+        const indexFrom = prevItems.findIndex((item) => item.id === key);
+        const indexTo = prevItems.findIndex((item) => item.id === targetKey);
+        if (indexFrom === -1 || indexTo === -1) return prevItems;
 
-      const indexFrom = items.findIndex((item) => item.id === key);
-      const indexTo = items.findIndex((item) => item.id === targetKey);
-      if (indexFrom === -1 || indexTo === -1) return;
+        const reordered = [...prevItems];
+        const [movedItem] = reordered.splice(indexFrom, 1);
+        reordered.splice(indexTo, 0, movedItem);
+        onChange?.(reordered);
 
-      const reordered = [...items];
-      const [movedItem] = reordered.splice(indexFrom, 1);
-      reordered.splice(indexTo, 0, movedItem);
-      updateItems(reordered);
+        return reordered;
+      });
     },
-    [items, updateItems],
+    [onChange],
   );
 
   const moveAfter = useCallback(
     (targetKey: Key, keys: Iterable<Key>) => {
-      const key = Array.from(keys)[0];
-      if (key === targetKey) return;
+      setItems((prevItems) => {
+        const key = Array.from(keys)[0];
+        if (key === targetKey) return prevItems;
 
-      const indexFrom = items.findIndex((item) => item.id === key);
-      const indexTo = items.findIndex((item) => item.id === targetKey);
-      if (indexFrom === -1 || indexTo === -1) return;
+        const indexFrom = prevItems.findIndex((item) => item.id === key);
+        const indexTo = prevItems.findIndex((item) => item.id === targetKey);
+        if (indexFrom === -1 || indexTo === -1) return prevItems;
 
-      const reordered = [...items];
-      const [movedItem] = reordered.splice(indexFrom, 1);
+        const reordered = [...prevItems];
+        const [movedItem] = reordered.splice(indexFrom, 1);
 
-      // Adjust if removing item before target index
-      const insertIndex = indexFrom < indexTo ? indexTo : indexTo + 1;
-      reordered.splice(insertIndex, 0, movedItem);
-      updateItems(reordered);
+        // Adjust if removing item before target index
+        const insertIndex = indexFrom < indexTo ? indexTo : indexTo + 1;
+        reordered.splice(insertIndex, 0, movedItem);
+        onChange?.(reordered);
+
+        return reordered;
+      });
     },
-    [items, updateItems],
+    [onChange],
   );
 
   return {

src/lib/form/bignumber-field/index.tsx

@@ -64,7 +64,7 @@ function BigNumberField({
           <>
             <Input
               {...inputProps}
-              aria-errormessage="BigNumberFieldError"
+              aria-errormessage={`BigNumberFieldError-${inputProps.id}`}
               name={name}
               className={cn(
                 "hover-short-transition bg-klerosUIComponentsWhiteBackground size-full",
@@ -181,7 +181,7 @@ function BigNumberField({
       )}
       {props.showFieldError && validationResult.isInvalid && (
         <span
-          id="BigNumberFieldError"
+          id={`BigNumberFieldError-${inputProps.id}`}
           aria-label={validationResult.validationError}
           className={cn(
             "text-klerosUIComponentsError mt-1 text-sm break-words",

src/lib/form/bignumber-field/useBigNumberField.tsx

@@ -632,7 +632,7 @@ export function useBigNumberField(props: BigNumberFieldProps) {
     const validate = props.validate;
     if (validate) {
       const result = validate(value ?? numberValue);
-      if (typeof result === `string`) {
+      if (typeof result === "string") {
         fieldErrorProps.isInvalid = true;
         fieldErrorProps.validationError = result;
       }

src/stories/draggable-list.stories.tsx

@@ -5,6 +5,7 @@ import { IPreviewArgs } from "./utils";
 
 import DraggableList from "../lib/draggable-list";
 import { Button } from "../lib";
+import { ListItem } from "../lib/draggable-list/useList";
 
 const meta = {
   component: DraggableList,
@@ -35,7 +36,7 @@ export const Default: Story = {
     ],
   },
   render: function Render(args) {
-    const [items, setItems] = useState([
+    const [items, setItems] = useState<ListItem[]>([
       { id: 1, name: "Illustrator", value: "" },
       { id: 2, name: "Premiere", value: "" },
       { id: 3, name: "Acrobat", value: "" },
@@ -49,7 +50,11 @@ export const Default: Story = {
     };
     return (
       <div>
-        <DraggableList {...args} items={items} />
+        <DraggableList
+          {...args}
+          items={items}
+          updateCallback={(items) => setItems(items)}
+        />
         <Button onPress={addItem} text="Add Item" className="mt-4" />
       </div>
     );