chore(drag-and-drop): implement new useDocuments

sanity-io · Oct 21, 2024 · b342723 · b342723
1 parent 4ca8306
commit b342723
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 22 deletions.
diff --git a/apps/page-builder-demo/src/app/dnd/page.tsx b/apps/page-builder-demo/src/app/dnd/page.tsx
@@ -189,7 +189,7 @@ export default async function Page() {
         {/* Custom behaviour (reverse flex flow) */}
         <section className="mt-6">
           <h2>Custom behaviour</h2>
-          <div className="mt-4 flex flex-col-reverse gap-4">
+          <div className="mt-4 flex flex-col gap-4">
             {data.children.map((child) => (
               <div
                 data-sanity={createDataAttribute({

diff --git a/apps/page-builder-demo/src/components/page/DnDCustomBehaviour.tsx b/apps/page-builder-demo/src/components/page/DnDCustomBehaviour.tsx
@@ -18,7 +18,7 @@ function getReferenceNodeAndInsertPosition(position: any) {
 }
 
 export function DnDCustomBehaviour() {
-  const {get, mutate} = useDocuments()
+  const {getDocument} = useDocuments()
 
   useEffect(() => {
     const handler = (e: CustomEvent) => {
@@ -28,31 +28,29 @@ export function DnDCustomBehaviour() {
 
       const reference = getReferenceNodeAndInsertPosition(insertPosition)
       if (reference) {
-        const {snapshot, id} = get(target.id)
-        // We must have access to the document actor and snapshot in order to
-        // perform the necessary mutations. If either of these are undefined,
-        // something went wrong when resolving the currently in use documents
-        if (!snapshot) return
-
+        const doc = getDocument(target.id)
+        // We must have access to the document actor in order to perform the
+        // necessary mutations. If this is undefined, something went wrong when
+        // resolving the currently in use documents
         const {node, position} = reference
-        // Get the current value of the element we dragged, as we will need to
-        // "clone" this into the new position
-        const elementValue = getFromPath(snapshot, target.path)
         // Get the key of the element that was dragged
         const {key: targetKey} = getArrayItemKeyAndParentPath(target)
         // Get the key of the reference element, and path to the parent array
         const {path: arrayPath, key: referenceItemKey} = getArrayItemKeyAndParentPath(node)
-        // Don't perform a mutation if the keys match, as this means the item
-        // was only dragged to its existing position, i.e. not moved
+        // Don't patch if the keys match, as this means the item was only
+        // dragged to its existing position, i.e. not moved
         if (arrayPath && referenceItemKey && referenceItemKey !== targetKey) {
-          const mutations = [
-            createIfNotExists({_id: id, _type: target.type!}),
-            // Remove the original dragged item
-            patch(id, at(arrayPath, remove({_key: targetKey}))),
-            // Insert the cloned dragged item into its new position
-            patch(id, at(arrayPath, insert(elementValue, position, {_key: referenceItemKey}))),
-          ]
-          mutate(id, mutations)
+          doc.patch(({snapshot}) => {
+            // Get the current value of the element we dragged, as we will need
+            // to clone this into the new position
+            const elementValue = getFromPath(snapshot, target.path)
+            return [
+              // Remove the original dragged item
+              at(arrayPath, remove({_key: targetKey})),
+              // Insert the cloned dragged item into its new position
+              at(arrayPath, insert(elementValue, position, {_key: referenceItemKey})),
+            ]
+          })
         }
       }
     }
@@ -62,7 +60,7 @@ export function DnDCustomBehaviour() {
     return () => {
       window.removeEventListener('sanity/dragEnd', handler as EventListener)
     }
-  }, [get, mutate])
+  }, [getDocument])
 
   return <></>
 }