add loading state to subscriptions view

src/hooks/useFeedStateString.js

@@ -0,0 +1,65 @@
+import { useMemo } from "react"
+
+const useFeedStateString = (subplebbits) => {
+  const getClientUrls = (regex) => {
+    const clientUrls = new Set()
+    for (const clientType in subplebbits.clients) {
+      for (const clientUrl in subplebbits.clients[clientType]) {
+        const client = subplebbits.clients[clientType][clientUrl]
+        if (client.state.match(regex)) {
+          clientUrls.add(clientUrl)
+        }
+      }
+    }
+    return [...clientUrls]
+  }
+
+  return useMemo(() => {
+    if (!subplebbits) {
+      return undefined;
+    }
+    
+    const states = {}
+    const clientUrls = {}
+    for (const subplebbit of subplebbits) {
+      states[subplebbit?.updatingState] = (states[subplebbit?.updatingState] || 0) + 1
+    }
+
+    // e.g. Resolving 2 addresses from infura.io, fetching 2 IPNS, 1 IPFS from cloudflare-ipfs.com, ipfs.io
+    let stateString = ''
+    if (states['resolving-address']) {
+      stateString += `resolving ${states['resolving-address']} addresses`
+      const clientUrls = getClientUrls(/address/)
+      if (clientUrls.length) {
+        stateString += ` from ${clientUrls.join(', ')}`
+      }
+    }
+    if (states['fetching-ipns'] || states['fetching-ipfs']) {
+      if (stateString) {
+        stateString += ', '
+      }
+      stateString += `fetching `
+      if (states['fetching-ipns']) {
+        stateString += `${states['fetching-ipns']} IPNS`
+      }
+      if (states['fetching-ipfs']) {
+        if (states['fetching-ipns']) {
+          stateString += ', '
+        }
+        stateString += `${states['fetching-ipfs']} IPNS`
+      }
+      const clientUrls = getClientUrls(/ipfs|ipns/)
+      if (clientUrls.length) {
+        stateString += ` from ${clientUrls.join(', ')}`
+      }
+    }
+
+    // capitalize first letter
+    stateString = stateString.charAt(0).toUpperCase() + stateString.slice(1)
+
+    // if string is empty, return undefined instead
+    return stateString || undefined
+  }, [subplebbits])
+}
+
+export default useFeedStateString

src/hooks/useStateString.js

@@ -1,10 +1,12 @@
 import { useMemo } from 'react'
+import isValidUrl from '../utils/isValidUrl'
 
 const useStateString = (clients) => {
-  const stateString = useMemo(() => {
+  return useMemo(() => {
     if (!clients) {
       return
     }
+
     const states = {}
     for (const clientType in clients) {
       for (const clientUrl in clients[clientType]) {
@@ -22,7 +24,12 @@ const useStateString = (clients) => {
     let stateString = ''
     for (const state in states) {
       const clientUrls = states[state]
-      const clientHosts = clientUrls.map(clientUrl => new URL(clientUrl).hostname)
+      const clientHosts = clientUrls.filter(isValidUrl).map(clientUrl => new URL(clientUrl).hostname)
+
+      // if there are no valid hosts, skip this state
+      if (clientHosts.length === 0) {
+        continue
+      }
 
       // separate 2 different states using ', '
       if (stateString) {
@@ -35,13 +42,16 @@ const useStateString = (clients) => {
     }
 
     // capitalize first letter
-    stateString = stateString.charAt(0).toUpperCase() + stateString.slice(1)
+    if (stateString) {
+      stateString = stateString.charAt(0).toUpperCase() + stateString.slice(1)
+
+      console.log("first log:", stateString);
+    }
 
     // if string is empty, return undefined instead
-    return stateString || undefined
+    console.log("second log:", stateString);
+    return stateString === '' ? undefined : stateString
   }, [clients])
-
-  return stateString
 }
 
 export default useStateString