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 (
- {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 (
+
+ );
+};
+
+export default PendingPost;