External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(board header): add yellow offline icon for loading online status, red icon for offline status

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-07-09 14:59:18 +02:00
parent 9f7544936e
commit fe434cb634
10 changed files with 93 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/use-is-subplebbit-offline.ts
+28 -6
View File
@@ -1,19 +1,41 @@
import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';
import { Subplebbit } from '@plebbit/plebbit-react-hooks';
import { getFormattedTimeAgo } from '../lib/utils/time-utils';
import useSubplebbitOfflineStore from '../stores/use-subplebbit-offline-store';
const useIsSubplebbitOffline = (subplebbit: Subplebbit) => {
const { t } = useTranslation();
const { updatedAt, updatingState } = subplebbit || {};
const isProbablyOffline = !updatedAt || (updatedAt && updatedAt < Date.now() / 1000 - 60 * 60);
const isDefinitelyOffline = updatingState === 'failed';
const isOffline = isProbablyOffline || isDefinitelyOffline;
const { address, state, updatedAt, updatingState } = subplebbit || {};
const { subplebbitOfflineState, setSubplebbitOfflineState, initializesubplebbitOfflineState } = useSubplebbitOfflineStore();
const offlineTitle = updatedAt
useEffect(() => {
if (address && !subplebbitOfflineState[address]) {
initializesubplebbitOfflineState(address);
}
}, [address, subplebbitOfflineState, initializesubplebbitOfflineState]);
useEffect(() => {
if (address) {
setSubplebbitOfflineState(address, { state, updatedAt, updatingState });
}
}, [address, state, updatedAt, updatingState, setSubplebbitOfflineState]);
const subplebbitData = subplebbitOfflineState[address] || { initialLoad: true };
const isLoading = (updatingState === 'resolving-address' && state !== 'stopped') || (subplebbitData.initialLoad && updatingState === 'fetching-ipns' && !updatedAt);
const isOffline =
!isLoading && ((updatedAt && updatedAt < Date.now() / 1000 - 60 * 60) || updatingState === 'failed' || (updatingState === 'fetching-ipns' && !updatedAt));
const offlineIconClass = isLoading ? 'yellowOfflineIcon' : isOffline ? 'redOfflineIcon' : '';
const offlineTitle = isLoading
? t('loading')
: updatedAt
? isOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })
: t('subplebbit_offline_info');
return { isOffline, isDefinitelyOffline, offlineTitle };
return { isOffline, isOnlineStatusLoading: isLoading, offlineIconClass, offlineTitle };
};
export default useIsSubplebbitOffline;