From a89f70f88c79b8addfe8f918274882867303010a Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 18 Apr 2024 17:44:35 +0200
Subject: [PATCH] optimize sub list load

---
 src/app.tsx                            |  9 ++----
 src/components/board-nav/board-nav.tsx | 42 ++++++++++++--------------
 src/views/home/home.tsx                | 18 +++++------
 3 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index cdc9124b..85072860 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
 import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
 import { isHomeView } from './lib/utils/view-utils';
-import { useSubplebbits } from '@plebbit/plebbit-react-hooks';
-import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits';
 import useTheme from './hooks/use-theme';
 import styles from './app.module.css';
 import Catalog from './views/catalog';
@@ -21,9 +19,6 @@ const App = () => {
   const location = useLocation();
   const isInHomeView = isHomeView(location.pathname);
 
-  const subplebbitAddresses = useDefaultSubplebbitAddresses();
-  const { subplebbits } = useSubplebbits({ subplebbitAddresses });
-
   // add theme className to body so it can set the correct body background in index.css
   const [theme] = useTheme();
   useEffect(() => {
@@ -40,7 +35,7 @@ const App = () => {
 
   const boardLayout = (
     <>
-      <BoardNav subplebbits={subplebbits} />
+      <BoardNav />
       <BoardBanner />
       <MobileBoardButtons />
       <PostForm />
@@ -53,7 +48,7 @@ const App = () => {
   return (
     <div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
       <Routes>
-        <Route path='/' element={<Home subplebbits={subplebbits} />} />
+        <Route path='/' element={<Home />} />
         <Route element={boardLayout}>
           <Route path='/p/:subplebbitAddress' element={<Board />} />
           <Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx
index df5920df..fae83e1d 100644
--- a/src/components/board-nav/board-nav.tsx
+++ b/src/components/board-nav/board-nav.tsx
@@ -1,15 +1,15 @@
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Subplebbit } from '@plebbit/plebbit-react-hooks';
 import { isCatalogView } from '../../lib/utils/view-utils';
 import styles from './board-nav.module.css';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 
 interface BoardNavProps {
-  subplebbits: (Subplebbit | undefined)[];
-  currentSubplebbit?: string | undefined;
+  subplebbitAddresses: string[];
+  subplebbitAddress?: string;
 }
 
-const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
+const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
   const { t } = useTranslation();
   const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
 
@@ -17,16 +17,12 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
     <div className={styles.boardNavDesktop}>
       <span className={styles.boardList}>
         [
-        {subplebbits.map((subplebbit: any, index: number) => {
-          const address = subplebbit?.address || '';
-          const title = subplebbit?.title || '';
+        {subplebbitAddresses.map((address: string, index: number) => {
           return (
             <span key={index}>
               {index === 0 ? null : ' '}
-              <Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`} title={title || ''}>
-                {address.includes('.') ? address : title || address.slice(0, 10).concat('...')}
-              </Link>
-              {index !== subplebbits.length - 1 ? ' /' : null}
+              <Link to={`/p/${address}${isInCatalogView ? '/catalog' : ''}`}>{address.includes('.') ? address : address.slice(0, 10).concat('...')}</Link>
+              {index !== address.length - 1 ? ' /' : null}
             </span>
           );
         })}
@@ -39,24 +35,23 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
   );
 };
 
-const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
+const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProps) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const displaySubplebbitAddress = currentSubplebbit && currentSubplebbit.length > 30 ? currentSubplebbit.slice(0, 30).concat('...') : currentSubplebbit;
+  const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress;
 
-  const currentSubplebbitIsInList = subplebbits.some((subplebbit: any) => subplebbit?.address === currentSubplebbit);
+  const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress);
 
   const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
 
   const boardSelect = (
-    <select value={currentSubplebbit || 'all'} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}>
-      {!currentSubplebbitIsInList && currentSubplebbit && <option value={currentSubplebbit}>{displaySubplebbitAddress}</option>}
+    <select value={subplebbitAddress || 'all'} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}>
+      {!currentSubplebbitIsInList && subplebbitAddress && <option value={subplebbitAddress}>{displaySubplebbitAddress}</option>}
       <option value='all'>{t('all')}</option>
       <option value='subscriptions'>{t('subscriptions')}</option>
-      {subplebbits.map((subplebbit: any, index: number) => {
+      {subplebbitAddresses.map((subplebbit: any, index: number) => {
         const address = subplebbit?.address || '';
-        const title = subplebbit?.title || '';
-        const subplebbitAddress = address?.includes('.') ? address : title || address?.slice(0, 10).concat('...');
+        const subplebbitAddress = address?.includes('.') ? address : address?.slice(0, 10).concat('...');
         return (
           <option key={index} value={address}>
             {subplebbitAddress}
@@ -80,12 +75,13 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
   );
 };
 
-const BoardNav = ({ subplebbits }: BoardNavProps) => {
-  const { subplebbitAddress: address } = useParams();
+const BoardNav = () => {
+  const subplebbitAddresses = useDefaultSubplebbitAddresses();
+  const { subplebbitAddress } = useParams();
   return (
     <>
-      <BoardNavDesktop subplebbits={subplebbits} />
-      <BoardNavMobile subplebbits={subplebbits} currentSubplebbit={address} />
+      <BoardNavDesktop subplebbitAddresses={subplebbitAddresses} />
+      <BoardNavMobile subplebbitAddresses={subplebbitAddresses} subplebbitAddress={subplebbitAddress} />
     </>
   );
 };
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 0c3eb3ca..33876d97 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -2,12 +2,9 @@ import { useRef } from 'react';
 import styles from './home.module.css';
 import { Link, useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-import { Subplebbit } from '@plebbit/plebbit-react-hooks';
+import { Subplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import packageJson from '../../../package.json';
-
-interface HomeProps {
-  subplebbits: (Subplebbit | undefined)[];
-}
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 
 const isValidAddress = (address: string): boolean => {
   if (address.includes('/') || address.includes('\\') || address.includes(' ')) {
@@ -69,7 +66,7 @@ const InfoBox = () => {
   );
 };
 
-const Boards = ({ subplebbits }: HomeProps) => {
+const Boards = ({ subplebbits }: { subplebbits: (Subplebbit | undefined)[] }) => {
   const { t } = useTranslation();
 
   return (
@@ -83,8 +80,8 @@ const Boards = ({ subplebbits }: HomeProps) => {
           <h3>Default SFW</h3>
           <div className={styles.list}>
             {subplebbits
-              .filter((subplebbit): subplebbit is Subplebbit => subplebbit !== undefined)
-              .map((subplebbit) => {
+              .filter((subplebbit: Subplebbit | undefined): subplebbit is Subplebbit => subplebbit !== undefined)
+              .map((subplebbit: Subplebbit) => {
                 const address = subplebbit.address;
                 return (
                   <div className={styles.subplebbit} key={address}>
@@ -221,7 +218,10 @@ const Footer = () => {
   );
 };
 
-const Home = ({ subplebbits }: HomeProps) => {
+const Home = () => {
+  const subplebbitAddresses = useDefaultSubplebbitAddresses();
+  const { subplebbits } = useSubplebbits({ subplebbitAddresses });
+
   return (
     <div className={styles.content}>
       <Link to='/'>