fix state strings

src/components/views/Board.jsx

@@ -66,7 +66,7 @@ const Board = () => {
   const { subplebbitAddress } = useParams();
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
 
-  const stateString = useStateString(subplebbit?.clients);
+  const stateString = useStateString(subplebbit);
 
   const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
 

src/components/views/Catalog.jsx

@@ -53,7 +53,7 @@ const Catalog = () => {
   const { subplebbitAddress } = useParams();
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
 
-  const stateString = useStateString(subplebbit?.clients);
+  const stateString = useStateString(subplebbit);
 
   const errorString = useMemo(() => {
     if (subplebbit?.state === 'failed') {

src/components/views/Pending.jsx

@@ -39,7 +39,7 @@ const Pending = () => {
     setSelectedAddress(comment?.subplebbitAddress);
   }, [comment, setSelectedAddress]);
 
-  const stateString = useStateString(comment?.clients)
+  const stateString = useStateString(comment)
 
   const errorString = useMemo(() => {
     if (comment?.state === 'failed') {

src/components/views/Thread.jsx

@@ -66,7 +66,7 @@ const Thread = () => {
   const { subplebbitAddress, threadCid } = useParams();
   const handleClickForm = useClickForm();
 
-  const stateString = useStateString(comment?.clients);
+  const stateString = useStateString(comment);
 
   const commentMediaInfo = getCommentMediaInfo(comment);
   const fallbackImgUrl = "assets/filedeleted-res.gif";

src/hooks/useStateString.js

@@ -1,11 +1,11 @@
 import { useMemo } from 'react'
-import isValidUrl from '../utils/isValidUrl'
 
-const useStateString = (clients) => {
+const useStateString = (commentOrSubplebbit) => {
   return useMemo(() => {
-    if (!clients) {
+    if (!commentOrSubplebbit?.clients) {
       return
     }
+    const clients = commentOrSubplebbit?.clients
 
     const states = {}
     for (const clientType in clients) {
@@ -33,7 +33,7 @@ const useStateString = (clients) => {
     let stateString = ''
     for (const state in states) {
       const clientUrls = states[state]
-      const clientHosts = clientUrls.filter(isValidUrl).map(clientUrl => getClientHost(clientUrl))
+      const clientHosts = clientUrls.map(clientUrl => getClientHost(clientUrl))
 
       // if there are no valid hosts, skip this state
       if (clientHosts.length === 0) {
@@ -50,6 +50,19 @@ const useStateString = (clients) => {
       stateString += `${formattedState} from ${clientHosts.join(', ')}`
     }
 
+    // fallback to comment or subplebbit state when possible
+    if (!stateString) {
+      if (commentOrSubplebbit?.publishingState !== 'stopped') {
+        stateString = commentOrSubplebbit.publishingState
+      }
+      else if (commentOrSubplebbit?.updatingState !== 'stopped') {
+        stateString = commentOrSubplebbit.updatingState
+      }
+      if (stateString) {
+        stateString = stateString.replaceAll('-', ' ').replace('ipfs', 'IPFS').replace('ipns', 'IPNS')
+      }
+    }
+
     // capitalize first letter
     if (stateString) {
       stateString = stateString.charAt(0).toUpperCase() + stateString.slice(1)
@@ -57,7 +70,7 @@ const useStateString = (clients) => {
 
     // if string is empty, return undefined instead
     return stateString === '' ? undefined : stateString
-  }, [clients])
+  }, [commentOrSubplebbit])
 }
 
 export default useStateString