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

This commit is contained in:
Tom (plebeius.eth)
2024-08-12 21:55:52 +02:00
parent 99a219733c
commit 43561e9077
3 changed files with 40 additions and 18 deletions
+15 -6
View File
@@ -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>}
+9 -5
View File
@@ -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 });
+16 -7
View File
@@ -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 } : {}),
...(data.signer ? { signer: data.signer } : {}),
...(updatedAuthor ? { author: updatedAuthor } : {}),
...(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]);