fix(quotes): resolve external quote links across boards (#1064)

src/components/reply-modal/__tests__/reply-modal.test.tsx

@@ -19,6 +19,7 @@ const testState = vi.hoisted(() => ({
   } as Record<string, { address: string; features?: Record<string, unknown> }>,
   handleUploadMock: vi.fn(),
   isMobile: false,
+  isResolvingExternalQuotes: false,
   isUploading: false,
   offlineTitle: '' as string | false,
   offlineStates: {} as Record<string, { isOffline: boolean; isOnlineStatusLoading: boolean; offlineTitle: string | false }>,
@@ -26,6 +27,8 @@ const testState = vi.hoisted(() => ({
   offlineWarningVisible: false,
   openEmpty: false,
   publishReplyMock: vi.fn(),
+  publishReplyError: null as string | null,
+  publishReplyStateMessage: null as string | null,
   quoteInsertNumber: undefined as number | undefined,
   quoteInsertRequestId: 0,
   quoteInsertSelectedText: '',
@@ -128,7 +131,10 @@ vi.mock('../../../hooks/use-resolved-subplebbit-address', () => ({
 
 vi.mock('../../../hooks/use-publish-reply', () => ({
   default: () => ({
+    isResolvingExternalQuotes: testState.isResolvingExternalQuotes,
     publishReply: testState.publishReplyMock,
+    publishReplyError: testState.publishReplyError,
+    publishReplyStateMessage: testState.publishReplyStateMessage,
     replyIndex: testState.replyIndex,
     resetPublishReplyOptions: testState.resetPublishReplyOptionsMock,
     setPublishReplyOptions: (options: Record<string, unknown>) => testState.setPublishReplyOptionsMock(options),
@@ -249,6 +255,7 @@ describe('ReplyModal', () => {
     };
     testState.handleUploadMock.mockReset();
     testState.isMobile = false;
+    testState.isResolvingExternalQuotes = false;
     testState.isUploading = false;
     testState.offlineTitle = '';
     testState.offlineStates = {};
@@ -256,6 +263,8 @@ describe('ReplyModal', () => {
     testState.offlineWarningVisible = false;
     testState.openEmpty = false;
     testState.publishReplyMock.mockReset();
+    testState.publishReplyError = null;
+    testState.publishReplyStateMessage = null;
     testState.quoteInsertNumber = undefined;
     testState.quoteInsertRequestId = 0;
     testState.quoteInsertSelectedText = '';

src/components/reply-modal/reply-modal.module.css

@@ -156,4 +156,14 @@
   padding: 3px 5px;
   margin-top: 1px;
   text-shadow: 0 1px rgba(0, 0, 0, 0.20);
-}
+}
+
+.status {
+  width: 294px;
+  font-family: monospace;
+  background-color: rgba(0, 0, 0, 0.08);
+  font-size: 12px;
+  color: var(--post-link-text-color);
+  padding: 3px 5px;
+  margin-top: 1px;
+}

src/components/reply-modal/reply-modal.tsx

@@ -41,11 +41,12 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
   const showSpoilerForReply = directoryEntry?.features?.noSpoilerReplies !== true;
   const requirePostLinkIsMediaFeature = directoryEntry?.features?.requirePostLinkIsMedia;
   const requirePostLinkIsMedia = requirePostLinkIsMediaFeature === true || (requirePostLinkIsMediaFeature === undefined && (isInAllView || isInSubscriptionsView));
-  const { setPublishReplyOptions, publishReply, resetPublishReplyOptions, replyIndex } = usePublishReply({
-    cid: parentCid,
-    subplebbitAddress,
-    postCid,
-  });
+  const { isResolvingExternalQuotes, publishReply, publishReplyError, publishReplyStateMessage, resetPublishReplyOptions, replyIndex, setPublishReplyOptions } =
+    usePublishReply({
+      cid: parentCid,
+      subplebbitAddress,
+      postCid,
+    });
   const account = useAccount();
   const { displayName } = account?.author || {};
   const textRef = useRef<HTMLTextAreaElement | null>(null);
@@ -362,11 +363,18 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
               ]
             </span>
           )}
-          <button className={styles.publishButton} onClick={onPublishReply}>
+          <button className={styles.publishButton} disabled={isResolvingExternalQuotes} onClick={onPublishReply}>
             {t('post')}
           </button>
         </div>
-        {lengthError ? <div className={styles.error}>{lengthError}</div> : error && <div className={styles.error}>{error}</div>}
+        {lengthError ? (
+          <div className={styles.error}>{lengthError}</div>
+        ) : error ? (
+          <div className={styles.error}>{error}</div>
+        ) : (
+          publishReplyError && <div className={styles.error}>{publishReplyError}</div>
+        )}
+        {publishReplyStateMessage && <div className={styles.status}>{publishReplyStateMessage}</div>}
         <BoardOfflineAlert className={styles.offlineBoard} hidden={isInAllView || isInSubscriptionsView || isInModView} subplebbitAddress={subplebbitAddress} />
       </div>
     </animated.div>