diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index 9f632f7a..35442400 100644 --- a/src/components/Article/Article.module.scss +++ b/src/components/Article/Article.module.scss @@ -144,6 +144,7 @@ img { .shoutStatsItem { @include font-size(1.5rem); + font-weight: 500; display: inline-block; margin: 0 3.2rem 1em 0; @@ -175,6 +176,19 @@ img { a { border: none; + text-decoration: none; + &:hover { + background: unset; + color: #000; + + img { + filter: unset; + } + } + } + + &:hover { + cursor: pointer; } } diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index c9fb2671..d099e0df 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -1,7 +1,7 @@ import styles from './Comment.module.scss' import { Icon } from '../_shared/Icon' import { AuthorCard } from '../Author/Card' -import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js' +import { Show, createMemo, createSignal, For, lazy, Suspense, createEffect } from 'solid-js' import { clsx } from 'clsx' import type { Author, Reaction } from '../../graphql/types.gen' import MD from './MD' @@ -30,6 +30,7 @@ export const Comment = (props: Props) => { const [isReplyVisible, setIsReplyVisible] = createSignal(false) const [loading, setLoading] = createSignal(false) const [editMode, setEditMode] = createSignal(false) + const [submitted, setSubmitted] = createSignal(false) const { session } = useSession() const { @@ -66,6 +67,7 @@ export const Comment = (props: Props) => { }) setIsReplyVisible(false) setLoading(false) + setSubmitted(true) } catch (error) { console.error('[handleCreate reaction]:', error) } @@ -94,6 +96,7 @@ export const Comment = (props: Props) => { } const createdAt = new Date(comment()?.createdAt) + return (
  • props.lastSeen })}> @@ -105,7 +108,6 @@ export const Comment = (props: Props) => { { {t('Loading')}

    }> - handleCreate(value)} /> + handleCreate(value)} + cancel={() => setIsReplyVisible(false)} + />     diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx index 81daa4e0..119d7a04 100644 --- a/src/components/Article/CommentsTree.tsx +++ b/src/components/Article/CommentsTree.tsx @@ -39,15 +39,16 @@ type Props = { } export const CommentsTree = (props: Props) => { + const { session } = useSession() + const { t } = useLocalize() const [commentsOrder, setCommentsOrder] = createSignal('createdAt') + const [newReactions, setNewReactions] = createSignal([]) + const [submitted, setSubmitted] = createSignal(false) const { reactionEntities, actions: { createReaction } } = useReactions() - const { t } = useLocalize() - const [newReactions, setNewReactions] = createSignal([]) - const comments = createMemo(() => Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT') ) @@ -78,7 +79,7 @@ export const CommentsTree = (props: Props) => { setCookie() } else if (currentDate > dateFromLocalStorage) { const newComments = comments().filter((c) => { - if (c.replyTo) { + if (c.replyTo || c.createdBy.slug === session()?.user.slug) { return } const created = new Date(c.createdAt) @@ -89,8 +90,6 @@ export const CommentsTree = (props: Props) => { } }) - const { session } = useSession() - const [submitted, setSubmitted] = createSignal(false) const handleSubmitComment = async (value) => { try { await createReaction({ @@ -113,41 +112,42 @@ export const CommentsTree = (props: Props) => {  +{newReactions().length} - -
      - 0}> -
    • + 0}> +
        + 0}> +
      • +
        • +         +
        • - -
      • -
        • -
      • -
        • -
      +
    • +
      • +
    +
      !r.replyTo)}> diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 9eef962c..0b258005 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -22,6 +22,7 @@ import styles from './Article.module.scss' interface ArticleProps { article: Shout + scrollToComments?: boolean } interface MediaItem { @@ -87,6 +88,22 @@ export const FullArticle = (props: ArticleProps) => { return mi }) + const commentsRef: { current: HTMLDivElement } = { current: null } + + const scrollToComments = () => { + window.scrollTo({ + top: commentsRef.current.offsetTop - 96, + left: 0, + behavior: 'smooth' + }) + } + + createEffect(() => { + if (props.scrollToComments) { + scrollToComments() + } + }) + const { actions: { loadReactionsBy } } = useReactions() @@ -122,10 +139,12 @@ export const FullArticle = (props: ArticleProps) => { )} -
      + +
      +
      @@ -183,12 +202,10 @@ export const FullArticle = (props: ArticleProps) => { {props.article.stat?.viewed}
      - - +
      {props.article.stat?.commented ?? ''} - - +
      { {(a) => (
      - +
      )}
      -
      +
      (commentsRef.current = el)}> { - +
    + +
    +
    + + {(follower: Author) => ( +
    + +
    + )} +     +
    +
    +     diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx index e008a519..14413a0f 100644 --- a/src/components/Views/Feed.tsx +++ b/src/components/Views/Feed.tsx @@ -122,7 +122,7 @@ export const FeedView = () => { {(author) => (
  • - +
    • )} @@ -153,7 +153,7 @@ export const FeedView = () => {
    diff --git a/src/components/_shared/CommentEditor/CommentEditor.tsx b/src/components/_shared/CommentEditor/CommentEditor.tsx index 819627cf..e17e4ba9 100644 --- a/src/components/_shared/CommentEditor/CommentEditor.tsx +++ b/src/components/_shared/CommentEditor/CommentEditor.tsx @@ -21,6 +21,7 @@ type Props = { placeholder?: string onSubmit: (value: string) => void clear?: boolean + cancel?: () => void initialContent?: string } @@ -69,6 +70,9 @@ const CommentEditor = (props: Props) => { const clearEditor = () => { editorViewRef.current.destroy() initEditor() + if (props.cancel) { + props.cancel() + } } createEffect(() => { @@ -76,7 +80,6 @@ const CommentEditor = (props: Props) => { clearEditor() } }) - return (
    (editorElRef.current = el)} /> diff --git a/src/components/_shared/PageLayout.tsx b/src/components/_shared/PageLayout.tsx index 30a7e84c..23ca13fd 100644 --- a/src/components/_shared/PageLayout.tsx +++ b/src/components/_shared/PageLayout.tsx @@ -2,7 +2,7 @@ import type { JSX } from 'solid-js' import { Header } from '../Nav/Header' import { Footer } from '../Discours/Footer' -import { Show } from 'solid-js' +import { createEffect, createSignal, Show } from 'solid-js' import { clsx } from 'clsx' import '../../styles/app.scss' import styles from './PageLayout.module.scss' @@ -10,6 +10,7 @@ import { Meta } from '@solidjs/meta' type PageLayoutProps = { headerTitle?: string + slug?: string articleBody?: string cover?: string children: JSX.Element @@ -17,19 +18,29 @@ type PageLayoutProps = { hideFooter?: boolean class?: string withPadding?: boolean + scrollToComments?: (value: boolean) => void } export const PageLayout = (props: PageLayoutProps) => { const isHeaderFixed = props.isHeaderFixed === undefined ? true : props.isHeaderFixed + const [scrollToComments, setScrollToComments] = createSignal(false) + + createEffect(() => { + if (props.scrollToComments) { + props.scrollToComments(scrollToComments()) + } + }) return ( <>
    setScrollToComments(value)} />
    { return ( (containerRef.current = el)}> - {props.trigger} + + {props.trigger} +
    { script.dataset.ackeeDomainId = '1004abeb-89b2-4e85-ad97-74f8d2c8ed2d' document.body.appendChild(script) }) + const [scrollToComments, setScrollToComments] = createSignal(false) return ( - + { + setScrollToComments(value) + }} + > }> - +