sanity-plugin-dashboard-widget-vercel 3.1.2 → 3.1.4

package/src/machines/deploymentTargetList.ts

@@ -1,8 +1,10 @@
-import {assign, Machine} from 'xstate'
+import {assign, setup, fromPromise, assertEvent} from 'xstate'
 import {Sanity} from '../types'
+import type {SanityClient} from 'sanity'
+import {DEPLOYMENT_TARGET_DOCUMENT_TYPE} from '../constants'
 
 type Context = {
-  message: string
+  client: SanityClient
   results: Sanity.DeploymentTarget[] // TODO: type correctly
 }
 
@@ -11,22 +13,10 @@ type Event =
   | {type: 'CREATE'; deploymentTarget: Sanity.DeploymentTarget}
   | {type: 'DELETE'; id: string}
   | {type: 'FETCH'}
-  | {type: 'REJECT'; message: string}
-  | {type: 'RESOLVE'; results: any[]}
-  | {type: 'UPDATE'}
+  | {type: 'UPDATE'; deploymentTarget: Sanity.DeploymentTarget}
 
-type Schema = {
-  states: {
-    failed: {}
-    pending: {}
-    ready: {
-      states: {
-        unknown: {}
-        withData: {}
-        withoutData: {}
-      }
-    }
-  }
+interface Input {
+  client: SanityClient
 }
 
 const sortByTargetName = (items: Sanity.DeploymentTarget[]) => {
@@ -34,93 +24,126 @@ const sortByTargetName = (items: Sanity.DeploymentTarget[]) => {
     if (a.name > b.name) {
       return 1
     }
-
     if (a.name < b.name) {
       return -1
     }
-
     return 0
   })
 }
 
