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

comments-hotfix

Browse Source
This commit is contained in:
Untone 2024-02-29 20:51:07 +03:00
parent a87efec9dc
commit deebe79f55
2 changed files with 24 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,41 +1,20 @@
import { clsx } from 'clsx' import {clsx} from 'clsx'
import { For, Show, createMemo, createSignal, lazy, onMount } from 'solid-js' import {createMemo, createSignal, For, lazy, onMount, Show} from 'solid-js'
import { useLocalize } from '../../context/localize' import {useLocalize} from '../../context/localize'
import { useReactions } from '../../context/reactions' import {useReactions} from '../../context/reactions'
import { useSession } from '../../context/session' import {useSession} from '../../context/session'
import { Author, Reaction, ReactionKind } from '../../graphql/schema/core.gen' import {Author, Reaction, ReactionKind, ReactionSort} from '../../graphql/schema/core.gen'
import { byCreated } from '../../utils/sortby' import {byCreated, byStat} from '../../utils/sortby'
import { Button } from '../_shared/Button' import {Button} from '../_shared/Button'
import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated' import {ShowIfAuthenticated} from '../_shared/ShowIfAuthenticated'
import { Comment } from './Comment' import {Comment} from './Comment'
import styles from './Article.module.scss' import styles from './Article.module.scss'
const SimplifiedEditor = lazy(() => import('../Editor/SimplifiedEditor')) const SimplifiedEditor = lazy(() => import('../Editor/SimplifiedEditor'))
type CommentsOrder = 'createdAt' | 'rating' | 'newOnly'
const sortCommentsByRating = (a: Reaction, b: Reaction): -1 | 0 | 1 => {
if (a.reply_to && b.reply_to) {
return 0
}
const x = a.stat?.rating || 0
const y = b.stat?.rating || 0
if (x > y) {
return 1
}
if (x < y) {
return -1
}
return 0
}
type Props = { type Props = {
articleAuthors: Author[] articleAuthors: Author[]
shoutSlug: string shoutSlug: string
@ -45,7 +24,8 @@ type Props = {
export const CommentsTree = (props: Props) => { export const CommentsTree = (props: Props) => {
const { author } = useSession() const { author } = useSession()
const { t } = useLocalize() const { t } = useLocalize()
const [commentsOrder, setCommentsOrder] = createSignal<CommentsOrder>('createdAt') const [commentsOrder, setCommentsOrder] = createSignal<ReactionSort>(ReactionSort.Newest)
const [onlyNew, setOnlyNew] = createSignal(false)
const [newReactions, setNewReactions] = createSignal<Reaction[]>([]) const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
const [clearEditor, setClearEditor] = createSignal(false) const [clearEditor, setClearEditor] = createSignal(false)
const [clickedReplyId, setClickedReplyId] = createSignal<number>() const [clickedReplyId, setClickedReplyId] = createSignal<number>()
@ -59,12 +39,12 @@ export const CommentsTree = (props: Props) => {
let newSortedComments = [...comments()] let newSortedComments = [...comments()]
newSortedComments = newSortedComments.sort(byCreated) newSortedComments = newSortedComments.sort(byCreated)
if (commentsOrder() === 'newOnly') { if (onlyNew()) {
return newReactions().reverse() return newReactions().sort(byCreated).reverse()
} }
if (commentsOrder() === 'rating') { if (commentsOrder() === ReactionSort.Like) {
newSortedComments = newSortedComments.sort(sortCommentsByRating) newSortedComments = newSortedComments.sort(byStat('rating'))
} }
return newSortedComments return newSortedComments
}) })
@ -88,7 +68,7 @@ export const CommentsTree = (props: Props) => {
setCookie() setCookie()
} }
}) })
const handleSubmitComment = async (value) => { const handleSubmitComment = async (value: string) => {
try { try {
await createReaction({ await createReaction({
kind: ReactionKind.Comment, kind: ReactionKind.Comment,
@ -114,31 +94,29 @@ export const CommentsTree = (props: Props) => {
<Show when={comments().length > 0}> <Show when={comments().length > 0}>
<ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}> <ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
<Show when={newReactions().length > 0}> <Show when={newReactions().length > 0}>
<li classList={{ 'view-switcher__item--selected': commentsOrder() === 'newOnly' }}> <li classList={{ 'view-switcher__item--selected': onlyNew() }}>
<Button <Button
variant="light" variant="light"
value={t('New only')} value={t('New only')}
onClick={() => { onClick={() => setOnlyNew(!onlyNew())}
setCommentsOrder('newOnly')
}}
/> />
</li> </li>
</Show> </Show>
<li classList={{ 'view-switcher__item--selected': commentsOrder() === 'createdAt' }}> <li classList={{ 'view-switcher__item--selected': commentsOrder() === ReactionSort.Newest }}>
<Button <Button
variant="light" variant="light"
value={t('By time')} value={t('By time')}
onClick={() => { onClick={() => {
setCommentsOrder('createdAt') setCommentsOrder(ReactionSort.Newest)
}} }}
/> />
</li> </li>
<li classList={{ 'view-switcher__item--selected': commentsOrder() === 'rating' }}> <li classList={{ 'view-switcher__item--selected': commentsOrder() === ReactionSort.Like }}>
<Button <Button
variant="light" variant="light"
value={t('By rating')} value={t('By rating')}
onClick={() => { onClick={() => {
setCommentsOrder('rating') setCommentsOrder(ReactionSort.Like)
}} }}
/> />
</li> </li>

2
src/components/Views/Feed/Feed.tsx
View File

@ -145,7 +145,7 @@ export const FeedView = (props: Props) => {
} }
const loadTopComments = async () => { const loadTopComments = async () => {
const comments = await loadReactionsBy({ by: { comment: true }, limit: 5 }) const comments = await loadReactionsBy({ by: { comment: true }, limit: 50 })
setTopComments(comments) setTopComments(comments)
} }