display state strings from backend, but with user friendly wording

This commit is contained in:
Tom (plebeius.eth)
2025-02-20 13:29:24 +01:00
parent 7172be4960
commit 684ca25a65
42 changed files with 139 additions and 85 deletions
+4 -4
View File
@@ -35,7 +35,7 @@ const useFeedStateString = (subplebbitAddresses?: string[]): string | undefined
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
stateString += `loading ${subplebbitAddresses.length} ${subplebbitAddresses.length === 1 ? 'address' : 'addresses'} from ${clientUrls
.map(getClientHost)
.join(', ')}`;
}
@@ -63,15 +63,15 @@ const useFeedStateString = (subplebbitAddresses?: string[]): string | undefined
states['fetching-ipfs']?.clientUrls.forEach((clientUrl) => clientHosts.add(getClientHost(clientUrl)));
if (clientHosts.size) {
stateString += 'fetching ';
stateString += 'loading ';
if (states['fetching-ipns']) {
stateString += `${states['fetching-ipns'].subplebbitAddresses.length} IPNS`;
stateString += `${states['fetching-ipns'].subplebbitAddresses.length} boards`;
}
if (states['fetching-ipfs']) {
if (states['fetching-ipns']) {
stateString += ', ';
}
stateString += `${states['fetching-ipfs'].subplebbitAddresses.length} IPFS`;
stateString += `${states['fetching-ipfs'].subplebbitAddresses.length} posts`;
}
if (pagesStatesSubplebbitAddresses.size) {
if (states['fetching-ipns'] || states['fetching-ipfs']) {
+1 -1
View File
@@ -34,7 +34,7 @@ const useIsSubplebbitOffline = (subplebbit: Subplebbit) => {
const offlineIconClass = isLoading ? 'yellowOfflineIcon' : isOffline ? 'redOfflineIcon' : '';
const offlineTitle = isLoading
? t('loading_subplebbit')
? t('loading_board')
: updatedAt
? isOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })
: t('subplebbit_offline_info');
+21 -7
View File
@@ -1,5 +1,6 @@
import { useMemo } from 'react';
import { useClientsStates } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash';
interface CommentOrSubplebbit {
state?: string;
@@ -25,13 +26,19 @@ const getClientHost = (clientUrl: string): string => {
};
const useStateString = (commentOrSubplebbit: CommentOrSubplebbit): string | undefined => {
const { states } = useClientsStates({ comment: commentOrSubplebbit }) as { states: States };
const { states: rawStates } = useClientsStates({ comment: commentOrSubplebbit }) as { states: States };
const debouncedStates = useMemo(() => {
const debouncedValue = debounce((value: States) => value, 300);
return debouncedValue(rawStates);
}, [rawStates]);
return useMemo(() => {
let stateString: string | undefined = '';
for (const state in states) {
const clientUrls = states[state];
const clientHosts = clientUrls.map((clientUrl) => getClientHost(clientUrl));
for (const state in debouncedStates) {
const clientUrls = debouncedStates[state];
const clientHosts = clientUrls.map((clientUrl: string) => getClientHost(clientUrl));
if (clientHosts.length === 0) {
continue;
@@ -49,10 +56,17 @@ const useStateString = (commentOrSubplebbit: CommentOrSubplebbit): string | unde
if (commentOrSubplebbit?.publishingState && commentOrSubplebbit?.publishingState !== 'stopped' && commentOrSubplebbit?.publishingState !== 'succeeded') {
stateString = commentOrSubplebbit.publishingState;
} else if (commentOrSubplebbit?.updatingState !== 'stopped' && commentOrSubplebbit?.updatingState !== 'succeeded') {
stateString = commentOrSubplebbit?.updatingState;
stateString = commentOrSubplebbit.updatingState;
}
if (stateString) {
stateString = stateString.replaceAll('-', ' ').replace('ipfs', 'IPFS').replace('ipns', 'IPNS');
stateString = stateString
.replaceAll('-', ' ')
.replace('ipfs', 'post')
.replace('ipns', 'subplebbit')
.replace('fetching', 'loading')
.replace('resolving', 'loading')
.replace('subplebbit subplebbit', 'board')
.replace('loading subplebbit', 'loading board');
}
}
@@ -61,7 +75,7 @@ const useStateString = (commentOrSubplebbit: CommentOrSubplebbit): string | unde
}
return stateString === '' ? undefined : stateString;
}, [states, commentOrSubplebbit]);
}, [debouncedStates, commentOrSubplebbit]);
};
export default useStateString;