Merge pull request #260 from plebbit/master

Development

src/components/views/All.jsx

@@ -139,7 +139,7 @@ const All = () => {
 	const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' });
 	const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
 
-	const stateString = useFeedStateString(subplebbits);
+	const stateString = useFeedStateString(addresses);
 
 	useEffect(() => {
 		if (feed) {

src/components/views/AllCatalog.jsx

@@ -731,7 +731,7 @@ const AllCatalog = () => {
 	const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' });
 	const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
 
-	const stateString = useFeedStateString(subplebbits);
+	const stateString = useFeedStateString(addresses);
 
 	const columnWidth = 180;
 	const windowWidth = useWindowWidth();

src/components/views/Subscriptions.jsx

@@ -138,7 +138,7 @@ const Subscriptions = () => {
 	const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
 	const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
 
-	const stateString = useFeedStateString(subplebbits);
+	const stateString = useFeedStateString(account?.subscriptions);
 
 	useEffect(() => {
 		if (feed) {

src/components/views/SubscriptionsCatalog.jsx

@@ -731,7 +731,7 @@ const SubscriptionsCatalog = () => {
 	const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
 	const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
 
-	const stateString = useFeedStateString(subplebbits);
+	const stateString = useFeedStateString(account?.subscriptions);
 
 	const columnWidth = 180;
 	const windowWidth = useWindowWidth();

src/hooks/useFeedStateString.js

@@ -1,86 +1,84 @@
 import { useMemo } from 'react';
+import useStateString from './useStateString';
+import { useSubplebbit, useSubplebbitsStates } from '@plebbit/plebbit-react-hooks';
 
-const useFeedStateString = (subplebbits) => {
+const clientHosts = {};
-	return useMemo(() => {
+const getClientHost = (clientUrl) => {
-		const getClientHost = (clientUrl) => {
+	if (!clientHosts[clientUrl]) {
-			try {
+		try {
-				clientUrl = new URL(clientUrl).hostname || clientUrl;
+			clientHosts[clientUrl] = new URL(clientUrl).hostname || clientUrl;
-			} catch (e) {}
+		} catch (e) {
-			return clientUrl;
+			clientHosts[clientUrl] = clientUrl;
-		};
-		const getClientUrls = (regex) => {
-			const clientUrls = new Set();
-			const addClientUrl = (client, clientUrl) => client?.state?.match?.(regex) && clientUrls.add(getClientHost(clientUrl));
-			for (const subplebbit of subplebbits) {
-				for (const clientUrl in subplebbit?.clients?.ipfsGateways) {
-					addClientUrl(subplebbit.clients.ipfsGateways[clientUrl], clientUrl);
-				}
-				for (const clientUrl in subplebbit?.clients?.ipfsClients) {
-					addClientUrl(subplebbit.clients.ipfsClients[clientUrl], clientUrl);
-				}
-				for (const chainTicker in subplebbit?.clients?.chainProviders) {
-					for (const clientUrl in subplebbit.clients.chainProviders[chainTicker]) {
-						addClientUrl(subplebbit.clients.chainProviders[chainTicker][clientUrl], clientUrl);
-					}
-				}
-				// find subplebbit pages states
-				if (subplebbit?.posts?.clients) {
-					for (const clientType in subplebbit.posts.clients) {
-						for (const sortType in subplebbit.posts.clients[clientType]) {
-							for (const clientUrl in subplebbit.posts.clients[clientType][sortType]) {
-								addClientUrl(subplebbit.posts.clients[clientType][sortType][clientUrl], clientUrl);
-							}
-						}
-					}
-				}
-			}
-			return [...clientUrls];
-		};
-
-		if (!subplebbits) {
-			return;
 		}
+	}
+	return clientHosts[clientUrl];
+};
 
-		const states = {};
+const useFeedStateString = (subplebbitAddresses) => {
-		for (const subplebbit of subplebbits) {
+	// single subplebbit feed state string
-			states[subplebbit?.updatingState] = (states[subplebbit?.updatingState] || 0) + 1;
+	const subplebbitAddress = subplebbitAddresses?.length === 1 ? subplebbitAddresses[0] : undefined;
-			// find subplebbit pages states
+	const subplebbit = useSubplebbit({ subplebbitAddress });
-			for (const clientType in subplebbit?.posts?.clients) {
+	const singleSubplebbitFeedStateString = useStateString(subplebbit);
-				for (const sortType in subplebbit.posts.clients[clientType]) {
+
-					for (const clientUrl in subplebbit.posts.clients[clientType][sortType]) {
+	// multiple subplebbit feed state string
-						const state = subplebbit.posts.clients[clientType][sortType][clientUrl].state;
+	const { states } = useSubplebbitsStates({ subplebbitAddresses });
-						states[state] = (states[state] || 0) + 1;
+
-					}
+	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']) {
-			stateString += `resolving ${states['resolving-address']} addresses`;
+			const { subplebbitAddresses, clientUrls } = states['resolving-address'];
-			const clientUrls = getClientUrls(/address/);
+			if (subplebbitAddresses.length && clientUrls.length) {
-			if (clientUrls.length) {
+				stateString += `resolving ${subplebbitAddresses.length} ${subplebbitAddresses.length === 1 ? 'address' : 'addresses'} from ${clientUrls
-				stateString += ` from ${clientUrls.join(', ')}`;
+					.map(getClientHost)
+					.join(', ')}`;
 			}
 		}
-		if (states['fetching-ipns'] || states['fetching-ipfs']) {
+
+		// 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 += ', ';
 			}
-			stateString += `fetching `;
+
-			if (states['fetching-ipns']) {
+			// find all client urls
-				stateString += `${states['fetching-ipns']} IPNS`;
+			const clientHosts = new Set([...pagesStatesClientHosts]);
-			}
+			states['fetching-ipns']?.clientUrls.forEach((clientUrl) => clientHosts.add(getClientHost(clientUrl)));
-			if (states['fetching-ipfs']) {
+			states['fetching-ipfs']?.clientUrls.forEach((clientUrl) => clientHosts.add(getClientHost(clientUrl)));
+
+			if (clientHosts.size) {
+				stateString += 'fetching ';
 				if (states['fetching-ipns']) {
-					stateString += ', ';
+					stateString += `${states['fetching-ipns'].subplebbitAddresses.length} IPNS`;
 				}
-				stateString += `${states['fetching-ipfs']} IPFS`;
+				if (states['fetching-ipfs']) {
-			}
+					if (states['fetching-ipns']) {
-			const clientUrls = getClientUrls(/ipfs|ipns/);
+						stateString += ', ';
-			if (clientUrls.length) {
+					}
-				stateString += ` from ${clientUrls.join(', ')}`;
+					stateString += `${states['fetching-ipfs'].subplebbitAddresses.length} IPFS`;
+				}
+				if (pagesStatesSubplebbitAddresses.size) {
+					if (states['fetching-ipns'] || states['fetching-ipfs']) {
+						stateString += ', ';
+					}
+					stateString += `${pagesStatesSubplebbitAddresses.size} ${pagesStatesSubplebbitAddresses.size === 1 ? 'page' : 'pages'}`;
+				}
+				stateString += ` from ${[...clientHosts].join(', ')}`;
 			}
 		}
 
@@ -88,8 +86,13 @@ const useFeedStateString = (subplebbits) => {
 		stateString = stateString.charAt(0).toUpperCase() + stateString.slice(1);
 
 		// if string is empty, return undefined instead
-		return stateString || undefined;
+		return stateString === '' ? undefined : stateString;
-	}, [subplebbits]);
+	}, [states, subplebbitAddress]);
+
+	if (singleSubplebbitFeedStateString) {
+		return singleSubplebbitFeedStateString;
+	}
+	return multipleSubplebbitsFeedStateString;
 };
 
 export default useFeedStateString;

src/hooks/useStateString.js

@@ -1,68 +1,21 @@
 import { useMemo } from 'react';
+import { useClientsStates } from '@plebbit/plebbit-react-hooks';
+
+const clientHosts = {};
+const getClientHost = (clientUrl) => {
+	if (!clientHosts[clientUrl]) {
+		try {
+			clientHosts[clientUrl] = new URL(clientUrl).hostname || clientUrl;
+		} catch (e) {
+			clientHosts[clientUrl] = clientUrl;
+		}
+	}
+	return clientHosts[clientUrl];
+};
 
 const useStateString = (commentOrSubplebbit) => {
+	const { states } = useClientsStates({ comment: commentOrSubplebbit });
 	return useMemo(() => {
-		// dont show state string if the data is already fetched
-		if (commentOrSubplebbit?.updatedAt || commentOrSubplebbit?.state === 'succeeded') {
-			return;
-		}
-
-		if (!commentOrSubplebbit?.clients) {
-			return;
-		}
-		const clients = commentOrSubplebbit?.clients;
-
-		const states = {};
-		const addState = (state, clientUrl) => {
-			if (!state || state === 'stopped') {
-				return;
-			}
-			if (!states[state]) {
-				states[state] = [];
-			}
-			states[state].push(clientUrl);
-		};
-		for (const clientUrl in clients?.ipfsGateways) {
-			addState(clients.ipfsGateways[clientUrl]?.state, clientUrl);
-		}
-		for (const clientUrl in clients?.ipfsClients) {
-			addState(clients.ipfsClients[clientUrl]?.state, clientUrl);
-		}
-		for (const clientUrl in clients?.pubsubClients) {
-			addState(clients.pubsubClients[clientUrl]?.state, clientUrl);
-		}
-		for (const chainTicker in clients?.chainProviders) {
-			for (const clientUrl in clients.chainProviders[chainTicker]) {
-				addState(clients.chainProviders[chainTicker][clientUrl]?.state, clientUrl);
-			}
-		}
-
-		// find subplebbit pages states
-		if (commentOrSubplebbit?.posts?.clients) {
-			for (const clientType in commentOrSubplebbit.posts.clients) {
-				for (const sortType in commentOrSubplebbit.posts.clients[clientType]) {
-					for (const clientUrl in commentOrSubplebbit.posts.clients[clientType][sortType]) {
-						let state = commentOrSubplebbit.posts.clients[clientType][sortType][clientUrl].state;
-						if (state === 'stopped') {
-							continue;
-						}
-						state += `-page-${sortType}`;
-						if (!states[state]) {
-							states[state] = [];
-						}
-						states[state].push(clientUrl);
-					}
-				}
-			}
-		}
-
-		const getClientHost = (clientUrl) => {
-			try {
-				clientUrl = new URL(clientUrl).hostname || clientUrl;
-			} catch (e) {}
-			return clientUrl;
-		};
-
 		let stateString = '';
 		for (const state in states) {
 			const clientUrls = states[state];
@@ -73,7 +26,7 @@ const useStateString = (commentOrSubplebbit) => {
 				continue;
 			}
 
-			// separate 2 different states using ', '
+			// separate 2 different states using ' '
 			if (stateString) {
 				stateString += ', ';
 			}
@@ -102,7 +55,7 @@ const useStateString = (commentOrSubplebbit) => {
 
 		// if string is empty, return undefined instead
 		return stateString === '' ? undefined : stateString;
-	}, [commentOrSubplebbit]);
+	}, [states, commentOrSubplebbit]);
 };
 
 export default useStateString;