highlight new notifications

api/resolvers/notifications.js

@@ -43,14 +43,14 @@ export default {
       */
 
       let notifications = await models.$queryRaw(`
-        SELECT ${ITEM_FIELDS}, "Item".created_at as sort_time, NULL as "earnedSats",
+        SELECT ${ITEM_FIELDS}, "Item".created_at as "sortTime", NULL as "earnedSats",
         false as mention
         From "Item"
         JOIN "Item" p ON "Item"."parentId" = p.id
         WHERE p."userId" = $1
         AND "Item"."userId" <> $1 AND "Item".created_at <= $2
         UNION ALL
-        (SELECT ${ITEM_SUBQUERY_FIELDS}, max(subquery.voted_at) as sort_time,
+        (SELECT ${ITEM_SUBQUERY_FIELDS}, max(subquery.voted_at) as "sortTime",
         sum(subquery.sats) as "earnedSats", false as mention
         FROM
         (SELECT ${ITEM_FIELDS}, "Vote".created_at as voted_at, "Vote".sats,
@@ -64,7 +64,7 @@ export default {
         AND "Item"."userId" = $1) subquery
         GROUP BY ${ITEM_SUBQUERY_FIELDS}, subquery.island ORDER BY max(subquery.voted_at) desc)
         UNION ALL
-        (SELECT ${ITEM_FIELDS}, "Mention".created_at as sort_time,  NULL as "earnedSats",
+        (SELECT ${ITEM_FIELDS}, "Mention".created_at as "sortTime",  NULL as "earnedSats",
         true as mention
         FROM "Mention"
         JOIN "Item" on "Mention"."itemId" = "Item".id
@@ -73,7 +73,7 @@ export default {
         AND "Mention".created_at <= $2
         AND "Item"."userId" <> $1
         AND p."userId" <> $1)
-        ORDER BY sort_time DESC
+        ORDER BY "sortTime" DESC
         OFFSET $3
         LIMIT ${LIMIT}`, me.id, decodedCursor.time, decodedCursor.offset)
 
@@ -82,9 +82,11 @@ export default {
         return n
       })
 
+      const { checkedNotesAt } = await models.user.findUnique({ where: { id: me.id } })
       await models.user.update({ where: { id: me.id }, data: { checkedNotesAt: new Date() } })
 
       return {
+        lastChecked: checkedNotesAt,
         cursor: notifications.length === LIMIT ? nextCursorEncoded(decodedCursor) : null,
         notifications
       }

api/typeDefs/notifications.js

