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(homepage): offline icons give info about the board online status

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-27 11:17:27 +02:00
parent 505aed4c24
commit c81c7b85f0
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home/boards-box/boards-box.tsx
+15 -13
View File
@@ -2,13 +2,14 @@ import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Subplebbit, useAccount, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks'; import { Subplebbit, useAccount, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { getFormattedTimeAgo } from '../../../lib/utils/time-utils';
import useHomeFiltersStore from '../../../stores/use-home-filters-store'; import useHomeFiltersStore from '../../../stores/use-home-filters-store';
import { useMultisubMetadata } from '../../../hooks/use-default-subplebbits'; import { useMultisubMetadata } from '../../../hooks/use-default-subplebbits';
import styles from '../home.module.css'; import styles from '../home.module.css';
import { nsfwTags } from '../home'; import { nsfwTags } from '../home';
import BoxModal from '../box-modal'; import BoxModal from '../box-modal';
const Board = ({ isOffline, subplebbit }: { isOffline: boolean; subplebbit: Subplebbit }) => { const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbits: any }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { address, title, tags } = subplebbit || {}; const { address, title, tags } = subplebbit || {};
const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag)); const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag));
@@ -16,9 +17,16 @@ const Board = ({ isOffline, subplebbit }: { isOffline: boolean; subplebbit: Subp
const boardLink = useCatalog ? `/p/${address}/catalog` : `/p/${address}`; const boardLink = useCatalog ? `/p/${address}/catalog` : `/p/${address}`;
const subplebbitData = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
const updatedAt = subplebbitData?.updatedAt;
const isOffline = updatedAt && updatedAt < Date.now() / 1000 - 60 * 60;
const offlineTitle = updatedAt
? isOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })
: t('subplebbit_offline_info');
return ( return (
<div className={styles.subplebbit} key={address}> <div className={styles.subplebbit} key={address}>
{isOffline && <span className={styles.offlineIcon} />} {isOffline && <span className={styles.offlineIcon} title={offlineTitle} />}
<Link to={boardLink}>{title || address}</Link> <Link to={boardLink}>{title || address}</Link>
{nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>} {nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
</div> </div>
@@ -55,12 +63,6 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
); );
} }
const isSubOffline = (address: string) => {
const subplebbit = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
const isOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
return isOffline;
};
const multisubMetadata = useMultisubMetadata(); const multisubMetadata = useMultisubMetadata();
return ( return (
@@ -85,7 +87,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
<h3>Plebbit</h3> <h3>Plebbit</h3>
<div className={styles.list}> <div className={styles.list}>
{plebbitSubs.map((sub) => ( {plebbitSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} /> <Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))} ))}
</div> </div>
</> </>
@@ -95,7 +97,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
<h3>{t('projects')}</h3> <h3>{t('projects')}</h3>
<div className={styles.list}> <div className={styles.list}>
{projectsSubs.map((sub) => ( {projectsSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} /> <Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))} ))}
</div> </div>
</> </>
@@ -107,7 +109,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
<h3>{t('interests')}</h3> <h3>{t('interests')}</h3>
<div className={styles.list}> <div className={styles.list}>
{interestsSubs.map((sub) => ( {interestsSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} /> <Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))} ))}
</div> </div>
</> </>
@@ -119,7 +121,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
<h3>{t('random')}</h3> <h3>{t('random')}</h3>
<div className={styles.list}> <div className={styles.list}>
{randomSubs.map((sub) => ( {randomSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} /> <Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))} ))}
</div> </div>
</> </>
@@ -129,7 +131,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
<h3>{t('international')}</h3> <h3>{t('international')}</h3>
<div className={styles.list}> <div className={styles.list}>
{internationalSubs.map((sub) => ( {internationalSubs.map((sub) => (
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} /> <Board key={sub.address} subplebbit={sub} subplebbits={subplebbits} />
))} ))}
</div> </div>
</> </>