discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge branch '156/comments_microfixies' into 'dev'

Browse Source 
156/comments microfixies

See merge request discoursio/discoursio-webapp!51
This commit is contained in:
ilia tapazukk 2023-04-17 10:31:20 +00:00
commit ae32a0c4e4
10 changed files with 115 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Article/Comment.tsx
View File

@ -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<boolean>(false)
const [editMode, setEditMode] = createSignal<boolean>(false)
const [submitted, setSubmitted] = createSignal<boolean>(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 (
<li class={clsx(styles.comment, { [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen })}>
<Show when={!!body()}>
@ -201,7 +204,12 @@ export const Comment = (props: Props) => {
<Show when={isReplyVisible()}>
<Suspense fallback={<p>{t('Loading')}</p>}>
<CommentEditor placeholder={''} onSubmit={(value) => handleCreate(value)} />
<CommentEditor
placeholder={''}
clear={submitted()}
onSubmit={(value) => handleCreate(value)}
cancel={() => setIsReplyVisible(false)}
/>
</Suspense>
</Show>
</Show>

64
src/components/Article/CommentsTree.tsx
View File

@ -39,15 +39,16 @@ type Props = {
}
export const CommentsTree = (props: Props) => {
const { session } = useSession()
const { t } = useLocalize()
const [commentsOrder, setCommentsOrder] = createSignal<CommentsOrder>('createdAt')
const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
const [submitted, setSubmitted] = createSignal(false)
const {
reactionEntities,
actions: { createReaction }
} = useReactions()
const { t } = useLocalize()
const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
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<boolean>(false)
const handleSubmitComment = async (value) => {
try {
await createReaction({
@ -113,38 +112,39 @@ export const CommentsTree = (props: Props) => {
<span class={styles.newReactions}>&nbsp;+{newReactions().length}</span>
</Show>
</h2>
<ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
<Show when={newReactions().length > 0}>
<li classList={{ selected: commentsOrder() === 'newOnly' }}>
<Show when={comments().length > 0}>
<ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
<Show when={newReactions().length > 0}>
<li classList={{ selected: commentsOrder() === 'newOnly' }}>
<Button
variant="inline"
value={t('New only')}
onClick={() => {
setCommentsOrder('newOnly')
}}
/>
</li>
</Show>
<li classList={{ selected: commentsOrder() === 'createdAt' }}>
<Button
variant="inline"
value={t('New only')}
value={t('By time')}
onClick={() => {
setCommentsOrder('newOnly')
setCommentsOrder('createdAt')
}}
/>
</li>
</Show>
<li classList={{ selected: commentsOrder() === 'createdAt' }}>
<Button
variant="inline"
value={t('By time')}
onClick={() => {
setCommentsOrder('createdAt')
}}
/>
</li>
<li classList={{ selected: commentsOrder() === 'rating' }}>
<Button
variant="inline"
value={t('By rating')}
onClick={() => {
setCommentsOrder('rating')
}}
/>
</li>
</ul>
<li classList={{ selected: commentsOrder() === 'rating' }}>
<Button
variant="inline"
value={t('By rating')}
onClick={() => {
setCommentsOrder('rating')
}}
/>
</li>
</ul>
</Show>
</div>
<ul class={styles.comments}>
<For each={sortedComments().filter((r) => !r.replyTo)}>

25
src/components/Article/FullArticle.tsx
View File

@ -23,6 +23,7 @@ import { useLocalize } from '../../context/localize'
interface ArticleProps {
article: Shout
scrollToComments?: boolean
}
interface MediaItem {
@ -88,6 +89,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()
@ -186,12 +203,10 @@ export const FullArticle = (props: ArticleProps) => {
{props.article.stat?.viewed}
</div>
</Show>
<a href="#comments" class={styles.shoutStatsItem}>
<div class={styles.shoutStatsItem} onClick={scrollToComments}>
<Icon name="comment" class={styles.icon} />
{props.article.stat?.commented ?? ''}
</a>
</div>
<div class={styles.shoutStatsItem}>
<SharePopup
title={props.article.title}
@ -251,7 +266,7 @@ export const FullArticle = (props: ArticleProps) => {
)}
</For>
</div>
<div id="comments">
<div id="comments" ref={(el) => (commentsRef.current = el)}>
<Show when={isReactionsLoaded()}>
<CommentsTree
shoutId={props.article.id}

10
src/components/Nav/Header.tsx
View File

@ -15,9 +15,11 @@ import { useLocalize } from '../../context/localize'
type Props = {
title?: string
slug?: string
isHeaderFixed?: boolean
articleBody?: string
cover?: string
scrollToComments?: (value: boolean) => void
}
export const Header = (props: Props) => {
@ -78,6 +80,10 @@ export const Header = (props: Props) => {
})
})
const scrollToComments = (value) => {
props.scrollToComments(value)
}
return (
<header
class={styles.mainHeader}
@ -138,9 +144,9 @@ export const Header = (props: Props) => {
containerCssClass={styles.control}
trigger={<Icon name="share-outline" class={styles.icon} />}
/>
<a href={getPagePath(router, 'inbox')} class={styles.control}>
<div onClick={() => scrollToComments(true)} class={styles.control}>
<Icon name="comments-outline" class={styles.icon} />
</a>
</div>
<a href={getPagePath(router, 'create')} class={styles.control}>
<Icon name="pencil-outline" class={styles.icon} />
</a>

5
src/components/_shared/CommentEditor/CommentEditor.tsx
View File

@ -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 (
<div class={styles.commentEditor}>
<div class={clsx('ProseMirrorOverrides', styles.textarea)} ref={(el) => (editorElRef.current = el)} />

13
src/components/_shared/PageLayout.tsx
View File

@ -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<boolean>(false)
createEffect(() => {
if (props.scrollToComments) {
props.scrollToComments(scrollToComments())
}
})
return (
<>
<Meta name="viewport" content="width=device-width, initial-scale=1" />
<Header
slug={props.slug}
title={props.headerTitle}
articleBody={props.articleBody}
cover={props.articleBody}
isHeaderFixed={isHeaderFixed}
scrollToComments={(value) => setScrollToComments(value)}
/>
<main
class={clsx('main-content', {

4
src/components/_shared/Popup/Popup.module.scss
View File

@ -2,6 +2,10 @@
position: relative;
}
.trigger {
cursor: pointer;
}
.popup {
background: #fff;
color: #000;

4
src/components/_shared/Popup/Popup.tsx
View File

@ -37,7 +37,9 @@ export const Popup = (props: PopupProps) => {
return (
<span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>
<span onClick={toggle}>{props.trigger}</span>
<span class={styles.trigger} onClick={toggle}>
{props.trigger}
</span>
<Show when={isVisible()}>
<div
class={clsx(styles.popup, props.popupCssClass, {

15
src/pages/article.page.tsx
View File

@ -1,4 +1,4 @@
import { createMemo, onMount, Show } from 'solid-js'
import { createMemo, createSignal, onMount, Show } from 'solid-js'
import type { Shout } from '../graphql/types.gen'
import { PageLayout } from '../components/_shared/PageLayout'
import type { PageProps } from './types'
@ -48,12 +48,21 @@ export const ArticlePage = (props: PageProps) => {
script.dataset.ackeeDomainId = '1004abeb-89b2-4e85-ad97-74f8d2c8ed2d'
document.body.appendChild(script)
})
const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
return (
<PageLayout headerTitle={article()?.title || ''} articleBody={article()?.body} cover={article()?.cover}>
<PageLayout
headerTitle={article()?.title || ''}
slug={article()?.slug}
articleBody={article()?.body}
cover={article()?.cover}
scrollToComments={(value) => {
setScrollToComments(value)
}}
>
<ReactionsProvider>
<Show when={Boolean(article())} fallback={<Loading />}>
<FullArticle article={article()} />
<FullArticle article={article()} scrollToComments={scrollToComments()} />
</Show>
</ReactionsProvider>
</PageLayout>

13
src/styles/Article.module.scss
View File

@ -172,13 +172,20 @@ img {
a {
border: none;
text-decoration: none;
&:hover {
.icon {
filter: invert(1);
background: unset;
color: #000;
img {
filter: unset;
}
}
}
&:hover {
cursor: pointer;
}
}
.shoutStatsItemLikes {