fix(frontend): fix publishing redirection

it was not happening because we were not calling the appropiate actions

frontend/app/src/components/titlebar/publish-share.tsx

@@ -1,25 +1,25 @@
-import {useState} from 'react'
-import {useRoute} from 'wouter'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import {Box} from '@components/box'
-import {useSelector} from '@xstate/react'
-import {Icon} from '@components/icon'
 import {isProduction, MINTTER_GATEWAY_URL} from '@app/constants'
-import {PublicationActor} from '@app/publication-machine'
+import {MainActor} from '@app/hooks/main-actor'
 import {useDocPublications, useSiteList} from '@app/hooks/sites'
-import {Button} from '@components/button'
+import {PublicationActor} from '@app/publication-machine'
 import {styled} from '@app/stitches.config'
-import {AccessURLRow} from '@components/url'
-import {usePublicationDialog} from './publication-dialog'
-import {MainActor} from '@app/hooks/main-actor'
-import {WebPublicationRecord} from '@mintter/shared'
 import {EXPERIMENTS} from '@app/utils/experimental'
 import {useNostr} from '@app/utils/nostr'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import {toast} from 'react-hot-toast'
+import {hostnameStripProtocol} from '@app/utils/site-hostname'
+import {Box} from '@components/box'
+import {Button} from '@components/button'
 import {dialogContentStyles, overlayStyles} from '@components/dialog-styles'
+import {Icon} from '@components/icon'
 import {TextField} from '@components/text-field'
-import {hostnameStripProtocol} from '@app/utils/site-hostname'
+import {AccessURLRow} from '@components/url'
+import {WebPublicationRecord} from '@mintter/shared'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import {useSelector} from '@xstate/react'
+import {useEffect, useRef, useState} from 'react'
+import {toast} from 'react-hot-toast'
+import {useRoute} from 'wouter'
+import {usePublicationDialog} from './publication-dialog'
 
 const StyledOverlay = styled(DialogPrimitive.Overlay, overlayStyles)
 const StyledContent = styled(DialogPrimitive.Content, dialogContentStyles)
