feat(subplebbit): add feed, posts

src/components/board-stats/board-stats.tsx

@@ -5,7 +5,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 export interface BoardStatsProps {
   address: string | undefined;
-  createdAt: number;
+  createdAt: number | undefined;
 }
 
 const BoardStats = ({ address, createdAt }: BoardStatsProps) => {
@@ -59,7 +59,7 @@ const BoardStats = ({ address, createdAt }: BoardStatsProps) => {
             </tr>
             <tr>
               <td className={styles.lowercase}>
-                {unixToMMDDYYYY(createdAt)} {t('board_created')}
+                {createdAt && unixToMMDDYYYY(createdAt)} {t('board_created')}
                 {' / '}
                 <Trans
                   i18nKey='board_stats_all'

src/components/post/index.ts

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

src/components/post/post.module.css

@@ -0,0 +1,3 @@
+.thread {
+  clear: both;
+}

src/components/post/post.tsx

@@ -0,0 +1,15 @@
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import styles from './post.module.css';
+
+const Post = ({ post }: Comment) => {
+  const { content, link, title } = post;
+  return (
+    <div>
+      <hr />
+      <h1>{post.title}</h1>
+      <p>{post.content}</p>
+    </div>
+  );
+};
+
+export default Post;

src/views/subplebbit/subplebbit.tsx

@@ -1,7 +1,72 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
+import { useTranslation } from 'react-i18next';
 import styles from './subplebbit.module.css';
+import useFeedStateString from '../../hooks/use-feed-state-string';
+import LoadingEllipsis from '../../components/loading-ellipsis';
+import Post from '../../components/post';
+const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
 const Subplebbit = () => {
-  return <div className={styles.content}></div>;
+  const { t } = useTranslation();
+  const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
+  const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { createdAt, description, roles, rules, shortAddress, state, title, updatedAt, settings } = subplebbit || {};
+  const sortType = 'active';
+  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
+  const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
+
+  const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
+
+  useEffect(() => {
+    document.title = title ? title : shortAddress;
+  }, [title, shortAddress]);
+
+  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>;
+  };
+
+  // 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 + sortType] = snapshot;
+        }
+      });
+    };
+    window.addEventListener('scroll', setLastVirtuosoState);
+    return () => window.removeEventListener('scroll', setLastVirtuosoState);
+  }, [subplebbitAddress, sortType]);
+
+  const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + sortType];
+  return (
+    <div className={styles.content}>
+      <Virtuoso
+        increaseViewportBy={{ bottom: 1200, top: 600 }}
+        totalCount={feed?.length || 0}
+        data={feed}
+        itemContent={(index, post) => <Post index={index} post={post} />}
+        useWindowScroll={true}
+        components={{ Footer }}
+        endReached={loadMore}
+        ref={virtuosoRef}
+        restoreStateFrom={lastVirtuosoState}
+        initialScrollTop={lastVirtuosoState?.scrollTop}
+      />
+    </div>
+  );
 };
 
 export default Subplebbit;