chore: address PR comments

measuredco · Oct 26, 2023 · c8c02fd · c8c02fd
1 parent ec985e3
commit c8c02fd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
@@ -14,15 +14,17 @@ const getClassNameItem = getClassNameFactory("ComponentListItem", styles);
 const ComponentListItem = ({
   component,
   index,
+  id,
 }: {
   component: string;
   index: number;
+  id: string;
 }) => {
   return (
     <div className={getClassNameItem()}>
       <Draggable
         key={component}
-        id={component}
+        id={id}
         index={index}
         showShadow
         disableAnimations
@@ -102,6 +104,7 @@ const ComponentList = ({
                       key={componentKey}
                       component={componentKey}
                       index={i}
+                      id={componentKey}
                     />
                   );
                 })}

diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
@@ -272,9 +272,11 @@ export function Puck({
               droppedItem.source.droppableId.startsWith("component-list") &&
               droppedItem.destination
             ) {
+              const [_, componentId] = droppedItem.draggableId.split("::");
+
               dispatch({
                 type: "insert",
-                componentType: droppedItem.draggableId,
+                componentType: componentId || droppedItem.draggableId,
                 destinationIndex: droppedItem.destination!.index,
                 destinationZone: droppedItem.destination.droppableId,
               });

diff --git a/packages/core/lib/use-component-list.tsx b/packages/core/lib/use-component-list.tsx
@@ -6,7 +6,7 @@ export const useComponentList = (config: Config, ui: UiState) => {
   const [componentList, setComponentList] = useState<ReactNode[]>();
 
   useEffect(() => {
-    if (ui.componentList) {
+    if (Object.keys(ui.componentList).length > 0) {
       const matchedComponents: string[] = [];
 
       let _componentList: ReactNode[];
@@ -31,6 +31,7 @@ export const useComponentList = (config: Config, ui: UiState) => {
                     key={componentName}
                     component={componentName as string}
                     index={i}
+                    id={`${categoryKey}::${componentName}`}
                   />
                 );
               })}
@@ -49,13 +50,18 @@ export const useComponentList = (config: Config, ui: UiState) => {
         ui.componentList.other?.visible !== false
       ) {
         _componentList.push(
-          <ComponentList id="other" key="other" title={"Other"}>
+          <ComponentList
+            id="other"
+            key="other"
+            title={ui.componentList.other?.title || "Other"}
+          >
             {remainingComponents.map((componentName, i) => {
               return (
                 <ComponentList.Item
                   key={componentName}
                   component={componentName as string}
                   index={i}
+                  id={`other::${componentName}`}
                 />
               );
             })}