@@ -8,20 +8,24 @@ export default gql`
   type Votification {
     earnedSats: Int!
     item: Item!
+    sortTime: String!
   }
 
   type Reply {
     item: Item!
+    sortTime: String!
   }
 
   type Mention {
     mention: Boolean!
     item: Item!
+    sortTime: String!
   }
 
   union Notification = Reply | Votification | Mention
 
   type Notifications {
+    lastChecked: String
     cursor: String
     notifications: [Notification!]!
   }

components/notifications.js

@@ -7,9 +7,47 @@ import { NOTIFICATIONS } from '../fragments/notifications'
 import styles from './notifications.module.css'
 import { useRouter } from 'next/router'
 
-export default function Notifications ({ variables, ...props }) {
+function Notification ({ key, n }) {
   const router = useRouter()
   const client = useApolloClient()
+  return (
+    <div
+      key={key}
+      className={styles.clickToContext}
+      onClick={() => {
+        if (n.__typename === 'Reply' || !n.item.title) {
+          // evict item from cache so that it has current state
+          // e.g. if they previously visited before a recent comment
+          client.cache.evict({ id: `Item:${n.item.parentId}` })
+          router.push({
+            pathname: '/items/[id]',
+            query: { id: n.item.parentId, commentId: n.item.id }
+          }, `/items/${n.item.parentId}`)
+        } else {
+          client.cache.evict({ id: `Item:${n.item.id}` })
+          router.push(`items/${n.item.id}`)
+        }
+      }}
+    >
+      {n.__typename === 'Votification' &&
+        <small className='font-weight-bold text-success ml-2'>your {n.item.title ? 'post' : 'reply'} stacked {n.earnedSats} sats</small>}
+      {n.__typename === 'Mention' &&
+        <small className='font-weight-bold text-info ml-2'>you were mentioned in</small>}
+      <div className={
+    n.__typename === 'Votification' || n.__typename === 'Mention'
+      ? `ml-sm-4 ml-3 ${n.item.title ? 'pb-2' : ''}`
+      : ''
+    }
+      >
+        {n.item.title
+          ? <Item item={n.item} />
+          : <Comment item={n.item} noReply includeParent rootText={n.__typename === 'Reply' ? 'replying to you on:' : undefined} clickToContext />}
+      </div>
+    </div>
+  )
+}
+
+export default function Notifications ({ variables }) {
   const { loading, error, data, fetchMore } = useQuery(NOTIFICATIONS, {
     variables
   })
@@ -17,45 +55,26 @@ export default function Notifications ({ variables, ...props }) {
   if (loading) {
     return <CommentsFlatSkeleton />
   }
-  const { notifications: { notifications, cursor } } = data
+
+  const { notifications: { notifications, cursor, lastChecked } } = data
+
+  const [fresh, old] =
+    notifications.reduce((result, n) => {
+      result[new Date(n.sortTime).getTime() > lastChecked ? 0 : 1].push(n)
+      return result
+    },
+    [[], []])
 
   return (
     <>
       {/* XXX we shouldn't use the index but we don't have a unique id in this union yet */}
-      {notifications.map((n, i) => (
+      <div className={styles.fresh}>
-        <div
+        {fresh.map((n, i) => (
-          key={i}
+          <Notification n={n} key={i} />
-          className={styles.clickToContext}
+        ))}
-          onClick={() => {
+      </div>
-            if (n.__typename === 'Reply' || !n.item.title) {
+      {old.map((n, i) => (
-              // evict item from cache so that it has current state
+        <Notification n={n} key={i} />
-              // e.g. if they previously visited before a recent comment
-              client.cache.evict({ id: `Item:${n.item.parentId}` })
-              router.push({
-                pathname: '/items/[id]',
-                query: { id: n.item.parentId, commentId: n.item.id }
-              }, `/items/${n.item.parentId}`)
-            } else {
-              client.cache.evict({ id: `Item:${n.item.id}` })
-              router.push(`items/${n.item.id}`)
-            }
-          }}
-        >
-          {n.__typename === 'Votification' &&
-            <small className='font-weight-bold text-success ml-2'>your {n.item.title ? 'post' : 'reply'} stacked {n.earnedSats} sats</small>}
-          {n.__typename === 'Mention' &&
-            <small className='font-weight-bold text-info ml-2'>you were mentioned in</small>}
-          <div className={
-            n.__typename === 'Votification' || n.__typename === 'Mention'
-              ? `ml-sm-4 ml-3 ${n.item.title ? 'pb-2' : ''}`
-              : ''
-            }
-          >
-            {n.item.title
-              ? <Item item={n.item} />
-              : <Comment item={n.item} noReply includeParent rootText={n.__typename === 'Reply' ? 'replying to you on:' : undefined} clickToContext {...props} />}
-          </div>
-        </div>
       ))}
       <MoreFooter cursor={cursor} fetchMore={fetchMore} />
     </>

components/notifications.module.css

@@ -6,4 +6,9 @@
 
 .clickToContext:hover {
     background-color: rgba(0, 0, 0, 0.03);
+}
+
+.fresh {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: .4rem;
 }

fragments/notifications.js

@@ -7,9 +7,11 @@ export const NOTIFICATIONS = gql`
   query Notifications($cursor: String) {
     notifications(cursor: $cursor) {
       cursor
+      lastChecked
       notifications {
         __typename
         ... on Mention {
+          sortTime
           mention
           item {
             ...ItemFields
@@ -17,6 +19,7 @@ export const NOTIFICATIONS = gql`
           }
         }
         ... on Votification {
+          sortTime
           earnedSats
           item {
             ...ItemFields
@@ -24,6 +27,7 @@ export const NOTIFICATIONS = gql`
           }
         }
         ... on Reply {
+          sortTime
           item {
             ...ItemFields
             text

pages/_app.js

@@ -55,17 +55,13 @@ const client = new ApolloClient({
               const notifications = existing ? existing.notifications : []
               return {
                 cursor: incoming.cursor,
-                notifications: [...notifications, ...incoming.notifications]
+                notifications: [...notifications, ...incoming.notifications],
+                lastChecked: incoming.lastChecked
               }
             },
 
             read (existing) {
-              if (existing) {
+              return existing
-                return {
-                  cursor: existing.cursor,
-                  notifications: existing.notifications
-                }
-              }
             }
           }
         }