From 179d2f54fd12752c26c0065eb3bc2e6c0aa99962 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Tue, 24 Oct 2023 15:45:23 +0200 Subject: [PATCH] feat(comments): add comments view --- .../header/account-bar/account-bar.tsx | 2 +- .../comments-buttons.module.css | 36 ++++++++++++++ .../comments-buttons/comments-buttons.tsx | 34 +++++++++++++ .../header/comments-buttons/index.ts | 1 + src/components/header/header.module.css | 34 ------------- src/components/header/header.tsx | 49 ++++++------------- src/components/header/index.ts | 4 +- src/components/header/sort-buttons/index.ts | 1 + .../sort-buttons/sort-buttons.module.css | 33 +++++++++++++ .../header/sort-buttons/sort-buttons.tsx | 47 ++++++++++++++++++ src/components/post/post-tools/post-tools.tsx | 2 +- src/components/post/post.tsx | 6 +-- 12 files changed, 174 insertions(+), 75 deletions(-) create mode 100644 src/components/header/comments-buttons/comments-buttons.module.css create mode 100644 src/components/header/comments-buttons/comments-buttons.tsx create mode 100644 src/components/header/comments-buttons/index.ts create mode 100644 src/components/header/sort-buttons/index.ts create mode 100644 src/components/header/sort-buttons/sort-buttons.module.css create mode 100644 src/components/header/sort-buttons/sort-buttons.tsx diff --git a/src/components/header/account-bar/account-bar.tsx b/src/components/header/account-bar/account-bar.tsx index 6f92e202..5109737b 100644 --- a/src/components/header/account-bar/account-bar.tsx +++ b/src/components/header/account-bar/account-bar.tsx @@ -14,7 +14,7 @@ const AccountBar: FC = () => {
e.preventDefault()}> - {account?.author.shortAddress} + {account?.author?.shortAddress} | diff --git a/src/components/header/comments-buttons/comments-buttons.module.css b/src/components/header/comments-buttons/comments-buttons.module.css new file mode 100644 index 00000000..0a0f89dc --- /dev/null +++ b/src/components/header/comments-buttons/comments-buttons.module.css @@ -0,0 +1,36 @@ +.pageName { + font-weight: bold; + margin-right: 1ex; + font-variant: small-caps; + font-size: 1.2em; + padding: 43px 0 0 15px; +} + +.pageName a { + color: var(--text); + text-decoration: none; +} + +.tabMenu { + list-style: none; + white-space: nowrap; + display: inline-block; + margin-bottom: -43px; + padding-left: 5px; + transform: translateY(0.5px); +} + +.tabMenu li { + display: inline; + font-weight: bold; +} + +.tabMenu li a { + padding: 2px 6px 0 6px; + text-decoration: none; + line-height: 20px; + color: var(--text-secondary); + background-color: var(--background); + border: 1px solid var(--border-primary); + border-bottom: 1px solid var(--background); +} \ No newline at end of file diff --git a/src/components/header/comments-buttons/comments-buttons.tsx b/src/components/header/comments-buttons/comments-buttons.tsx new file mode 100644 index 00000000..0077fe6e --- /dev/null +++ b/src/components/header/comments-buttons/comments-buttons.tsx @@ -0,0 +1,34 @@ +import { FC } from 'react'; +import { Link, useParams } from 'react-router-dom'; +import styles from './comments-buttons.module.css'; +import { useTranslation } from 'react-i18next'; +import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; + +const CommentsButtons: FC = () => { + const { t } = useTranslation(); + const { subplebbitAddress, commentCid } = useParams(); + const subplebbit = useSubplebbit({ subplebbitAddress }); + const { title, shortAddress } = subplebbit || {}; + + return ( + <> + + { + e.preventDefault(); + }} + > + {title || shortAddress} + + + + + ); +}; + +export default CommentsButtons; diff --git a/src/components/header/comments-buttons/index.ts b/src/components/header/comments-buttons/index.ts new file mode 100644 index 00000000..19c6b4d3 --- /dev/null +++ b/src/components/header/comments-buttons/index.ts @@ -0,0 +1 @@ +export {default} from './comments-buttons'; \ No newline at end of file diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css index 10614dd9..27f7798b 100644 --- a/src/components/header/header.module.css +++ b/src/components/header/header.module.css @@ -31,40 +31,6 @@ transform: translateY(0.5px); } -.tabMenu { - list-style: none; - white-space: nowrap; - display: inline-block; - margin-bottom: -43px; - padding-left: 15px; - transform: translateY(0.5px); -} - -.tabMenu li { - display: inline; - font-weight: bold; - padding: 0px 3px; -} - -.tabMenu li .selected { - color: var(--text-secondary); - background-color: var(--background); - border: 1px solid var(--border-primary); - border-bottom: 1px solid var(--background); -} - -.tabMenu li .choice { - color: var(--text-primary); - background-color: var(--background-secondary); - border-bottom: 1px solid var(--border-primary); -} - -.tabMenu li a { - padding: 2px 6px 0 6px; - text-decoration: none; - line-height: 20px; -} - .temporary { display: flex; position: absolute; diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index 67c04ebf..dd1d4365 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -1,15 +1,15 @@ -import { FC, useState, useEffect } from 'react'; -import { Link, useParams } from 'react-router-dom'; +import { FC } from 'react'; +import { Link, useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import styles from './header.module.css'; import useTheme from '../../hooks/use-theme'; import AccountBar from './account-bar'; - -const choices = ['/hot', '/new', '/active', '/controversialAll', '/topAll']; +import { SortButtons, CommentsButtons } from '../header'; // prettier-ignore const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh']; +// TODO: move to settings page const Theme: FC = () => { const [theme, setTheme] = useTheme(); const { t } = useTranslation(); @@ -24,6 +24,7 @@ const Theme: FC = () => { ); }; +// TODO: move to settings page const Language: FC = () => { const { i18n } = useTranslation(); const { changeLanguage, language } = i18n; @@ -46,32 +47,17 @@ const Language: FC = () => { }; const Header: FC = () => { - const { sortType } = useParams<{ sortType: string }>(); - const { t } = useTranslation(); const [theme] = useTheme(); - const [selected, setSelected] = useState(sortType || '/topMonth'); + const { sortType, subplebbitAddress, commentCid } = useParams(); + const location = useLocation(); - const labels = [t('header_hot'), t('header_new'), t('header_active'), t('header_controversial'), t('header_top')]; + let buttons = null; - useEffect(() => { - if (sortType) { - setSelected('/' + sortType); - } else { - setSelected('/hot'); - } - }, [sortType]); - - const handleSelect = (choice: string) => { - setSelected(choice); - }; - - const menuItems = choices.map((choice, index) => ( -
  • - handleSelect(choice)}> - {labels[index]} - -
    • - )); + if (location.pathname === `/p/${subplebbitAddress}/c/${commentCid}`) { + buttons = ; + } else if ((location.pathname === `/`) || (sortType && ['hot', 'new', 'active', 'controversialAll', 'topAll'].includes(sortType))) { + buttons = ; + } return (
    @@ -81,14 +67,7 @@ const Header: FC = () => { logo logo -
      - {menuItems} -
    • - event.preventDefault()}> - {t('header_wiki')} - -
      • -
    + {buttons}  
    diff --git a/src/components/header/index.ts b/src/components/header/index.ts index 66b41609..f7a1b03e 100644 --- a/src/components/header/index.ts +++ b/src/components/header/index.ts @@ -1,2 +1,4 @@ export {default} from './header'; -export {default as AccountBar} from './account-bar'; \ No newline at end of file +export {default as AccountBar} from './account-bar'; +export {default as SortButtons} from './sort-buttons'; +export {default as CommentsButtons} from './comments-buttons'; \ No newline at end of file diff --git a/src/components/header/sort-buttons/index.ts b/src/components/header/sort-buttons/index.ts new file mode 100644 index 00000000..6b5e8e02 --- /dev/null +++ b/src/components/header/sort-buttons/index.ts @@ -0,0 +1 @@ +export {default} from './sort-buttons'; \ No newline at end of file diff --git a/src/components/header/sort-buttons/sort-buttons.module.css b/src/components/header/sort-buttons/sort-buttons.module.css new file mode 100644 index 00000000..ed5581cd --- /dev/null +++ b/src/components/header/sort-buttons/sort-buttons.module.css @@ -0,0 +1,33 @@ +.tabMenu { + list-style: none; + white-space: nowrap; + display: inline-block; + margin-bottom: -43px; + padding-left: 15px; + transform: translateY(0.5px); +} + +.tabMenu li { + display: inline; + font-weight: bold; + padding: 0px 3px; +} + +.tabMenu li .selected { + color: var(--text-secondary); + background-color: var(--background); + border: 1px solid var(--border-primary); + border-bottom: 1px solid var(--background); +} + +.tabMenu li .choice { + color: var(--text-primary); + background-color: var(--background-secondary); + border-bottom: 1px solid var(--border-primary); +} + +.tabMenu li a { + padding: 2px 6px 0 6px; + text-decoration: none; + line-height: 20px; +} \ No newline at end of file diff --git a/src/components/header/sort-buttons/sort-buttons.tsx b/src/components/header/sort-buttons/sort-buttons.tsx new file mode 100644 index 00000000..44159af7 --- /dev/null +++ b/src/components/header/sort-buttons/sort-buttons.tsx @@ -0,0 +1,47 @@ +import { FC, useEffect, useState } from 'react'; +import { Link, useParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import styles from './sort-buttons.module.css'; + +const choices = ['/hot', '/new', '/active', '/controversialAll', '/topAll']; + +const SortButtons: FC = () => { + const { sortType } = useParams<{ sortType: string }>(); + const { t } = useTranslation(); + const [selected, setSelected] = useState(sortType || '/topMonth'); + + const labels = [t('header_hot'), t('header_new'), t('header_active'), t('header_controversial'), t('header_top')]; + + const handleSelect = (choice: string) => { + setSelected(choice); + }; + + useEffect(() => { + if (sortType) { + setSelected('/' + sortType); + } else { + setSelected('/hot'); + } + }, [sortType]); + + const menuItems = choices.map((choice, index) => ( +
  • + handleSelect(choice)}> + {labels[index]} + +
    • + )); + + return ( +
      + {menuItems} +
    • + event.preventDefault()}> + {t('header_wiki')} + +
      • +
    + ); +}; + +export default SortButtons; diff --git a/src/components/post/post-tools/post-tools.tsx b/src/components/post/post-tools/post-tools.tsx index 993a7e2e..5477b616 100644 --- a/src/components/post/post-tools/post-tools.tsx +++ b/src/components/post/post-tools/post-tools.tsx @@ -12,7 +12,7 @@ interface PostToolsProps { const PostTools: FC = ({ commentCid }) => { const comment = useComment({ commentCid }); const subplebbitAddress = comment.subplebbitAddress; - const { cid, replyCount, spoiler } = comment; + const { cid, replyCount, spoiler } = comment || {}; const { t } = useTranslation(); return ( diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index c12532c0..2f7bcba1 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -67,12 +67,12 @@ const Post: FC = ({ post, index }) => {

    {t('post_submitted')} {utils.getFormattedTime(timestamp)} {t('post_by')}  - e.preventDefault()}> - u/{author.shortAddress} + e.preventDefault()}> + u/{author?.shortAddress}  {t('post_to')} e.preventDefault()}> -  p/{subplebbit.shortAddress} +  p/{subplebbit?.shortAddress}