From 394c7d8a810fe8c2b95db4c656cd3f574d00b691 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 25 Apr 2024 22:02:55 +0200 Subject: [PATCH] feat(app): add pending post view --- src/app.tsx | 43 +++++++++++-------- src/components/board-banner/board-banner.tsx | 7 ++- .../board-buttons/board-buttons.tsx | 43 +++++++++++-------- src/components/board-nav/board-nav.tsx | 7 ++- .../subplebbit-stats/subplebbit-stats.tsx | 10 +++-- src/lib/utils/view-utils.ts | 5 +++ src/views/pending-post/index.ts | 1 + .../pending-post/pending-post.module.css | 16 +++++++ src/views/pending-post/pending-post.tsx | 36 ++++++++++++++++ 9 files changed, 125 insertions(+), 43 deletions(-) create mode 100644 src/views/pending-post/index.ts create mode 100644 src/views/pending-post/pending-post.module.css create mode 100644 src/views/pending-post/pending-post.tsx diff --git a/src/app.tsx b/src/app.tsx index 21ba4e42..7112215a 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -3,15 +3,16 @@ import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom' import { isHomeView } from './lib/utils/view-utils'; import useTheme from './hooks/use-theme'; import styles from './app.module.css'; +import Board from './views/board'; import Catalog from './views/catalog'; import Home from './views/home'; +import PendingPost from './views/pending-post'; import PostPage from './views/post-page'; import Settings from './views/settings'; -import Board from './views/board'; -import BoardNav from './components/board-nav'; import BoardBanner from './components/board-banner'; -import { DesktopBoardButtons } from './components/board-buttons'; -import { MobileBoardButtons } from './components/board-buttons'; +import { DesktopBoardButtons, MobileBoardButtons } from './components/board-buttons'; +import BoardNav from './components/board-nav'; +import ChallengeModal from './components/challenge-modal'; import SubplebbitStats from './components/subplebbit-stats'; import PostForm from './components/post-form'; @@ -40,25 +41,31 @@ const App = () => { document.body.classList.add(theme); }, [theme]); - // const globalLayout = ( - // <> - // - // - // - // ); + const globalLayout = ( + <> + + + + ); return (
- } /> - }> - } /> - } /> - } /> - } /> - } /> + + } /> + }> + } /> + + } /> + + } /> + } /> + } /> + + } /> + + } /> - } />
); diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx index 803777b0..51bfe8c1 100644 --- a/src/components/board-banner/board-banner.tsx +++ b/src/components/board-banner/board-banner.tsx @@ -1,5 +1,5 @@ import { useParams } from 'react-router-dom'; -import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useState } from 'react'; import styles from './board-banner.module.css'; @@ -15,7 +15,10 @@ const ImageBanner = () => { }; const BoardBanner = () => { - const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); + const params = useParams(); + const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); + const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; + const subplebbit = useSubplebbit({ subplebbitAddress }); const { address, title } = subplebbit || {}; const displayAddress = address && address.length > 10 && !address.includes('.') ? address.slice(0, 13).concat('...') : address; diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 31b4a20f..4ff050ce 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -1,8 +1,8 @@ import { useTranslation } from 'react-i18next'; import { Link, useLocation, useParams } from 'react-router-dom'; -import { useSubscribe } from '@plebbit/plebbit-react-hooks'; +import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks'; import styles from './board-buttons.module.css'; -import { isCatalogView, isPostPageView } from '../../lib/utils/view-utils'; +import { isCatalogView, isPendingPostView, isPostPageView } from '../../lib/utils/view-utils'; interface BoardButtonsProps { address: string | undefined; @@ -53,25 +53,30 @@ const BottomButton = () => { }; export const MobileBoardButtons = () => { - const { subplebbitAddress: address } = useParams<{ subplebbitAddress: string }>(); - const isInPostPage = isPostPageView(useLocation().pathname, useParams()); + const params = useParams(); + const location = useLocation(); + const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); + const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; + const isInPostPage = isPostPageView(location.pathname, params); + const isInPendingPostPage = isPendingPostView(location.pathname, params); + return (
- {isInPostPage ? ( + {isInPostPage || isInPendingPostPage ? (
- - + +
- +
) : ( <> - - + + )}
@@ -79,28 +84,30 @@ export const MobileBoardButtons = () => { }; export const DesktopBoardButtons = () => { - const { subplebbitAddress: address } = useParams<{ subplebbitAddress: string }>(); - - const location = useLocation(); const params = useParams(); + const location = useLocation(); + const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); + const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; const isInPostPage = isPostPageView(location.pathname, params); const isInCatalogView = isCatalogView(location.pathname, params); + const isInPendingPostPage = isPendingPostView(location.pathname, params); return (
- {isInPostPage ? ( + {isInPostPage || isInPendingPostPage ? ( <> - [] [] [] [] + [] [] [] [ + ] - [] + [] ) : ( <> - [] [] + [] [] - [] + [] )} diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index eedd4605..a33d18a7 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -1,3 +1,4 @@ +import { useAccountComment } from '@plebbit/plebbit-react-hooks'; import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { isCatalogView } from '../../lib/utils/view-utils'; @@ -76,7 +77,11 @@ const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProp const BoardNav = () => { const subplebbitAddresses = useDefaultSubplebbitAddresses(); - const { subplebbitAddress } = useParams(); + + const params = useParams(); + const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); + const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; + return ( <> diff --git a/src/components/subplebbit-stats/subplebbit-stats.tsx b/src/components/subplebbit-stats/subplebbit-stats.tsx index 58883e45..42de8e08 100644 --- a/src/components/subplebbit-stats/subplebbit-stats.tsx +++ b/src/components/subplebbit-stats/subplebbit-stats.tsx @@ -1,23 +1,25 @@ import { useState } from 'react'; import { useLocation, useParams } from 'react-router-dom'; -import { useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; +import { useAccountComment, useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; import styles from './subplebbit-stats.module.css'; import { Trans, useTranslation } from 'react-i18next'; import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils'; const SubplebbitStats = () => { const { t } = useTranslation(); - const { commentCid, subplebbitAddress } = useParams<{ subplebbitAddress: string; commentCid: string }>(); + const params = useParams(); + + const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); + const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; 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 comment = useComment({ commentCid: params?.commentCid }); const { deleted, locked, removed } = comment || {}; const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView; diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index 4d9e9725..38909d21 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -1,4 +1,5 @@ export type ParamsType = { + accountCommentIndex?: string; commentCid?: string; subplebbitAddress?: string; }; @@ -29,3 +30,7 @@ export const isCatalogView = (pathname: string, params: ParamsType): boolean => const decodedPathname = decodeURIComponent(pathname); return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/catalog`) : false; }; + +export const isPendingPostView = (pathname: string, params: ParamsType): boolean => { + return pathname === `/profile/${params.accountCommentIndex}`; +}; diff --git a/src/views/pending-post/index.ts b/src/views/pending-post/index.ts new file mode 100644 index 00000000..d12150f5 --- /dev/null +++ b/src/views/pending-post/index.ts @@ -0,0 +1 @@ +export { default } from './pending-post'; diff --git a/src/views/pending-post/pending-post.module.css b/src/views/pending-post/pending-post.module.css new file mode 100644 index 00000000..76b18b4d --- /dev/null +++ b/src/views/pending-post/pending-post.module.css @@ -0,0 +1,16 @@ +.stateString { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: calc(100vw - 28px); + width: 100vw; + margin-top: 10px; + margin-left: 40px; +} + +@media (max-width: 640px) { + .stateString { + margin-top: 0px; + margin-left: 10px; + } +} \ No newline at end of file diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx new file mode 100644 index 00000000..c8724c39 --- /dev/null +++ b/src/views/pending-post/pending-post.tsx @@ -0,0 +1,36 @@ +import { useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { useAccountComment } from '@plebbit/plebbit-react-hooks'; +import styles from './pending-post.module.css'; +import Post from '../../components/post'; +import useStateString from '../../hooks/use-state-string'; +import LoadingEllipsis from '../../components/loading-ellipsis'; + +const PendingPost = () => { + const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>(); + const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined; + const post = useAccountComment({ commentIndex }); + const navigate = useNavigate(); + const stateString = useStateString(post); + + useEffect(() => window.scrollTo(0, 0), []); + + useEffect(() => { + if (post?.cid && post?.subplebbitAddress) { + navigate(`/p/${post?.subplebbitAddress}/c/${post?.cid}`, { replace: true }); + } + }, [post, navigate]); + + const loadingString = stateString && ( +
{stateString !== 'Failed' ? : stateString}
+ ); + + return ( +
+ + {loadingString} +
+ ); +}; + +export default PendingPost;