diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 6c3d3aac..4d903442 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -229,5 +229,7 @@ "You've confirmed email": "You've confirmed email", "You've reached a non-existed page": "You've reached a non-existed page", "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Your name will appear on your profile page and as your signature in publications, comments and responses", - "zine": "zine" + "zine": "zine", + "By time": "By time", + "New only": "New only" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 519400c6..edbae3ef 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -247,5 +247,7 @@ "topics": "темы", "user already exist": "пользователь уже существует", "view": "просмотр", - "zine": "журнал" + "zine": "журнал", + "By time": "По порядку", + "New only": "Только новые" } diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx index 4d05f3d9..392b12cf 100644 --- a/src/components/Article/CommentsTree.tsx +++ b/src/components/Article/CommentsTree.tsx @@ -3,18 +3,17 @@ import { Comment } from './Comment' import styles from '../../styles/Article.module.scss' import { clsx } from 'clsx' import { Loading } from '../_shared/Loading' -import { Author, ReactionKind } from '../../graphql/types.gen' +import { Author, Reaction, ReactionKind } from '../../graphql/types.gen' import { useSession } from '../../context/session' import CommentEditor from '../_shared/CommentEditor' -import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient' import { Button } from '../_shared/Button' -import { createStorage } from '@solid-primitives/storage' import { useReactions } from '../../context/reactions' import { byCreated } from '../../utils/sortby' import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated' import { useLocalize } from '../../context/localize' +import Cookie from 'js-cookie' -type CommentsOrder = 'createdAt' | 'rating' +type CommentsOrder = 'createdAt' | 'rating' | 'newOnly' type Props = { commentAuthors: Author[] @@ -33,8 +32,8 @@ export const CommentsTree = (props: Props) => { const { t } = useLocalize() // TODO: server side? - const [store, setStore] = createStorage({ api: typeof localStorage === 'undefined' ? {} : localStorage }) const [newReactionsCount, setNewReactionsCount] = createSignal(0) + const [newReactions, setNewReactions] = createSignal([]) const comments = createMemo(() => Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT') @@ -64,19 +63,29 @@ export const CommentsTree = (props: Props) => { }) } + if (commentsOrder() === 'newOnly') { + newSortedComments = newReactions() + } + newSortedComments.reverse() return newSortedComments }) const updateNewReactionsCount = () => { - const storeValue = Number(store[`${props.shoutSlug}`]) - const setVal = () => setStore(`${props.shoutSlug}`, `${comments().length}`) - if (!store[`${props.shoutSlug}`]) { - setVal() - } else if (storeValue < comments().length) { - setNewReactionsCount(comments().length - storeValue) - setVal() + const dateFromCookie = new Date(Cookie.get(`${props.shoutSlug}`)).valueOf() + const setCookie = () => Cookie.set(`${props.shoutSlug}`, `${Date.now()}`) + if (!dateFromCookie) { + setCookie() + } else if (Date.now() > dateFromCookie) { + const newComments = comments().filter((c) => { + if (c.replyTo) return + const commentDate = new Date(c.createdAt).valueOf() + return commentDate > dateFromCookie + }) + setNewReactions(newComments) + setNewReactionsCount(newComments.length) + setCookie() } } @@ -120,6 +129,17 @@ export const CommentsTree = (props: Props) => {