feat(pending post): add pending post component and route

src/app.tsx

@@ -8,6 +8,7 @@ import TopBar from './components/topbar/topbar';
 import Header from './components/header/header';
 import Submit from './views/submit/submit';
 import Settings from './views/settings';
+import PendingPost from './views/pending-post';
 
 function App() {
   const [theme] = useTheme();
@@ -34,6 +35,7 @@ function App() {
           <Route path='p/:subplebbitAddress/c/:commentCid' element={<Post />} />
           <Route path='p/:subplebbitAddress/submit' element={<Submit />} />
           <Route path='/settings' element={<Settings />} />
+          <Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
         </Route>
       </Routes>
     </div>

src/components/header/header.tsx

@@ -41,7 +41,9 @@ const Header = () => {
 
   const commentsButton = (
     <li>
-      <Link to={`/p/${subplebbitAddress}/c/${commentCid}`} className={styles.selected}>{t('header_comments')}</Link>
+      <Link to={`/p/${subplebbitAddress}/c/${commentCid}`} className={styles.selected}>
+        {t('header_comments')}
+      </Link>
     </li>
   );
   let headerTabs;
@@ -63,10 +65,14 @@ const Header = () => {
     </Link>
   );
   let headerTitle;
-  const submitTitle = <span style={{textTransform: 'uppercase'}}>{t('submit')}</span>;
+  const submitTitle = <span style={{ textTransform: 'uppercase' }}>{t('submit')}</span>;
 
   if (isSubplebbitSubmitView) {
-    headerTitle = <>{subplebbitTitle}: {submitTitle}</>;
+    headerTitle = (
+      <>
+        {subplebbitTitle}: {submitTitle}
+      </>
+    );
   } else if (isPostView || isSubplebbitView) {
     headerTitle = subplebbitTitle;
   } else if (isSubmitView) {

src/views/pending-post/index.ts

@@ -0,0 +1 @@
+export {default} from './pending-post'

src/views/pending-post/pending-post.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useAccountComment } from '@plebbit/plebbit-react-hooks';
+import Post from '../../components/post';
+
+const PendingPost = () => {
+  const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
+  const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
+  const post = useAccountComment({ commentIndex });
+  const navigate = useNavigate();
+
+  useEffect(() => window.scrollTo(0, 0), []);
+
+  useEffect(() => {
+    if (post?.cid && post?.subplebbitAddress) {
+      navigate(`/p/${post?.subplebbitAddress}/c/${post?.cid}`, { replace: true });
+    }
+  }, [post]);
+
+  return (
+    <>
+      <Post post={post} isPostView={true} />
+    </>
+  );
+};
+
+export default PendingPost;