Show new comments

src/components/Article/Comment.module.scss

@@ -1,16 +1,17 @@
 .comment {
-  margin: 0 -2.4rem 0.5em;
-  padding: 0.8rem 2.4rem;
+  margin: 0.5em 0;
+  padding: 1rem;
   transition: background-color 0.3s;
   position: relative;
   list-style: none;
 
-  @include media-breakpoint-down(sm) {
-    margin-right: -1.2rem;
+  &.isNew {
+    border-radius: 6px;
+    background: rgba(38, 56, 217, 0.05);
   }
 
-  &:last-child {
-    margin-bottom: 0;
+  @include media-breakpoint-down(sm) {
+    margin-right: -1.2rem;
   }
 
   .comment {
@@ -196,6 +197,7 @@
 
 .commentDetails {
   display: flex;
+  padding: 1rem 0.2rem 0;
   margin-bottom: 1.2rem;
 }
 

src/components/Article/Comment.tsx

@@ -13,6 +13,8 @@ import { useReactions } from '../../context/reactions'
 import { useSnackbar } from '../../context/snackbar'
 import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
 import { useLocalize } from '../../context/localize'
+import Cookie from 'js-cookie'
+
 const CommentEditor = lazy(() => import('../_shared/CommentEditor'))
 
 type Props = {
@@ -20,6 +22,7 @@ type Props = {
   compact?: boolean
   isArticleAuthor?: boolean
   sortedComments?: Reaction[]
+  lastSeen?: Date
 }
 
 export const Comment = (props: Props) => {
@@ -37,7 +40,7 @@ export const Comment = (props: Props) => {
     actions: { showSnackbar }
   } = useSnackbar()
 
-  const canEdit = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug)
+  const isCommentAuthor = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug)
 
   const comment = createMemo(() => props.comment)
   const body = createMemo(() => (comment().body || '').trim())
@@ -90,8 +93,9 @@ export const Comment = (props: Props) => {
     }
   }
 
+  const createdAt = new Date(comment()?.createdAt)
   return (
-    <li class={styles.comment}>
+    <li class={clsx(styles.comment, { [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen })}>
       <Show when={!!body()}>
         <div class={styles.commentContent}>
           <Show
@@ -169,7 +173,7 @@ export const Comment = (props: Props) => {
                   {loading() ? t('Loading') : t('Reply')}
                 </button>
               </ShowIfAuthenticated>
-              <Show when={canEdit()}>
+              <Show when={isCommentAuthor()}>
                 <button
                   class={clsx(styles.commentControl, styles.commentControlEdit)}
                   onClick={toggleEditMode}
@@ -222,6 +226,7 @@ export const Comment = (props: Props) => {
                 sortedComments={props.sortedComments}
                 isArticleAuthor={props.isArticleAuthor}
                 comment={c}
+                lastSeen={props.lastSeen}
               />
             )}
           </For>

src/components/Article/CommentsTree.tsx

@@ -47,8 +47,6 @@ export const CommentsTree = (props: Props) => {
   } = useReactions()
 
   const { t } = useLocalize()
-
-  const [newReactionsCount, setNewReactionsCount] = createSignal<number>(0)
   const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
 
   const comments = createMemo(() =>
@@ -72,31 +70,27 @@ export const CommentsTree = (props: Props) => {
     return newSortedComments
   })
 
-  const updateNewReactionsCount = () => {
-    const dateFromCookie = new Date(Cookie.get(`${props.shoutSlug}`)).valueOf()
-    const setCookie = () => Cookie.set(`${props.shoutSlug}`, `${Date.now()}`)
-    if (!dateFromCookie) {
+  const dateFromLocalStorage = new Date(localStorage.getItem(`${props.shoutSlug}`))
+  const currentDate = new Date()
+  const setCookie = () => localStorage.setItem(`${props.shoutSlug}`, `${currentDate}`)
+
+  onMount(() => {
+    if (!dateFromLocalStorage) {
       setCookie()
-    } else if (Date.now() > dateFromCookie) {
+    } else if (currentDate > dateFromLocalStorage) {
       const newComments = comments().filter((c) => {
         if (c.replyTo) {
           return
         }
-        const commentDate = new Date(c.createdAt).valueOf()
-        return commentDate > dateFromCookie
+        const created = new Date(c.createdAt)
+        return created > dateFromLocalStorage
       })
       setNewReactions(newComments)
-      setNewReactionsCount(newComments.length)
       setCookie()
     }
-  }
-
-  const { session } = useSession()
-
-  onMount(async () => {
-    updateNewReactionsCount()
   })
 
+  const { session } = useSession()
   const [submitted, setSubmitted] = createSignal<boolean>(false)
   const handleSubmitComment = async (value) => {
     try {
@@ -116,13 +110,13 @@ export const CommentsTree = (props: Props) => {
       <div class={styles.commentsHeaderWrapper}>
         <h2 id="comments" class={styles.commentsHeader}>
           {t('Comments')} {comments().length.toString() || ''}
-          <Show when={newReactionsCount() > 0}>
-            <span class={styles.newReactions}>&nbsp;+{newReactionsCount()}</span>
+          <Show when={newReactions().length > 0}>
+            <span class={styles.newReactions}>&nbsp;+{newReactions().length}</span>
           </Show>
         </h2>
 
         <ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
-          <Show when={newReactionsCount() > 0}>
+          <Show when={newReactions().length > 0}>
             <li classList={{ selected: commentsOrder() === 'newOnly' }}>
               <Button
                 variant="inline"
@@ -160,6 +154,7 @@ export const CommentsTree = (props: Props) => {
               sortedComments={sortedComments()}
               isArticleAuthor={Boolean(props.commentAuthors.some((a) => a.slug === session()?.user.slug))}
               comment={reaction}
+              lastSeen={dateFromLocalStorage}
             />
           )}
         </For>

src/components/Views/Author.tsx

@@ -95,7 +95,7 @@ export const AuthorView = (props: AuthorProps) => {
         })
         setCommented(data)
       } catch (error) {
-        console.log('!!! error:', error)
+        console.error('[getReactionsBy]:', error)
       }
     }
   })