feat(subplebbit): add subplebbit feed, enable links to it

src/components/header/header.tsx

@@ -60,12 +60,7 @@ const Header = () => {
   }
 
   const subplebbitTitle = (
-    <Link
-      to={`/p/${params.subplebbitAddress}`}
-      onClick={(e) => {
-        e.preventDefault();
-      }}
-    >
+    <Link to={`/p/${params.subplebbitAddress}`}>
       {title || shortAddress}
     </Link>
   );

src/components/post/post.tsx

@@ -117,7 +117,7 @@ const Post = ({ post, index }: PostProps) => {
                 u/{postAuthor}
               </Link>
                {t('post_to')}
-              <Link className={styles.subplebbit} to={`p/${subplebbitAddress}`} onClick={(e) => e.preventDefault()}>
+              <Link className={styles.subplebbit} to={`/p/${subplebbitAddress}`}>
                 {' '}
                 p/{subplebbit?.shortAddress}
               </Link>

src/components/topbar/topbar.tsx

@@ -42,7 +42,7 @@ const TopBar = () => {
         </div>
         <div className={styles.dropChoices} style={{ display: isClicked && subscriptions?.length ? 'block' : 'none' }}>
           {subscriptions?.map((subscription: string, index: number) => (
-            <Link key={index} to={`p/${subscription}`} className={styles.choice} onClick={(event) => event.preventDefault()}>
+            <Link key={index} to={`/p/${subscription}`} className={styles.choice}>
               {subscription}
             </Link>
           ))}
@@ -68,7 +68,7 @@ const TopBar = () => {
             {ethFilteredAddresses?.map((address: string, index: number) => (
               <li key={index}>
                 {index !== 0 && <span className={styles.separator}>-</span>}
-                <Link to={`p/${address}`} className={styles.choice} onClick={(event) => event.preventDefault()}>
+                <Link to={`/p/${address}`} className={styles.choice}>
                   {address.slice(0, -4)}
                 </Link>
               </li>

src/views/home/home.tsx

@@ -2,11 +2,11 @@ import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useFeed } from '@plebbit/plebbit-react-hooks';
-import useDefaultSubplebbitAddresses from '../../hooks/use-default-subplebbit-addresses';
+import { useTranslation } from 'react-i18next';
 import styles from './home.module.css';
 import Post from '../../components/post';
+import useDefaultSubplebbitAddresses from '../../hooks/use-default-subplebbit-addresses';
 import useFeedStateString from '../../hooks/use-feed-state-string';
-import { useTranslation } from 'react-i18next';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 

src/views/post/post.module.css

@@ -1,4 +1,4 @@
-.post {
+.content {
   padding: 7px 5px 0px 5px;
   margin-bottom: 25px;
 }

src/views/post/post.tsx

@@ -71,7 +71,7 @@ const Post = () => {
   }, []);
 
   return (
-    <div className={styles.post}>
+    <div className={styles.content}>
       <PostComponent post={comment} />
       <div className={styles.replyArea}>
         <div className={styles.repliesTitle}>

src/views/subplebbit/subplebbit.module.css

@@ -0,0 +1,3 @@
+.content {
+  padding: 7px 5px 0px 5px;
+}

src/views/subplebbit/subplebbit.tsx

@@ -1,17 +1,69 @@
+import { useEffect, useMemo, useRef } from "react";
 import { useParams } from "react-router-dom";
-import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
+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 Post from "../../components/post/post";
+import useFeedStateString from "../../hooks/use-feed-state-string";
+
+const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
+
+const NoPosts = () => 'no posts';
 
 const Subplebbit = () => {
+  const { t } = useTranslation();
   const params = useParams();
   const subplebbitAddress = params.subplebbitAddress;
+  const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
   const subplebbit = useSubplebbit({subplebbitAddress});
-  const { title, description, shortAddress } = subplebbit || {};
+  const { title, shortAddress } = subplebbit || {};
+  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType: 'hot' });
+  const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
+
+  useEffect(() => {
+    document.title = (title ? title : shortAddress) + " - seedit";
+  }, [title, shortAddress]);
+
+  let Footer;
+  if (feed?.length === 0) {
+    Footer = NoPosts;
+  }
+  if (hasMore || subplebbitAddresses.length === 0) {
+    Footer = () => loadingStateString;
+  }
+
+  const virtuosoRef = useRef<VirtuosoHandle | null>(null);
+
+  useEffect(() => {
+    const setLastVirtuosoState = () => {
+      virtuosoRef.current?.getState((snapshot: StateSnapshot) => {
+        if (snapshot?.ranges?.length) {
+          lastVirtuosoStates[`${subplebbitAddress}`] = snapshot;
+        }
+      });
+    };
+    window.addEventListener('scroll', setLastVirtuosoState);
+    return () => window.removeEventListener('scroll', setLastVirtuosoState);
+  }, [subplebbitAddress]);
+
+  const lastVirtuosoState = lastVirtuosoStates[`${subplebbitAddress}`];
 
   return (
-    <>
-      {title || shortAddress}
-    </>
+    <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>
   );
 }