From 07145fa3e1330068a769c9e90e5bb01dfd85414a Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 7 Nov 2023 17:17:19 +0100
Subject: [PATCH] feat(pending post): add state string

---
 src/views/pending-post/pending-post.module.css | 8 ++++++++
 src/views/pending-post/pending-post.tsx        | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/src/views/pending-post/pending-post.module.css b/src/views/pending-post/pending-post.module.css
index f40889d9..5d04d535 100644
--- a/src/views/pending-post/pending-post.module.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx
index 64a59eff..5dbca340 100644
--- a/src/views/pending-post/pending-post.tsx
+++ b/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>
   );
 };