@sanity/orderable-document-list 1.0.3 → 1.1.0

package/src/DocumentListQuery.tsx

@@ -1,11 +1,10 @@
-import React, {useEffect, useMemo, useState} from 'react'
-import {Box, Flex, Spinner, Stack} from '@sanity/ui'
+import {useEffect, useMemo, useState} from 'react'
+import {Box, Flex, Container, Spinner, Stack, Text} from '@sanity/ui'
 
-import type {SanityDocument} from 'sanity'
+import {useListeningQuery, Feedback} from 'sanity-plugin-utils'
 import DraggableList from './DraggableList'
 import {ORDER_FIELD_NAME} from './helpers/constants'
-import Feedback from './Feedback'
-import {useSanityClient} from './helpers/client'
+import {SanityDocumentWithOrder} from './types'
 
 export interface DocumentListQueryProps {
   type: string
@@ -13,11 +12,6 @@ export interface DocumentListQueryProps {
   params?: Record<string, unknown>
 }
 
-//rxjs Subscription does not seem to comply with sanity client subscribe anymore
-type ClientSubscription = ReturnType<
-  ReturnType<ReturnType<typeof useSanityClient>['listen']>['subscribe']
->
-
 const DEFAULT_PARAMS = {}
 
 export default function DocumentListQuery({
@@ -25,85 +19,100 @@ export default function DocumentListQuery({
   filter,
   params = DEFAULT_PARAMS,
 }: DocumentListQueryProps) {
-  const [isLoading, setIsLoading] = useState(true)
   const [listIsUpdating, setListIsUpdating] = useState(false)
-  const [data, setData] = useState<SanityDocument[]>([])
-
-  const client = useSanityClient()
+  const [data, setData] = useState<SanityDocumentWithOrder[] | null>([])
+
+  const query = `*[_type == $type ${filter ? `&& ${filter}` : ''}]|order(@[$order] asc){
+    _id, _type, ${ORDER_FIELD_NAME}
+  }`
+  const queryParams = {
+    ...params,
+    type,
+    order: ORDER_FIELD_NAME,
+  }
+
+  const {
+    data: queryData,
+    loading,
+    error,
+  } = useListeningQuery<SanityDocumentWithOrder[]>(query, {
+    params: queryParams,
+    initialValue: [],
+  })
 
   useEffect(() => {
-    const query = `*[_type == $type ${filter ? `&& ${filter}` : ''}]|order(@[$order] asc){
-      _id, _type, ${ORDER_FIELD_NAME}
-    }`
-    const queryParams = Object.assign(params, {type, order: ORDER_FIELD_NAME})
-    let subscription: ClientSubscription | undefined
-
-    // eslint-disable-next-line require-await
-    const fetchData = async () => {
-      client.fetch<SanityDocument[]>(query, queryParams).then((documents) => {
-        // Remove published document from list if draft also exists
-        const filteredDocuments = documents.reduce((acc, cur) => {
-          if (!cur._id.startsWith(`drafts.`)) {
-            // eslint-disable-next-line max-nested-callbacks
-            const alsoHasDraft = documents.some((doc) => doc._id === `drafts.${cur._id}`)
-
-            return alsoHasDraft ? acc : [...acc, cur]
-          }
-
-          return [...acc, cur]
-        }, [] as SanityDocument[])
-
-        setData(filteredDocuments)
-
-        if (isLoading) {
-          setIsLoading(false)
+    if (queryData) {
+      const filteredDocuments = queryData.reduce<SanityDocumentWithOrder[]>((acc, cur) => {
+        if (!cur._id.startsWith(`drafts.`)) {
+          // eslint-disable-next-line max-nested-callbacks
+          const alsoHasDraft = queryData.some((doc) => doc._id === `drafts.${cur._id}`)
+          return alsoHasDraft ? acc : [...acc, cur]
         }
-      })
-    }
 
-    const prepareData = async () => {
-      setIsLoading(true)
+        // Check if the draft has a published version
+        cur.hasPublished = queryData.some((doc) => doc._id === cur._id.replace(`drafts.`, ``))
 
-      await fetchData()
-
-      if (!subscription) {
-        subscription = client.listen(query, queryParams).subscribe(() => fetchData())
-      }
-    }
+        return [...acc, cur]
+      }, [])
 
-    // Get data but only if a document isn't being patched or we don't yet have data
-    if (!listIsUpdating && !data.length) {
-      prepareData()
+      setData(filteredDocuments)
+    } else {
+      setData([])
     }
-
-    return () => subscription?.unsubscribe()
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  }, [type])
+  }, [queryData])
 
   const unorderedDataCount = useMemo(
-    () => (data.length ? data.filter((doc) => !doc[ORDER_FIELD_NAME]).length : 0),
+    () => (data?.length ? data.filter((doc) => !doc[ORDER_FIELD_NAME]).length : 0),
     [data]
   )
 
-  if (isLoading)
+  if (loading) {
     return (
       <Flex style={{width: `100%`, height: `100%`}} align="center" justify="center">
         <Spinner />
       </Flex>
     )
+  }
+
+  if (error) {
+    return (
+      <Box padding={2}>
+        <Feedback tone="critical" title="There was an error" description="Please try again later" />
+      </Box>
+    )
+  }
+
+  if (!data || data?.length == 0)
+    return (
+      <Flex align="center" direction="column" height="fill" justify="center">
+        <Container width={1}>
+          <Box paddingX={4} paddingY={5}>
+            <Text align="center" muted>
+              No documents of this type
+            </Text>
+          </Box>
+        </Container>
+      </Flex>
+    )
 
   return (
     <Stack space={1} style={{overflow: `auto`, height: `100%`}}>
-      {unorderedDataCount > 0 && (
-        <Feedback>
-          {unorderedDataCount}/{data.length} Documents have no Order. Select{' '}
-          <strong>Reset Order</strong> from the Menu above to fix.
-        </Feedback>
-      )}
-      <Box padding={1}>
+      <Box padding={2}>
+        {unorderedDataCount > 0 && (
+          <Box marginBottom={2}>
+            <Feedback
+              tone="caution"
+              description={
+                <>
+                  {unorderedDataCount}/{data?.length} documents have no order. Select{' '}
+                  <strong>Reset Order</strong> from the menu above to fix.
+                </>
+              }
+            />
+          </Box>
+        )}
         <DraggableList
           data={data}
-          type={type}
           listIsUpdating={listIsUpdating}
           setListIsUpdating={setListIsUpdating}
         />

package/src/DocumentListWrapper.tsx

@@ -1,19 +1,21 @@
-import React, {useEffect, useMemo} from 'react'
+import {useEffect, useMemo} from 'react'
 import {useToast} from '@sanity/ui'
 
 import {useSchema} from 'sanity'
-import type {ToastParams} from '@sanity/ui'
+import {Box, type ToastParams} from '@sanity/ui'
+import {Feedback} from 'sanity-plugin-utils'
 import DocumentListQuery from './DocumentListQuery'
 import {OrderableContext} from './OrderableContext'
 
 import {ORDER_FIELD_NAME} from './helpers/constants'
-import Feedback from './Feedback'
 
 export interface DocumentListWrapperProps {
   showIncrements: boolean
   type: string
   resetOrderTransaction: ToastParams
+  // eslint-disable-next-line react/require-default-props
   filter?: string
+  // eslint-disable-next-line react/require-default-props
   params?: Record<string, unknown>
 }
 
@@ -88,7 +90,11 @@ export default function DocumentListWrapper({
   }, [type, schema])
 
   if (schemaIsInvalid) {
-    return <Feedback>{schemaIsInvalid}</Feedback>
+    return (
+      <Box padding={2}>
+        <Feedback description={schemaIsInvalid} tone="caution" />
+      </Box>
+    )
   }
 
   return (

package/src/DraggableList.tsx

@@ -1,12 +1,27 @@
-import React, {useEffect, useState, useMemo, useCallback, CSSProperties} from 'react'
+import {useEffect, useState, useMemo, useCallback, 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/desk'
-import type {SanityDocument, PatchOperations} from 'sanity'
+
 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'
+
+interface ListSetting {
+  isDuplicate: boolean
+  isGhosting: boolean
+  isDragging: boolean
+  isSelected: boolean
+}
+
+export interface DraggableListProps {
+  data: SanityDocumentWithOrder[]
+  listIsUpdating: boolean
+  setListIsUpdating: (val: boolean) => void
+}
 
 const getItemStyle = (
   draggableStyle: CSSProperties | undefined,
@@ -29,32 +44,19 @@ const cardTone = (settings: ListSetting) => {
   return undefined
 }
 
-interface ListSetting {
-  isDuplicate: boolean
-  isGhosting: boolean
-  isDragging: boolean
-  isSelected: boolean
-}
-
-export interface DraggableListProps {
-  data: SanityDocument[]
-  type: string
-  listIsUpdating: boolean
-  setListIsUpdating: (val: boolean) => void
-}
-
 export default function DraggableList({
   data,
-  type,
   listIsUpdating,
   setListIsUpdating,
 }: DraggableListProps) {
   const toast = useToast()
   const router = usePaneRouter()
-  const {navigateIntent} = router
+  const {groupIndex, routerPanesState} = router
+
+  const currentDoc = routerPanesState[groupIndex + 1]?.[0]?.id || false
 
   // Maintains local state order before transaction completes
-  const [orderedData, setOrderedData] = useState<SanityDocument[]>(data)
+  const [orderedData, setOrderedData] = useState<SanityDocumentWithOrder[]>(data)
 
   // Update local state when documents change from an outside source
   useEffect(() => {
@@ -63,7 +65,7 @@ export default function DraggableList({
   }, [data])
 
   const [draggingId, setDraggingId] = useState(``)
-  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const [selectedIds, setSelectedIds] = useState<string[]>(currentDoc ? [currentDoc] : [])
 
   const clearSelected = useCallback(() => setSelectedIds([]), [setSelectedIds])
 
@@ -80,10 +82,14 @@ export default function DraggableList({
       // - update selected to just this one
       // - open document
       if (!selectMultiple && !selectAdditional) {
-        navigateIntent('edit', {id: clickedId, type})
         return setSelectedIds([clickedId])
       }
 
+      // If shift key was held, prevent default to avoid new window opening
+      if (selectMultiple) {
+        nativeEvent.preventDefault()
+      }
+
       // Shift key was held, add id's between last selected and this one
       // ...before adding this one
       if (selectMultiple && !isSelected) {
@@ -108,7 +114,7 @@ export default function DraggableList({
 
       return setSelectedIds(updatedIds)
     },
-    [setSelectedIds, navigateIntent, orderedData, selectedIds, type]
+    [setSelectedIds, orderedData, selectedIds]
   )
 
   const client = useSanityClient()
@@ -146,7 +152,7 @@ export default function DraggableList({
   )
 
   const handleDragEnd = useCallback(
-    (result: DropResult | undefined, entities: SanityDocument[]) => {
+    (result: DropResult | undefined, entities: SanityDocumentWithOrder[]) => {
       setDraggingId(``)
 
       const {source, destination, draggableId} = result ?? {}
@@ -176,7 +182,7 @@ export default function DraggableList({
 
       // Update local state
       if (newOrder?.length) {
-        setOrderedData(newOrder as any)
+        setOrderedData(newOrder)
       }
 
       // Transact new order patches
@@ -202,7 +208,7 @@ export default function DraggableList({
 
   // Move one document up or down one place, by fake invoking the drag function
   const incrementIndex = useCallback(
-    (shiftFrom: number, shiftTo: number, id: string, entities: SanityDocument[]) => {
+    (shiftFrom: number, shiftTo: number, id: string, entities: SanityDocumentWithOrder[]) => {
       const result = {
         draggableId: id,
         source: {index: shiftFrom},
@@ -265,6 +271,9 @@ export default function DraggableList({
                   const isDisabled = Boolean(!item[ORDER_FIELD_NAME])
                   const isDuplicate = duplicateOrders.includes(item[ORDER_FIELD_NAME])
                   const tone = cardTone({isDuplicate, isGhosting, isDragging, isSelected})
+                  const selectedCount = selectedIds.length
+
+                  const dragBadge = isDragging && selectedCount > 1 ? selectedCount : false
 
                   return (
                     <div
@@ -278,15 +287,21 @@ export default function DraggableList({
                       }
                     >
                       <Box paddingBottom={1}>
-                        <Card tone={tone} shadow={isDragging ? 2 : undefined} radius={2}>
+                        <Card
+                          tone={tone}
+                          shadow={isDragging ? 2 : undefined}
+                          radius={2}
+                          // eslint-disable-next-line react/jsx-no-bind
+                          onClick={(e) => handleSelect(item._id, index, e.nativeEvent)}
+                        >
                           <Document
                             doc={item}
                             entities={orderedData}
-                            handleSelect={handleSelect}
                             increment={incrementIndex}
                             index={index}
                             isFirst={index === 0}
                             isLast={index === orderedData.length - 1}
+                            dragBadge={dragBadge}
                           />
                         </Card>
                       </Box>

package/src/OrderableDocumentList.tsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import {Component} from 'react'
 
 import {SanityClient} from '@sanity/client'
 import type {ToastParams} from '@sanity/ui'
@@ -8,8 +8,8 @@ import {resetOrder} from './helpers/resetOrder'
 export interface OrderableDocumentListProps {
   options: {
     type: string
-    client: SanityClient,
-    filter?: string,
+    client: SanityClient
+    filter?: string
     params?: Record<string, unknown>
   }
 }

package/src/desk-structure/orderableDocumentListDeskItem.ts

@@ -2,7 +2,7 @@ import {GenerateIcon, SortIcon} from '@sanity/icons'
 import type {ConfigContext} from 'sanity'
 
 import {ComponentType} from 'react'
-import {StructureBuilder} from 'sanity/desk'
+import {StructureBuilder, type ListItem} from 'sanity/desk'
 import OrderableDocumentList from '../OrderableDocumentList'
 
 export interface OrderableListConfig {
@@ -16,7 +16,7 @@ export interface OrderableListConfig {
   S: StructureBuilder
 }
 
-export function orderableDocumentListDeskItem(config: OrderableListConfig) {
+export function orderableDocumentListDeskItem(config: OrderableListConfig): ListItem {
   if (!config?.type || !config.context || !config.S) {
     throw new Error(`
     type, context and S (StructureBuilder) must be provided.
@@ -54,7 +54,11 @@ export function orderableDocumentListDeskItem(config: OrderableListConfig) {
             .intent({type: 'create', params: {type}})
             .serialize(),
           S.menuItem().title(`Reset Order`).icon(GenerateIcon).action(`resetOrder`).serialize(),
-          S.menuItem().title(`Show Increments`).icon(SortIcon).action(`showIncrements`).serialize(),
+          S.menuItem()
+            .title(`Toggle Increments`)
+            .icon(SortIcon)
+            .action(`showIncrements`)
+            .serialize(),
         ],
       })
     )

package/src/fields/orderRankOrdering.ts

@@ -1,6 +1,7 @@
+import {SortOrdering} from 'sanity'
 import {ORDER_FIELD_NAME} from '../helpers/constants'
 
-export const orderRankOrdering = {
+export const orderRankOrdering: SortOrdering = {
   title: 'Ordered',
   name: 'ordered',
   by: [{field: ORDER_FIELD_NAME, direction: 'asc'}],

package/src/helpers/initialRank.ts

@@ -6,5 +6,5 @@ export default function initialRank(lastRankValue = ``): string {
   const lastRank = lastRankValue ? LexoRank.parse(lastRankValue) : LexoRank.min()
   const nextRank = lastRank.genNext().genNext()
 
-  return (nextRank as any).value
+  return nextRank.toString()
 }

package/src/helpers/reorderDocuments.ts

@@ -1,10 +1,12 @@
 import {LexoRank} from 'lexorank'
-import type {PatchOperations, SanityDocument} from 'sanity'
+import type {PatchOperations} from 'sanity'
+
+import {SanityDocumentWithOrder} from '../types'
 import {ORDER_FIELD_NAME} from './constants'
 
 export interface MaifestArgs {
-  entities: SanityDocument[]
-  selectedItems: SanityDocument[]
+  entities: SanityDocumentWithOrder[]
+  selectedItems: SanityDocumentWithOrder[]
   isMovingUp: boolean
   curIndex: number
   nextIndex: number
@@ -12,18 +14,24 @@ export interface MaifestArgs {
 }
 
 export interface ReorderArgs {
-  entities: SanityDocument[]
+  entities: SanityDocumentWithOrder[]
   selectedIds: string[]
   source: any
   destination: any
-  debug?: boolean
 }
 
-function lexicographicalSort(a: {[ORDER_FIELD_NAME]: string}, b: {[ORDER_FIELD_NAME]: string}) {
-  if (a[ORDER_FIELD_NAME] < b[ORDER_FIELD_NAME]) {
+export interface ReorderReturn {
+  newOrder: SanityDocumentWithOrder[]
+  patches: [string, PatchOperations][]
+  message: any
+}
+
+function lexicographicalSort(a: SanityDocumentWithOrder, b: SanityDocumentWithOrder) {
+  if (!a[ORDER_FIELD_NAME] || !b[ORDER_FIELD_NAME]) {
+    return 0
+  } else if (a[ORDER_FIELD_NAME] < b[ORDER_FIELD_NAME]) {
     return -1
-  }
-  if (a[ORDER_FIELD_NAME] > b[ORDER_FIELD_NAME]) {
+  } else if (a[ORDER_FIELD_NAME] > b[ORDER_FIELD_NAME]) {
     return 1
   }
   return 0
@@ -34,28 +42,30 @@ export const reorderDocuments = ({
   selectedIds,
   source,
   destination,
-  debug = false,
-}: ReorderArgs) => {
+}: ReorderArgs): ReorderReturn => {
   const startIndex = source.index
   const endIndex = destination.index
   const isMovingUp = startIndex > endIndex
   const selectedItems = entities.filter((item) => selectedIds.includes(item._id))
   const message = [
     `Moved`,
-    selectedItems.length === 1 ? `1 Document` : `${selectedItems.length} Documents`,
+    selectedItems.length === 1 ? `1 document` : `${selectedItems.length} documents`,
     isMovingUp ? `up` : `down`,
     `from position`,
     `${startIndex + 1} to ${endIndex + 1}`,
   ].join(' ')
 
-  const {all, selected} = entities.reduce(
+  const {all, selected} = entities.reduce<{
+    all: SanityDocumentWithOrder[]
+    selected: SanityDocumentWithOrder[]
+  }>(
     (acc, cur, curIndex) => {
       // Selected items get spread in below, so skip them here
       if (selectedIds.includes(cur._id)) {
         return {all: acc.all, selected: acc.selected}
       }
 
-      // Drop seleced items in
+      // Drop selected items in
       if (curIndex === endIndex) {
         const prevIndex = curIndex - 1
         const prevRank = entities[prevIndex]?.[ORDER_FIELD_NAME]
@@ -73,7 +83,7 @@ export const reorderDocuments = ({
 
         // For each selected item, assign a new orderRank between now and next
         for (let selectedIndex = 0; selectedIndex < selectedItems.length; selectedIndex += 1) {
-          selectedItems[selectedIndex][ORDER_FIELD_NAME] = (betweenRank as any).value as string
+          selectedItems[selectedIndex][ORDER_FIELD_NAME] = betweenRank.toString()
           betweenRank = isMovingUp ? betweenRank.between(curRank) : betweenRank.between(nextRank)
         }
 
@@ -89,22 +99,38 @@ export const reorderDocuments = ({
 
       return {all: [...acc.all, cur], selected: acc.selected}
     },
-    {all: [] as SanityDocument[], selected: [] as SanityDocument[]}
+    {all: [], selected: []}
   )
 
-  const patches: [string, PatchOperations][] = selected.map((doc) => {
-    return [
-      doc._id,
-      {
-        set: {
-          [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME],
+  const patches = selected.flatMap((doc) => {
+    const docPatches: [string, PatchOperations][] = [
+      [
+        doc._id,
+        {
+          set: {
+            [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME],
+          },
         },
-      },
+      ],
     ]
+
+    // If it's a draft, we need to patch the published document as well
+    if (doc._id.startsWith(`drafts.`) && doc.hasPublished) {
+      docPatches.push([
+        doc._id.replace(`drafts.`, ``),
+        {
+          set: {
+            [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME],
+          },
+        },
+      ])
+    }
+
+    return docPatches
   })
 
   // Safety-check to make sure everything is in order
-  const allSorted = (all as unknown as {[ORDER_FIELD_NAME]: string}[]).sort(lexicographicalSort)
+  const allSorted = all.sort(lexicographicalSort)
 
   return {newOrder: allSorted, patches, message}
 }

package/src/helpers/resetOrder.ts

@@ -20,7 +20,7 @@ export async function resetOrder(type = ``, client: SanityClient) {
     aLexoRank = aLexoRank.genNext().genNext()
 
     transaction.patch(documents[index], {
-      set: {[ORDER_FIELD_NAME]: (aLexoRank as any).value as string},
+      set: {[ORDER_FIELD_NAME]: aLexoRank.toString()},
     })
   }
 

package/src/types.ts

@@ -0,0 +1,8 @@
+import type {SanityDocument} from 'sanity'
+
+import {ORDER_FIELD_NAME} from './helpers/constants'
+
+export interface SanityDocumentWithOrder extends SanityDocument {
+  [ORDER_FIELD_NAME]?: string
+  hasPublished?: boolean
+}

package/v2-incompatible.js

@@ -5,7 +5,7 @@ export default showIncompatiblePluginDialog({
   name: name,
   versions: {
     v3: version,
-    v2: '^0.0.10',
+    v2: undefined,
   },
-  sanityExchangeUrl
+  sanityExchangeUrl,
 })

package/src/Feedback.tsx

@@ -1,12 +0,0 @@
-import React, {PropsWithChildren} from 'react'
-import {Box, Card, Text} from '@sanity/ui'
-
-export default function Feedback({children}: PropsWithChildren<{}>) {
-  return (
-    <Box padding={3}>
-      <Card padding={4} radius={2} shadow={1} tone="caution">
-        <Text>{children}</Text>
-      </Card>
-    </Box>
-  )
-}