diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index b8933b7d..382db702 100644 --- a/src/components/views/Board.jsx +++ b/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}); diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 18f2f4b9..248f9ee8 100644 --- a/src/components/views/Catalog.jsx +++ b/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') { diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx index 4fd1a96a..1bf32654 100644 --- a/src/components/views/Pending.jsx +++ b/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') { diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index c30c1c87..b66f766b 100644 --- a/src/components/views/Thread.jsx +++ b/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"; diff --git a/src/hooks/useStateString.js b/src/hooks/useStateString.js index 173f89ef..31a74278 100644 --- a/src/hooks/useStateString.js +++ b/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 \ No newline at end of file