mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
feat(settings): add anon mode - automatically use a different user ID in each thread
This commit is contained in:
Tom (plebeius.eth)
@@ -138,7 +138,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
|
||||
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
|
||||
c/
|
||||
</Link>
|
||||
<span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid)}>
|
||||
<span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid, postCid)}>
|
||||
{shortCid}
|
||||
</span>
|
||||
</>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLocation, useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
@@ -24,8 +24,11 @@ import styles from './post-form.module.css';
|
||||
import _ from 'lodash';
|
||||
import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
|
||||
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
|
||||
import useAnonMode from '../../hooks/use-anon-mode';
|
||||
|
||||
type SubmitState = {
|
||||
author: any | undefined;
|
||||
signer: any | undefined;
|
||||
subplebbitAddress: string | undefined;
|
||||
title: string | undefined;
|
||||
content: string | undefined;
|
||||
@@ -39,15 +42,19 @@ type SubmitState = {
|
||||
const { addChallenge } = useChallengesStore.getState();
|
||||
|
||||
const useSubmitStore = create<SubmitState>((set) => ({
|
||||
author: undefined,
|
||||
signer: undefined,
|
||||
subplebbitAddress: undefined,
|
||||
title: undefined,
|
||||
content: undefined,
|
||||
link: undefined,
|
||||
spoiler: undefined,
|
||||
publishCommentOptions: {},
|
||||
setSubmitStore: ({ subplebbitAddress, title, content, link, spoiler }) =>
|
||||
setSubmitStore: ({ author, signer, subplebbitAddress, title, content, link, spoiler }) =>
|
||||
set((state) => {
|
||||
const nextState = { ...state };
|
||||
if (author !== undefined) nextState.author = author;
|
||||
if (signer !== undefined) nextState.signer = signer;
|
||||
if (subplebbitAddress !== undefined) nextState.subplebbitAddress = subplebbitAddress;
|
||||
if (title !== undefined) nextState.title = title || undefined;
|
||||
if (content !== undefined) nextState.content = content || undefined;
|
||||
@@ -55,7 +62,13 @@ const useSubmitStore = create<SubmitState>((set) => ({
|
||||
if (spoiler !== undefined) nextState.spoiler = spoiler || undefined;
|
||||
|
||||
nextState.publishCommentOptions = {
|
||||
...nextState,
|
||||
author: nextState.author,
|
||||
signer: nextState.signer,
|
||||
subplebbitAddress: nextState.subplebbitAddress,
|
||||
title: nextState.title,
|
||||
content: nextState.content,
|
||||
link: nextState.link,
|
||||
spoiler: nextState.spoiler,
|
||||
onChallenge: (...args: any) => addChallenge(args),
|
||||
onChallengeVerification: alertChallengeVerificationFailed,
|
||||
onError: (error: Error) => {
|
||||
@@ -66,7 +79,17 @@ const useSubmitStore = create<SubmitState>((set) => ({
|
||||
};
|
||||
return nextState;
|
||||
}),
|
||||
resetSubmitStore: () => set({ subplebbitAddress: undefined, title: undefined, content: undefined, link: undefined, spoiler: undefined, publishCommentOptions: {} }),
|
||||
resetSubmitStore: () =>
|
||||
set({
|
||||
author: undefined,
|
||||
signer: undefined,
|
||||
subplebbitAddress: undefined,
|
||||
title: undefined,
|
||||
content: undefined,
|
||||
link: undefined,
|
||||
spoiler: undefined,
|
||||
publishCommentOptions: {},
|
||||
}),
|
||||
}));
|
||||
|
||||
export const LinkTypePreviewer = ({ link }: { link: string }) => {
|
||||
@@ -84,10 +107,11 @@ export const LinkTypePreviewer = ({ link }: { link: string }) => {
|
||||
return isValidURL(link) ? type : t('invalid_url');
|
||||
};
|
||||
|
||||
const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: string }) => {
|
||||
const { t } = useTranslation();
|
||||
const account = useAccount();
|
||||
const { displayName } = account?.author || {};
|
||||
const author = account?.author || {};
|
||||
const { displayName } = author || {};
|
||||
const [url, setUrl] = useState('');
|
||||
const { title, content, link, publishCommentOptions, setSubmitStore, resetSubmitStore } = useSubmitStore();
|
||||
const { index, publishComment } = usePublishComment(publishCommentOptions);
|
||||
@@ -102,6 +126,10 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
const subscriptions = account?.subscriptions || [];
|
||||
const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
|
||||
|
||||
const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid);
|
||||
const comment = useComment({ commentCid: postCid });
|
||||
const address = comment?.author?.address;
|
||||
|
||||
const resetFields = () => {
|
||||
if (textRef.current) {
|
||||
textRef.current.value = '';
|
||||
@@ -114,17 +142,32 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const onPublishPost = () => {
|
||||
const getAnonAddressForPost = async () => {
|
||||
if (anonMode) {
|
||||
const newSigner = (await getNewSigner()) || {};
|
||||
setSubmitStore({
|
||||
signer: newSigner,
|
||||
author: {
|
||||
displayName,
|
||||
address: newSigner.address,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onPublishPost = async () => {
|
||||
if (!title && !content && !link) {
|
||||
alert(`Cannot post empty comment`);
|
||||
return;
|
||||
}
|
||||
if (link && !isValidURL(link)) {
|
||||
alert(`Invalid link`);
|
||||
alert('The provided link is not a valid URL.');
|
||||
return;
|
||||
}
|
||||
|
||||
publishComment();
|
||||
getAnonAddressForPost().then(() => {
|
||||
publishComment();
|
||||
});
|
||||
};
|
||||
|
||||
const params = useParams();
|
||||
@@ -149,7 +192,32 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
// in post page, publish a reply to the post
|
||||
const isInPostView = isPostPageView(location.pathname, params);
|
||||
const cid = params?.commentCid as string;
|
||||
const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid, subplebbitAddress });
|
||||
const { setPublishReplyOptions, resetPublishReplyOptions, replyIndex, publishReply } = useReply({ cid, subplebbitAddress });
|
||||
|
||||
const getAnonAddressForReply = async () => {
|
||||
if (anonMode) {
|
||||
const existingSigner = getExistingSigner(address);
|
||||
if (existingSigner) {
|
||||
console.log('onPublishReply - existingSigner:', existingSigner);
|
||||
setPublishReplyOptions({
|
||||
signer: existingSigner,
|
||||
author: {
|
||||
displayName,
|
||||
address: existingSigner.address,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const newSigner = (await getNewSigner()) || {};
|
||||
setPublishReplyOptions({
|
||||
signer: newSigner,
|
||||
author: {
|
||||
displayName,
|
||||
address: newSigner.address,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onPublishReply = () => {
|
||||
const currentContent = textRef.current?.value || '';
|
||||
@@ -164,16 +232,19 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
alert('The provided link is not a valid URL.');
|
||||
return;
|
||||
}
|
||||
publishReply();
|
||||
|
||||
getAnonAddressForReply().then(() => {
|
||||
publishReply();
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof replyIndex === 'number') {
|
||||
resetContent();
|
||||
resetPublishReplyOptions();
|
||||
resetFields();
|
||||
closeForm();
|
||||
}
|
||||
}, [replyIndex, resetContent, closeForm]);
|
||||
}, [replyIndex, resetPublishReplyOptions, closeForm]);
|
||||
|
||||
return (
|
||||
<table className={styles.postFormTable}>
|
||||
@@ -215,7 +286,7 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
ref={textRef}
|
||||
onChange={(e) => {
|
||||
const content = e.target.value.replace(/\n/g, '\n\n');
|
||||
isInPostView ? setContent.content(content) : setSubmitStore({ content });
|
||||
isInPostView ? setPublishReplyOptions({ content }) : setSubmitStore({ content });
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
@@ -231,7 +302,7 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
ref={urlRef}
|
||||
onChange={(e) => {
|
||||
setUrl(e.target.value);
|
||||
isInPostView ? setContent.link(e.target.value) : setSubmitStore({ link: e.target.value });
|
||||
isInPostView ? setPublishReplyOptions({ link: e.target.value }) : setSubmitStore({ link: e.target.value });
|
||||
}}
|
||||
/>
|
||||
<span className={styles.linkType}> {url && <LinkTypePreviewer link={url} />}</span>
|
||||
@@ -242,7 +313,10 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
<td>
|
||||
[
|
||||
<label>
|
||||
<input type='checkbox' onChange={(e) => (isInPostView ? setContent.spoiler(e.target.checked) : setSubmitStore({ spoiler: e.target.checked }))} />
|
||||
<input
|
||||
type='checkbox'
|
||||
onChange={(e) => (isInPostView ? setPublishReplyOptions({ spoiler: e.target.checked }) : setSubmitStore({ spoiler: e.target.checked }))}
|
||||
/>
|
||||
{_.capitalize(t('spoiler'))}?
|
||||
</label>
|
||||
]
|
||||
@@ -293,7 +367,7 @@ const PostForm = () => {
|
||||
comment = editedComment;
|
||||
}
|
||||
|
||||
const { deleted, locked, removed } = comment || {};
|
||||
const { deleted, locked, removed, postCid } = comment || {};
|
||||
const isThreadClosed = deleted || locked || removed || isInDescriptionView || isInRulesView;
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
@@ -320,7 +394,7 @@ const PostForm = () => {
|
||||
]
|
||||
</div>
|
||||
) : (
|
||||
<PostFormTable closeForm={() => setShowForm(false)} />
|
||||
<PostFormTable closeForm={() => setShowForm(false)} postCid={postCid} />
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.postFormMobile}>
|
||||
@@ -336,7 +410,7 @@ const PostForm = () => {
|
||||
<button className={`${styles.showFormButton} button`} onClick={() => setShowForm(showForm ? false : true)}>
|
||||
{showForm ? t('close_post_form') : isInPostView ? t('post_a_reply') : t('start_new_thread')}
|
||||
</button>
|
||||
{showForm && <PostFormTable closeForm={() => setShowForm(false)} />}
|
||||
{showForm && <PostFormTable closeForm={() => setShowForm(false)} postCid={postCid} />}
|
||||
<hr />
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -127,7 +127,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
|
||||
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
|
||||
c/
|
||||
</Link>
|
||||
<span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid)}>
|
||||
<span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid, postCid)}>
|
||||
{shortCid}
|
||||
</span>
|
||||
</>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
|
||||
import { useLocation, useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Draggable from 'react-draggable';
|
||||
import { setAccount, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
|
||||
import { setAccount, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
|
||||
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
|
||||
import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
|
||||
import { isValidURL } from '../../lib/utils/url-utils';
|
||||
@@ -13,17 +13,19 @@ import useIsMobile from '../../hooks/use-is-mobile';
|
||||
import styles from './reply-modal.module.css';
|
||||
import { LinkTypePreviewer } from '../post-form';
|
||||
import _ from 'lodash';
|
||||
import useAnonMode from '../../hooks/use-anon-mode';
|
||||
|
||||
interface ReplyModalProps {
|
||||
closeModal: () => void;
|
||||
parentCid: string;
|
||||
postCid: string;
|
||||
scrollY: number;
|
||||
}
|
||||
|
||||
const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
|
||||
const ReplyModal = ({ closeModal, parentCid, postCid, scrollY }: ReplyModalProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { subplebbitAddress } = useParams() as { subplebbitAddress: string };
|
||||
const { setContent, publishReply } = useReply({ cid: parentCid, subplebbitAddress });
|
||||
const { setPublishReplyOptions, publishReply } = useReply({ cid: parentCid, subplebbitAddress });
|
||||
const account = useAccount();
|
||||
const { displayName } = account?.author || {};
|
||||
const [url, setUrl] = useState('');
|
||||
@@ -31,7 +33,35 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
|
||||
const urlRef = useRef<HTMLInputElement>(null);
|
||||
const { selectedText } = useSelectedTextStore();
|
||||
|
||||
const onPublishReply = () => {
|
||||
const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid);
|
||||
const comment = useComment({ commentCid: postCid });
|
||||
const address = comment?.author?.address;
|
||||
|
||||
const getAnonAddressForReply = async () => {
|
||||
if (anonMode) {
|
||||
const existingSigner = getExistingSigner(address);
|
||||
if (existingSigner) {
|
||||
setPublishReplyOptions({
|
||||
signer: existingSigner,
|
||||
author: {
|
||||
displayName,
|
||||
address: existingSigner.address,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const newSigner = (await getNewSigner()) || {};
|
||||
setPublishReplyOptions({
|
||||
signer: newSigner,
|
||||
author: {
|
||||
displayName,
|
||||
address: newSigner.address,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onPublishReply = async () => {
|
||||
const currentContent = textRef.current?.value || '';
|
||||
const currentUrl = urlRef.current?.value || '';
|
||||
|
||||
@@ -44,8 +74,11 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
|
||||
alert('The provided link is not a valid URL.');
|
||||
return;
|
||||
}
|
||||
publishReply();
|
||||
closeModal();
|
||||
|
||||
getAnonAddressForReply().then(() => {
|
||||
publishReply();
|
||||
closeModal();
|
||||
});
|
||||
};
|
||||
|
||||
const nodeRef = useRef<HTMLDivElement>(null);
|
||||
@@ -109,7 +142,7 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
|
||||
// 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) {
|
||||
setContent.content(contentWithoutPrefix);
|
||||
setPublishReplyOptions({ content: contentWithoutPrefix });
|
||||
}
|
||||
};
|
||||
|
||||
@@ -142,7 +175,7 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
|
||||
placeholder={_.capitalize(t('link'))}
|
||||
onChange={(e) => {
|
||||
setUrl(e.target.value);
|
||||
setContent.link(e.target.value);
|
||||
setPublishReplyOptions({ link: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -169,7 +202,7 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
|
||||
<span className={styles.spoilerButton}>
|
||||
[
|
||||
<label>
|
||||
<input type='checkbox' onChange={(e) => setContent.spoiler(e.target.checked)} />
|
||||
<input type='checkbox' onChange={(e) => setPublishReplyOptions({ spoiler: e.target.checked })} />
|
||||
{_.capitalize(t('spoiler'))}?
|
||||
</label>
|
||||
]
|
||||
|
||||
@@ -36,11 +36,32 @@
|
||||
}
|
||||
|
||||
.deleteAccount {
|
||||
color: red;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.deleteAccount:not(:disabled) {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.setting .createAccount {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.settingTip {
|
||||
display: block;
|
||||
font-size: 0.85em;
|
||||
margin: 2px 0 10px 0;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
.anonMode {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.anonMode label {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.anonMode input[type="checkbox"] {
|
||||
margin-right: 3px;
|
||||
}
|
||||
@@ -3,6 +3,21 @@ import { useTranslation } from 'react-i18next';
|
||||
import { createAccount, deleteAccount, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts } from '@plebbit/plebbit-react-hooks';
|
||||
import stringify from 'json-stringify-pretty-compact';
|
||||
import styles from './account-settings.module.css';
|
||||
import useAnonModeStore from '../../../stores/use-anon-mode-store';
|
||||
|
||||
const AnonMode = () => {
|
||||
const anonMode = useAnonModeStore((state) => state.anonMode);
|
||||
const setAnonMode = useAnonModeStore((state) => state.setAnonMode);
|
||||
|
||||
return (
|
||||
<div className={styles.anonMode}>
|
||||
<label>
|
||||
<input type='checkbox' checked={anonMode} onChange={(e) => setAnonMode(e.target.checked)} /> anon mode
|
||||
</label>
|
||||
<span className={styles.settingTip}>Automatically use a different user ID in each thread</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AccountSettings = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -167,7 +182,7 @@ const AccountSettings = () => {
|
||||
<textarea value={text} onChange={(e) => setText(e.target.value)} autoCorrect='off' autoComplete='off' spellCheck='false' />
|
||||
<div>
|
||||
<button onClick={saveAccount}>{t('save')}</button> <button onClick={() => setText(accountJson)}>{t('reset')}</button>{' '}
|
||||
<button onClick={_importAccount}>{t('import')}</button> <button onClick={_exportAccount}>{t('export')}</button>{' '}
|
||||
<button onClick={_importAccount}>{t('import')}</button> <button onClick={_exportAccount}>{t('export')}</button> <AnonMode />
|
||||
<button className={styles.deleteAccount} onClick={() => _deleteAccount(account?.name)}>
|
||||
{t('delete_account')}
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { useAccount } from '@plebbit/plebbit-react-hooks';
|
||||
import useAnonModeStore from '../stores/use-anon-mode-store';
|
||||
|
||||
const useAnonMode = (postCid?: string) => {
|
||||
const { anonMode, threadSigners, setThreadSigner, setAddressSigner, getAddressSigner } = useAnonModeStore((state) => ({
|
||||
anonMode: state.anonMode,
|
||||
threadSigners: state.threadSigners,
|
||||
setThreadSigner: state.setThreadSigner,
|
||||
setAddressSigner: state.setAddressSigner,
|
||||
getAddressSigner: state.getAddressSigner,
|
||||
}));
|
||||
|
||||
const threadSigner = postCid ? threadSigners[postCid] : undefined;
|
||||
|
||||
const account = useAccount();
|
||||
|
||||
const getNewSigner = async () => {
|
||||
if (anonMode) {
|
||||
if (!postCid || !threadSigner) {
|
||||
try {
|
||||
const signer = await account?.plebbit.createSigner();
|
||||
if (signer) {
|
||||
if (postCid) {
|
||||
setThreadSigner(postCid, { privateKey: signer.privateKey, address: signer.address });
|
||||
} else {
|
||||
setAddressSigner({ privateKey: signer.privateKey, address: signer.address });
|
||||
}
|
||||
}
|
||||
return signer;
|
||||
} catch (error) {
|
||||
console.error('Failed to create anonymous signer:', error);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: threadSigner?.privateKey });
|
||||
return signer;
|
||||
} catch (error) {
|
||||
console.error('Failed to retrieve anonymous signer:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const getExistingSigner = (address: string) => {
|
||||
return getAddressSigner(address);
|
||||
};
|
||||
|
||||
return { anonMode, getNewSigner, getExistingSigner };
|
||||
};
|
||||
|
||||
export default useAnonMode;
|
||||
@@ -5,6 +5,7 @@ import useSelectedTextStore from '../stores/use-selected-text-store';
|
||||
const useReplyModal = () => {
|
||||
const [showReplyModal, setShowReplyModal] = useState(false);
|
||||
const [activeCid, setActiveCid] = useState<string | null>(null);
|
||||
const [threadCid, setThreadCid] = useState<string | null>(null);
|
||||
const { resetSelectedText, setSelectedText } = useSelectedTextStore();
|
||||
|
||||
// on mobile, the css position is absolute instead of fixed, so we need to calculate the top position
|
||||
@@ -22,7 +23,7 @@ const useReplyModal = () => {
|
||||
text && setSelectedText(`>${text}\n`);
|
||||
};
|
||||
|
||||
const openReplyModal = (cid: string) => {
|
||||
const openReplyModal = (parentCid: string, postCid: string) => {
|
||||
getSelectedText();
|
||||
|
||||
if (isMobile) {
|
||||
@@ -30,14 +31,15 @@ const useReplyModal = () => {
|
||||
setScrollY(currentScrollY);
|
||||
}
|
||||
|
||||
if (activeCid && activeCid !== cid) {
|
||||
if (activeCid && activeCid !== parentCid) {
|
||||
return;
|
||||
}
|
||||
setActiveCid(cid);
|
||||
setActiveCid(parentCid);
|
||||
setThreadCid(postCid);
|
||||
setShowReplyModal(true);
|
||||
};
|
||||
|
||||
return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal };
|
||||
return { activeCid, threadCid, closeModal, openReplyModal, scrollY, showReplyModal };
|
||||
};
|
||||
|
||||
export default useReplyModal;
|
||||
|
||||
+35
-35
@@ -1,4 +1,4 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useCallback } from 'react';
|
||||
import { ChallengeVerification, Comment, PublishCommentOptions, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||
import { create } from 'zustand';
|
||||
import { alertChallengeVerificationFailed } from '../lib/utils/challenge-utils';
|
||||
@@ -7,16 +7,20 @@ import useChallengesStore from '../stores/use-challenges-store';
|
||||
type SetReplyStoreData = {
|
||||
subplebbitAddress: string;
|
||||
parentCid: string;
|
||||
author: any | undefined;
|
||||
content: string | undefined;
|
||||
link: string | undefined;
|
||||
spoiler: boolean;
|
||||
signer: any | undefined;
|
||||
spoiler: boolean | undefined;
|
||||
};
|
||||
|
||||
type ReplyState = {
|
||||
author: { [parentCid: string]: any | undefined };
|
||||
content: { [parentCid: string]: string | undefined };
|
||||
link: { [parentCid: string]: string | undefined };
|
||||
signer: { [parentCid: string]: any | undefined };
|
||||
spoiler: { [parentCid: string]: boolean | undefined };
|
||||
publishCommentOptions: PublishCommentOptions;
|
||||
publishCommentOptions: { [parentCid: string]: PublishCommentOptions | undefined };
|
||||
setReplyStore: (data: SetReplyStoreData) => void;
|
||||
resetReplyStore: (parentCid: string) => void;
|
||||
};
|
||||
@@ -24,16 +28,20 @@ type ReplyState = {
|
||||
const { addChallenge } = useChallengesStore.getState();
|
||||
|
||||
const useReplyStore = create<ReplyState>((set) => ({
|
||||
author: {},
|
||||
content: {},
|
||||
link: {},
|
||||
signer: {},
|
||||
spoiler: {},
|
||||
publishCommentOptions: {},
|
||||
setReplyStore: (data: SetReplyStoreData) =>
|
||||
set((state) => {
|
||||
const { subplebbitAddress, parentCid, content, link, spoiler } = data;
|
||||
const { subplebbitAddress, parentCid, author, content, link, signer, spoiler } = data;
|
||||
const publishCommentOptions = {
|
||||
subplebbitAddress,
|
||||
parentCid,
|
||||
author,
|
||||
signer,
|
||||
content,
|
||||
link,
|
||||
spoiler,
|
||||
@@ -47,6 +55,8 @@ const useReplyStore = create<ReplyState>((set) => ({
|
||||
},
|
||||
};
|
||||
return {
|
||||
author: { ...state.author, [parentCid]: author },
|
||||
signer: { ...state.signer, [parentCid]: signer },
|
||||
content: { ...state.content, [parentCid]: content },
|
||||
link: { ...state.link, [parentCid]: link },
|
||||
spoiler: { ...state.spoiler, [parentCid]: spoiler },
|
||||
@@ -56,6 +66,8 @@ 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 },
|
||||
spoiler: { ...state.spoiler, [parentCid]: undefined },
|
||||
@@ -65,7 +77,9 @@ const useReplyStore = create<ReplyState>((set) => ({
|
||||
|
||||
const useReply = ({ cid, subplebbitAddress }: { cid: string; subplebbitAddress: string }) => {
|
||||
const parentCid = cid;
|
||||
const { content, link, spoiler, publishCommentOptions } = useReplyStore((state) => ({
|
||||
const { author, signer, content, link, spoiler, publishCommentOptions } = useReplyStore((state) => ({
|
||||
author: state.author[parentCid],
|
||||
signer: state.signer[parentCid],
|
||||
content: state.content[parentCid],
|
||||
link: state.link[parentCid],
|
||||
spoiler: state.spoiler[parentCid],
|
||||
@@ -75,41 +89,27 @@ const useReply = ({ cid, subplebbitAddress }: { cid: string; subplebbitAddress:
|
||||
const setReplyStore = useReplyStore((state) => state.setReplyStore);
|
||||
const resetReplyStore = useReplyStore((state) => state.resetReplyStore);
|
||||
|
||||
const setContent = useMemo(
|
||||
() => ({
|
||||
content: (newContent: string) =>
|
||||
setReplyStore({
|
||||
subplebbitAddress,
|
||||
parentCid,
|
||||
content: newContent === '' ? undefined : newContent,
|
||||
link: link || undefined,
|
||||
spoiler: spoiler || false,
|
||||
}),
|
||||
link: (newLink: string) =>
|
||||
setReplyStore({
|
||||
subplebbitAddress,
|
||||
parentCid,
|
||||
content: content,
|
||||
link: newLink || undefined,
|
||||
spoiler: spoiler || false,
|
||||
}),
|
||||
spoiler: (newSpoiler: boolean) =>
|
||||
setReplyStore({
|
||||
subplebbitAddress,
|
||||
parentCid,
|
||||
content: content,
|
||||
link: link || undefined,
|
||||
spoiler: newSpoiler,
|
||||
}),
|
||||
}),
|
||||
[subplebbitAddress, parentCid, setReplyStore, content, link, spoiler],
|
||||
const setPublishReplyOptions = useCallback(
|
||||
(options: Partial<SetReplyStoreData>) => {
|
||||
setReplyStore({
|
||||
subplebbitAddress,
|
||||
parentCid,
|
||||
author,
|
||||
signer,
|
||||
content,
|
||||
link,
|
||||
spoiler,
|
||||
...options,
|
||||
});
|
||||
},
|
||||
[subplebbitAddress, parentCid, author, signer, content, link, spoiler, setReplyStore],
|
||||
);
|
||||
|
||||
const resetContent = useMemo(() => () => resetReplyStore(parentCid), [parentCid, resetReplyStore]);
|
||||
const resetPublishReplyOptions = useCallback(() => resetReplyStore(parentCid), [parentCid, resetReplyStore]);
|
||||
|
||||
const { index, publishComment } = usePublishComment(publishCommentOptions);
|
||||
|
||||
return { setContent, resetContent, replyIndex: index, publishReply: publishComment };
|
||||
return { setPublishReplyOptions, resetPublishReplyOptions, replyIndex: index, publishReply: publishComment, setReplyStore };
|
||||
};
|
||||
|
||||
export default useReply;
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { create } from 'zustand';
|
||||
import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js';
|
||||
|
||||
interface AnonModeState {
|
||||
anonMode: boolean;
|
||||
threadSigners: { [key: string]: { privateKey: string; address: string } };
|
||||
addressSigners: { [address: string]: { privateKey: string; address: string } };
|
||||
setAnonMode: (mode: boolean) => void;
|
||||
setThreadSigner: (postCid: string, signer: { privateKey: string; address: string }) => void;
|
||||
getThreadSigner: (postCid: string) => { privateKey: string; address: string } | undefined;
|
||||
setAddressSigner: (signer: { privateKey: string; address: string }) => void;
|
||||
getAddressSigner: (address: string) => { privateKey: string; address: string } | undefined;
|
||||
}
|
||||
|
||||
const anonModeStore = localForageLru.createInstance({
|
||||
name: 'anonModeStore',
|
||||
size: 1000,
|
||||
});
|
||||
|
||||
const useAnonModeStore = create<AnonModeState>((set, get) => ({
|
||||
anonMode: true,
|
||||
threadSigners: {},
|
||||
addressSigners: {},
|
||||
setAnonMode: (mode: boolean) => set({ anonMode: mode }),
|
||||
setThreadSigner: (postCid: string, signer: { privateKey: string; address: string }) => {
|
||||
set((state) => ({
|
||||
threadSigners: { ...state.threadSigners, [postCid]: signer },
|
||||
}));
|
||||
anonModeStore.setItem(postCid, signer);
|
||||
},
|
||||
getThreadSigner: (postCid: string) => get().threadSigners[postCid],
|
||||
setAddressSigner: (signer: { privateKey: string; address: string }) => {
|
||||
set((state) => ({
|
||||
addressSigners: { ...state.addressSigners, [signer.address]: signer },
|
||||
}));
|
||||
anonModeStore.setItem(signer.address, signer);
|
||||
},
|
||||
getAddressSigner: (address: string) => get().addressSigners[address],
|
||||
}));
|
||||
|
||||
const initializeAnonModeStore = async () => {
|
||||
const entries: [string, { privateKey: string; address: string }][] = await anonModeStore.entries();
|
||||
const threadSigners: { [key: string]: { privateKey: string; address: string } } = {};
|
||||
const addressSigners: { [key: string]: { privateKey: string; address: string } } = {};
|
||||
entries.forEach(([key, value]) => {
|
||||
if (value.address) {
|
||||
addressSigners[value.address] = value;
|
||||
}
|
||||
threadSigners[key] = value;
|
||||
});
|
||||
|
||||
useAnonModeStore.setState((state) => ({
|
||||
threadSigners: { ...threadSigners, ...state.threadSigners },
|
||||
addressSigners: { ...addressSigners, ...state.addressSigners },
|
||||
}));
|
||||
};
|
||||
|
||||
initializeAnonModeStore();
|
||||
|
||||
export default useAnonModeStore;
|
||||
@@ -104,7 +104,7 @@ const Board = () => {
|
||||
const { createdAt, description, error, rules, shortAddress, state, suggested } = subplebbit || {};
|
||||
const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : subplebbit?.title;
|
||||
|
||||
const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal();
|
||||
const { activeCid, threadCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal();
|
||||
|
||||
const { blocked, unblock } = useBlock({ address: subplebbitAddress });
|
||||
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
|
||||
@@ -158,7 +158,7 @@ const Board = () => {
|
||||
return (
|
||||
<div className={styles.content}>
|
||||
{location.pathname.endsWith('/settings') && <SettingsModal />}
|
||||
{showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
|
||||
{showReplyModal && activeCid && threadCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} postCid={threadCid} scrollY={scrollY} />}
|
||||
{feed.length !== 0 ? (
|
||||
<>
|
||||
{rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
|
||||
|
||||
@@ -22,7 +22,7 @@ export interface PostProps {
|
||||
roles?: Role[];
|
||||
showAllReplies?: boolean;
|
||||
showReplies?: boolean;
|
||||
openReplyModal?: (cid: string) => void;
|
||||
openReplyModal?: (parentCid: string, postCid: string) => void;
|
||||
}
|
||||
|
||||
export const Post = ({ post, showAllReplies = false, showReplies = true, openReplyModal }: PostProps) => {
|
||||
@@ -62,7 +62,7 @@ const PostPage = () => {
|
||||
const subplebbit = useSubplebbit({ subplebbitAddress });
|
||||
const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit;
|
||||
|
||||
const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal();
|
||||
const { activeCid, threadCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal();
|
||||
|
||||
const comment = useComment({ commentCid });
|
||||
|
||||
@@ -91,7 +91,7 @@ const PostPage = () => {
|
||||
return (
|
||||
<div className={styles.content}>
|
||||
{isInSettigsView && <SettingsModal />}
|
||||
{showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
|
||||
{showReplyModal && activeCid && threadCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} postCid={threadCid} scrollY={scrollY} />}
|
||||
{/* TODO: remove this replyCount error once api supports scrolling replies pages */}
|
||||
{replyCount > 60 && <span className={styles.error}>Error: this thread has too many replies, some of them cannot be displayed right now.</span>}
|
||||
{error && <span className={styles.error}>Error: {error.message}</span>}
|
||||
|
||||
Reference in New Issue
Block a user