mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
feat(post page): add reply count and link count in top row
This commit is contained in:
@@ -32,6 +32,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* Ensure elements are spaced out properly */
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.desktopBoardButtons::after {
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
|
||||
import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
|
||||
import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
|
||||
import { useAccountComment, useComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
|
||||
import { isAllView, isCatalogView, isDescriptionView, isPendingPostView, isPostPageView, isRulesView, isSubscriptionsView } from '../../lib/utils/view-utils';
|
||||
import useCatalogStyleStore from '../../stores/use-catalog-style-store';
|
||||
import useFeedResetStore from '../../stores/use-feed-reset-store';
|
||||
import useSortingStore from '../../stores/use-sorting-store';
|
||||
import useTimeFilter from '../../hooks/use-time-filter';
|
||||
import CatalogFilters from '../../views/catalog/catalog-filters/';
|
||||
import styles from './board-buttons.module.css';
|
||||
import Tooltip from '../tooltip';
|
||||
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
|
||||
import useReplyCount from '../../hooks/use-reply-count';
|
||||
|
||||
interface BoardButtonsProps {
|
||||
address?: string | undefined;
|
||||
@@ -220,6 +225,27 @@ export const MobileBoardButtons = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const PostPageStats = () => {
|
||||
const params = useParams();
|
||||
const location = useLocation();
|
||||
const isInDescriptionView = isDescriptionView(location.pathname, params);
|
||||
const isInRulesView = isRulesView(location.pathname, params);
|
||||
|
||||
const comment = useComment({ commentCid: params?.commentCid });
|
||||
const { closed, pinned } = comment || {};
|
||||
|
||||
const linkCount = useCountLinksInReplies(comment);
|
||||
const replyCount = useReplyCount(comment);
|
||||
|
||||
return (
|
||||
<span>
|
||||
{(pinned || isInDescriptionView || isInRulesView) && 'Sticky / '}
|
||||
{(closed || isInDescriptionView || isInRulesView) && 'Closed / '}
|
||||
<Tooltip children={replyCount.toString()} content='Replies' /> / <Tooltip children={linkCount.toString()} content='Links' />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const DesktopBoardButtons = () => {
|
||||
const params = useParams();
|
||||
const location = useLocation();
|
||||
@@ -243,8 +269,7 @@ export const DesktopBoardButtons = () => {
|
||||
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />]
|
||||
{isInPostView && (
|
||||
<span className={styles.rightSideButtons}>
|
||||
[
|
||||
<SubscribeButton address={subplebbitAddress} />]
|
||||
<PostPageStats />
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user