feat: add profile view

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() {
             <Route path='/:sortType?/:timeFilterName?' element={<Home />} />
             <Route path='p/:subplebbitAddress/:sortType?' element={<Subplebbit />} />
             <Route path='p/:subplebbitAddress/:sortType?/:timeFilterName?' element={<Subplebbit />} />
+            <Route path='/profile' element={<Profile />} />
           </Route>
           <Route element={pagesLayout}>
             <Route path='/submit' element={<Submit />} />

src/components/account-bar/account-bar.tsx

@@ -83,7 +83,7 @@ const AccountBar = () => {
   return (
     <div className={styles.content}>
       <span className={styles.user}>
-        <Link to='/user.eth' onClick={(e) => e.preventDefault()}>
+        <Link to='/profile'>
           {account?.author?.shortAddress}
         </Link>
         <span className={styles.userDropdownButton} ref={accountSelectButtonRef} onClick={toggleAccountDropdown} />

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 (
+    <>
+      <li>
+        <Link to='/' className={styles.selected} onClick={(e) => e.preventDefault()}>overview</Link>
+      </li>
+      <li>
+        <Link to='/' className={styles.choice} onClick={(e) => e.preventDefault()}>comments</Link>
+      </li>
+      <li>
+        <Link to='/' className={styles.choice} onClick={(e) => e.preventDefault()}>submitted</Link>
+      </li>
+    </>
+  );
+}
+
 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 <CommentsButton />;
   } else if (isHome || (isSubplebbit && !isSubplebbitSubmit)) {
     return <SortItems />;
+  } else if (isProfile) {
+    return <ProfileHeaderTabs />;
   }
   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;
 

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';
 }

src/views/profile/index.ts

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

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;
+  }
+}

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<VirtuosoHandle | null>(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 (
+    <div className={styles.content}>
+      <div className={styles.sidebar}>
+        <Sidebar />
+      </div>
+      <Virtuoso
+        increaseViewportBy={{ bottom: 1200, top: 600 }}
+        totalCount={accountComments?.length || 0}
+        data={accountComments}
+        itemContent={(index, post) => <Post index={index} post={post} />}
+        useWindowScroll={true}
+        ref={virtuosoRef}
+        restoreStateFrom={lastVirtuosoState}
+        initialScrollTop={lastVirtuosoState?.scrollTop}
+      />
+    </div>
+  );
+};
+
+export default Profile;