feat(app): add pending post view

src/views/pending-post/index.ts

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

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;
+  }
+}

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 && (
+    <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
+  );
+
+  return (
+    <div className={styles.container}>
+      <Post post={post} />
+      {loadingString}
+    </div>
+  );
+};
+
+export default PendingPost;