feat(p/all): use multisub title, description and createdAt in mock description and board header

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);
 }

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 (
     <div className={styles.content}>
       <div className={styles.bannerCnt}>
-        <ImageBanner key={address} />
+        <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbit?.address} />
       </div>
       <div className={styles.boardTitle}>{title || `p/${displayAddress}`}</div>
-      <div className={styles.boardAddress}>p/{address}</div>
+      <div className={styles.boardSubtitle}>{subtitle}</div>
       <hr />
     </div>
   );

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,
   };

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<MultisubSubplebbit[]>([]);
 
   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<MultisubMetadata | null>(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;