diff --git a/src/app.tsx b/src/app.tsx
index f0050708..60456ca3 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -55,6 +55,8 @@ const App = () => {
} />
} />
+ } />
+ } />
} />
diff --git a/src/components/board-stats/board-stats.tsx b/src/components/board-stats/board-stats.tsx
index 7b8186d7..87b713c0 100644
--- a/src/components/board-stats/board-stats.tsx
+++ b/src/components/board-stats/board-stats.tsx
@@ -1,8 +1,9 @@
import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
import { useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
import styles from './board-stats.module.css';
import { Trans, useTranslation } from 'react-i18next';
+import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
const BoardStats = () => {
const { t } = useTranslation();
@@ -11,9 +12,14 @@ const BoardStats = () => {
const subplebbit = useSubplebbit({ subplebbitAddress });
const { address, createdAt } = subplebbit || {};
+ const location = useLocation();
+ const params = useParams();
+ const isInDescriptionView = isDescriptionView(location.pathname, params);
+ const isInRulesView = isRulesView(location.pathname, params);
+
const comment = useComment({ commentCid });
const { deleted, locked, removed } = comment || {};
- const hideStats = deleted || locked || removed;
+ const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView;
const stats = useSubplebbitStats({ subplebbitAddress: address });
const [showStats, setShowStats] = useState(true);
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index 2cf4c739..195ecb95 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -2,19 +2,25 @@ import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation, useParams } from 'react-router-dom';
import { useComment } from '@plebbit/plebbit-react-hooks';
-import { isPostPageView } from '../../lib/utils/view-utils';
+import { isDescriptionView, isPostPageView, isRulesView } from '../../lib/utils/view-utils';
import styles from './post-form.module.css';
const PostForm = () => {
const { t } = useTranslation();
- const { subplebbitAddress, commentCid } = useParams<{ subplebbitAddress: string; commentCid: string }>();
+
+ const location = useLocation();
+ const params = useParams();
+ const isInPostPage = isPostPageView(location.pathname, params);
+ const isInDescriptionView = isDescriptionView(location.pathname, params);
+ const isInRulesView = isRulesView(location.pathname, params);
+
+ const { subplebbitAddress, commentCid } = params || {};
const comment = useComment({ commentCid });
const { deleted, locked, removed } = comment || {};
- const isThreadClosed = deleted || locked || removed;
+ const isThreadClosed = deleted || locked || removed || isInDescriptionView || isInRulesView;
const [showForm, setShowForm] = useState(false);
- const isInPostPage = isPostPageView(useLocation().pathname, useParams());
return (
<>
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index ce1ea21e..6fe73693 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -7,8 +7,20 @@ export const isHomeView = (pathname: string): boolean => {
return pathname === '/';
};
+export const isDescriptionView = (pathname: string, params: ParamsType): boolean => {
+ const decodedPathname = decodeURIComponent(pathname);
+ return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/description`) : false;
+};
+
+export const isRulesView = (pathname: string, params: ParamsType): boolean => {
+ const decodedPathname = decodeURIComponent(pathname);
+ return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/rules`) : false;
+};
+
export const isPostPageView = (pathname: string, params: ParamsType): boolean => {
- // some subs might use emojis in their address, so we need to decode the pathname
+ if (isDescriptionView(pathname, params) || isRulesView(pathname, params)) {
+ return true;
+ }
const decodedPathname = decodeURIComponent(pathname);
return params.subplebbitAddress && params.commentCid ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false;
};
diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx
index d31cbddc..da88c147 100644
--- a/src/views/post-page/post-page.tsx
+++ b/src/views/post-page/post-page.tsx
@@ -1,12 +1,21 @@
import { useEffect } from 'react';
-import { useComment } from '@plebbit/plebbit-react-hooks';
-import { useParams } from 'react-router-dom';
+import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useLocation, useParams } from 'react-router-dom';
import Post from '../../components/post/post';
import styles from './post-page.module.css';
+import { DescriptionPost, RulesPost } from '../subplebbit/subplebbit';
+import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
const PostPage = () => {
const params = useParams();
- const { commentCid } = params;
+ const { commentCid, subplebbitAddress } = params;
+
+ const subplebbit = useSubplebbit({ subplebbitAddress });
+ const { createdAt, description, rules, suggested, title } = subplebbit;
+
+ const location = useLocation();
+ const isInDescriptionView = isDescriptionView(location.pathname, params);
+ const isInRulesView = isRulesView(location.pathname, params);
const post = useComment({ commentCid });
@@ -16,7 +25,13 @@ const PostPage = () => {
return (
-
+ {isInDescriptionView ? (
+
+ ) : isInRulesView ? (
+
+ ) : (
+
+ )}
);
};
diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
index 3abba748..372a65e4 100644
--- a/src/views/subplebbit/subplebbit.tsx
+++ b/src/views/subplebbit/subplebbit.tsx
@@ -10,6 +10,52 @@ import Post from '../../components/post';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
+interface DescriptionPostProps {
+ subplebbitAddress: string | undefined;
+ createdAt: number;
+ description: string;
+ avatarUrl?: string;
+ title: string;
+}
+
+export const DescriptionPost = ({ subplebbitAddress, createdAt, description, avatarUrl, title }: DescriptionPostProps) => {
+ const post = {
+ isDescription: true,
+ subplebbitAddress,
+ timestamp: createdAt,
+ author: { displayName: '## Board Mods' },
+ content: description,
+ link: avatarUrl,
+ title: 'Welcome to ' + title,
+ pinned: true,
+ locked: true,
+ };
+
+ return ;
+};
+
+interface RulesPostProps {
+ subplebbitAddress: string | undefined;
+ createdAt: number;
+ rules: string[];
+}
+
+export const RulesPost = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
+ const content = rules.map((rule, index) => `${index + 1}. ${rule}`).join('\n');
+ const post = {
+ isRules: true,
+ subplebbitAddress,
+ timestamp: createdAt,
+ author: { displayName: '## Board Mods' },
+ content,
+ title: 'Rules',
+ pinned: true,
+ locked: true,
+ };
+
+ return ;
+};
+
const Subplebbit = () => {
const { t } = useTranslation();
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
@@ -20,35 +66,6 @@ const Subplebbit = () => {
const subplebbit = useSubplebbit({ subplebbitAddress });
const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {};
- const descriptionPost = useMemo(
- () => ({
- isDescription: true,
- subplebbitAddress,
- timestamp: createdAt,
- author: { displayName: '## Board Mods' },
- content: description,
- link: suggested?.avatarUrl,
- title: 'Welcome to ' + (title || `p/${shortAddress}`) + '!',
- pinned: true,
- locked: true,
- }),
- [subplebbitAddress, createdAt, description, suggested?.avatarUrl, title, shortAddress],
- );
-
- const rulesPost = useMemo(
- () => ({
- isRules: true,
- subplebbitAddress,
- timestamp: createdAt,
- author: { displayName: '## Board Mods' },
- content: rules && rules.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n'),
- title: 'Rules',
- pinned: true,
- locked: true,
- }),
- [subplebbitAddress, createdAt, rules],
- );
-
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
const loadingString = {state === 'failed' ? state : }
;
@@ -87,8 +104,10 @@ const Subplebbit = () => {
{createdAt && (
<>
- {rules && rules.length > 0 &&
}
- {description && description.length > 0 &&
}
+ {rules && rules.length > 0 &&
}
+ {description && description.length > 0 && (
+
+ )}
>
)}