fix couldn't change displayName more than once on anon mode

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

@@ -160,12 +160,11 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
       setSubmitStore({
         signer: newSigner,
         author: {
-          displayName,
           address: newSigner.address,
         },
       });
     }
-  }, [anonMode, getNewSigner, setSubmitStore, displayName]);
+  }, [anonMode, getNewSigner, setSubmitStore]);
 
   const onPublishPost = async () => {
     if (!title && !content && !link) {
@@ -212,7 +211,6 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
         setPublishReplyOptions({
           signer: existingSigner,
           author: {
-            displayName,
             address: existingSigner.address,
           },
         });
@@ -221,13 +219,12 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
         setPublishReplyOptions({
           signer: newSigner,
           author: {
-            displayName,
             address: newSigner.address,
           },
         });
       }
     }
-  }, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, displayName, anonMode]);
+  }, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, anonMode]);
 
   const onPublishReply = () => {
     const currentContent = textRef.current?.value || '';
@@ -246,6 +243,14 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
     publishReply();
   };
 
+  const hasSetInitialDisplayName = useRef(false);
+  useEffect(() => {
+    if (!hasSetInitialDisplayName.current && displayName) {
+      setPublishReplyOptions({ displayName });
+      hasSetInitialDisplayName.current = true;
+    }
+  }, [displayName, setPublishReplyOptions]);
+
   useEffect(() => {
     if (typeof replyIndex === 'number') {
       resetPublishReplyOptions();
@@ -276,7 +281,11 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
               defaultValue={displayName || undefined}
               onChange={(e) => {
                 setAccount({ ...account, author: { ...account?.author, displayName: e.target.value } });
-                setSubmitStore({ displayName: e.target.value });
+                if (isInPostView) {
+                  setPublishReplyOptions({ displayName: e.target.value });
+                } else {
+                  setSubmitStore({ displayName: e.target.value });
+                }
               }}
             />
             {isInPostView && <button onClick={onPublishReply}>{t('post')}</button>}

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

@@ -48,7 +48,6 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY }:
         setPublishReplyOptions({
           signer: existingSigner,
           author: {
-            displayName,
             address: existingSigner.address,
           },
         });
@@ -57,13 +56,12 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY }:
         setPublishReplyOptions({
           signer: newSigner,
           author: {
-            displayName,
             address: newSigner.address,
           },
         });
       }
     }
-  }, [anonMode, address, getExistingSigner, getNewSigner, displayName, setPublishReplyOptions]);
+  }, [anonMode, address, getExistingSigner, getNewSigner, setPublishReplyOptions]);
 
   useEffect(() => {
     if (anonMode) {
@@ -89,10 +87,17 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY }:
     closeModal();
   };
 
+  const hasSetInitialDisplayName = useRef(false);
+  useEffect(() => {
+    if (!hasSetInitialDisplayName.current && displayName) {
+      setPublishReplyOptions({ displayName });
+      hasSetInitialDisplayName.current = true;
+    }
+  }, [displayName, setPublishReplyOptions]);
+
   const nodeRef = useRef<HTMLDivElement>(null);
   const isMobile = useIsMobile();
 
-  // on mobile, the position is absolute instead of fixed, so we need to calculate the top position
   useEffect(() => {
     if (nodeRef.current && isMobile) {
       const viewportHeight = window.innerHeight;
@@ -150,7 +155,6 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY }:
   };
 
   const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    // remove the prefix from the content to publish, and also add newlines for markdown
     const contentWithoutPrefix = e.target.value.slice(contentPrefix.length).replace(/\n/g, '\n\n');
     if (textRef.current && textRef.current.value !== contentWithoutPrefix) {
       setPublishReplyOptions({ content: contentWithoutPrefix });

src/hooks/use-publish-reply.ts

@@ -36,15 +36,21 @@ const useReplyStore = create<ReplyState>((set) => ({
   signer: {},
   spoiler: {},
   publishCommentOptions: {},
+
   setReplyStore: (data: SetReplyStoreData) =>
     set((state) => {
       const { subplebbitAddress, parentCid, author, displayName, content, link, signer, spoiler } = data;
-      const updatedAuthor = displayName ? { ...author, displayName } : author;
+
+      const updatedAuthor = {
+        ...(state.author[parentCid] || author),
+        ...(displayName ? { displayName } : {}),
+      };
+
       const publishCommentOptions = {
         subplebbitAddress,
         parentCid,
-        ...(data.author ? { author: updatedAuthor } : {}),
+        ...(updatedAuthor ? { author: updatedAuthor } : {}),
-        ...(data.signer ? { signer: data.signer } : {}),
+        ...(signer ? { signer } : {}),
         content,
         link,
         spoiler,
@@ -57,11 +63,12 @@ const useReplyStore = create<ReplyState>((set) => ({
           alert(error.message);
         },
       };
+
       return {
         author: { ...state.author, [parentCid]: updatedAuthor },
-        signer: { ...state.signer, [parentCid]: signer },
         content: { ...state.content, [parentCid]: content },
         link: { ...state.link, [parentCid]: link },
+        signer: { ...state.signer, [parentCid]: signer },
         spoiler: { ...state.spoiler, [parentCid]: spoiler },
         publishCommentOptions: { ...state.publishCommentOptions, [parentCid]: publishCommentOptions },
       };
@@ -70,9 +77,9 @@ const useReplyStore = create<ReplyState>((set) => ({
   resetReplyStore: (parentCid) =>
     set((state) => ({
       author: { ...state.author, [parentCid]: undefined },
-      signer: { ...state.signer, [parentCid]: undefined },
       content: { ...state.content, [parentCid]: undefined },
       link: { ...state.link, [parentCid]: undefined },
+      signer: { ...state.signer, [parentCid]: undefined },
       spoiler: { ...state.spoiler, [parentCid]: undefined },
       publishCommentOptions: { ...state.publishCommentOptions, [parentCid]: undefined },
     })),
@@ -80,8 +87,9 @@ const useReplyStore = create<ReplyState>((set) => ({
 
 const useReply = ({ cid, subplebbitAddress }: { cid: string; subplebbitAddress: string }) => {
   const parentCid = cid;
-  const { author, signer, content, link, spoiler, publishCommentOptions } = useReplyStore((state) => ({
+  const { author, displayName, signer, content, link, spoiler, publishCommentOptions } = useReplyStore((state) => ({
     author: state.author[parentCid],
+    displayName: state.author[parentCid]?.displayName,
     signer: state.signer[parentCid],
     content: state.content[parentCid],
     link: state.link[parentCid],
@@ -99,6 +107,7 @@ const useReply = ({ cid, subplebbitAddress }: { cid: string; subplebbitAddress:
       setReplyStore({
         subplebbitAddress,
         parentCid,
+        ...(anonMode ? { displayName } : {}),
         ...(anonMode ? { author } : {}),
         content,
         link,
@@ -107,7 +116,7 @@ const useReply = ({ cid, subplebbitAddress }: { cid: string; subplebbitAddress:
         ...options,
       });
     },
-    [subplebbitAddress, parentCid, author, signer, content, link, spoiler, setReplyStore, anonMode],
+    [subplebbitAddress, parentCid, author, displayName, signer, content, link, spoiler, setReplyStore, anonMode],
   );
 
   const resetPublishReplyOptions = useCallback(() => resetReplyStore(parentCid), [parentCid, resetReplyStore]);