From f2467cb4303c00fae00c4cb8525a24b5836ce052 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sat, 9 Nov 2024 12:58:49 +0100 Subject: [PATCH 1/8] refactor(not found): validate routes with hook imported in app --- src/app.tsx | 32 +++++------------------ src/hooks/use-validate-route-params.ts | 36 ++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 26 deletions(-) create mode 100644 src/hooks/use-validate-route-params.ts diff --git a/src/app.tsx b/src/app.tsx index 7e48fc1d..6ecd3773 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,8 +1,7 @@ import { useEffect } from 'react'; -import { Outlet, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom'; -import { useAccountComments } from '@plebbit/plebbit-react-hooks'; +import { Outlet, Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import useTheme from './hooks/use-theme'; -import useTimeFilter from './hooks/use-time-filter'; +import useValidateRouteParams from './hooks/use-validate-route-params'; import styles from './app.module.css'; import About from './views/about'; import All from './views/all'; @@ -24,32 +23,13 @@ import ChallengeModal from './components/challenge-modal'; import Header from './components/header'; import StickyHeader from './components/sticky-header'; import TopBar from './components/topbar'; -import { isHomeAboutView } from './lib/utils/view-utils'; export const sortTypes = ['hot', 'new', 'active', 'controversialAll', 'topAll']; -const ValidateRouteParams = () => { - const { accountCommentIndex, sortType, timeFilterName } = useParams(); - const { timeFilterNames, lastVisitTimeFilterName } = useTimeFilter(); - const { accountComments } = useAccountComments(); - const isSortTypeValid = !sortType || sortTypes.includes(sortType); +const ValidatedRoute = () => { + const isValid = useValidateRouteParams(); - const isValidAccountCommentIndex = - !accountCommentIndex || - (!isNaN(parseInt(accountCommentIndex)) && - parseInt(accountCommentIndex) >= 0 && - accountComments?.length > 0 && - parseInt(accountCommentIndex) < accountComments.length); - - const isDynamicTimeFilter = (filter: string) => /^\d+[dwmy]$/.test(filter); - const isTimeFilterNameValid = - !timeFilterName || timeFilterNames.includes(timeFilterName as any) || timeFilterName === lastVisitTimeFilterName || isDynamicTimeFilter(timeFilterName); - - const isAccountCommentIndexValid = !accountCommentIndex || !isNaN(parseInt(accountCommentIndex)); - const location = useLocation(); - const isInHomeAboutView = isHomeAboutView(location.pathname); - - if (!isValidAccountCommentIndex || (!isSortTypeValid && !isInHomeAboutView) || !isTimeFilterNameValid || !isAccountCommentIndexValid) { + if (!isValid) { return ; } @@ -144,7 +124,7 @@ const App = () => { } /> - }> + }> } /> } /> diff --git a/src/hooks/use-validate-route-params.ts b/src/hooks/use-validate-route-params.ts new file mode 100644 index 00000000..6db52cd2 --- /dev/null +++ b/src/hooks/use-validate-route-params.ts @@ -0,0 +1,36 @@ +import { useLocation } from 'react-router-dom'; +import { useAccountComments } from '@plebbit/plebbit-react-hooks'; +import { useParams } from 'react-router-dom'; +import { isHomeAboutView } from '../lib/utils/view-utils'; +import useTimeFilter from './use-time-filter'; +import { sortTypes } from '../app'; + +const useValidateRouteParams = () => { + const { accountCommentIndex, sortType, timeFilterName } = useParams(); + const { timeFilterNames, lastVisitTimeFilterName } = useTimeFilter(); + const { accountComments } = useAccountComments(); + const isSortTypeValid = !sortType || sortTypes.includes(sortType); + + const isValidAccountCommentIndex = + !accountCommentIndex || + (!isNaN(parseInt(accountCommentIndex)) && + parseInt(accountCommentIndex) >= 0 && + accountComments?.length > 0 && + parseInt(accountCommentIndex) < accountComments.length); + + const isDynamicTimeFilter = (filter: string) => /^\d+[dwmy]$/.test(filter); + const isTimeFilterNameValid = + !timeFilterName || timeFilterNames.includes(timeFilterName as any) || timeFilterName === lastVisitTimeFilterName || isDynamicTimeFilter(timeFilterName); + + const isAccountCommentIndexValid = !accountCommentIndex || !isNaN(parseInt(accountCommentIndex)); + const location = useLocation(); + const isInHomeAboutView = isHomeAboutView(location.pathname); + + if (!isValidAccountCommentIndex || (!isSortTypeValid && !isInHomeAboutView) || !isTimeFilterNameValid || !isAccountCommentIndexValid) { + return false; + } + + return true; +}; + +export default useValidateRouteParams; From b3b39f19fbf4f402ce8a57a79cc4861c654e19b2 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sat, 9 Nov 2024 15:32:19 +0100 Subject: [PATCH 2/8] fix(post): thumbnails would get stuck when navigating --- src/components/post/post.tsx | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 42c6af03..6e664512 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -1,10 +1,10 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useEffect, useState } from 'react'; import styles from './post.module.css'; import { Link, useLocation, useParams } from 'react-router-dom'; import { Comment, useAuthorAddress, useBlock, useComment, useEditedComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { useTranslation } from 'react-i18next'; import { isAllView, isPostView, isProfileHiddenView, isSubplebbitView } from '../../lib/utils/view-utils'; -import { fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; +import { CommentMediaInfo, fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; import { getHostname } from '../../lib/utils/url-utils'; import { getFormattedTimeAgo, formatLocalizedUTCTimestamp } from '../../lib/utils/time-utils'; import CommentEditForm from '../comment-edit-form'; @@ -120,17 +120,25 @@ const Post = ({ index, post = {} }: PostProps) => { const isInSubplebbitView = isSubplebbitView(location.pathname, params); // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false - const initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(post), [post]); - const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo); - const fetchThumbnail = useCallback(async () => { - if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) { - const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo); - setCommentMediaInfo(newMediaInfo); - } - }, [initialCommentMediaInfo]); + const [commentMediaInfo, setCommentMediaInfo] = useState(); + useEffect(() => { - fetchThumbnail(); - }, [fetchThumbnail]); + const loadThumbnail = async () => { + const initialInfo = getCommentMediaInfo(post); + + if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) { + const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo); + setCommentMediaInfo(newMediaInfo); + } else { + setCommentMediaInfo(initialInfo); + } + }; + + loadThumbnail(); + return () => { + setCommentMediaInfo(undefined); + }; + }, [post]); const [isExpanded, setIsExpanded] = useState(isInPostView); const toggleExpanded = () => setIsExpanded(!isExpanded); From fddea3e5c13979ee9f18375702bfb611a650aa72 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sat, 9 Nov 2024 15:33:43 +0100 Subject: [PATCH 3/8] fix(post): expand button would appear for webpage thumbnails --- src/components/post/post.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 6e664512..a23cc7b9 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -244,7 +244,7 @@ const Post = ({ index, post = {} }: PostProps) => { )}

- {!isInPostView && ( + {!isInPostView && commentMediaInfo?.type !== 'webpage' && ( Date: Sat, 9 Nov 2024 17:29:10 +0100 Subject: [PATCH 4/8] fix warning --- src/components/post/comment-tools/mod-menu/mod-menu.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/post/comment-tools/mod-menu/mod-menu.tsx b/src/components/post/comment-tools/mod-menu/mod-menu.tsx index 552b6e91..b5c83623 100644 --- a/src/components/post/comment-tools/mod-menu/mod-menu.tsx +++ b/src/components/post/comment-tools/mod-menu/mod-menu.tsx @@ -28,10 +28,10 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const [isModMenuOpen, setIsModMenuOpen] = useState(false); const defaultPublishOptions: PublishCommentEditOptions = { - removed: post?.removed, - locked: post?.locked, - spoiler: post?.spoiler, - pinned: post?.pinned, + removed: post?.removed ?? false, + locked: post?.locked ?? false, + spoiler: post?.spoiler ?? false, + pinned: post?.pinned ?? false, commentAuthor: { banExpiresAt: post?.banExpiresAt }, commentCid: post?.cid, subplebbitAddress: post?.subplebbitAddress, From 230f0de902293c1ba50fb6b094af868ff354ba66 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 10 Nov 2024 11:02:22 +0100 Subject: [PATCH 5/8] chore(package.json): upgrade plebbit-react-hooks --- package.json | 2 +- yarn.lock | 20 ++------------------ 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 269caac6..727f67e8 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "dependencies": { "@capacitor/app": "6.0.1", "@floating-ui/react": "0.26.1", - "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#de80441257496942063bf032d48e955b7f812937", + "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#0d4219ad95c3322eac78db23091eb57239be8776", "@testing-library/jest-dom": "5.14.1", "@testing-library/react": "13.0.0", "@testing-library/user-event": "13.2.1", diff --git a/yarn.lock b/yarn.lock index 4ece9463..d852d66b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3382,25 +3382,9 @@ dependencies: debug "4.3.4" -"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#2b0a4a5e6a82dc8b5092db28b26e13ddcb14142f": +"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#0d4219ad95c3322eac78db23091eb57239be8776": version "0.0.1" - resolved "https://github.com/plebbit/plebbit-react-hooks.git#2b0a4a5e6a82dc8b5092db28b26e13ddcb14142f" - dependencies: - "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#20b3c91b30a589ea5728f9a20f61e63700fe0dd4" - "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git" - assert "2.0.0" - ethers "5.6.9" - localforage "1.10.0" - lodash.isequal "4.5.0" - memoizee "0.4.15" - quick-lru "5.1.1" - uint8arrays "3.1.1" - uuid "8.3.2" - zustand "4.0.0" - -"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#de80441257496942063bf032d48e955b7f812937": - version "0.0.1" - resolved "https://github.com/plebbit/plebbit-react-hooks.git#de80441257496942063bf032d48e955b7f812937" + resolved "https://github.com/plebbit/plebbit-react-hooks.git#0d4219ad95c3322eac78db23091eb57239be8776" dependencies: "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#20b3c91b30a589ea5728f9a20f61e63700fe0dd4" "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git" From ecf1e1d2dac8aeb1e43273295fce98df20228ef0 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 10 Nov 2024 11:29:39 +0100 Subject: [PATCH 6/8] refactor postScore in util function, add '?' as loading score in sidebar --- src/components/post/post.tsx | 13 +++--------- src/components/sidebar/sidebar.tsx | 32 ++++++++++-------------------- src/lib/utils/post-utils.ts | 8 ++++++++ 3 files changed, 21 insertions(+), 32 deletions(-) create mode 100644 src/lib/utils/post-utils.ts diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index a23cc7b9..63811916 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -5,6 +5,7 @@ import { Comment, useAuthorAddress, useBlock, useComment, useEditedComment, useS import { useTranslation } from 'react-i18next'; import { isAllView, isPostView, isProfileHiddenView, isSubplebbitView } from '../../lib/utils/view-utils'; import { CommentMediaInfo, fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; +import { getPostScore } from '../../lib/utils/post-utils'; import { getHostname } from '../../lib/utils/url-utils'; import { getFormattedTimeAgo, formatLocalizedUTCTimestamp } from '../../lib/utils/time-utils'; import CommentEditForm from '../comment-edit-form'; @@ -149,15 +150,7 @@ const Post = ({ index, post = {} }: PostProps) => { const [upvoted, upvote] = useUpvote(post); const [downvoted, downvote] = useDownvote(post); - const getPostScore = () => { - if ((upvoteCount === 0 && downvoteCount === 0) || state === 'pending' || state === 'failed') { - return '•'; - } else if (upvoteCount === undefined || downvoteCount === undefined) { - return '?'; - } - return upvoteCount - downvoteCount; - }; - + const postScore = getPostScore(upvoteCount, downvoteCount, state); const postTitle = (title?.length > 300 ? title?.slice(0, 300) + '...' : title) || (content?.length > 300 ? content?.slice(0, 300) + '...' : content); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -197,7 +190,7 @@ const Post = ({ index, post = {} }: PostProps) => {
cid && upvote()} />
-
{getPostScore()}
+
{postScore}
cid && downvote()} />
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 57bf1d22..6665913a 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -3,6 +3,9 @@ import { useTranslation } from 'react-i18next'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { Comment, useAccount, useBlock, Role, Subplebbit, useSubplebbitStats, useAccountComment } from '@plebbit/plebbit-react-hooks'; import styles from './sidebar.module.css'; +import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline'; +import useIsMobile from '../../hooks/use-is-mobile'; +import { getPostScore } from '../../lib/utils/post-utils'; import { getFormattedDate, getFormattedTimeDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils'; import { findSubplebbitCreator } from '../../lib/utils/user-utils'; import { @@ -20,8 +23,6 @@ import SearchBar from '../search-bar'; import SubscribeButton from '../subscribe-button'; import packageJson from '../../../package.json'; import LoadingEllipsis from '../loading-ellipsis'; -import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline'; -import useIsMobile from '../../hooks/use-is-mobile'; const { version } = packageJson; const commitRef = process.env.REACT_APP_COMMIT_REF; @@ -59,23 +60,11 @@ const ModeratorsList = ({ roles }: { roles: Record }) => { ); }; -const PostInfo = ({ - address, - cid, - downvoteCount = 0, - timestamp = 0, - upvoteCount = 0, -}: { - address?: string; - cid?: string; - downvoteCount?: number; - timestamp?: number; - updatedAt?: number; - upvoteCount?: number; -}) => { +const PostInfo = ({ comment }: { comment: Comment | undefined }) => { const { t, i18n } = useTranslation(); const { language } = i18n; - const postScore = upvoteCount - downvoteCount; + const { upvoteCount, downvoteCount, timestamp, state, subplebbitAddress, cid } = comment || {}; + const postScore = getPostScore(upvoteCount, downvoteCount, state); const totalVotes = upvoteCount + downvoteCount; const upvotePercentage = totalVotes > 0 ? Math.round((upvoteCount / totalVotes) * 100) : 0; const postDate = getFormattedDate(timestamp, language); @@ -87,10 +76,11 @@ const PostInfo = ({
{postScore} - {postScore === 1 ? t('point') : t('points')} ({upvotePercentage}% {t('upvoted')}) + {postScore === 1 ? t('point') : t('points')}{' '} + {`(${postScore === '?' ? '?' : `${upvotePercentage}`}% ${t('upvoted')})`}
- {t('share_link')}: + {t('share_link')}:
); @@ -216,8 +206,6 @@ export const Footer = () => { const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit }: sidebarProps) => { const { t } = useTranslation(); const { address, createdAt, description, roles, rules, title, updatedAt } = subplebbit || {}; - const { cid, downvoteCount, timestamp, upvoteCount } = comment || {}; - const { allActiveUserCount, hourActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address }); const { isOffline, offlineTitle } = useIsSubplebbitOffline(subplebbit || {}); const onlineNotice = t('users_online', { count: hourActiveUserCount }); @@ -283,7 +271,7 @@ const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit return (
- {isInPostView && } + {isInPostView && } {/* TODO: add .largeButtonDisabled and disabledButtonDescription classnames for subs that don't accept posts */}
diff --git a/src/lib/utils/post-utils.ts b/src/lib/utils/post-utils.ts new file mode 100644 index 00000000..2c145f35 --- /dev/null +++ b/src/lib/utils/post-utils.ts @@ -0,0 +1,8 @@ +export const getPostScore = (upvoteCount: number, downvoteCount: number, state: string) => { + if ((upvoteCount === 0 && downvoteCount === 0) || state === 'pending' || state === 'failed') { + return '•'; + } else if (upvoteCount === undefined || downvoteCount === undefined) { + return '?'; + } + return upvoteCount - downvoteCount; +}; From eb7bdd1613890d845389f98253bff7525266eaa6 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 10 Nov 2024 11:39:25 +0100 Subject: [PATCH 7/8] add cursor pointer --- src/views/subplebbit-settings/subplebbit-settings.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/views/subplebbit-settings/subplebbit-settings.module.css b/src/views/subplebbit-settings/subplebbit-settings.module.css index 2a3ecafd..9a182b7c 100644 --- a/src/views/subplebbit-settings/subplebbit-settings.module.css +++ b/src/views/subplebbit-settings/subplebbit-settings.module.css @@ -3,6 +3,10 @@ margin-bottom: 40px; } +.content button, .content label { + cursor: pointer; +} + .box { width: 514px; background-color: var(--background-primary); From 5e1902fab3d5bf5c5fa27413e231f756025b51c2 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 10 Nov 2024 12:20:51 +0100 Subject: [PATCH 8/8] fix(moderation): update to use new API schema --- .../post/comment-tools/mod-menu/mod-menu.tsx | 60 ++++++++++++------- 1 file changed, 38 insertions(+), 22 deletions(-) diff --git a/src/components/post/comment-tools/mod-menu/mod-menu.tsx b/src/components/post/comment-tools/mod-menu/mod-menu.tsx index b5c83623..eac654b2 100644 --- a/src/components/post/comment-tools/mod-menu/mod-menu.tsx +++ b/src/components/post/comment-tools/mod-menu/mod-menu.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { Trans, useTranslation } from 'react-i18next'; -import { PublishCommentEditOptions, useComment, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks'; +import { PublishCommentModerationOptions, useComment, useEditedComment, usePublishCommentModeration } from '@plebbit/plebbit-react-hooks'; import styles from './mod-menu.module.css'; import { alertChallengeVerificationFailed } from '../../../../lib/utils/challenge-utils'; import challengesStore from '../../../../stores/use-challenges-store'; @@ -15,7 +15,6 @@ type ModMenuProps = { const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const { t } = useTranslation(); - let post: any; const comment = useComment({ commentCid: cid }); const { editedComment } = useEditedComment({ comment }); @@ -27,14 +26,16 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const isReply = post?.parentCid; const [isModMenuOpen, setIsModMenuOpen] = useState(false); - const defaultPublishOptions: PublishCommentEditOptions = { - removed: post?.removed ?? false, - locked: post?.locked ?? false, - spoiler: post?.spoiler ?? false, - pinned: post?.pinned ?? false, - commentAuthor: { banExpiresAt: post?.banExpiresAt }, + const defaultPublishOptions: PublishCommentModerationOptions = { commentCid: post?.cid, subplebbitAddress: post?.subplebbitAddress, + commentModeration: { + removed: post?.removed ?? false, + locked: post?.locked ?? false, + spoiler: post?.spoiler ?? false, + pinned: post?.pinned ?? false, + banExpiresAt: post?.banExpiresAt, + }, onChallenge: (...args: any) => addChallenge([...args, post]), onChallengeVerification: alertChallengeVerificationFailed, onError: (error: Error) => { @@ -43,8 +44,8 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { }, }; - const [publishCommentEditOptions, setPublishCommentEditOptions] = useState(defaultPublishOptions); - const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); + const [publishCommentModerationOptions, setPublishCommentModerationOptions] = useState(defaultPublishOptions); + const { publishCommentModeration } = usePublishCommentModeration(publishCommentModerationOptions); const [banDuration, setBanDuration] = useState(1); @@ -57,26 +58,41 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const onCheckbox = (e: React.ChangeEvent) => { const { id, checked } = e.target; if (id === 'banUser') { - setPublishCommentEditOptions((state) => ({ + setPublishCommentModerationOptions((state) => ({ ...state, - commentAuthor: { ...state.commentAuthor, banExpiresAt: checked ? daysToTimestampInSeconds(banDuration) : undefined }, + commentModeration: { + ...state.commentModeration, + banExpiresAt: checked ? daysToTimestampInSeconds(banDuration) : undefined, + }, })); } else { - setPublishCommentEditOptions((state) => ({ ...state, [id]: checked })); + setPublishCommentModerationOptions((state) => ({ + ...state, + commentModeration: { ...state.commentModeration, [id]: checked }, + })); } }; const onBanDurationChange = (e: React.ChangeEvent) => { const days = parseInt(e.target.value, 10) || 1; setBanDuration(days); - setPublishCommentEditOptions((state) => ({ + setPublishCommentModerationOptions((state) => ({ ...state, - commentAuthor: { ...state.commentAuthor, banExpiresAt: daysToTimestampInSeconds(days) }, + commentModeration: { + ...state.commentModeration, + banExpiresAt: daysToTimestampInSeconds(days), + }, })); }; const onReason = (e: React.ChangeEvent) => - setPublishCommentEditOptions((state) => ({ ...state, reason: e.target.value ? e.target.value : undefined })); + setPublishCommentModerationOptions((state) => ({ + ...state, + commentModeration: { + ...state.commentModeration, + reason: e.target.value ? e.target.value : undefined, + }, + })); const { refs, floatingStyles, context } = useFloating({ placement: 'bottom-start', @@ -95,7 +111,7 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const headingId = useId(); const handleSaveClick = async () => { - await publishCommentEdit(); + await publishCommentModeration(); setIsModMenuOpen(false); }; @@ -110,34 +126,34 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => {
{!isReply && (
)}
{!isCommentAuthorMod && (