sanity-plugin-workflow 1.0.0-beta.7 → 1.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-workflow",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "A demonstration of a custom content publishing workflow using Sanity.",
   "keywords": [
     "sanity",
@@ -87,7 +87,7 @@
     "rimraf": "^4.1.2",
     "sanity": "^3.3.1",
     "semantic-release": "^20.1.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
     "@sanity/ui": "^1.2.2",

package/src/components/DocumentList.tsx

@@ -94,7 +94,8 @@ export default function DocumentList(props: DocumentListProps) {
         return (
           <Draggable
             // The metadata's documentId is always the published one to avoid rerendering
-            key={documentId}
+            // key={documentId}
+            key={virtualItem.key}
             draggableId={documentId}
             index={virtualItem.index}
             isDragDisabled={isDragDisabled}

package/src/components/Verify.tsx

@@ -5,6 +5,7 @@ import {useClient} from 'sanity'
 import {UserExtended} from 'sanity-plugin-utils'
 
 import {API_VERSION} from '../constants'
+import {generateMultipleOrderRanks} from '../helpers/generateMultipleOrderRanks'
 import {SanityDocumentWithMetadata, State} from '../types'
 import FloatingCard from './FloatingCard'
 
@@ -32,16 +33,17 @@ export default function Verify(props: VerifyProps) {
       }, [] as string[])
     : []
 
-  const documentsWithInvalidUserIds = data?.length
-    ? data.reduce((acc, cur) => {
-        const {documentId, assignees} = cur._metadata ?? {}
-        const allAssigneesExist = assignees?.length
-          ? assignees?.every((a) => userList.find((u) => u.id === a))
-          : true
+  const documentsWithInvalidUserIds =
+    data?.length && userList?.length
+      ? data.reduce((acc, cur) => {
+          const {documentId, assignees} = cur._metadata ?? {}
+          const allAssigneesExist = assignees?.length
+            ? assignees?.every((a) => userList.find((u) => u.id === a))
+            : true
 
-        return !allAssigneesExist && documentId ? [...acc, documentId] : acc
-      }, [] as string[])
-    : []
+          return !allAssigneesExist && documentId ? [...acc, documentId] : acc
+        }, [] as string[])
+      : []
 
   const documentsWithoutOrderIds = data?.length
     ? data.reduce((acc, cur) => {
@@ -130,29 +132,51 @@ export default function Verify(props: VerifyProps) {
         status: 'info',
       })
 
-      // Get first and second order values
+      // Get first and second order values, if they exist
       const [firstOrder, secondOrder] = [...data]
         .slice(0, 2)
         .map((d) => d._metadata?.orderRank)
-      const minLexo =
-        firstOrder && data.length !== ids.length
-          ? LexoRank.parse(firstOrder)
-          : LexoRank.min()
-      const maxLexo =
-        secondOrder && data.length !== ids.length
-          ? LexoRank.parse(secondOrder)
-          : LexoRank.max()
-      let newLexo = minLexo.between(maxLexo)
-      const lastLexo = maxLexo
+      const minLexo = firstOrder ? LexoRank.parse(firstOrder) : undefined
+      const maxLexo = secondOrder ? LexoRank.parse(secondOrder) : undefined
+      const ranks = generateMultipleOrderRanks(ids.length, minLexo, maxLexo)
 
       const tx = client.transaction()
 
       // Create a new in-between value for each document
       for (let index = 0; index < ids.length; index += 1) {
-        newLexo = newLexo.between(lastLexo)
+        tx.patch(`workflow-metadata.${ids[index]}`, {
+          set: {orderRank: ranks[index].toString()},
+        })
+      }
+
+      await tx.commit()
 
+      toast.push({
+        title: `Added order to ${
+          ids.length === 1 ? `1 Document` : `${ids.length} Documents`
+        }`,
+        status: 'success',
+      })
+    },
+    [data, client, toast]
+  )
+
+  // Reset order value on all metadata documents
+  const resetOrderOfAllDocuments = React.useCallback(
+    async (ids: string[]) => {
+      toast.push({
+        title: 'Adding ordering...',
+        status: 'info',
+      })
+
+      const ranks = generateMultipleOrderRanks(ids.length)
+
+      const tx = client.transaction()
+
+      // Create a new in-between value for each document
+      for (let index = 0; index < ids.length; index += 1) {
         tx.patch(`workflow-metadata.${ids[index]}`, {
-          set: {orderRank: newLexo.toString()},
+          set: {orderRank: ranks[index].toString()},
         })
       }
 
@@ -199,6 +223,7 @@ export default function Verify(props: VerifyProps) {
       {documentsWithoutValidMetadataIds.length > 0 ? (
         <Button
           tone="caution"
+          mode="ghost"
           onClick={() => correctDocuments(documentsWithoutValidMetadataIds)}
           text={
             documentsWithoutValidMetadataIds.length === 1
@@ -210,6 +235,7 @@ export default function Verify(props: VerifyProps) {
       {documentsWithInvalidUserIds.length > 0 ? (
         <Button
           tone="caution"
+          mode="ghost"
           onClick={() => removeUsersFromDocuments(documentsWithInvalidUserIds)}
           text={
             documentsWithInvalidUserIds.length === 1
@@ -221,6 +247,7 @@ export default function Verify(props: VerifyProps) {
       {documentsWithoutOrderIds.length > 0 ? (
         <Button
           tone="caution"
+          mode="ghost"
           onClick={() => addOrderToDocuments(documentsWithoutOrderIds)}
           text={
             documentsWithoutOrderIds.length === 1
@@ -230,36 +257,41 @@ export default function Verify(props: VerifyProps) {
         />
       ) : null}
       {documentsWithDuplicatedOrderIds.length > 0 ? (
-        <Button
-          tone="caution"
-          onClick={() => addOrderToDocuments(documentsWithDuplicatedOrderIds)}
-          text={
-            documentsWithDuplicatedOrderIds.length === 1
-              ? `Set Unique Order for 1 Document`
-              : `Set Unique Order for ${documentsWithDuplicatedOrderIds.length} Documents`
-          }
-        />
+        <>
+          <Button
+            tone="caution"
+            mode="ghost"
+            onClick={() => addOrderToDocuments(documentsWithDuplicatedOrderIds)}
+            text={
+              documentsWithDuplicatedOrderIds.length === 1
+                ? `Set Unique Order for 1 Document`
+                : `Set Unique Order for ${documentsWithDuplicatedOrderIds.length} Documents`
+            }
+          />
+          <Button
+            tone="caution"
+            mode="ghost"
+            onClick={() =>
+              resetOrderOfAllDocuments(
+                data.map((doc) => String(doc._metadata?.documentId))
+              )
+            }
+            text={
+              data.length === 1
+                ? `Reset Order for 1 Document`
+                : `Reset Order for all ${data.length} Documents`
+            }
+          />
+        </>
       ) : null}
       {orphanedMetadataDocumentIds.length > 0 ? (
         <Button
           text="Cleanup orphaned metadata"
           onClick={handleOrphans}
           tone="caution"
+          mode="ghost"
         />
       ) : null}
-      {/* <Button
-        tone="caution"
-        onClick={() =>
-          addOrderToDocuments(
-            data.map((doc) => String(doc._metadata?.documentId))
-          )
-        }
-        text={
-          data.length === 1
-            ? `Reset Order for 1 Document`
-            : `Reset Order for all ${data.length} Documents`
-        }
-      /> */}
     </FloatingCard>
   )
 }

package/src/helpers/generateMultipleOrderRanks.ts

@@ -0,0 +1,80 @@
+import {LexoRank} from 'lexorank'
+
+function generateMiddleValue(ranks: (LexoRank | undefined)[]) {
+  // Has no undefined values
+  if (!ranks.some((rank) => !rank)) {
+    return ranks
+  }
+
+  // Find the first undefined value
+  const firstUndefined = ranks.findIndex((rank) => !rank)
+
+  // Find the first defined value after the undefined value
+  const firstDefinedAfter = ranks.findIndex(
+    (rank, index) => rank && index > firstUndefined
+  )
+  // Find the first defined value before the undefined value
+  const firstDefinedBefore = ranks.findLastIndex(
+    (rank, index) => rank && index < firstUndefined
+  )
+
+  if (firstDefinedAfter === -1 || firstDefinedBefore === -1) {
+    throw new Error(
+      `Unable to generate middle value between indexes ${firstDefinedBefore} and ${firstDefinedAfter}`
+    )
+  }
+
+  const beforeRank = ranks[firstDefinedBefore]
+  const afterRank = ranks[firstDefinedAfter]
+
+  if (
+    !beforeRank ||
+    typeof beforeRank === 'undefined' ||
+    !afterRank ||
+    typeof afterRank === 'undefined'
+  ) {
+    throw new Error(
+      `Unable to generate middle value between indexes ${firstDefinedBefore} and ${firstDefinedAfter}`
+    )
+  }
+
+  // Generate a new value between the two
+  const between = beforeRank.between(afterRank)
+
+  // Calculate the middle index between the defined values
+  const middle = Math.floor((firstDefinedAfter + firstDefinedBefore) / 2)
+
+  if (ranks[middle]) {
+    throw new Error(`Should not have overwritten value at index ${middle}`)
+  }
+
+  // Insert the new value into the array
+  ranks[middle] = between
+
+  // Return as a new array
+  return ranks
+}
+
+// Generates an array of LexoRanks between two values
+export function generateMultipleOrderRanks(
+  count: number,
+  start?: LexoRank,
+  end?: LexoRank
+): LexoRank[] {
+  // Begin array with correct size
+  let ranks = [...Array(count)]
+
+  // Use or create default values
+  const rankStart = start ?? LexoRank.min().genNext().genNext()
+  const rankEnd = end ?? LexoRank.max().genPrev().genPrev()
+
+  ranks[0] = rankStart
+  ranks[count - 1] = rankEnd
+
+  // Keep processing the array until every value between undefined values is defined
+  for (let i = 0; i < count; i++) {
+    ranks = generateMiddleValue(ranks)
+  }
+
+  return ranks.sort((a, b) => a.toString().localeCompare(b.toString()))
+}

package/src/hooks/useWorkflowDocuments.tsx

@@ -131,7 +131,10 @@ export function useWorkflowDocuments(schemaTypes: string[]): WorkflowDocuments {
         .commit()
         .then((res) => {
           toast.push({
-            title: `Moved to "${newState?.title ?? newStateId}"`,
+            title:
+              newState.id === document._metadata.state
+                ? `Reordered in "${newState?.title ?? newStateId}"`
+                : `Moved to "${newState?.title ?? newStateId}"`,
             status: 'success',
           })
           return res