mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
display state strings from backend, but with user friendly wording
This commit is contained in:
@@ -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']) {
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user