@sanity/orderable-document-list 1.2.1 → 1.2.3

package/src/DraggableList.tsx

@@ -1,14 +1,14 @@
-import {useEffect, useState, useMemo, useCallback, CSSProperties} from 'react'
+import {useEffect, useState, useMemo, useCallback, type CSSProperties} from 'react'
 import {DragDropContext, Draggable, Droppable, type DropResult} from '@hello-pangea/dnd'
 import {Box, Card, useToast} from '@sanity/ui'
 import type {PatchOperations} from 'sanity'
 import {usePaneRouter} from 'sanity/structure'
 
-import Document from './Document'
+import {Document} from './Document'
 import {reorderDocuments} from './helpers/reorderDocuments'
 import {ORDER_FIELD_NAME} from './helpers/constants'
 import {useSanityClient} from './helpers/client'
-import {SanityDocumentWithOrder} from './types'
+import type {SanityDocumentWithOrder} from './types'
 
 interface ListSetting {
   isDuplicate: boolean
@@ -25,30 +25,26 @@ export interface DraggableListProps {
 
 const getItemStyle = (
   draggableStyle: CSSProperties | undefined,
-  itemIsUpdating: boolean
+  itemIsUpdating: boolean,
 ): CSSProperties => ({
   userSelect: 'none',
-  transition: `opacity 500ms ease-in-out`,
+  transition: 'opacity 500ms ease-in-out',
   opacity: itemIsUpdating ? 0.2 : 1,
-  pointerEvents: itemIsUpdating ? `none` : undefined,
+  pointerEvents: itemIsUpdating ? 'none' : undefined,
   ...draggableStyle,
 })
 
 const cardTone = (settings: ListSetting) => {
   const {isDuplicate, isGhosting, isDragging, isSelected} = settings
 
-  if (isGhosting) return `transparent`
-  if (isDragging || isSelected) return `primary`
-  if (isDuplicate) return `caution`
+  if (isGhosting) return 'transparent'
+  if (isDragging || isSelected) return 'primary'
+  if (isDuplicate) return 'caution'
 
   return undefined
 }
 
-export default function DraggableList({
-  data,
-  listIsUpdating,
-  setListIsUpdating,
-}: DraggableListProps) {
+export function DraggableList({data, listIsUpdating, setListIsUpdating}: DraggableListProps) {
   const toast = useToast()
   const router = usePaneRouter()
   const {groupIndex, routerPanesState} = router
@@ -64,7 +60,7 @@ export default function DraggableList({
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [data])
 
-  const [draggingId, setDraggingId] = useState(``)
+  const [draggingId, setDraggingId] = useState('')
   const [selectedIds, setSelectedIds] = useState<string[]>(currentDoc ? [currentDoc] : [])
 
   const clearSelected = useCallback(() => setSelectedIds([]), [setSelectedIds])
@@ -114,7 +110,7 @@ export default function DraggableList({
 
       return setSelectedIds(updatedIds)
     },
-    [setSelectedIds, orderedData, selectedIds]
+    [setSelectedIds, orderedData, selectedIds],
   )
 
   const client = useSanityClient()
@@ -125,35 +121,36 @@ export default function DraggableList({
 
       patches.forEach(([docId, ops]) => transaction.patch(docId, ops))
 
-      await transaction
-        .commit()
-        .then((updated) => {
-          clearSelected()
-          setDraggingId(``)
-          setListIsUpdating(false)
-          toast.push({
-            title: `${
-              updated.results.length === 1 ? `1 Document` : `${updated.results.length} Documents`
-            } Reordered`,
-            status: `success`,
-            description: message,
-          })
+      try {
+        const updated = await transaction.commit({
+          visibility: 'async',
+          tag: 'orderable-document-list.reorder',
         })
-        .catch(() => {
-          setDraggingId(``)
-          setListIsUpdating(false)
-          toast.push({
-            title: `Reordering failed`,
-            status: `error`,
-          })
+        clearSelected()
+        setDraggingId('')
+        setListIsUpdating(false)
+        toast.push({
+          title: `${
+            updated.results.length === 1 ? '1 document' : `${updated.results.length} documents`
+          } reordered`,
+          status: 'success',
+          description: message,
+        })
+      } catch (err) {
+        setDraggingId('')
+        setListIsUpdating(false)
+        toast.push({
+          title: 'Reordering failed',
+          status: 'error',
         })
+      }
     },
-    [client, setDraggingId, clearSelected, setListIsUpdating, toast]
+    [client, setDraggingId, clearSelected, setListIsUpdating, toast],
   )
 
   const handleDragEnd = useCallback(
     (result: DropResult | undefined, entities: SanityDocumentWithOrder[]) => {
-      setDraggingId(``)
+      setDraggingId('')
 
       const {source, destination, draggableId} = result ?? {}
 
@@ -190,7 +187,7 @@ export default function DraggableList({
         transactPatches(patches, message)
       }
     },
-    [selectedIds, setDraggingId, setSelectedIds, transactPatches, setListIsUpdating]
+    [selectedIds, setDraggingId, setSelectedIds, transactPatches, setListIsUpdating],
   )
 
   const handleDragStart = useCallback(
@@ -203,7 +200,7 @@ export default function DraggableList({
 
       setDraggingId(id)
     },
-    [selectedIds, clearSelected, setDraggingId]
+    [selectedIds, clearSelected, setDraggingId],
   )
 
   // Move one document up or down one place, by fake invoking the drag function
@@ -217,7 +214,7 @@ export default function DraggableList({
 
       return handleDragEnd(result as DropResult, entities)
     },
-    [handleDragEnd]
+    [handleDragEnd],
   )
 
   const onWindowKeyDown = useCallback(
@@ -226,7 +223,7 @@ export default function DraggableList({
         clearSelected()
       }
     },
-    [clearSelected]
+    [clearSelected],
   )
 
   useEffect(() => {
@@ -248,7 +245,7 @@ export default function DraggableList({
 
   const onDragEnd = useCallback(
     (result: DropResult) => handleDragEnd(result, orderedData),
-    [orderedData, handleDragEnd]
+    [orderedData, handleDragEnd],
   )
 
   return (
@@ -282,7 +279,7 @@ export default function DraggableList({
                       {...innerProvided.dragHandleProps}
                       style={
                         isDisabled
-                          ? {opacity: 0.2, pointerEvents: `none`}
+                          ? {opacity: 0.2, pointerEvents: 'none'}
                           : getItemStyle(innerProvided.draggableProps.style, isUpdating)
                       }
                     >

package/src/OrderableContext.ts

@@ -1,7 +1,7 @@
-import React from 'react'
+import {createContext} from 'react'
 
 export interface OrderableContextValue {
   showIncrements?: boolean
 }
 
-export const OrderableContext = React.createContext<OrderableContextValue>({})
+export const OrderableContext = createContext<OrderableContextValue>({})

package/src/OrderableDocumentList.tsx

@@ -1,8 +1,8 @@
 import {Component} from 'react'
 
-import {SanityClient} from '@sanity/client'
+import type {SanityClient} from '@sanity/client'
 import type {ToastParams} from '@sanity/ui'
-import DocumentListWrapper from './DocumentListWrapper'
+import {DocumentListWrapper} from './DocumentListWrapper'
 import {resetOrder} from './helpers/resetOrder'
 
 export interface OrderableDocumentListProps {
@@ -20,7 +20,7 @@ interface State {
 }
 
 // Must use a Class Component here so the actionHandlers can be called
-export default class OrderableDocumentList extends Component<OrderableDocumentListProps, State> {
+export class OrderableDocumentList extends Component<OrderableDocumentListProps, State> {
   constructor(props: OrderableDocumentListProps) {
     super(props)
     this.state = {

package/src/desk-structure/orderableDocumentListDeskItem.ts

@@ -1,9 +1,9 @@
 import {GenerateIcon, SortIcon} from '@sanity/icons'
 import type {ConfigContext} from 'sanity'
 
-import {ComponentType} from 'react'
+import type {ComponentType} from 'react'
 import {StructureBuilder, type ListItem, type MenuItem} from 'sanity/structure'
-import OrderableDocumentList from '../OrderableDocumentList'
+import {OrderableDocumentList} from '../OrderableDocumentList'
 import {API_VERSION} from '../helpers/constants'
 
 export interface OrderableListConfig {
@@ -42,33 +42,39 @@ export function orderableDocumentListDeskItem(config: OrderableListConfig): List
       S.menuItem()
         .title(`Create new ${typeTitle}`)
         .intent({type: 'create', params: {type}})
-        .serialize()
+        .serialize(),
     )
   }
   return S.listItem()
     .title(listTitle)
     .id(listId)
     .icon(listIcon)
+    .schemaType(type)
     .child(
-      Object.assign(S.documentTypeList(type).serialize(), {
-        // Prevents the component from re-rendering when switching documents
-        __preserveInstance: true,
-        // Prevents the component from NOT re-rendering when switching listItems
-        key: listId,
+      Object.assign(
+        S.documentTypeList(type)
+          .canHandleIntent(() => !!createIntent)
+          .serialize(),
+        {
+          // Prevents the component from re-rendering when switching documents
+          __preserveInstance: true,
+          // Prevents the component from NOT re-rendering when switching listItems
+          key: listId,
 
-        type: 'component',
-        component: OrderableDocumentList,
-        options: {type, filter, params, client},
-        menuItems: [
-          ...menuItems,
-          S.menuItem().title(`Reset Order`).icon(GenerateIcon).action(`resetOrder`).serialize(),
-          S.menuItem()
-            .title(`Toggle Increments`)
-            .icon(SortIcon)
-            .action(`showIncrements`)
-            .serialize(),
-        ],
-      })
+          type: 'component',
+          component: OrderableDocumentList,
+          options: {type, filter, params, client},
+          menuItems: [
+            ...menuItems,
+            S.menuItem().title(`Reset Order`).icon(GenerateIcon).action(`resetOrder`).serialize(),
+            S.menuItem()
+              .title(`Toggle Increments`)
+              .icon(SortIcon)
+              .action(`showIncrements`)
+              .serialize(),
+          ],
+        },
+      ),
     )
     .serialize()
 }

package/src/fields/orderRankField.ts

@@ -1,7 +1,7 @@
 import {type ConfigContext, defineField} from 'sanity'
 import {API_VERSION, ORDER_FIELD_NAME} from '../helpers/constants'
-import initialRank from '../helpers/initialRank'
-import {NewItemPosition} from '../types'
+import {initialRank} from '../helpers/initialRank'
+import type {NewItemPosition} from '../types'
 
 export type SchemaContext = Omit<ConfigContext, 'schema' | 'currentUser' | 'client'>
 
@@ -16,7 +16,7 @@ export const orderRankField = (config: RankFieldConfig) => {
       `
       type must be provided.
       Example: orderRankField({type: 'category'})
-      `
+      `,
     )
   }
 
@@ -33,7 +33,8 @@ export const orderRankField = (config: RankFieldConfig) => {
 
       const lastDocOrderRank = await getClient({apiVersion: API_VERSION}).fetch(
         `*[_type == $type]|order(@[$order] ${direction})[0][$order]`,
-        {type, order: ORDER_FIELD_NAME}
+        {type, order: ORDER_FIELD_NAME},
+        {tag: 'orderable-document-list.last-doc-order-rank'},
       )
       return initialRank(lastDocOrderRank, newItemPosition)
     },

package/src/fields/orderRankOrdering.ts

@@ -1,4 +1,4 @@
-import {SortOrdering} from 'sanity'
+import type {SortOrdering} from 'sanity'
 import {ORDER_FIELD_NAME} from '../helpers/constants'
 
 export const orderRankOrdering: SortOrdering = {

package/src/helpers/client.ts

@@ -1,6 +1,6 @@
-import {useClient} from 'sanity'
+import {type SanityClient, useClient} from 'sanity'
 import {API_VERSION} from './constants'
 
-export function useSanityClient() {
+export function useSanityClient(): SanityClient {
   return useClient({apiVersion: API_VERSION})
 }

package/src/helpers/initialRank.ts

@@ -3,9 +3,9 @@ import {NewItemPosition} from '../types'
 
 // Use in initial value field by passing in the rank value of the last document
 // If not value passed, generate a sensibly low rank
-export default function initialRank(
+export function initialRank(
   compareRankValue = ``,
-  newItemPosition: NewItemPosition = 'after'
+  newItemPosition: NewItemPosition = 'after',
 ): string {
   const compareRank = compareRankValue ? LexoRank.parse(compareRankValue) : LexoRank.min()
   const rank =

package/src/helpers/reorderDocuments.ts

@@ -1,7 +1,7 @@
 import {LexoRank} from 'lexorank'
 import type {PatchOperations} from 'sanity'
 
-import {SanityDocumentWithOrder} from '../types'
+import type {SanityDocumentWithOrder} from '../types'
 import {ORDER_FIELD_NAME} from './constants'
 
 export interface MaifestArgs {
@@ -48,10 +48,10 @@ export const reorderDocuments = ({
   const isMovingUp = startIndex > endIndex
   const selectedItems = entities.filter((item) => selectedIds.includes(item._id))
   const message = [
-    `Moved`,
-    selectedItems.length === 1 ? `1 document` : `${selectedItems.length} documents`,
-    isMovingUp ? `up` : `down`,
-    `from position`,
+    'Moved',
+    selectedItems.length === 1 ? '1 document' : `${selectedItems.length} documents`,
+    isMovingUp ? 'up' : 'down',
+    'from position',
     `${startIndex + 1} to ${endIndex + 1}`,
   ].join(' ')
 
@@ -99,7 +99,7 @@ export const reorderDocuments = ({
 
       return {all: [...acc.all, cur], selected: acc.selected}
     },
-    {all: [], selected: []}
+    {all: [], selected: []},
   )
 
   const patches = selected.flatMap((doc) => {
@@ -115,9 +115,9 @@ export const reorderDocuments = ({
     ]
 
     // If it's a draft, we need to patch the published document as well
-    if (doc._id.startsWith(`drafts.`) && doc.hasPublished) {
+    if (doc._id.startsWith('drafts.') && doc.hasPublished) {
       docPatches.push([
-        doc._id.replace(`drafts.`, ``),
+        doc._id.replace('drafts.', ''),
         {
           set: {
             [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME],

package/src/helpers/resetOrder.ts

@@ -1,31 +1,36 @@
 import {LexoRank} from 'lexorank'
-import {SanityClient} from '@sanity/client'
+import type {MultipleMutationResult, SanityClient} from '@sanity/client'
 import {ORDER_FIELD_NAME} from './constants'
+
 // Function to wipe and re-do ordering with LexoRank
 // Will at least attempt to start with the current order
-export async function resetOrder(type = ``, client: SanityClient) {
+export async function resetOrder(
+  type: string,
+  client: SanityClient,
+): Promise<MultipleMutationResult | null> {
   const query = `*[_type == $type]|order(@[$order] asc)._id`
   const queryParams = {type, order: ORDER_FIELD_NAME}
-  const documents = await client.fetch(query, queryParams)
+  const documentIds = await client.fetch<Array<string>>(query, queryParams, {
+    tag: 'orderable-document-list.reset-order',
+  })
 
-  if (!documents.length) {
+  if (documentIds.length === 0) {
     return null
   }
 
-  const transaction = client.transaction()
   let aLexoRank = LexoRank.min()
 
-  for (let index = 0; index < documents.length; index += 1) {
+  const transaction = documentIds.reduce((trx, documentId) => {
     // Generate next rank before even the first document so there's room to move!
     aLexoRank = aLexoRank.genNext().genNext()
 
-    transaction.patch(documents[index], {
+    return trx.patch(documentId, {
       set: {[ORDER_FIELD_NAME]: aLexoRank.toString()},
     })
-  }
+  }, client.transaction())
 
-  return transaction
-    .commit()
-    .then((update) => update)
-    .catch((err) => err)
+  return transaction.commit({
+    visibility: 'async',
+    tag: 'orderable-document-list.reset-order',
+  })
 }