feat(pending post): add state string

src/views/pending-post/pending-post.module.css

@@ -1,3 +1,11 @@
 .container {
   padding: 7px 5px 0px 5px;
+}
+
+.stateString {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(100vw - 28px);
+  width: 100vw;
 }

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

@@ -3,12 +3,14 @@ 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';
 
 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), []);
 
@@ -21,6 +23,7 @@ const PendingPost = () => {
   return (
     <div className={styles.container}>
       <Post post={post} />
+      {stateString && <div className={styles.stateString}>{stateString}</div>}
     </div>
   );
 };