From 80ceada10d7976ede56feae4879eaac2acd908e6 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Fri, 25 Oct 2024 18:07:32 +0200 Subject: [PATCH] rename about to sidebar, redirect away from /sidebar on desktop --- src/app.tsx | 14 ++++---- src/components/header/header.tsx | 30 ++++++++--------- src/components/sidebar/sidebar.tsx | 15 +++++++-- src/hooks/use-is-mobile.ts | 8 +++++ src/lib/utils/view-utils.ts | 20 ++++++------ src/views/about/about.tsx | 20 ------------ src/views/about/index.ts | 1 - src/views/sidebar/index.ts | 1 + .../sidebar.module.css} | 0 src/views/sidebar/sidebar.tsx | 32 +++++++++++++++++++ 10 files changed, 85 insertions(+), 56 deletions(-) create mode 100644 src/hooks/use-is-mobile.ts delete mode 100644 src/views/about/about.tsx delete mode 100644 src/views/about/index.ts create mode 100644 src/views/sidebar/index.ts rename src/views/{about/about.module.css => sidebar/sidebar.module.css} (100%) create mode 100644 src/views/sidebar/sidebar.tsx diff --git a/src/app.tsx b/src/app.tsx index 5e897191..b8bed5c4 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -4,10 +4,10 @@ import useTheme from './hooks/use-theme'; import useTimeFilter from './hooks/use-time-filter'; import styles from './app.module.css'; import All from './views/all'; -import About from './views/about'; import Author from './views/author'; import Home from './views/home'; import Inbox from './views/inbox'; +import SidebarView from './views/sidebar'; import NotFound from './views/not-found'; import PendingPost from './views/pending-post'; import PostPage from './views/post-page'; @@ -102,24 +102,24 @@ const App = () => { } /> - } /> + } /> - } /> + } /> } /> } /> - } /> + } /> } /> - } /> + } /> } /> } /> } /> - } /> + } /> - } /> + } /> } /> } /> diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 7255512a..9b3c9a0d 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -6,7 +6,7 @@ import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { sortTypes } from '../../app'; import { getAboutLink, - isAboutView, + isSidebarView, isAllView, isAllAboutView, isAuthorView, @@ -43,15 +43,15 @@ import useWindowWidth from '../../hooks/use-window-width'; import styles from './header.module.css'; import SubscribeButton from '../subscribe-button'; -const AboutButton = () => { +const SidebarButton = () => { const params = useParams(); const location = useLocation(); const aboutLink = getAboutLink(location.pathname, params); - const isInAboutView = isAboutView(location.pathname); + const isInSidebarView = isSidebarView(location.pathname); const isInSubplebbitSubmitView = isSubplebbitSubmitView(location.pathname, params); return ( -
  • +
  • ▶︎ @@ -64,10 +64,10 @@ const CommentsButton = () => { const params = useParams(); const location = useLocation(); const isPost = isPostView(location.pathname, params); - const isAbout = isAboutView(location.pathname); + const isSidebar = isSidebarView(location.pathname); return ( -
  • +
  • {t('comments')}
    • ); @@ -84,7 +84,7 @@ const SortItems = () => { const timeFilterName = params.timeFilterName; useEffect(() => { - if (location.pathname.endsWith('/about')) { + if (location.pathname.endsWith('/sidebar')) { setSelectedSortType(''); } else if (params.sortType) { setSelectedSortType(params.sortType); @@ -112,7 +112,7 @@ const AuthorHeaderTabs = () => { const { t } = useTranslation(); const location = useLocation(); const params = useParams(); - const isInAboutView = isAboutView(location.pathname); + const isInSidebarView = isSidebarView(location.pathname); const isInAuthorView = isAuthorView(location.pathname); const isInAuthorCommentsView = isAuthorCommentsView(location.pathname, params); const isInAuthorSubmittedView = isAuthorSubmittedView(location.pathname, params); @@ -126,7 +126,7 @@ const AuthorHeaderTabs = () => { const authorRoute = `/u/${params.authorAddress}/c/${params.commentCid}`; const overviewSelectedClass = (isInProfileView || isInAuthorView) && - !isInAboutView && + !isInSidebarView && !isInProfileUpvotedView && !isInProfileDownvotedView && !isInProfileCommentsView && @@ -341,7 +341,7 @@ const Header = () => { const { suggested, title, shortAddress } = subplebbit || {}; const isMobile = useWindowWidth() < 640; - const isInAboutView = isAboutView(location.pathname); + const isInSidebarView = isSidebarView(location.pathname); const isInAllAboutView = isAllAboutView(location.pathname); const isInAllView = isAllView(location.pathname); const isInAuthorView = isAuthorView(location.pathname); @@ -360,10 +360,10 @@ const Header = () => { const hasStickyHeader = isInHomeView || isInNotFoundView || - (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView && !isInPostView && !isInAboutView) || - (isInProfileView && !isInAboutView) || + (isInSubplebbitView && !isInSubplebbitSubmitView && !isInSubplebbitSettingsView && !isInPostView && !isInSidebarView) || + (isInProfileView && !isInSidebarView) || (isInAllView && !isInAllAboutView) || - (isInAuthorView && !isInAboutView); + (isInAuthorView && !isInSidebarView); const logoSrc = isInSubplebbitView ? suggested?.avatarUrl : 'assets/logo/seedit.png'; const logoIsAvatar = isInSubplebbitView && suggested?.avatarUrl; const logoLink = isInSubplebbitView ? `/p/${params.subplebbitAddress}` : isInProfileView ? '/profile' : '/'; @@ -398,14 +398,14 @@ const Header = () => { {!isMobile && (
      - {(isInSubplebbitView || isInSubplebbitSubmitView || isInPostView || isInProfileView || isInAuthorView) && } + {(isInSubplebbitView || isInSubplebbitSubmitView || isInPostView || isInProfileView || isInAuthorView) && }
    )} {isMobile && (
      - {(isInHomeView || isInAllView || isInAboutView || isInSubplebbitView || isInSubplebbitSubmitView || isInPostView) && } + {(isInHomeView || isInAllView || isInSidebarView || isInSubplebbitView || isInSubplebbitSubmitView || isInPostView) && }
    )} diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index be7fe117..1f79d66e 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -5,7 +5,16 @@ import { Comment, useAccount, useBlock, Role, Subplebbit, useSubplebbitStats, us import styles from './sidebar.module.css'; import { getFormattedDate, getFormattedTimeDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils'; import { findSubplebbitCreator } from '../../lib/utils/user-utils'; -import { isAboutView, isAllView, isHomeAboutView, isHomeView, isPendingView, isPostView, isSubplebbitSettingsView, isSubplebbitsView } from '../../lib/utils/view-utils'; +import { + isSidebarView, + isAllView, + isHomeAboutView, + isHomeView, + isPendingView, + isPostView, + isSubplebbitSettingsView, + isSubplebbitsView, +} from '../../lib/utils/view-utils'; import Markdown from '../markdown'; import SearchBar from '../search-bar'; import SubscribeButton from '../subscribe-button'; @@ -145,7 +154,7 @@ const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit const location = useLocation(); const params = useParams(); - const isInAboutView = isAboutView(location.pathname); + const isInSidebarView = isSidebarView(location.pathname); const isInAllView = isAllView(location.pathname); const isInHomeAboutView = isHomeAboutView(location.pathname); const isInHomeView = isHomeView(location.pathname, params); @@ -196,7 +205,7 @@ const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit }; return ( -
    +
    {isInPostView && } diff --git a/src/hooks/use-is-mobile.ts b/src/hooks/use-is-mobile.ts new file mode 100644 index 00000000..fc7cd9f6 --- /dev/null +++ b/src/hooks/use-is-mobile.ts @@ -0,0 +1,8 @@ +import useWindowWidth from './use-window-width'; + +const useIsMobile = () => { + const windowWidth = useWindowWidth(); + return windowWidth < 640; +}; + +export default useIsMobile; diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index 18643cd4..c75a9f1b 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -17,22 +17,22 @@ export const getAboutLink = (pathname: string, params: ParamsType): string => { const decodedPathname = decodeURIComponent(pathname); if (decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`)) { - return `/p/${params.subplebbitAddress}/c/${params.commentCid}/about`; + return `/p/${params.subplebbitAddress}/c/${params.commentCid}/sidebar`; } else if (decodedPathname.startsWith(`/p/${params.subplebbitAddress}`)) { - return `/p/${params.subplebbitAddress}/about`; + return `/p/${params.subplebbitAddress}/sidebar`; } else if (decodedPathname.startsWith('/profile')) { - return '/profile/about'; + return '/profile/sidebar'; } else if (decodedPathname.startsWith('/u/')) { - return `/u/${params.authorAddress}/c/${params.commentCid}/about`; + return `/u/${params.authorAddress}/c/${params.commentCid}/sidebar`; } else if (decodedPathname.startsWith('/p/all')) { - return '/p/all/about'; + return '/p/all/sidebar'; } else { - return '/about'; + return '/sidebar'; } }; -export const isAboutView = (pathname: string): boolean => { - return pathname.endsWith('/about'); +export const isSidebarView = (pathname: string): boolean => { + return pathname.endsWith('/sidebar'); }; export const isAllView = (pathname: string): boolean => { @@ -40,7 +40,7 @@ export const isAllView = (pathname: string): boolean => { }; export const isAllAboutView = (pathname: string): boolean => { - return pathname === '/p/all/about'; + return pathname === '/p/all/sidebar'; }; export const isAuthorView = (pathname: string): boolean => { @@ -64,7 +64,7 @@ export const isHomeView = (pathname: string, params: ParamsType): boolean => { }; export const isHomeAboutView = (pathname: string): boolean => { - return pathname === '/about'; + return pathname === '/sidebar'; }; export const isInboxView = (pathname: string): boolean => { diff --git a/src/views/about/about.tsx b/src/views/about/about.tsx deleted file mode 100644 index b87b33f2..00000000 --- a/src/views/about/about.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useLocation, useParams } from 'react-router-dom'; -import Sidebar from '../../components/sidebar'; -import AuthorSidebar from '../../components/author-sidebar'; -import styles from './about.module.css'; -import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; -import { isAuthorView, isProfileView } from '../../lib/utils/view-utils'; - -const About = () => { - const location = useLocation(); - const isAuthor = isAuthorView(location.pathname); - const isProfile = isProfileView(location.pathname); - - const { commentCid, subplebbitAddress } = useParams(); - const subplebbit = useSubplebbit({ subplebbitAddress }); - const comment = useComment({ commentCid }); - - return
    {isProfile || isAuthor ? : }
    ; -}; - -export default About; diff --git a/src/views/about/index.ts b/src/views/about/index.ts deleted file mode 100644 index 823b29a0..00000000 --- a/src/views/about/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './about'; diff --git a/src/views/sidebar/index.ts b/src/views/sidebar/index.ts new file mode 100644 index 00000000..77d53326 --- /dev/null +++ b/src/views/sidebar/index.ts @@ -0,0 +1 @@ +export { default } from './sidebar'; diff --git a/src/views/about/about.module.css b/src/views/sidebar/sidebar.module.css similarity index 100% rename from src/views/about/about.module.css rename to src/views/sidebar/sidebar.module.css diff --git a/src/views/sidebar/sidebar.tsx b/src/views/sidebar/sidebar.tsx new file mode 100644 index 00000000..0f0c7384 --- /dev/null +++ b/src/views/sidebar/sidebar.tsx @@ -0,0 +1,32 @@ +import { useEffect } from 'react'; +import { useLocation, useNavigate, useParams } from 'react-router-dom'; +import Sidebar from '../../components/sidebar'; +import AuthorSidebar from '../../components/author-sidebar'; +import styles from './sidebar.module.css'; +import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { isAuthorView, isProfileView } from '../../lib/utils/view-utils'; +import useIsMobile from '../../hooks/use-is-mobile'; + +const SidebarView = () => { + const location = useLocation(); + const navigate = useNavigate(); + const isMobile = useIsMobile(); + const { commentCid, subplebbitAddress } = useParams(); + + useEffect(() => { + if (!isMobile && location.pathname.endsWith('/sidebar')) { + const newPath = location.pathname.replace(/\/sidebar$/, ''); + navigate(newPath || '/'); + } + }, [isMobile, location.pathname, navigate]); + + const isAuthor = isAuthorView(location.pathname); + const isProfile = isProfileView(location.pathname); + + const subplebbit = useSubplebbit({ subplebbitAddress }); + const comment = useComment({ commentCid }); + + return
    {isMobile && (isProfile || isAuthor ? : )}
    ; +}; + +export default SidebarView;