add catalog view

src/app.tsx

@@ -5,6 +5,7 @@ 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';
 import Home from './views/home';
 import PostPage from './views/post-page';
 import Settings from './views/settings';
@@ -58,6 +59,7 @@ const App = () => {
           <Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
           <Route path='/p/:subplebbitAddress/description' element={<PostPage />} />
           <Route path='/p/:subplebbitAddress/rules' element={<PostPage />} />
+          <Route path='/p/:subplebbitAddress/catalog' element={<Catalog />} />
         </Route>
         <Route path='/settings' element={<Settings />} />
       </Routes>

src/components/catalog-row/catalog-row.module.css

@@ -0,0 +1,39 @@
+.row {
+  display: flex; 
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.post {
+  width: 180px;
+  font-size: 12px;
+
+  /* fix text overflowing */
+  overflow: hidden;
+}
+
+.postHeader {
+  /* make cursors like button */
+  cursor: pointer;
+}
+
+.postStats {
+  font-weight: bold;
+}
+
+.media {
+  height: 180px;
+}
+
+/* media and no media must be the same height, or the infinite scroll bugs out */
+.mediaWrapper {
+  overflow: hidden;
+  width: 180px;
+  height: 180px;
+}
+
+/* add some padding to rows when there's no image */
+.noMedia {
+  height: 2px;
+}

src/components/catalog-row/catalog-row.tsx

@@ -0,0 +1,25 @@
+import styles from './catalog-row.module.css';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+
+const CatalogPost = ({ post }: { post: Comment }) => {
+  const { title, cid } = post || {};
+
+  return <div className={styles.post}>{title || 'this is a post without a title'}</div>;
+};
+
+interface CatalogRowProps {
+  description: any | undefined;
+  index: number;
+  rules: any | undefined;
+  row: Comment[];
+}
+
+const CatalogRow = ({ description, index, row, rules }: CatalogRowProps) => {
+  const rowPosts = index === 0 ? [...(rules?.content?.length > 0 ? [rules] : []), ...(description?.content?.length > 0 ? [description] : []), ...row] : row;
+
+  const posts = rowPosts.map((post, index) => <CatalogPost key={index} post={post} />);
+
+  return <div className={styles.row}>{posts}</div>;
+};
+
+export default CatalogRow;

src/components/catalog-row/index.ts

@@ -0,0 +1 @@
+export { default } from './catalog-row';

src/components/subplebbit-description/subplebbit-description.tsx

@@ -1,4 +1,5 @@
 import Post from '../post';
+
 interface DescriptionPostProps {
   subplebbitAddress: string | undefined;
   createdAt: number;
@@ -7,7 +8,7 @@ interface DescriptionPostProps {
   title: string;
 }
 
-export const SubplebbitDescription = ({ subplebbitAddress, createdAt, description, avatarUrl, title }: DescriptionPostProps) => {
+const SubplebbitDescription = ({ subplebbitAddress, createdAt, description, avatarUrl, title }: DescriptionPostProps) => {
   const post = {
     isDescription: true,
     subplebbitAddress,

src/components/subplebbit-rules/subplebbit-rules.tsx

@@ -6,7 +6,7 @@ interface RulesPostProps {
   rules: string[];
 }
 
-export const SubplebbitRules = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
+const SubplebbitRules = ({ subplebbitAddress, createdAt, rules }: RulesPostProps) => {
   const content = rules.map((rule, index) => `${index + 1}. ${rule}`).join('\n');
   const post = {
     isRules: true,

src/views/catalog/catalog.module.css

@@ -0,0 +1,9 @@
+.footer {
+  padding-top: 10px;
+}
+
+@media (max-width: 640px) {
+  .footer {
+    padding-left: 5px;
+  }
+}

src/views/catalog/catalog.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
+import useFeedStateString from '../../hooks/use-feed-state-string';
+import useWindowWidth from '../../hooks/use-window-width';
+import CatalogRow from '../../components/catalog-row';
+import LoadingEllipsis from '../../components/loading-ellipsis';
+import styles from './catalog.module.css';
+
+const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
+
+const useFeedRows = (feed: any[], columnCount: number, includeDescription: boolean, includeRules: boolean) => {
+  const rowsRef = useRef<any[]>([]);
+  return useMemo(() => {
+    const rows: any[] = [];
+    let startIndex = 0;
+    let adjustment = 0; // Adjustment for the first row if description/rules are included
+
+    // Calculate adjustment for the first row
+    if (includeDescription) adjustment += 1;
+    if (includeRules) adjustment += 1;
+
+    while (startIndex < feed.length) {
+      let currentColumnCount = columnCount;
+
+      // Adjust the number of items in the first row to compensate for description/rules
+      if (rows.length === 0 && adjustment > 0) {
+        currentColumnCount = columnCount - adjustment;
+      }
+
+      // Ensure we don't try to slice more items than are available
+      const endIndex = Math.min(startIndex + currentColumnCount, feed.length);
+
+      if (rowsRef.current[rows.length] && rowsRef.current[rows.length].length === currentColumnCount) {
+        rows.push(rowsRef.current[rows.length]);
+      } else {
+        rows.push(feed.slice(startIndex, endIndex));
+      }
+
+      startIndex = endIndex; // Update startIndex to the end of the current row
+    }
+
+    rowsRef.current = rows;
+    return rows;
+  }, [feed, columnCount, includeDescription, includeRules]);
+};
+
+const columnWidth = 180;
+
+const Catalog = () => {
+  const { t } = useTranslation();
+  const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
+  const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
+
+  const columnCount = Math.floor(useWindowWidth() / columnWidth);
+  // postPerPage based on columnCount for optimized feed, dont change value after first render
+  // eslint-disable-next-line
+  const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []);
+
+  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType: 'active', postsPerPage });
+
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {};
+  const { avatarUrl } = suggested || {};
+  const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
+  const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
+
+  const Footer = () => {
+    let footerContent;
+    if (feed.length === 0) {
+      footerContent = t('no_posts');
+    }
+    if (hasMore || subplebbitAddresses.length === 0) {
+      footerContent = loadingString;
+    }
+    return <div className={styles.footer}>{footerContent}</div>;
+  };
+
+  // split feed into rows
+  const includeDescription = !!description && description.length > 0;
+  const includeRules = !!rules && rules.length > 0;
+  const rows = useFeedRows(feed, columnCount, includeDescription, includeRules);
+
+  const descriptionPost = {
+    isDescription: true,
+    subplebbitAddress,
+    timestamp: createdAt,
+    author: { displayName: '## Board Mods' },
+    content: description,
+    link: avatarUrl,
+    title: 'Welcome to ' + (title || `p/${shortAddress}`),
+    pinned: true,
+    locked: true,
+  };
+
+  const content = rules?.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n');
+  const rulesPost = {
+    isRules: true,
+    subplebbitAddress,
+    timestamp: createdAt,
+    author: { displayName: '## Board Mods' },
+    content,
+    title: 'Rules',
+    pinned: true,
+    locked: true,
+  };
+
+  // save the last Virtuoso state to restore it when navigating back
+  const virtuosoRef = useRef<VirtuosoHandle | null>(null);
+  useEffect(() => {
+    const setLastVirtuosoState = () =>
+      virtuosoRef.current?.getState((snapshot: StateSnapshot) => {
+        if (snapshot?.ranges?.length) {
+          lastVirtuosoStates[subplebbitAddress + 'catalog'] = snapshot;
+        }
+      });
+    window.addEventListener('scroll', setLastVirtuosoState);
+    return () => window.removeEventListener('scroll', setLastVirtuosoState);
+  }, []);
+
+  const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + 'catalog'];
+
+  useEffect(() => {
+    let documentTitle = title ? title : shortAddress;
+    document.title = documentTitle + ' - Catalog';
+  }, [title, shortAddress]);
+
+  return (
+    <div>
+      <Virtuoso
+        increaseViewportBy={{ bottom: 1200, top: 1200 }}
+        totalCount={rows?.length || 0}
+        data={rows}
+        itemContent={(index, row) => (
+          <CatalogRow description={index === 0 && includeDescription && descriptionPost} index={index} row={row} rules={index === 0 && includeRules && rulesPost} />
+        )}
+        useWindowScroll={true}
+        components={{ Footer }}
+        endReached={loadMore}
+        ref={virtuosoRef}
+        restoreStateFrom={lastVirtuosoState}
+        initialScrollTop={lastVirtuosoState?.scrollTop}
+      />
+    </div>
+  );
+};
+
+export default Catalog;

src/views/catalog/index.ts

@@ -0,0 +1 @@
+export { default } from './catalog';