diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index 72012ffc..81e30577 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom'; -import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useBlock, useFeed } from '@plebbit/plebbit-react-hooks'; +import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useSubplebbitField } from '../../hooks/use-stable-subplebbit'; import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; import { Trans, useTranslation } from 'react-i18next'; @@ -157,9 +157,9 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t // Use stable subplebbit fields to avoid rerenders from updatingState const subplebbitTitle = useSubplebbitField(subplebbitAddress, (sub) => sub?.title); const shortAddress = useSubplebbitField(subplebbitAddress, (sub) => sub?.shortAddress); - // Subscribe to transient state/error separately from stable fields since useStableSubplebbit ignores them - const subplebbitState = useSubplebbitField(subplebbitAddress, (sub) => sub?.state); - const subplebbitError = useSubplebbitField(subplebbitAddress, (sub) => sub?.error); + // useSubplebbitField only reads from store, doesn't trigger fetching + const subplebbit = useSubplebbit({ subplebbitAddress }); + const { error: subplebbitError, state: subplebbitState } = subplebbit || {}; const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : isInModView ? t('mod') : subplebbitTitle; const { blocked, unblock } = useBlock({ address: subplebbitAddress }); diff --git a/src/views/mod-queue/mod-queue.module.css b/src/views/mod-queue/mod-queue.module.css index 96880684..cf0b6066 100644 --- a/src/views/mod-queue/mod-queue.module.css +++ b/src/views/mod-queue/mod-queue.module.css @@ -105,6 +105,11 @@ justify-content: center; } +.error { + padding: 10px; + text-align: center; +} + /* ModQueueRow styles */ .row { display: flex; diff --git a/src/views/mod-queue/mod-queue.tsx b/src/views/mod-queue/mod-queue.tsx index 5f7105f0..83634157 100644 --- a/src/views/mod-queue/mod-queue.tsx +++ b/src/views/mod-queue/mod-queue.tsx @@ -1,7 +1,7 @@ import React, { useMemo, useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { useParams, Link } from 'react-router-dom'; -import { useFeed, Comment, usePublishCommentModeration, useEditedComment } from '@plebbit/plebbit-react-hooks'; +import { useFeed, Comment, usePublishCommentModeration, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import useAccountsStore from '@plebbit/plebbit-react-hooks/dist/stores/accounts'; import { Virtuoso } from 'react-virtuoso'; import { formatDistanceToNow } from 'date-fns'; @@ -9,6 +9,7 @@ import styles from './mod-queue.module.css'; import useModQueueStore from '../../stores/use-mod-queue-store'; import { useAccountSubplebbitsWithMetadata } from '../../hooks/use-account-subplebbits-with-metadata'; import LoadingEllipsis from '../../components/loading-ellipsis'; +import ErrorDisplay from '../../components/error-display/error-display'; import { useFeedStateString } from '../../hooks/use-state-string'; import { getSubplebbitAddress, getBoardPath } from '../../lib/utils/route-utils'; import { useDefaultSubplebbits, MultisubSubplebbit } from '../../hooks/use-default-subplebbits'; @@ -489,6 +490,10 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV return []; }, [resolvedAddress, selectedBoardFilter, accountSubplebbitAddresses]); + const subplebbitAddress = subplebbitAddresses[0]; + const subplebbit = useSubplebbit({ subplebbitAddress }); + const { error: subplebbitError } = subplebbit || {}; + const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, modQueue: ['pendingApproval'], @@ -513,9 +518,18 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV // Note: useFeedStateString is called inside ModQueueFooter to isolate re-renders from backend state changes const footerComponents = useMemo( () => ({ - Footer: () => , + Footer: () => ( + <> + {subplebbitError?.message && feed.length === 0 && ( +
+ +
+ )} + + + ), }), - [hasMore, subplebbitAddresses], + [hasMore, subplebbitAddresses, subplebbitError, feed.length], ); const alertThresholdControl = ( @@ -603,6 +617,11 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV {feed.map((comment, index) => ( ))} + {subplebbitError?.message && feed.length === 0 && ( +
+ +
+ )} )} diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx index 97678f35..a4edb3e4 100644 --- a/src/views/post/post.tsx +++ b/src/views/post/post.tsx @@ -70,7 +70,7 @@ const PostPage = () => { }, [comment?.subplebbitAddress, subplebbitAddress, navigate]); const subplebbit = useSubplebbit({ subplebbitAddress }); - const { shortAddress, title } = subplebbit || {}; + const { error: subplebbitError, shortAddress, title } = subplebbit || {}; const defaultSubplebbits = useDefaultSubplebbits(); // if the comment is a reply, return the post comment instead, then the reply will be highlighted in the thread @@ -106,17 +106,28 @@ const PostPage = () => { document.title = `${boardTitle}${postTitlePart} - 5chan`; }, [title, shortAddress, subplebbitAddress, post?.title, post?.content, isInAllView, t, params.boardIdentifier, defaultSubplebbits]); - // probably not necessary to show the error to the user if the post loaded successfully - const shouldShowErrorToUser = post?.error && ((post?.replyCount > 0 && post?.replies?.length === 0) || (post?.state === 'failed' && post?.error)); + const shouldShowCommentError = comment?.error?.message && !comment?.cid; + const shouldShowPostError = post?.error && post?.replyCount > 0 && post?.replies?.length === 0; + const shouldShowSubplebbitError = subplebbitError?.message && !post?.cid; return (
- {shouldShowErrorToUser && ( + {shouldShowPostError && (
)} + {shouldShowSubplebbitError && ( +
+ +
+ )} + {shouldShowCommentError && ( +
+ +
+ )}
); };