From 11d1424c0a890b43a5fecb048d894d3c81b7340f Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 17 May 2024 14:55:41 +0200 Subject: [PATCH] feat(p/all): use multisub title, description and createdAt in mock description and board header --- .../board-banner/board-banner.module.css | 2 +- src/components/board-banner/board-banner.tsx | 24 ++++++++--- .../subplebbit-description.tsx | 16 +++++-- src/hooks/use-default-subplebbits.ts | 42 +++++++++++++++++-- 4 files changed, 70 insertions(+), 14 deletions(-) diff --git a/src/components/board-banner/board-banner.module.css b/src/components/board-banner/board-banner.module.css index 5c6303d8..2dbf16d0 100644 --- a/src/components/board-banner/board-banner.module.css +++ b/src/components/board-banner/board-banner.module.css @@ -19,7 +19,7 @@ color: var(--board-title-text-color); } -.boardAddress { +.boardSubtitle { font-size: var(--board-address-font-size); color: var(--board-address-text-color); } diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx index b6c90cdb..f04ff400 100644 --- a/src/components/board-banner/board-banner.tsx +++ b/src/components/board-banner/board-banner.tsx @@ -1,7 +1,9 @@ -import { useParams } from 'react-router-dom'; -import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useState } from 'react'; +import { useLocation, useParams } from 'react-router-dom'; +import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils'; import styles from './board-banner.module.css'; +import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; const totalBanners = 57; @@ -16,21 +18,31 @@ const ImageBanner = () => { }; const BoardBanner = () => { + const location = useLocation(); const params = useParams(); + + const isInAllView = isAllView(location.pathname); + const isInSubscriptionsView = isSubscriptionsView(location.pathname); + const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; const subplebbit = useSubplebbit({ subplebbitAddress }); - const { address, title } = subplebbit || {}; - const displayAddress = address && address.length > 10 && !address.includes('.') ? address.slice(0, 13).concat('...') : address; + const displayAddress = + subplebbit?.address && subplebbit?.address.length > 10 && !subplebbit?.address.includes('.') ? subplebbit?.address.slice(0, 13).concat('...') : subplebbit?.address; + + const multisubMetadata = useMultisubMetadata(); + + const title = isInAllView ? multisubMetadata?.title : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title; + const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${subplebbit?.address}`; return (
- +
{title || `p/${displayAddress}`}
-
p/{address}
+
{subtitle}
); diff --git a/src/components/subplebbit-description/subplebbit-description.tsx b/src/components/subplebbit-description/subplebbit-description.tsx index 843d8b54..fe7be09b 100644 --- a/src/components/subplebbit-description/subplebbit-description.tsx +++ b/src/components/subplebbit-description/subplebbit-description.tsx @@ -1,5 +1,8 @@ import Post from '../post'; import { useTranslation } from 'react-i18next'; +import { isAllView } from '../../lib/utils/view-utils'; +import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; +import { useLocation } from 'react-router-dom'; interface DescriptionPostProps { avatarUrl?: string; @@ -12,14 +15,21 @@ interface DescriptionPostProps { const SubplebbitDescription = ({ avatarUrl, createdAt, description, shortAddress, subplebbitAddress, title }: DescriptionPostProps) => { const { t } = useTranslation(); + const location = useLocation(); + const isInAllView = isAllView(location.pathname); + const multisubMetadata = useMultisubMetadata(); + const post = { isDescription: true, subplebbitAddress, - timestamp: createdAt, + timestamp: isInAllView ? multisubMetadata?.createdAt : createdAt, author: { displayName: '## Board Mods' }, - content: description, + content: isInAllView ? multisubMetadata?.description : description, link: avatarUrl, - title: t('welcome_to_board', { board: title || `p/${shortAddress}`, interpolation: { escapeValue: false } }), + title: t('welcome_to_board', { + board: isInAllView ? multisubMetadata?.title : title || `p/${shortAddress}`, + interpolation: { escapeValue: false }, + }), pinned: true, locked: true, }; diff --git a/src/hooks/use-default-subplebbits.ts b/src/hooks/use-default-subplebbits.ts index 43adcec3..1b57be96 100644 --- a/src/hooks/use-default-subplebbits.ts +++ b/src/hooks/use-default-subplebbits.ts @@ -1,5 +1,12 @@ import { useEffect, useMemo, useState } from 'react'; +export interface MultisubMetadata { + title: string; + description: string; + createdAt: number; + updatedAt: number; +} + export interface MultisubSubplebbit { title?: string; address: string; @@ -7,13 +14,14 @@ export interface MultisubSubplebbit { features?: string[]; } -let cache: MultisubSubplebbit[] | null = null; +let cacheSubplebbits: MultisubSubplebbit[] | null = null; +let cacheMetadata: MultisubMetadata | null = null; const useDefaultSubplebbits = () => { const [subplebbits, setSubplebbits] = useState([]); useEffect(() => { - if (cache) { + if (cacheSubplebbits) { return; } (async () => { @@ -22,7 +30,7 @@ const useDefaultSubplebbits = () => { 'https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/multisub.json', // { cache: 'no-cache' } ).then((res) => res.json()); - cache = multisub.subplebbits; + cacheSubplebbits = multisub.subplebbits; setSubplebbits(multisub.subplebbits); } catch (e) { console.warn(e); @@ -30,7 +38,7 @@ const useDefaultSubplebbits = () => { })(); }, []); - return cache || subplebbits; + return cacheSubplebbits || subplebbits; }; export const useDefaultSubplebbitAddresses = () => { @@ -38,4 +46,30 @@ export const useDefaultSubplebbitAddresses = () => { return useMemo(() => defaultSubplebbits.map((subplebbit: MultisubSubplebbit) => subplebbit.address), [defaultSubplebbits]); }; +export const useMultisubMetadata = () => { + const [metadata, setMetadata] = useState(null); + + useEffect(() => { + if (cacheMetadata) { + return; + } + (async () => { + try { + const multisub = await fetch( + 'https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/multisub.json', + // { cache: 'no-cache' } + ).then((res) => res.json()); + const { title, description, createdAt, updatedAt } = multisub; + const metadata: MultisubMetadata = { title, description, createdAt, updatedAt }; + cacheMetadata = metadata; + setMetadata(metadata); + } catch (e) { + console.warn(e); + } + })(); + }, []); + + return cacheMetadata || metadata; +}; + export default useDefaultSubplebbits;