centralize state hooks

src/hooks/use-feed-state-string.ts

@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-import useStateString from './use-state-string';
-import { useSubplebbit, useSubplebbitsStates } from '@plebbit/plebbit-react-hooks';
-
-const clientHosts: { [key: string]: string } = {};
-
-const getClientHost = (clientUrl: string): string => {
-  if (!clientHosts[clientUrl]) {
-    try {
-      clientHosts[clientUrl] = new URL(clientUrl).hostname || clientUrl;
-    } catch (e) {
-      clientHosts[clientUrl] = clientUrl;
-    }
-  }
-  return clientHosts[clientUrl];
-};
-
-const useFeedStateString = (subplebbitAddresses?: string[]): string | undefined => {
-  // single subplebbit feed state string
-  const subplebbitAddress = subplebbitAddresses?.length === 1 ? subplebbitAddresses[0] : undefined;
-  const subplebbit = useSubplebbit({ subplebbitAddress });
-  const singleSubplebbitFeedStateString = useStateString(subplebbit);
-
-  // multiple subplebbit feed state string
-  const { states } = useSubplebbitsStates({ subplebbitAddresses });
-
-  const multipleSubplebbitsFeedStateString = useMemo(() => {
-    if (subplebbitAddress) {
-      return;
-    }
-
-    // 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']) {
-      const { subplebbitAddresses, clientUrls } = states['resolving-address'];
-      if (subplebbitAddresses.length && clientUrls.length) {
-        stateString += `resolving ${subplebbitAddresses.length} ${subplebbitAddresses.length === 1 ? 'address' : 'addresses'} from ${clientUrls
-          .map(getClientHost)
-          .join(', ')}`;
-      }
-    }
-
-    // find all page client and sub addresses
-    const pagesStatesClientHosts = new Set();
-    const pagesStatesSubplebbitAddresses = new Set();
-    for (const state in states) {
-      if (state.match('page')) {
-        states[state].clientUrls.forEach((clientUrl) => pagesStatesClientHosts.add(getClientHost(clientUrl)));
-        states[state].subplebbitAddresses.forEach((subplebbitAddress) => pagesStatesSubplebbitAddresses.add(subplebbitAddress));
-      }
-    }
-
-    if (states['fetching-ipns'] || states['fetching-ipfs'] || pagesStatesSubplebbitAddresses.size) {
-      // separate 2 different states using ', '
-      if (stateString) {
-        stateString += ', ';
-      }
-
-      // find all client urls
-      const clientHosts = new Set([...pagesStatesClientHosts]);
-      states['fetching-ipns']?.clientUrls.forEach((clientUrl) => clientHosts.add(getClientHost(clientUrl)));
-      states['fetching-ipfs']?.clientUrls.forEach((clientUrl) => clientHosts.add(getClientHost(clientUrl)));
-
-      if (clientHosts.size) {
-        stateString += 'downloading ';
-        if (states['fetching-ipns']) {
-          stateString += `${states['fetching-ipns'].subplebbitAddresses.length} boards`;
-        }
-        if (states['fetching-ipfs']) {
-          if (states['fetching-ipns']) {
-            stateString += ', ';
-          }
-          stateString += `${states['fetching-ipfs'].subplebbitAddresses.length} threads`;
-        }
-        if (pagesStatesSubplebbitAddresses.size) {
-          if (states['fetching-ipns'] || states['fetching-ipfs']) {
-            stateString += ', ';
-          }
-          stateString += `${pagesStatesSubplebbitAddresses.size} ${pagesStatesSubplebbitAddresses.size === 1 ? 'page' : 'pages'}`;
-        }
-        stateString += ` from ${[...clientHosts].join(', ')}`;
-      }
-    }
-
-    // capitalize first letter
-    stateString = stateString.charAt(0).toUpperCase() + stateString.slice(1);
-
-    // if string is empty, return undefined instead
-    return stateString === '' ? undefined : stateString;
-  }, [states, subplebbitAddress]);
-
-  if (singleSubplebbitFeedStateString) {
-    return singleSubplebbitFeedStateString;
-  }
-  return multipleSubplebbitsFeedStateString;
-};
-
-export default useFeedStateString;

src/hooks/use-state-string.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useClientsStates } from '@plebbit/plebbit-react-hooks';
+import { useClientsStates, useSubplebbit, useSubplebbitsStates } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 
 interface CommentOrSubplebbit {
@@ -77,4 +77,85 @@ const useStateString = (commentOrSubplebbit: CommentOrSubplebbit): string | unde
   }, [debouncedStates, commentOrSubplebbit]);
 };
 
