feat(post options): support nonoko board redirects (#1137)

src/components/post-form/__tests__/post-form.test.tsx

@@ -175,7 +175,9 @@ vi.mock('../../../hooks/use-publish-post', async () => {
             ...sanitizedOptions,
           };
           testState.publishedPostOptions = testState.publishPostOptions;
-          return testState.publishPostMock(options);
+          const result = testState.publishPostMock(options);
+          forceUpdate();
+          return result;
         },
         [getPublishPostOptions],
       );
@@ -907,6 +909,30 @@ describe('PostForm', () => {
     expect(testState.navigateMock).toHaveBeenCalledWith('/pending/7');
   });
 
+  it('redirects new posts to the board index when nonoko is used', async () => {
+    testState.resolvedCommunityAddress = 'music-posting.eth';
+    testState.publishPostMock.mockImplementation(() => {
+      testState.postIndex = 7;
+    });
+
+    await renderPostForm('/mu');
+    await clickByText(container, 'start_new_thread');
+
+    const table = container.querySelector('table');
+    const optionsInput = table?.querySelector<HTMLInputElement>('input[aria-label="options"]');
+    const subjectInput = table?.querySelector<HTMLInputElement>('input[aria-label="subject"]');
+
+    await dispatchInput(optionsInput as HTMLInputElement, 'nonoko');
+    await dispatchInput(subjectInput as HTMLInputElement, 'Thread title');
+    await clickByText(table as HTMLTableElement, 'post');
+    await flushEffects();
+
+    expect(testState.publishPostMock).toHaveBeenCalledTimes(1);
+    expect(testState.resetPublishPostOptionsMock).toHaveBeenCalledTimes(1);
+    expect(testState.navigateMock).toHaveBeenCalledWith('/mu', { state: { nonokoPendingAccountCommentIndex: 7 } });
+    expect(testState.navigateMock).not.toHaveBeenCalledWith('/pending/7');
+  });
+
   it('resets the reply form after a completed reply publish', async () => {
     testState.comments = {
       'thread-cid': {
@@ -924,6 +950,35 @@ describe('PostForm', () => {
     expect(container.querySelector('table')).toBeNull();
   });
 
+  it('redirects replies from the inline form to the board index when nonoko is used', async () => {
+    testState.comments = {
+      'thread-cid': {
+        postCid: 'thread-cid',
+      },
+    };
+    testState.resolvedCommunityAddress = 'music-posting.eth';
+    testState.publishReplyMock.mockImplementation(() => {
+      testState.replyIndex = 4;
+    });
+
+    await renderPostForm('/mu/thread/thread-cid');
+    await clickByText(container, 'post_a_reply');
+
+    const table = container.querySelector('table');
+    const optionsInput = table?.querySelector<HTMLInputElement>('input[aria-label="options"]');
+    const textarea = table?.querySelector<HTMLTextAreaElement>('textarea');
+
+    await dispatchInput(optionsInput as HTMLInputElement, 'nonoko');
+    await dispatchInput(textarea as HTMLTextAreaElement, 'Reply body');
+    await clickByText(table as HTMLTableElement, 'post');
+    await flushEffects();
+
+    expect(testState.publishReplyMock).toHaveBeenCalledTimes(1);
+    expect(testState.resetPublishReplyOptionsMock).toHaveBeenCalledTimes(1);
+    expect(testState.navigateMock).toHaveBeenCalledWith('/mu');
+    expect(container.querySelector('table')).toBeNull();
+  });
+
   it('publishes replies from the open reply form', async () => {
     testState.comments = {
       'thread-cid': {

src/components/post-form/post-form.tsx

@@ -12,8 +12,10 @@ import {
   type FortuneEntry,
   POST_OPTIONS_VALIDATION_DELAY_MS,
   getContentWithPostOptionState as getContentWithOptions,
+  getNonokoPendingRouteState,
   getPostOptionsDirectoryCode,
   getUnsupportedPostOptionsMessage,
+  hasNonokoOption,
   isUnsupportedPostOptionsMessage,
 } from '../../lib/utils/post-options-utils';
 import { truncateWithEllipsisInMiddle } from '../../lib/utils/string-utils';
@@ -420,6 +422,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const optionsRef = useRef<HTMLInputElement>(null);
   const fortuneEntryRef = useRef<FortuneEntry | null>(null);
   const diceRollRef = useRef<DiceRoll | null>(null);
+  const nonokoRedirectPathRef = useRef<string | null>(null);
 
   const location = useLocation();
   const isInAllView = isAllView(location.pathname);
@@ -487,6 +490,14 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
     setBbcodePreviewContent('');
   };
 
+  const getBoardIndexPath = () => {
+    if (effectiveBoardAddress) {
+      return `/${getBoardPath(effectiveBoardAddress, directories)}`;
+    }
+
+    return params?.boardIdentifier ? `/${params.boardIdentifier}` : null;
+  };
+
   const onPublishPost = () => {
     const currentTitle = subjectRef.current?.value.trim() || '';
     const currentContent = textRef.current?.value || '';
@@ -499,6 +510,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
     checkPostOptions.cancel();
     setLengthError(null);
     setFormError(null);
+    nonokoRedirectPathRef.current = null;
 
     if (currentOptionsError) {
       setFormError(currentOptionsError);
@@ -529,6 +541,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
       return;
     }
 
+    nonokoRedirectPathRef.current = hasNonokoOption(currentOptions) ? getBoardIndexPath() : null;
     publishPost({ content: publishContent });
   };
 
@@ -536,9 +549,15 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const navigate = useNavigate();
   useEffect(() => {
     if (typeof postIndex === 'number') {
+      const nonokoRedirectPath = nonokoRedirectPathRef.current;
+      nonokoRedirectPathRef.current = null;
       resetPublishPostOptions();
       resetFields();
-      navigate(`/pending/${postIndex}`);
+      if (nonokoRedirectPath) {
+        navigate(nonokoRedirectPath, { state: getNonokoPendingRouteState(postIndex) });
+      } else {
+        navigate(`/pending/${postIndex}`);
+      }
     }
   }, [postIndex, resetPublishPostOptions, navigate]);
 
@@ -605,6 +624,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
     checkPostOptions.cancel();
     setLengthError(null);
     setFormError(null);
+    nonokoRedirectPathRef.current = null;
 
     if (currentOptionsError) {
       setFormError(currentOptionsError);
@@ -631,15 +651,21 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
       return;
     }
 
+    nonokoRedirectPathRef.current = hasNonokoOption(currentOptions) ? getBoardIndexPath() : null;
     publishReply({ content: publishContent });
   };
 
   useEffect(() => {
     if (typeof replyIndex === 'number') {
+      const nonokoRedirectPath = nonokoRedirectPathRef.current;
+      nonokoRedirectPathRef.current = null;
       resetFields();
       closeForm();
+      if (nonokoRedirectPath) {
+        navigate(nonokoRedirectPath);
+      }
     }
-  }, [replyIndex, closeForm]);
+  }, [replyIndex, closeForm, navigate]);
 
   const { isUploading, uploadedFileName, handleUpload } = useFileUpload({
     onUploadComplete: (uploadedUrl: string) => {