diff --git a/src/app.tsx b/src/app.tsx
index c344f730..a06358ac 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -6,6 +6,7 @@ import Home from './views/home';
import PendingPost from './views/pending-post';
import Post from './views/post';
import About from './views/about/about';
+import Profile from './views/profile';
import Settings from './views/settings';
import Submit from './views/submit';
import Subplebbit from './views/subplebbit';
@@ -56,6 +57,7 @@ function App() {
} />
} />
} />
+ } />
} />
diff --git a/src/components/account-bar/account-bar.tsx b/src/components/account-bar/account-bar.tsx
index 289bf532..ab7c9f8e 100644
--- a/src/components/account-bar/account-bar.tsx
+++ b/src/components/account-bar/account-bar.tsx
@@ -83,7 +83,7 @@ const AccountBar = () => {
return (
- e.preventDefault()}>
+
{account?.author?.shortAddress}
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 311d9c1c..8a623b44 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
import { Link, useLocation, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
-import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import { getAboutLink, isAboutView, isHomeView, isPostView, isSettingsView, isSubplebbitView, isSubmitView, isSubplebbitSubmitView } from '../../lib/utils/view-utils';
+import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { getAboutLink, isAboutView, isHomeView, isPostView, isSettingsView, isSubplebbitView, isSubmitView, isSubplebbitSubmitView, isProfileView } from '../../lib/utils/view-utils';
import useTheme from '../../hooks/use-theme';
import styles from './header.module.css';
import SubscribeButton from '../subscribe-button';
@@ -83,11 +83,29 @@ const SortItems = () => {
));
};
+const ProfileHeaderTabs = () => {
+
+ return (
+ <>
+
+ e.preventDefault()}>overview
+
+
+ e.preventDefault()}>comments
+
+
+ e.preventDefault()}>submitted
+
+ >
+ );
+}
+
const HeaderTabs = () => {
const params = useParams();
const location = useLocation();
const isHome = isHomeView(location.pathname, params);
const isPost = isPostView(location.pathname, params);
+ const isProfile = isProfileView(location.pathname);
const isSubplebbit = isSubplebbitView(location.pathname, params);
const isSubplebbitSubmit = isSubplebbitSubmitView(location.pathname, params);
@@ -95,15 +113,19 @@ const HeaderTabs = () => {
return ;
} else if (isHome || (isSubplebbit && !isSubplebbitSubmit)) {
return ;
+ } else if (isProfile) {
+ return ;
}
return null;
};
const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: string }) => {
+ const account = useAccount();
const { t } = useTranslation();
const params = useParams();
const location = useLocation();
const isPost = isPostView(location.pathname, params);
+ const isProfile = isProfileView(location.pathname);
const isSubplebbit = isSubplebbitView(location.pathname, params);
const isSubmit = isSubmitView(location.pathname);
const isSubplebbitSubmit = isSubplebbitSubmitView(location.pathname, params);
@@ -124,6 +146,8 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
return submitTitle;
} else if (isSettings) {
return t('preferences');
+ } else if (isProfile) {
+ return account?.author?.shortAddress;
}
return null;
};
@@ -138,13 +162,14 @@ const Header = () => {
const isAbout = isAboutView(location.pathname);
const isHome = isHomeView(location.pathname, params);
const isPost = isPostView(location.pathname, params);
+ const isProfile = isProfileView(location.pathname);
const isSettings = isSettingsView(location.pathname);
const isSubplebbit = isSubplebbitView(location.pathname, params);
const isSubmit = isSubmitView(location.pathname);
const isSubplebbitSubmit = isSubplebbitSubmitView(location.pathname, params);
const hasFewTabs = isPost || isSubmit || isSubplebbitSubmit || isSettings;
- const hasStickyHeader = isHome || (isSubplebbit && !isSubplebbitSubmit && !isPost && !isAbout);
+ const hasStickyHeader = isHome || (isSubplebbit && !isSubplebbitSubmit && !isPost && !isAbout) || isProfile;
const logoSrc = isSubplebbit ? suggested?.avatarUrl : '/assets/logo/seedit.png';
const logoIsAvatar = isSubplebbit && suggested?.avatarUrl;
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 9c4078e7..8b52927c 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -38,6 +38,10 @@ export const isPostView = (pathname: string, params: ParamsType): boolean => {
return params.subplebbitAddress && params.commentCid ? pathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false;
};
+export const isProfileView = (pathname: string): boolean => {
+ return pathname === `/profile`;
+}
+
export const isSettingsView = (pathname: string): boolean => {
return pathname === '/settings';
}
diff --git a/src/views/profile/index.ts b/src/views/profile/index.ts
new file mode 100644
index 00000000..15bb2c64
--- /dev/null
+++ b/src/views/profile/index.ts
@@ -0,0 +1 @@
+export {default} from './profile';
\ No newline at end of file
diff --git a/src/views/profile/profile.module.css b/src/views/profile/profile.module.css
new file mode 100644
index 00000000..b443a519
--- /dev/null
+++ b/src/views/profile/profile.module.css
@@ -0,0 +1,13 @@
+.content {
+ padding: 7px 5px 0px 5px;
+}
+
+div[data-viewport-type="window"] {
+ position: relative !important;
+}
+
+@media (max-width: 768px) {
+ .sidebar {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/views/profile/profile.tsx b/src/views/profile/profile.tsx
new file mode 100644
index 00000000..b8bdf296
--- /dev/null
+++ b/src/views/profile/profile.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useRef } from "react";
+import { StateSnapshot, Virtuoso, VirtuosoHandle } from "react-virtuoso";
+import { useAccount, useAccountComments } from "@plebbit/plebbit-react-hooks";
+import styles from "./profile.module.css";
+import Sidebar from "../../components/sidebar/sidebar";
+import Post from "../../components/post";
+
+let lastVirtuosoState: StateSnapshot | undefined;
+
+const Profile = () => {
+ const account = useAccount();
+ let { accountComments } = useAccountComments();
+ accountComments = [...accountComments].reverse()
+
+ const virtuosoRef = useRef(null);
+
+ console.log(account);
+
+ useEffect(() => {
+ const setLastVirtuosoState = () =>
+ virtuosoRef.current?.getState((snapshot: StateSnapshot) => {
+ if (snapshot?.ranges?.length) {
+ lastVirtuosoState = snapshot
+ }
+ })
+ window.addEventListener('scroll', setLastVirtuosoState)
+ return () => window.removeEventListener('scroll', setLastVirtuosoState)
+ }, [])
+
+ if (account && !accountComments.length) {
+ return 'no posts'
+ }
+
+ return (
+
+
+
+
+
}
+ useWindowScroll={true}
+ ref={virtuosoRef}
+ restoreStateFrom={lastVirtuosoState}
+ initialScrollTop={lastVirtuosoState?.scrollTop}
+ />
+
+ );
+};
+
+export default Profile;