From 5ff9d30821b280c96e8987838c827bc0ef1dccca Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 5 Nov 2023 16:15:14 +0100
Subject: [PATCH] feat(pending post): add pending post component and route

---
 src/app.tsx                                   |  2 ++
 src/components/header/header.tsx              | 12 ++++++---
 src/views/pending-post/index.ts               |  1 +
 .../pending-post/pending-post.module.css      |  0
 src/views/pending-post/pending-post.tsx       | 27 +++++++++++++++++++
 5 files changed, 39 insertions(+), 3 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 93b60142..c7cd3c66 100644
--- a/src/app.tsx
+++ b/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>
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index e8506cf0..8a8b6443 100644
--- a/src/components/header/header.tsx
+++ b/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) {
diff --git a/src/views/pending-post/index.ts b/src/views/pending-post/index.ts
new file mode 100644
index 00000000..62ebd96d
--- /dev/null
+++ b/src/views/pending-post/index.ts
@@ -0,0 +1 @@
+export {default} from './pending-post'
\ No newline at end of file
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..e69de29b
diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx
new file mode 100644
index 00000000..b2961246
--- /dev/null
+++ b/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;