Merge pull request #17 from sanity-io/less-fetching

prevent re-renders on document open + reduce queried data

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": {

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
 

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,
         },
       }))

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},

src/helpers/resetOrder.js

@@ -9,18 +9,22 @@ 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()
 
   for (let index = 0; index < documents.length; index += 1) {
     // 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},
     })
   }