src/pages/mod/internal/comment/index.tsx

@@ -36,13 +36,23 @@ type FilterOptions = {
   author: AuthorFilterEnum
 }
 
+enum CommentEventStatus {
+  Publishing = 'Publishing comment...',
+  Published = 'Published!',
+  Failed = 'Failed to publish comment.'
+}
+
+interface CommentEvent extends Event {
+  status?: CommentEventStatus
+}
+
 type Props = {
   modDetails: ModDetails
   setCommentCount: Dispatch<SetStateAction<number>>
 }
 
 export const Comments = ({ modDetails, setCommentCount }: Props) => {
-  const [commentEvents, setCommentEvents] = useState<Event[]>([])
+  const [commentEvents, setCommentEvents] = useState<CommentEvent[]>([])
   const [filterOptions, setFilterOptions] = useState<FilterOptions>({
     sort: SortByEnum.Latest,
     author: AuthorFilterEnum.All_Comments
@@ -116,7 +126,13 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => {
 
     if (!signedEvent) return false
 
-    setCommentEvents((prev) => [signedEvent, ...prev])
+    setCommentEvents((prev) => [
+      {
+        ...signedEvent,
+        status: CommentEventStatus.Publishing
+      },
+      ...prev
+    ])
 
     const publish = async () => {
       const metadataController = await MetadataController.getInstance()
@@ -133,7 +149,52 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => {
         ...new Set(...modAuthorReadRelays, ...commentatorWriteRelays)
       ]
 
-      RelayController.getInstance().publishOnRelays(signedEvent, combinedRelays)
+      const publishedOnRelays =
+        await RelayController.getInstance().publishOnRelays(
+          signedEvent,
+          combinedRelays
+        )
+
+      if (publishedOnRelays.length === 0) {
+        setCommentEvents((prev) =>
+          prev.map((event) => {
+            if (event.id === signedEvent.id) {
+              return {
+                ...event,
+                status: CommentEventStatus.Failed
+              }
+            }
+
+            return event
+          })
+        )
+      } else {
+        setCommentEvents((prev) =>
+          prev.map((event) => {
+            if (event.id === signedEvent.id) {
+              return {
+                ...event,
+                status: CommentEventStatus.Published
+              }
+            }
+
+            return event
+          })
+        )
+      }
+
+      // when an event is successfully published remove the status from it after 15 seconds
+      setTimeout(() => {
+        setCommentEvents((prev) =>
+          prev.map((event) => {
+            if (event.id === signedEvent.id) {
+              delete event.status
+            }
+
+            return event
+          })
+        )
+      }, 15000)
     }
 
     publish()
@@ -291,7 +352,7 @@ const Filter = React.memo(
   }
 )
 
-const Comment = (props: Event) => {
+const Comment = (props: CommentEvent) => {
   const navigate = useNavigate()
 
   const [profile, setProfile] = useState<UserProfile>()
@@ -347,7 +408,12 @@ const Comment = (props: Event) => {
         </div>
       </div>
       <div className='IBMSMSMBSSCL_CommentBottom'>
-        <p className='IBMSMSMBSSCL_CBTextStatus'><span className='IBMSMSMBSSCL_CBTextStatusSpan'>Status: </span> Publishing comment...</p>
+        {props.status && (
+          <p className='IBMSMSMBSSCL_CBTextStatus'>
+            <span className='IBMSMSMBSSCL_CBTextStatusSpan'>Status:</span>
+            {props.status}
+          </p>
+        )}
         <p className='IBMSMSMBSSCL_CBText'>{props.content}</p>
       </div>
       <div className='IBMSMSMBSSCL_CommentActions'>

src/styles/comments.css

@@ -72,6 +72,7 @@
 
 .IBMSMSMBSSCL_CBTextStatusSpan {
   font-weight: 600;
+  margin-right: 5px;
 }
 
 .IBMSMSMBSSCL_CommentActions {
@@ -315,7 +316,8 @@
   }
 }
 
-.IBMSMSMBSSCC_Top_Box:focus, hover {
+.IBMSMSMBSSCC_Top_Box:focus,
+hover {
   transition: border, background, box-shadow ease 0.4s;
   background: rgba(0, 0, 0, 0.1);
   border: solid 1px rgba(255, 255, 255, 0.1);
@@ -495,4 +497,3 @@
   padding: 5px 10px;
   height: 100%;
 }
-