From 5cd1c03cc55cdfaf8a56e5402f0db0f31d1f16ca Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 7 Dec 2023 10:54:14 +0100 Subject: [PATCH] feat: add profile view --- src/app.tsx | 2 + src/components/account-bar/account-bar.tsx | 2 +- src/components/header/header.tsx | 31 +++++++++++-- src/lib/utils/view-utils.ts | 4 ++ src/views/profile/index.ts | 1 + src/views/profile/profile.module.css | 13 ++++++ src/views/profile/profile.tsx | 53 ++++++++++++++++++++++ 7 files changed, 102 insertions(+), 4 deletions(-) create mode 100644 src/views/profile/index.ts create mode 100644 src/views/profile/profile.module.css create mode 100644 src/views/profile/profile.tsx 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;