refactor: keep local DropZone preview in sync with Zustand state

measuredco · Jan 20, 2025 · f1dec0e · f1dec0e
1 parent b33cae4
commit f1dec0e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
@@ -94,15 +94,13 @@ const DropZoneEdit = forwardRef<HTMLDivElement, DropZoneProps>(
       inNextDeepestArea,
       draggedComponentType,
       userIsDragging,
-      preview,
     } = useContextStore(ZoneStoreContext, (s) => {
       return {
         isDeepestZone: s.zoneDepthIndex[zoneCompound] ?? false,
         inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
         draggedItemId: s.draggedItem?.id,
         draggedComponentType: s.draggedItem?.data.componentType,
         userIsDragging: !!s.draggedItem,
-        preview: s.previewIndex[zoneCompound],
       };
     });
 
@@ -189,7 +187,10 @@ const DropZoneEdit = forwardRef<HTMLDivElement, DropZoneProps>(
       isEnabled = acceptsTarget(draggedComponentType);
     }
 
-    const contentWithPreview = useContentWithPreview(content, zoneCompound);
+    const [contentWithPreview, preview] = useContentWithPreview(
+      content,
+      zoneCompound
+    );
 
     const isDropEnabled =
       isEnabled &&

diff --git a/packages/core/components/DropZone/lib/use-content-with-preview.ts b/packages/core/components/DropZone/lib/use-content-with-preview.ts
@@ -10,7 +10,7 @@ import { useAppContext } from "../../Puck/context";
 export const useContentWithPreview = (
   content: Content,
   zoneCompound: string
-) => {
+): [Content, Preview | undefined] => {
   const { draggedItemId, preview, previewExists } = useContextStore(
     ZoneStoreContext,
     (s) => {
@@ -30,6 +30,9 @@ export const useContentWithPreview = (
   } = useAppContext();
 
   const [contentWithPreview, setContentWithPreview] = useState(content);
+  const [localPreview, setLocalPreview] = useState<Preview | undefined>(
+    preview
+  );
 
   const updateContent = useRenderedCallback(
     (content: Content, preview: Preview | undefined, isDragging: boolean) => {
@@ -71,6 +74,8 @@ export const useContentWithPreview = (
             : content
         );
       }
+
+      setLocalPreview(preview);
     },
     [draggedItemId, previewExists]
   );
@@ -79,5 +84,5 @@ export const useContentWithPreview = (
     updateContent(content, preview, isDragging);
   }, [content, preview, isDragging]);
 
-  return contentWithPreview;
+  return [contentWithPreview, localPreview];
 };