-const deploymentTargetListMachine = () =>
-  Machine<Context, Schema, Event>(
-    {
-      context: {
-        message: '',
-        results: [],
+export const deploymentTargetListMachine = setup({
+  types: {} as {
+    children: {fetchData: 'fetch data'}
+    context: Context
+    events: Event
+    input: Input
+  },
+  actions: {
+    targetCreate: assign({
+      results: ({context, event}) => {
+        assertEvent(event, 'CREATE')
+        return sortByTargetName([...context.results, event.deploymentTarget])
       },
-      initial: 'pending',
-      states: {
-        pending: {
-          invoke: {
-            src: 'fetchDataService',
-            onDone: {actions: ['setResults'], target: 'ready'},
-            onError: {actions: ['setMessage'], target: 'failed'},
-          },
-        },
-        ready: {
-          initial: 'unknown',
-          on: {
-            CREATE: {actions: ['targetCreate']},
-            DELETE: {actions: ['targetDelete']},
-            UPDATE: {actions: ['targetUpdate']},
-          },
-          states: {
-            unknown: {
-              always: [
-                {cond: 'hasData', target: 'withData'},
-                {cond: 'hasNoData', target: 'withoutData'},
-              ],
-            },
-            withData: {
-              always: [{cond: 'hasNoData', target: 'withoutData'}],
-            },
-            withoutData: {
-              always: [{cond: 'hasData', target: 'withData'}],
+    }),
+    targetDelete: assign({
+      results: ({context, event}) => {
+        assertEvent(event, 'DELETE')
+        return context.results.filter((target) => target._id !== event.id)
+      },
+    }),
+    targetUpdate: assign({
+      results: ({context, event}) => {
+        assertEvent(event, 'UPDATE')
+        const {deploymentTarget} = event
+        const index = context.results.findIndex((target) => target._id === deploymentTarget._id)
+        const updatedResults = Object.assign([], context.results, {
+          [index]: deploymentTarget,
+        })
+        return sortByTargetName(updatedResults)
+      },
+    }),
+  },
+  guards: {
+    hasData: ({context}) => {
+      return context?.results?.length > 0
+    },
+    hasNoData: ({context}) => {
+      return context?.results?.length === 0
+    },
+  },
+  actors: {
+    'fetch data': fromPromise(
+      ({input, signal}: {input: {client: SanityClient}; signal: AbortSignal}) => {
+        return input.client
+          .fetch<Sanity.DeploymentTarget[]>(
+            '*[_type == $type] | order(name asc)',
+            {
+              type: DEPLOYMENT_TARGET_DOCUMENT_TYPE,
             },
-          },
+            {signal}
+          )
+          .catch((error) => {
+            if (error instanceof Error && error.name === 'AbortError') {
+              return []
+            }
+            console.error('Failed to fetch deployment targets', error)
+            throw error
+          })
+      }
+    ),
+  },
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOgAcx8ICoBiCAe0JIIDcGBrMEgMzABccAEXT90AbQAMAXUSgyDWLn64mckAA9EAZkkBOEgHYAjAA5DAFgBsFgEwnJAVkMAaEAE9Ep4yUeT-klbGesbaoYaGAL6RbmhYeISkFFQ0tGAATukM6eQANqI82ai8AsKiEjLqCkoqakiaOvpGZpY29sZOrh6IxpYkFo5h2oaOpnqOxraSFtGxGDgExCTpYOgQ7rQAwgBKAKIAggAqu1Ky9dXKqvjqWggWHSS9eoaS9ibao6aObp4IVh8kL56OzGII2PT-WYgOILRLLVbrWhCXYAGV2x1OVUUlzqoFu90kRm8tlM2gsL1eJJ+iEGBj0gVsFm0YWmVkctihMISSxWaw2AFUAApCI4nSrnbG1a71fGSUz9WzBezTFWvb7dO5MkjjMITZykwxjTnzbmkXnrEgAV3wHHwDAA7vhaJiJTUrjces9fFZGc9TLYrGqA9SEM9CcT7sznH5HHpjfFFmaEe4rTa7Y7ncYzvJJe6ZZ7DN7fYaA0GrCHvD4xs4S+yPnGYtCTYn4XySPblNgRGJneKc27cQ0EI4BiQ2T77noAzXyxrTIESGFGd4rP9DONTPHYTzk+3OwxLfxu+he9mQBcpR7h6Px4ylWyIrPfl9bIvJhZJIYA-7zFZoo27QgOB1C5RMsQHaU8UQABaYIQ2gv9G1AuFkmofAoHAnFIKHOwQz0bRtUMcd-j8WwpnuLdTVbdZMMvfMEFsPQQxMeViQmZkLC+f0oiQ5s4XNFNrVtB1sIvPMoIQCIK1BIsmXXWxtFJcZKJbAS934Ltylo8ShysfDHl9PRxjlekrC6Z9BhIBk5MkXpzFBFT+N3DsNIPI8tNdLCr20L0Wmscw5V0e5pMJYwBiI8kwrDRC5gTOEeHQXBckgbTB1uZwQw6RwrEBd9bEcQZYzsRDoiAA */
+  context: ({input}) => ({
+    client: input.client,
+    results: [],
+  }),
+  initial: 'pending',
+  states: {
+    pending: {
+      invoke: {
+        src: 'fetch data',
+        id: 'fetchData',
+        input: ({context}) => ({client: context.client}),
+        onDone: {
+          actions: assign({results: ({event}) => event.output}),
+          target: 'ready',
         },
-        failed: {
-          type: 'final',
+        onError: {
+          target: 'failed',
         },
       },
     },
-    {
-      actions: {
-        setMessage: assign((_context, event: any) => ({
-          message: event.data.details.description,
-        })),
-        setResults: assign((_context, event: any) => ({
-          results: event.data,
-        })),
-        targetCreate: assign((context, event: any) => ({
-          results: sortByTargetName([...context.results, event.deploymentTarget]),
-        })),
-        targetDelete: assign((context, event: any) => ({
-          results: context.results.filter((target) => target._id !== event.id),
-        })),
-        targetUpdate: assign((context, event: any) => {
-          const {deploymentTarget} = event
-          const index = context.results.findIndex((target) => target._id === deploymentTarget._id)
-          const updatedResults = Object.assign([], context.results, {
-            [index]: event.deploymentTarget,
-          })
-
-          return {
-            results: sortByTargetName(updatedResults),
-          }
-        }),
+    ready: {
+      initial: 'unknown',
+      on: {
+        CREATE: {
+          actions: 'targetCreate',
+        },
+        DELETE: {
+          actions: 'targetDelete',
+        },
+        UPDATE: {
+          actions: 'targetUpdate',
+        },
       },
-      guards: {
-        hasData: (context) => {
-          return context?.results?.length > 0
+      states: {
+        unknown: {
+          always: [
+            {target: 'withData', guard: 'hasData'},
+            {target: 'withoutData', guard: 'hasNoData'},
+          ],
         },
-        hasNoData: (context) => {
-          return context?.results?.length === 0
+        withData: {
+          always: [{target: 'withoutData', guard: 'hasNoData'}],
+        },
+        withoutData: {
+          always: [{target: 'withData', guard: 'hasData'}],
         },
       },
-    }
-  )
-
-export default deploymentTargetListMachine
+    },
+    failed: {
+      type: 'final',
+    },
+  },
+})

package/src/machines/dialog.ts

@@ -1,4 +1,4 @@
-import {assign, Machine} from 'xstate'
+import {assertEvent, assign, setup} from 'xstate'
 import {Sanity} from '../types'
 
 type Context = {
@@ -10,53 +10,53 @@ type Event =
   | {type: 'CLOSE'}
   | {type: 'EDIT'; deploymentTarget: Sanity.DeploymentTarget}
 
-type Schema = {
-  states: {
-    idle: {}
-    edit: {}
-    create: {}
-  }
-}
-
-const dialogMachine = () =>
-  Machine<Context, Schema, Event>(
-    {
-      context: {
-        editDeploymentTarget: undefined,
+export const dialogMachine = setup({
+  types: {
+    context: {} as Context,
+    events: {} as Event,
+  },
+  actions: {
+    setEditDeploymentTarget: assign({
+      editDeploymentTarget: ({event}) => {
+        assertEvent(event, 'EDIT')
+        return event.deploymentTarget
       },
-      initial: 'idle',
-      states: {
-        idle: {
-          entry: assign({
-            editDeploymentTarget: () => undefined,
-          }),
-          on: {
-            CREATE: 'create',
-            EDIT: {
-              actions: ['setEditDeploymentTarget'],
-              target: 'edit',
-            },
-          },
+    }),
+  },
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOlwgBswBiAYQCUBRAQQBVGBtABgF1FQADgHtYuAC64h+fiAAeiAEwKArCQCcANgAcAdmUbNOhVx0BGLQBoQAT0SmAzApJcXXexoAsW5fbWaFAL4BVmhYeISk5FTUjAAiAJKs3HxIIMKiElIy8ghKqpq6+obGZpY2ivb2zq4e5moeXKZc3kEhGDgExCSQ4nQAMgDyAMqcvDLp4pLSqTn2DSQefn7uyq5aWvZWtgjmTqsuvnU6XMoK9q0goR0RJJgATmDoYjS0gyPJ4yKTWTOIc1wLJZqFZrDZbRBaUwkfZuew6SFcepuILBED4IQQOAyK7hYifDJTbKIAC0GnBCFJFxxnUilDA+O+01AOQ8CnJGxIGn29lMpjUxhcCh0VPauNIPTEDMyTLkiA8PhIxh5Cg8DS8pgM5L5UOalSMah0cP05hFYRptweT3pqQm0qJCHlVSVphVashmvKCDUAN17j0XNMqrUyhRASAA */
+  context: {
+    editDeploymentTarget: undefined,
+  },
+  initial: 'idle',
+  states: {
+    idle: {
+      entry: assign({
+        editDeploymentTarget: () => undefined,
+      }),
+      on: {
+        CREATE: {
+          target: 'create',
         },
-        edit: {
-          on: {
-            CLOSE: 'idle',
-          },
+        EDIT: {
+          actions: 'setEditDeploymentTarget',
+          target: 'edit',
         },
-        create: {
-          on: {
-            CLOSE: 'idle',
-          },
+      },
+    },
+    edit: {
+      on: {
+        CLOSE: {
+          target: 'idle',
         },
       },
     },
-    {
-      actions: {
-        setEditDeploymentTarget: assign((_context, event: any) => ({
-          editDeploymentTarget: event.deploymentTarget,
-        })),
+    create: {
+      on: {
+        CLOSE: {
+          target: 'idle',
+        },
       },
-    }
-  )
-
-export default dialogMachine
+    },
+  },
+})

package/src/machines/form.ts

@@ -1,110 +1,155 @@
-import {assign, Machine} from 'xstate'
+import type {SanityClient} from 'sanity'
+import {uuid} from '@sanity/uuid'
+import {assertEvent, assign, fromPromise, setup} from 'xstate'
+import type {Sanity} from '../types'
+import {DEPLOYMENT_TARGET_DOCUMENT_TYPE} from '../constants'
 
 type Context = {
+  client: SanityClient
+  document?: Sanity.DeploymentTarget
+  id?: string
   formData?: Record<string, any>
   message: string
 }
 
 type Event =
-  | {type: 'CREATE'}
-  | {type: 'DELETE'}
-  | {type: 'REJECT'}
-  | {type: 'RESOLVE'}
-  | {type: 'SUBMIT'}
-  | {type: 'UPDATE'}
+  | {type: 'CREATE'; formData: Record<string, any>}
+  | {type: 'UPDATE'; id: string; formData: Record<string, any>}
+  | {type: 'DELETE'; id: string}
 
-type Schema = {
-  states: {
-    idle: {}
-    creating: {}
-    updating: {}
-    deleting: {}
-    success: {}
-    error: {}
-  }
+interface Input {
+  client: SanityClient
 }
 
-const formMachine = Machine<Context, Schema, Event>(
-  {
-    context: {
-      formData: {},
-      message: '',
-    },
-    initial: 'idle',
-    states: {
-      idle: {
-        on: {
-          CREATE: {
-            actions: ['createDocument'],
-            target: 'creating',
-          },
-          DELETE: {
-            actions: ['deleteDocument'],
-            target: 'deleting',
-          },
-          UPDATE: {
-            actions: ['updateDocument'],
-            target: 'updating',
-          },
-        },
+export const formMachine = setup({
+  types: {} as {
+    children: {
+      createDocumentActor: 'create document'
+      updateDocumentActor: 'update document'
+      deleteDocumentActor: 'delete document'
+    }
+    context: Context
+    events: Event
+    input: Input
+    tags: 'busy'
+  },
+  actions: {
+    setId: assign({
+      id: ({event}) => {
+        assertEvent(event, ['UPDATE', 'DELETE'])
+        return event.id
       },
-      creating: {
-        invoke: {
-          src: 'createDocumentService',
-          onDone: {target: 'success'},
-          onError: {actions: ['setMessage'], target: 'error'},
-        },
-        on: {
-          RESOLVE: 'success',
-          REJECT: 'error',
-        },
+    }),
+    setFormData: assign({
+      formData: ({event}) => {
+        assertEvent(event, ['CREATE', 'UPDATE'])
+        return event.formData
       },
-      updating: {
-        invoke: {
-          src: 'updateDocumentService',
-          onDone: {target: 'success'},
-          onError: {actions: ['setMessage'], target: 'error'},
-        },
-        on: {
-          RESOLVE: 'success',
-          REJECT: 'error',
-        },
+    }),
+    setMessage: assign({
+      message: ({event}) => {
+        if (
+          'data' in event &&
+          event.data &&
+          typeof event.data === 'object' &&
+          'details' in event.data &&
+          event.data.details &&
+          typeof event.data.details === 'object' &&
+          'description' in event.data.details
+        ) {
+          return event.data.details.description as string
+        }
+        return 'An error occurred'
+      },
+    }),
+    setDocument: assign({
+      document: ({event}) => {
+        // @ts-expect-error - fix typings later
+        return event.output
       },
-      deleting: {
-        invoke: {
-          src: 'deleteDocumentService',
-          onDone: {target: 'success'},
-          onError: {actions: ['setMessage'], target: 'error'},
+    }),
+  },
+  actors: {
+    'create document': fromPromise(
+      ({input}: {input: Required<Pick<Context, 'client' | 'formData'>>}) => {
+        return input.client.create({
+          _id: `vercel.${uuid()}`,
+          _type: DEPLOYMENT_TARGET_DOCUMENT_TYPE,
+          ...input.formData,
+        })
+      }
+    ),
+    'update document': fromPromise(
+      ({input}: {input: Required<Pick<Context, 'client' | 'id' | 'formData'>>}) => {
+        return input.client.patch(input.id).set(input.formData).commit()
+      }
+    ),
+    'delete document': fromPromise(({input}: {input: Required<Pick<Context, 'client' | 'id'>>}) => {
+      return input.client.delete(input.id)
+    }),
+  },
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOlwgBswBiAYQCUBRAQQBVGBtABgF1FQADgHtYuAC64h+fiAAeiAIwBmAGwkuGjQFYALAE4AHACYdWgwYA0IAJ6IjKgOwkdXFUYVa9h-Ua5KAvv5WaFh4hKTkVNQAqgAKACJsnLwywqISUjLyCMpqmtr6xqbmVrYIBgokWvlGWkpaCgZeKoHBGDgExGSUNPGMADKM7Nx8SCBp4pLSY9m56vm6hiZmljaIOipqdXpcDk1aWiYqBlqtICEd4SSYAE5g6BL4UNQQUmBk+ABuQgDW77f3MRgeJCTAAV1QYHwYmYmDEQhuI1SIkmmRmiGOShIDiUOh0SiaCgUegcDj0pTsjhI5iMewUpPsTSMZwuYS6AIeBGeYBuNwRJAEFAeADMEahrncHsDQRCoTC4QikWMJhlpqBspjsbj8YTiaTyWsEKouNT6noiX5zUpiQEgud2mzSGCBBBOU8Xm8Pt8-iRna6gSDwZDobD4YiUsqUaqshiDFicXiCea9WSKeVKiSVIclEYlIY-BUWQ7Ok6XW7ubz+YKRWLfWWAzLg-Kw0rBFGpjGEJqEzrkyTU4b6ToSHojHos7VXEc6kXQiWSBAwFRHs9XoQvb93ovl9Kg3LQ4qI230h30V241rE7r+wayro1A4dO4VHotA5fPTTnbWfPt2AV9QPJ8jcApCmIoo3OKf4NnuIYKuGozHqiapyLG8bakmRI3mmpjxk0XAuEoXAHI+DgtGc+BCIu8BjD+4TIieaLqogAC0Khpmxs6XF0kRgAxyGdk+aYKLSVR7Fweg6A4IkGFwChcY6EqAly-HRmeY7DnSY5GHGL4qFwRhpjpJpmriDjVMRLgGAp84ckCECqaezEIHoObUuZuwKH4xGPgoRnmCQpmOAcqhmPJ37Flcfrlo5TGoQgY4mgYHkeAS+iqH5hqSc4dSuCo+I6SoSjvjZUX1pAsUodkrlGO51TSd5b46JlZRebVuG7IcjRmA05FtHOVzQSpkaMVVdivs4CibHGxg6biSg4ZsJD2AccaFEVGwOKVXTQRVI0CWeNV1Z5jW+WmujDj4HjmMRnhEttpBAQilWdkdyX1V5RFNS1iAEpU1pHER9JWjogSBEAA */
+  context: ({input}) => ({
+    client: input.client,
+    formData: {},
+    message: '',
+  }),
+  initial: 'idle',
+  states: {
+    idle: {
+      on: {
+        CREATE: {
+          actions: ['setFormData'],
+          target: 'creating',
         },
-        on: {
-          RESOLVE: 'success',
-          REJECT: 'error',
+        UPDATE: {
+          actions: ['setId', 'setFormData'],
+          target: 'updating',
         },
-      },
-      success: {
-        invoke: {
-          src: 'formSubmittedService',
+        DELETE: {
+          actions: 'setId',
+          target: 'deleting',
         },
       },
-      error: {},
     },
-  },
-  {
-    actions: {
-      setMessage: assign((_context, event: any) => ({
-        message: event.data.details.description,
-      })),
-      createDocument: assign((_context, event: any) => ({
-        formData: event.formData,
-      })),
-      deleteDocument: assign(() => ({
-        // id: event.id,
-      })),
-      updateDocument: assign((_context, event: any) => ({
-        formData: event.formData,
-      })),
+    creating: {
+      tags: ['busy'],
+      invoke: {
+        src: 'create document',
+        id: 'createDocumentActor',
+        input: ({context}) => ({client: context.client, formData: context.formData!}),
+        onDone: {actions: 'setDocument', target: 'created'},
+        onError: {actions: 'setMessage', target: 'error'},
+      },
     },
-  }
-)
-
-export default formMachine
+    created: {type: 'final'},
+    updating: {
+      tags: ['busy'],
+      invoke: {
+        src: 'update document',
+        id: 'updateDocumentActor',
+        input: ({context}) => ({
+          client: context.client,
+          id: context.id!,
+          formData: context.formData!,
+        }),
+        onDone: {actions: 'setDocument', target: 'updated'},
+        onError: {actions: 'setMessage', target: 'error'},
+      },
+    },
+    updated: {type: 'final'},
+    deleting: {
+      tags: ['busy'],
+      invoke: {
+        src: 'delete document',
+        id: 'deleteDocumentActor',
+        input: ({context}) => ({client: context.client, id: context.id!}),
+        onDone: {target: 'deleted'},
+        onError: {actions: 'setMessage', target: 'error'},
+      },
+    },
+    deleted: {type: 'final'},
+    error: {type: 'final'},
+  },
+})

package/src/machines/refresh.ts

@@ -1,40 +1,44 @@
-import {Machine} from 'xstate'
-
-type Context = {}
+import {setup} from 'xstate'
 
 type Event = {type: 'ERROR'} | {type: 'REFRESH'} | {type: 'REFRESHED'} | {type: 'RETRY'}
 
-type Schema = {
-  states: {
-    idle: {}
-    refreshing: {}
-    refreshed: {}
-    error: {}
-  }
-}
-
-const refreshMachine = Machine<Context, Schema, Event>({
+const refreshMachine = setup({
+  types: {
+    events: {} as Event,
+  },
+}).createMachine({
+  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOlwgBswBiAJQFEAxBgZQAkBtABgF1FQADgHtYuAC64h+fiAAeiAIwAmAGwkuGrkoAsAZhVKlAVm0KAHABoQAT0QBOJSRN27XFXaMmz2twF9fVmhYeISkAE5gAGYRsCFQ1PS0tADytNx8SCDCohJSMvIIPnYkxhpKXGZ22kY6xla2CAq6CiQudgDsRnYqKroVfe3+gRg4BMQkEdFwcXRMrGz0ACLpMtniktKZBUUlRmUVVTXadTaISrqObUY97QodvWa6QyBBo6ETUTHYkLPM9OwrTJrXKbUDbJTFLjtMzmWraOx3doqeqKMyOeHdXp3BTHXTVZ6vELjMBhMJCMK-eaAwQidZ5LaIY6Q6Gw47wxHI04IGEkDFma5NbTtY7ufwBED4IQQOAyQljIirWkg-KIAC0nIa6oJIyJpHIVEVOQ2KsKShRCDsunUGLcHi8PhU2uC8o+U1iBCghrpoLkZ2uTk0XCq7SRRl0Zg19itXHhIZ85lMEaUTre40mX0gXuVDIQnmKRhZKk6PmaVXN2PUaLsZhj2hUOJU-JTupIJLJYSzxpzeacheLXFL2nNrkrfW8SKFnhDYt8QA */
   initial: 'idle',
   states: {
     idle: {
       on: {
-        REFRESH: 'refreshing',
+        REFRESH: {
+          target: 'refreshing',
+        },
       },
     },
     refreshing: {
       on: {
-        ERROR: 'error',
-        REFRESHED: 'refreshed',
+        ERROR: {
+          target: 'error',
+        },
+        REFRESHED: {
+          target: 'refreshed',
+        },
       },
     },
     refreshed: {
       on: {
-        REFRESH: 'refreshing',
+        REFRESH: {
+          target: 'refreshing',
+        },
       },
     },
     error: {
       on: {
-        REFRESH: 'refreshing',
+        REFRESH: {
+          target: 'refreshing',
+        },
       },
     },
   },

package/src/utils/fetcher.ts

@@ -1,4 +1,3 @@
-import fetch from 'unfetch'
 import {Sanity} from '../types'
 
 const fetcher =