External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(anon mode): user id could change for pending post, name field could bug out

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-09-19 17:33:00 +02:00
parent b18c1bc491
commit bb976409ff
8 changed files with 40 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+4 -16
View File
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Comment, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
@@ -9,14 +9,11 @@ import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/po
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isValidURL } from '../../lib/utils/url-utils';
import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import useAnonModeStore from '../../stores/use-anon-mode-store';
import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store';
import useAnonMode from '../../hooks/use-anon-mode';
import useAuthorAddressClick from '../../hooks/use-author-address-click';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import useHide from '../../hooks/use-hide';
import usePostCidForPendingPost from '../../hooks/use-post-cid';
import useReplies from '../../hooks/use-replies';
import useStateString from '../../hooks/use-state-string';
import CommentMedia from '../comment-media';
@@ -68,22 +65,13 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
const isInPostPageView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
// comment.author.shortAddress is undefined while the comment publishing state is pending, use account instead
// in anon mode, use the newly generated signer.address instead, which will be comment.author.address
const { anonMode } = useAnonMode();
const { getThreadSigner, currentAnonSignerAddress } = useAnonModeStore();
const postCidForSigner = usePostCidForPendingPost(parentCid);
const anonSignerAddress = postCidForSigner ? getThreadSigner(postCidForSigner)?.address || currentAnonSignerAddress : null;
const account = useAccount();
const pendingShortAddress = anonMode ? anonSignerAddress && Plebbit.getShortAddress(anonSignerAddress) : account?.author?.shortAddress;
const userID = address && Plebbit.getShortAddress(address);
const userIDBackgroundColor = hashStringToColor(userID);
const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
const userID = shortAddress || pendingShortAddress;
const userIDBackgroundColor = hashStringToColor(userID);
const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
const { hidden } = useHide(post);
return (
src/components/post-form/post-form.tsx
+7 -4
View File
@@ -55,9 +55,9 @@ const useSubmitStore = create<SubmitState>((set) => ({
publishCommentOptions: {},
setSubmitStore: ({ author, displayName, signer, subplebbitAddress, title, content, link, spoiler }) =>
set((state) => {
const updatedAuthor = displayName ? { ...author, displayName } : author;
const nextState = { ...state };
if (author !== undefined) nextState.author = updatedAuthor;
if (author !== undefined) nextState.author = author;
if (displayName !== undefined) nextState.displayName = displayName;
if (signer !== undefined) nextState.signer = signer;
if (subplebbitAddress !== undefined) nextState.subplebbitAddress = subplebbitAddress;
if (title !== undefined) nextState.title = title || undefined;
@@ -83,8 +83,11 @@ const useSubmitStore = create<SubmitState>((set) => ({
publishCommentOptions.signer = nextState.signer;
}
if (nextState.author) {
publishCommentOptions.author = nextState.author;
if (nextState.author || nextState.displayName) {
publishCommentOptions.author = {
...nextState.author,
displayName: nextState.displayName,
};
}
nextState.publishCommentOptions = publishCommentOptions;
src/components/post-mobile/post-mobile.tsx
+5 -16
View File
@@ -1,20 +1,17 @@
import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Comment, useAuthorAvatar, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/post-utils';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import useAnonModeStore from '../../stores/use-anon-mode-store';
import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store';
import useAnonMode from '../../hooks/use-anon-mode';
import useAuthorAddressClick from '../../hooks/use-author-address-click';
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
import useHide from '../../hooks/use-hide';
import usePostCidForPendingPost from '../../hooks/use-post-cid';
import useReplies from '../../hooks/use-replies';
import useStateString from '../../hooks/use-state-string';
import CommentMedia from '../comment-media';
@@ -49,21 +46,13 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
const isReply = parentCid;
// comment.author.shortAddress is undefined while the comment publishing state is pending, use account instead
// in anon mode, use the newly generated signer.address instead, which will be comment.author.address
const { anonMode } = useAnonMode();
const { getThreadSigner, currentAnonSignerAddress } = useAnonModeStore();
const postCidForSigner = usePostCidForPendingPost(parentCid);
const anonSignerAddress = postCidForSigner ? getThreadSigner(postCidForSigner)?.address || currentAnonSignerAddress : null;
const account = useAccount();
const pendingShortAddress = anonMode ? anonSignerAddress && Plebbit.getShortAddress(anonSignerAddress) : account?.author?.shortAddress;
const stateString = useStateString(post);
const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
const userIDBackgroundColor = hashStringToColor(shortAddress || pendingShortAddress);
const userID = shortAddress;
const userIDBackgroundColor = hashStringToColor(userID);
const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
const { hidden } = useHide(post);
@@ -113,10 +102,10 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
<span
title={t('highlight_posts')}
className={styles.userAddress}
onClick={() => handleUserAddressClick(shortAddress || pendingShortAddress, postCid)}
onClick={() => handleUserAddressClick(userID, postCid)}
style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
>
{shortAddress || pendingShortAddress}
{userID}
</span>
}
content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}
src/components/reply-modal/reply-modal.tsx
+1 -5
View File
@@ -15,7 +15,6 @@ import styles from './reply-modal.module.css';
import { LinkTypePreviewer } from '../post-form';
import _ from 'lodash';
import useAnonMode from '../../hooks/use-anon-mode';
import useAnonModeStore from '../../stores/use-anon-mode-store';
interface ReplyModalProps {
closeModal: () => void;
@@ -41,7 +40,6 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
const address = comment?.author?.address;
const hasCalledAnonAddressRef = useRef(false);
const { setCurrentAnonSignerAddress } = useAnonModeStore();
const getAnonAddressForReply = useCallback(async () => {
if (anonMode && !hasCalledAnonAddressRef.current) {
@@ -55,7 +53,6 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
displayName: displayName || undefined,
},
});
setCurrentAnonSignerAddress(existingSigner.address);
} else {
const newSigner = await getNewSigner();
if (newSigner) {
@@ -66,11 +63,10 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
displayName: displayName || undefined,
},
});
setCurrentAnonSignerAddress(newSigner.address);
}
}
}
}, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, anonMode, displayName, setCurrentAnonSignerAddress]);
}, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, anonMode, displayName]);
const onPublishReply = () => {
const currentContent = textRef.current?.value.slice(contentPrefix.length).trim() || '';