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 && ( + + )} )}