@@ -208,6 +208,27 @@ export function PublishShareButton({mainActor}: {mainActor: MainActor}) {
   const publicationDialog = usePublicationDialog(mainActor)
   const nostrPostDialog = useNostrPostDialog()
   const publications = useDocPublications(docId)
+  let isSaving = useRef(false)
+  useEffect(() => {
+    if (mainActor.type == 'publication') {
+      isSaving.current = false
+    } else {
+      mainActor.actor.subscribe((state) => {
+        if (state.matches('editing.saving')) {
+          console.log('subscribe change TRUE!', state.value)
+          isSaving.current = true
+        } else {
+          console.log('subscribe change FALSE!', state.value)
+          isSaving.current = false
+        }
+      })
+      mainActor.actor.onTransition((state) => {
+        if (state.changed && state.matches('editing.saving')) {
+        } else {
+        }
+      })
+    }
+  }, [mainActor])
 
   if (!isDraft && !isPublic && !isPublicB) return null
   return (
@@ -224,6 +245,7 @@ export function PublishShareButton({mainActor}: {mainActor: MainActor}) {
       >
         <PopoverPrimitive.Trigger asChild>
           <button
+            disabled={isSaving.current}
             onClick={(e) => {
               e.preventDefault()
               if (isOpen) {
@@ -238,7 +260,7 @@ export function PublishShareButton({mainActor}: {mainActor: MainActor}) {
             }}
             className={`titlebar-button success outlined ${
               isOpen ? 'active' : ''
-            }`}
+            } ${isSaving.current ? 'disabled' : ''}`}
             data-testid="button-publish"
           >
             {mainActor.actor?.id === 'editor' ? (
@@ -254,7 +276,7 @@ export function PublishShareButton({mainActor}: {mainActor: MainActor}) {
             )}
           </button>
         </PopoverPrimitive.Trigger>
-        <PopoverPrimitive.Portal style={{}}>
+        <PopoverPrimitive.Portal>
           <PopoverPrimitive.Content
             style={{
               zIndex: 200000,

frontend/app/src/draft-machine.ts

@@ -338,13 +338,17 @@ export function createDraftMachine({
                 ]
               : contentChanges
 
-            await updateDraft({
-              documentId: context.documentId,
-              changes,
-            })
-            // TODO: update document
-            client.removeQueries([queryKeys.GET_DRAFT, context.documentId])
-            client.invalidateQueries([queryKeys.GET_DRAFT_LIST])
+            if (changes.length != 0) {
+              await updateDraft({
+                documentId: context.documentId,
+                changes,
+              })
+              // TODO: update document
+              client.removeQueries([queryKeys.GET_DRAFT, context.documentId])
+              client.invalidateQueries([queryKeys.GET_DRAFT_LIST])
+            } else {
+              console.log('NO CHANGES TO SEND')
+            }
           }
 
           return getDraftQuery(client, context.documentId)

frontend/app/src/hooks/main-actor.ts

@@ -7,7 +7,7 @@ import {
   PublicationActor,
 } from '@app/publication-machine'
 import {appQueryClient} from '@app/query-client'
-import {publishDraft} from '@mintter/shared'
+import {Publication, publishDraft} from '@mintter/shared'
 import {useMemo} from 'react'
 import {toast} from 'react-hot-toast'
 import {Editor} from 'slate'
@@ -24,7 +24,7 @@ export type MainActorOptions = Partial<{
   editor: Editor
   client: QueryClient
   //TODO: add proper type
-  publishDraft: any
+  publishDraft?: ReturnType<typeof publishDraft>
 }>
 
 export function useMainActor(props: MainActorOptions = {}) {
@@ -57,28 +57,28 @@ export function useMainActor(props: MainActorOptions = {}) {
         editor,
       }).withConfig({
         actions: {
-          afterPublish: (_, event) => {
-            console.log('draftMachine afterPublish')
+          afterPublish: (c, event) => {
+            console.log('===== PUBLISHING: AFTER PUBLISH ===', c, event)
 
             // invoke('emit_all', {
             //   event: 'document_published',
             // })
             setLocation(`/p/${event.data.document?.id}/${event.data.version}`, {
               replace: true,
             })
+
+            republishDoc.mutateAsync(event.data)
             toast.success('Draft published Successfully!')
           },
         },
         services: {
           // @ts-ignore
           publishDraft: props.publishDraft
             ? props.publishDraft
-            : async (context) => {
-                console.log('draftMachine publishDraft', context)
+            : (context) => {
+                console.log('===== PUBLISHING: PUBLISH SERVICE === ', context)
 
-                const pub = await publishDraft(context.documentId)
-                await republishDoc.mutateAsync(pub)
-                return pub
+                return publishDraft(context.documentId)
               },
         },
       })

frontend/app/src/styles/titlebar.scss

@@ -65,6 +65,10 @@
       max-height: 1em;
       line-height: 1;
     }
+
+    &.disabled {
+      opacity: 0.5;
+    }
   }
 
   .button-group {

frontend/shared/src/client/drafts.ts

@@ -66,7 +66,12 @@ export async function getDraft(
   documentId: string,
   rpc: Transport = transport,
 ): Promise<Document> {
-  return await createPromiseClient(Drafts, rpc).getDraft({documentId})
+  try {
+    let draft = await createPromiseClient(Drafts, rpc).getDraft({documentId})
+    return draft
+  } catch (error) {
+    throw new Error(`DetDraft ERROR: ${JSON.stringify(error)}`)
+  }
 }
 
 export type DocumentChanges = {
@@ -78,5 +83,12 @@ export async function updateDraftV2(
   documentChanges: DocumentChanges,
   rpc: Transport = transport,
 ) {
-  return await createPromiseClient(Drafts, rpc).updateDraftV2(documentChanges)
+  try {
+    let result = await createPromiseClient(Drafts, rpc).updateDraftV2(
+      documentChanges,
+    )
+    return result
+  } catch (error) {
+    throw new Error(`UPDATE DRAFT ERROR: ${JSON.stringify(error)}`)
+  }
 }