+export const useFeedStateString = (subplebbitAddresses?: string[]): string | undefined => {
+  // single subplebbit feed state string
+  const subplebbitAddress = subplebbitAddresses?.length === 1 ? subplebbitAddresses[0] : undefined;
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const singleSubplebbitFeedStateString = useStateString(subplebbit);
+
+  // multiple subplebbit feed state string
+  const { states } = useSubplebbitsStates({ subplebbitAddresses });
+
+  const multipleSubplebbitsFeedStateString = useMemo(() => {
+    if (subplebbitAddress) {
+      return;
+    }
+
+    // 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']) {
+      const { subplebbitAddresses, clientUrls } = states['resolving-address'];
+      if (subplebbitAddresses.length && clientUrls.length) {
+        stateString += `resolving ${subplebbitAddresses.length} ${subplebbitAddresses.length === 1 ? 'address' : 'addresses'} from ${clientUrls
+          .map(getClientHost)
+          .join(', ')}`;
+      }
+    }
+
+    // find all page client and sub addresses
+    const pagesStatesClientHosts = new Set();
+    const pagesStatesSubplebbitAddresses = new Set();
+    for (const state in states) {
+      if (state.match('page')) {
+        states[state].clientUrls.forEach((clientUrl) => pagesStatesClientHosts.add(getClientHost(clientUrl)));
+        states[state].subplebbitAddresses.forEach((subplebbitAddress) => pagesStatesSubplebbitAddresses.add(subplebbitAddress));
+      }
+    }
+
+    if (states['fetching-ipns'] || states['fetching-ipfs'] || pagesStatesSubplebbitAddresses.size) {
+      // separate 2 different states using ', '
+      if (stateString) {
+        stateString += ', ';
+      }
+
+      // find all client urls
+      const clientHosts = new Set([...pagesStatesClientHosts]);
+      states['fetching-ipns']?.clientUrls.forEach((clientUrl) => clientHosts.add(getClientHost(clientUrl)));
+      states['fetching-ipfs']?.clientUrls.forEach((clientUrl) => clientHosts.add(getClientHost(clientUrl)));
+
+      if (clientHosts.size) {
+        stateString += 'downloading ';
+        if (states['fetching-ipns']) {
+          stateString += `${states['fetching-ipns'].subplebbitAddresses.length} boards`;
+        }
+        if (states['fetching-ipfs']) {
+          if (states['fetching-ipns']) {
+            stateString += ', ';
+          }
+          stateString += `${states['fetching-ipfs'].subplebbitAddresses.length} threads`;
+        }
+        if (pagesStatesSubplebbitAddresses.size) {
+          if (states['fetching-ipns'] || states['fetching-ipfs']) {
+            stateString += ', ';
+          }
+          stateString += `${pagesStatesSubplebbitAddresses.size} ${pagesStatesSubplebbitAddresses.size === 1 ? 'page' : 'pages'}`;
+        }
+        stateString += ` from ${[...clientHosts].join(', ')}`;
+      }
+    }
+
+    // capitalize first letter
+    stateString = stateString.charAt(0).toUpperCase() + stateString.slice(1);
+
+    // if string is empty, return undefined instead
+    return stateString === '' ? undefined : stateString;
+  }, [states, subplebbitAddress]);
+
+  if (singleSubplebbitFeedStateString) {
+    return singleSubplebbitFeedStateString;
+  }
+  return multipleSubplebbitsFeedStateString;
+};
+
 export default useStateString;

src/views/board/board.tsx

@@ -8,7 +8,7 @@ import { shouldShowSnow } from '../../lib/snow';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
-import useFeedStateString from '../../hooks/use-feed-state-string';
+import { useFeedStateString } from '../../hooks/use-state-string';
 import useReplyModal from '../../hooks/use-reply-modal';
 import useTimeFilter from '../../hooks/use-time-filter';
 import useInterfaceSettingsStore from '../../stores/use-interface-settings-store';

src/views/catalog/catalog.tsx

@@ -7,7 +7,7 @@ import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-util
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useCatalogFeedRows from '../../hooks/use-catalog-feed-rows';
 import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
-import useFeedStateString from '../../hooks/use-feed-state-string';
+import { useFeedStateString } from '../../hooks/use-state-string';
 import useTimeFilter from '../../hooks/use-time-filter';
 import useWindowWidth from '../../hooks/use-window-width';
 import useCatalogStyleStore from '../../stores/use-catalog-style-store';