diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index bb591618..3d745993 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -60,12 +60,7 @@ const Header = () => {
}
const subplebbitTitle = (
- {
- e.preventDefault();
- }}
- >
+
{title || shortAddress}
);
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 32fdcd0a..f5d8840f 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -117,7 +117,7 @@ const Post = ({ post, index }: PostProps) => {
u/{postAuthor}
{t('post_to')}
- e.preventDefault()}>
+
{' '}
p/{subplebbit?.shortAddress}
diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index 02eb3e4b..58e46324 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -42,7 +42,7 @@ const TopBar = () => {
{subscriptions?.map((subscription: string, index: number) => (
-
event.preventDefault()}>
+
{subscription}
))}
@@ -68,7 +68,7 @@ const TopBar = () => {
{ethFilteredAddresses?.map((address: string, index: number) => (
{index !== 0 && -}
- event.preventDefault()}>
+
{address.slice(0, -4)}
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 92b1301a..efae75e7 100644
--- a/src/views/home/home.tsx
+++ b/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 } = {};
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index af8a0ece..d2784687 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -1,4 +1,4 @@
-.post {
+.content {
padding: 7px 5px 0px 5px;
margin-bottom: 25px;
}
diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx
index 967eb7cd..75845e33 100644
--- a/src/views/post/post.tsx
+++ b/src/views/post/post.tsx
@@ -71,7 +71,7 @@ const Post = () => {
}, []);
return (
-
+
diff --git a/src/views/subplebbit/subplebbit.module.css b/src/views/subplebbit/subplebbit.module.css
index e69de29b..c902e37b 100644
--- a/src/views/subplebbit/subplebbit.module.css
+++ b/src/views/subplebbit/subplebbit.module.css
@@ -0,0 +1,3 @@
+.content {
+ padding: 7px 5px 0px 5px;
+}
\ No newline at end of file
diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
index 5367bfc3..541ff995 100644
--- a/src/views/subplebbit/subplebbit.tsx
+++ b/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
(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}
- >
+
+
}
+ useWindowScroll={true}
+ components={{ Footer }}
+ endReached={loadMore}
+ ref={virtuosoRef}
+ restoreStateFrom={lastVirtuosoState}
+ initialScrollTop={lastVirtuosoState?.scrollTop}
+ />
+
);
}