seen-usecontext

src/components/Article/Comment/Comment.tsx

@@ -127,7 +127,7 @@ export const Comment = (props: Props) => {
     <li
       id={`comment_${props.comment.id}`}
       class={clsx(styles.comment, props.class, {
-        [styles.isNew]: props.comment?.created_at > props.lastSeen,
+        [styles.isNew]: props.lastSeen > (props.comment.updated_at || props.comment.created_at),
       })}
     >
       <Show when={!!body()}>

src/components/Article/CommentsTree.tsx

@@ -11,6 +11,7 @@ import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
 
 import { Comment } from './Comment'
 
+import { useSeen } from '../../context/seen'
 import styles from './Article.module.scss'
 
 const SimplifiedEditor = lazy(() => import('../Editor/SimplifiedEditor'))
@@ -48,21 +49,20 @@ export const CommentsTree = (props: Props) => {
     }
     return newSortedComments
   })
-
+  const { seen } = useSeen()
-  const dateFromLocalStorage = Number.parseInt(localStorage.getItem(`${props.shoutSlug}`))
+  const shoutLastSeen = createMemo(() => seen()[props.shoutSlug] ?? 0)
   const currentDate = new Date()
   const setCookie = () => localStorage.setItem(`${props.shoutSlug}`, `${currentDate}`)
 
   onMount(() => {
-    if (!dateFromLocalStorage) {
+    if (!shoutLastSeen()) {
       setCookie()
-    } else if (currentDate.getTime() > dateFromLocalStorage) {
+    } else if (currentDate.getTime() > shoutLastSeen()) {
       const newComments = comments().filter((c) => {
         if (c.reply_to || c.created_by.slug === author()?.slug) {
           return
         }
-        const created = c.created_at
+        return (c.updated_at || c.created_at) > shoutLastSeen()
-        return created > dateFromLocalStorage
       })
       setNewReactions(newComments)
       setCookie()
@@ -134,7 +134,7 @@ export const CommentsTree = (props: Props) => {
               comment={reaction}
               clickedReply={(id) => setClickedReplyId(id)}
               clickedReplyId={clickedReplyId()}
-              lastSeen={dateFromLocalStorage}
+              lastSeen={shoutLastSeen()}
             />
           )}
         </For>

src/components/Article/FullArticle.tsx

@@ -38,6 +38,7 @@ import { CommentsTree } from './CommentsTree'
 import { SharePopup, getShareUrl } from './SharePopup'
 import { ShoutRatingControl } from './ShoutRatingControl'
 
+import { useSeen } from '../../context/seen'
 import stylesHeader from '../Nav/Header/Header.module.scss'
 import styles from './Article.module.scss'
 
@@ -76,6 +77,7 @@ export const FullArticle = (props: Props) => {
   const [isActionPopupActive, setIsActionPopupActive] = createSignal(false)
   const { t, formatDate, lang } = useLocalize()
   const { author, session, requireAuthentication } = useSession()
+  const { addSeen } = useSeen()
 
   const formattedDate = createMemo(() => formatDate(new Date(props.article.published_at * 1000)))
 
@@ -302,6 +304,7 @@ export const FullArticle = (props: Props) => {
   onMount(async () => {
     install('G-LQ4B87H8C2')
     await loadReactionsBy({ by: { shout: props.article.slug } })
+    addSeen(props.article.slug)
     setIsReactionsLoaded(true)
     document.title = props.article.title
     window?.addEventListener('resize', updateIframeSizes)

src/components/Feed/Sidebar/Sidebar.tsx

@@ -17,7 +17,7 @@ export const Sidebar = () => {
   const { seen } = useSeen()
   const { subscriptions } = useFollowing()
   const { page } = useRouter()
-  const { articlesByTopic } = useArticlesStore()
+  const { articlesByTopic, articlesByAuthor } = useArticlesStore()
   const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(true)
 
   const checkTopicIsSeen = (topicSlug: string) => {
@@ -25,8 +25,9 @@ export const Sidebar = () => {
   }
 
   const checkAuthorIsSeen = (authorSlug: string) => {
-    return Boolean(seen()[authorSlug])
+    return articlesByAuthor()[authorSlug]?.every((article) => Boolean(seen()[article.slug]))
   }
+
   return (
     <div class={styles.sidebar}>
       <ul class={styles.feedFilters}>