From c5cb91ff10ef29b7f80098ab079c72982c19faef Mon Sep 17 00:00:00 2001
From: Simeon Griggs <simeon@hey.com>
Date: Mon, 4 Apr 2022 12:39:08 +0100
Subject: [PATCH] prevent re-renders on document open + reduce queried data

---
 package.json                                        | 10 +++++-----
 src/DocumentListQuery.js                            |  4 +++-
 src/OrderableDocumentList.js                        |  8 ++++++--
 src/desk-structure/orderableDocumentListDeskItem.js |  2 +-
 src/helpers/resetOrder.js                           |  8 ++++++--
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 80c5604..ac36282 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sanity/orderable-document-list",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Drag-and-drop Document Ordering without leaving the Editing surface",
   "main": "lib/index.js",
   "scripts": {
@@ -29,9 +29,9 @@
   "license": "MIT",
   "dependencies": {
     "@sanity/icons": "^1.2.1",
-    "@sanity/ui": "^0.36.12",
+    "@sanity/ui": "^0.37.6",
     "lexorank": "^1.0.4",
-    "prop-types": "15.7.2",
+    "prop-types": "^15.8.1",
     "react-beautiful-dnd": "^13.1.0"
   },
   "devDependencies": {
@@ -53,10 +53,10 @@
     "husky": "^7.0.2",
     "pinst": "^2.1.6",
     "prettier": "^2.4.1",
-    "sanipack": "2.0.1"
+    "sanipack": "^2.1.0"
   },
   "peerDependencies": {
-    "@sanity/desk-tool": "^2.21.3",
+    "@sanity/desk-tool": "^2.29.0",
     "react": "^17.0.2"
   },
   "bugs": {
diff --git a/src/DocumentListQuery.js b/src/DocumentListQuery.js
index bb0e38b..2299644 100644
--- a/src/DocumentListQuery.js
+++ b/src/DocumentListQuery.js
@@ -17,7 +17,9 @@ export default function DocumentListQuery({type}) {
   const [data, setData] = useState([])
 
   useEffect(() => {
-    const query = `*[_type == $type]|order(@[$order] asc)`
+    const query = `*[_type == $type]|order(@[$order] asc){
+      _id, _type, ${ORDER_FIELD_NAME}
+    }`
     const queryParams = {type, order: ORDER_FIELD_NAME}
     let subscription = null
 
diff --git a/src/OrderableDocumentList.js b/src/OrderableDocumentList.js
index 65728a7..e478359 100644
--- a/src/OrderableDocumentList.js
+++ b/src/OrderableDocumentList.js
@@ -38,10 +38,14 @@ export default class OrderableDocumentList extends Component {
 
       const update = await resetOrder(this.props.options.type)
 
+      const reorderWasSuccessful = update?.results?.length
+
       this.setState(() => ({
         resetOrderTransaction: {
-          status: `success`,
-          title: `Reordered ${update.results.length} Documents`,
+          status: reorderWasSuccessful ? `success` : `info`,
+          title: reorderWasSuccessful
+            ? `Reordered ${update.results.length === 1 ? `Document` : `Documents`}`
+            : `Reordering failed`,
           closable: true,
         },
       }))
diff --git a/src/desk-structure/orderableDocumentListDeskItem.js b/src/desk-structure/orderableDocumentListDeskItem.js
index c1e5a85..94a507d 100644
--- a/src/desk-structure/orderableDocumentListDeskItem.js
+++ b/src/desk-structure/orderableDocumentListDeskItem.js
@@ -25,8 +25,8 @@ export function orderableDocumentListDeskItem(config = {}) {
     .id(listId)
     .icon(listIcon)
     .child(
-      // This appears to be the only way to have a custom component in a list AND have a "compose" button that works
       Object.assign(S.documentTypeList(type).serialize(), {
+        __preserveInstance: true,
         type: 'component',
         component: OrderableDocumentList,
         options: {type},
diff --git a/src/helpers/resetOrder.js b/src/helpers/resetOrder.js
index bf8da12..17651a9 100644
--- a/src/helpers/resetOrder.js
+++ b/src/helpers/resetOrder.js
@@ -9,10 +9,14 @@ const client = sanityClient.withConfig({
 // Function to wipe and re-do ordering with LexoRank
 // Will at least attempt to start with the current order
 export async function resetOrder(type = ``) {
-  const query = `*[_type == $type]|order(@[$order] asc)`
+  const query = `*[_type == $type]|order(@[$order] asc)._id`
   const queryParams = {type, order: ORDER_FIELD_NAME}
   const documents = await client.fetch(query, queryParams)
 
+  if (!documents.length) {
+    return null
+  }
+
   const transaction = client.transaction()
   let aLexoRank = LexoRank.min()
 
@@ -20,7 +24,7 @@ export async function resetOrder(type = ``) {
     // Generate next rank before even the first document so there's room to move!
     aLexoRank = aLexoRank.genNext().genNext()
 
-    transaction.patch(documents[index]._id, {
+    transaction.patch(documents[index], {
       set: {[ORDER_FIELD_NAME]: aLexoRank.value},
     })
   }