diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index edd9c5ac..ab38d5d0 100644 --- a/src/components/post-form/post-form.tsx +++ b/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 && } diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index 28a41b8d..efdc50e3 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/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(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) => { - // 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 }); diff --git a/src/hooks/use-publish-reply.ts b/src/hooks/use-publish-reply.ts index 92ed28f3..783469d5 100644 --- a/src/hooks/use-publish-reply.ts +++ b/src/hooks/use-publish-reply.ts @@ -36,15 +36,21 @@ const useReplyStore = create((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 } : {}), - ...(data.signer ? { signer: data.signer } : {}), + ...(updatedAuthor ? { author: updatedAuthor } : {}), + ...(signer ? { signer } : {}), content, link, spoiler, @@ -57,11 +63,12 @@ const useReplyStore = create((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((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((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]);