diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css index 8f4b9363..87f1fe85 100644 --- a/src/components/board-buttons/board-buttons.module.css +++ b/src/components/board-buttons/board-buttons.module.css @@ -5,6 +5,11 @@ .mobileBoardButtons button { margin: 0 2px; + text-transform: capitalize; +} + +.mobileBoardButtons a, .desktopBoardButtons a { + all: unset; } @media (max-width: 640px) { diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 8dc49364..12f54a9d 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -1,6 +1,8 @@ +import { useTranslation } from 'react-i18next'; +import { Link, useLocation, useParams } from 'react-router-dom'; import { useSubscribe } from '@plebbit/plebbit-react-hooks'; import styles from './board-buttons.module.css'; -import { useTranslation } from 'react-i18next'; +import { isPostPageView } from '../../lib/utils/view-utils'; interface BoardButtonsProps { address: string; @@ -11,9 +13,13 @@ const OptionsButton = () => { return ; }; -const CatalogButton = () => { +const CatalogButton = ({ address }: BoardButtonsProps) => { const { t } = useTranslation(); - return ; + return ( + + ); }; const SubscribeButton = ({ address }: BoardButtonsProps) => { @@ -27,28 +33,69 @@ const SubscribeButton = ({ address }: BoardButtonsProps) => { ); }; +const ReturnButton = ({ address }: BoardButtonsProps) => { + const { t } = useTranslation(); + return ( + + ); +}; + +const BottomButton = () => { + const { t } = useTranslation(); + return ( + + ); +}; + export const MobileBoardButtons = ({ address }: BoardButtonsProps) => { + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return (
- - - + {isInPostPage ? ( +
+ + + +
+ + +
+
+ ) : ( + <> + + + + + )}
); }; export const DesktopBoardButtons = ({ address }: BoardButtonsProps) => { + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return (

- [ - - ] [ - ] - - [ - ] - + {isInPostPage ? ( + <> + [] [] [] [] + + [] + + + ) : ( + <> + [] [] + + [] + + + )}
); }; diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index b3f80b6e..c2494a9e 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -1,6 +1,8 @@ import { useState } from 'react'; -import styles from './post-form.module.css'; import { useTranslation } from 'react-i18next'; +import styles from './post-form.module.css'; +import { isPostPageView } from '../../lib/utils/view-utils'; +import { useLocation, useParams } from 'react-router-dom'; export interface PostFormProps { address: string | undefined; @@ -9,19 +11,20 @@ export interface PostFormProps { const PostForm = ({ address }: PostFormProps) => { const { t } = useTranslation(); const [showForm, setShowForm] = useState(false); + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return ( <>
[ ]
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 5c386675..4b3bad81 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -1,10 +1,11 @@ import { useState } from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Comment } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils'; import { getFormattedDate } from '../../lib/utils/time-utils'; +import { isPostPageView } from '../../lib/utils/view-utils'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import useReplies from '../../hooks/use-replies'; import styles from './post.module.css'; @@ -280,6 +281,7 @@ const ReplyMobile = ({ reply }: Comment) => { }; const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => { + const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; const linkCount = useCountLinksInReplies(post); @@ -292,6 +294,10 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b const replies = useReplies(post); + const location = useLocation(); + const params = useParams(); + const isInPostPage = isPostPageView(location.pathname, params); + return (
@@ -342,15 +348,17 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b )}
-
- - {replyCount} Replies - {linkCount > 0 && ` / ${linkCount} Links`} - - - View Thread - -
+ {!isInPostPage && ( +
+ + {replyCount} Replies + {linkCount > 0 && ` / ${linkCount} Links`} + + + {t('view_thread')} + +
+ )}
{!pinned && replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( diff --git a/src/index.css b/src/index.css index 78fe011c..cf18ea6e 100644 --- a/src/index.css +++ b/src/index.css @@ -24,7 +24,6 @@ hr { @media (max-width: 640px) { .button { - text-transform: capitalize; font-size: var(--button-font-size-mobile); font-weight: var(--button-font-weight-mobile); font-family: var(--button-font-family-mobile); diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index 646a5d3e..ce1ea21e 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -1,3 +1,14 @@ +export type ParamsType = { + commentCid?: string; + subplebbitAddress?: string; +}; + export const isHomeView = (pathname: string): boolean => { return pathname === '/'; }; + +export const isPostPageView = (pathname: string, params: ParamsType): boolean => { + // some subs might use emojis in their address, so we need to decode the pathname + const decodedPathname = decodeURIComponent(pathname); + return params.subplebbitAddress && params.commentCid ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false; +};