improve notifications UX: highlight reply and distinguish new notifications

components/notifications.js

@@ -257,7 +257,7 @@ function Reply ({ n }) {
   )
 }
 
-function NotificationAlert () {
+export function NotificationAlert () {
   const [showAlert, setShowAlert] = useState(false)
   const [hasSubscription, setHasSubscription] = useState(false)
   const [error, setError] = useState(null)
@@ -319,35 +319,40 @@ function NotificationAlert () {
 export default function Notifications ({ ssrData }) {
   const { data, fetchMore } = useQuery(NOTIFICATIONS)
   const client = useApolloClient()
+  const router = useRouter()
+
+  const { notifications: { notifications, earn, lastChecked, cursor } } = useMemo(() => {
+    return data || ssrData || { notifications: {} }
+  }, [data, ssrData])
+
+  const checkedAt = router?.query?.checkedAt
 
   useEffect(() => {
-    client.writeQuery({
+    if (lastChecked && !checkedAt) {
+      router.push({ query: { ...router.query, checkedAt: lastChecked } },
+        router.asPath, { shallow: true })
+      client?.writeQuery({
         query: HAS_NOTIFICATIONS,
         data: {
           hasNewNotes: false
         }
       })
-  }, [client])
+    }
-
+  }, [lastChecked, checkedAt])
-  const { notifications: { notifications, earn, lastChecked, cursor } } = useMemo(() => {
-    if (!data && !ssrData) return { notifications: {} }
-    return data || ssrData
-  }, [data, ssrData])
 
   const [fresh, old] = useMemo(() => {
     if (!notifications) return [[], []]
     return notifications.reduce((result, n) => {
-      result[new Date(n.sortTime).getTime() > lastChecked ? 0 : 1].push(n)
+      result[new Date(n.sortTime).getTime() > new Date(checkedAt)?.getTime() ? 0 : 1].push(n)
       return result
     },
     [[], []])
-  }, [notifications, lastChecked])
+  }, [notifications, checkedAt])
 
   if (!data && !ssrData) return <CommentsFlatSkeleton />
 
   return (
     <>
-      <NotificationAlert />
       <div className='fresh'>
         {earn && <Notification n={earn} key='earn' />}
         {fresh.map((n, i) => (

pages/notifications.js

@@ -1,6 +1,6 @@
 import { getGetServerSideProps } from '../api/ssrApollo'
 import Layout from '../components/layout'
-import Notifications from '../components/notifications'
+import Notifications, { NotificationAlert } from '../components/notifications'
 import { NOTIFICATIONS } from '../fragments/notifications'
 
 export const getServerSideProps = getGetServerSideProps(NOTIFICATIONS)
@@ -8,6 +8,7 @@ export const getServerSideProps = getGetServerSideProps(NOTIFICATIONS)
 export default function NotificationPage ({ ssrData }) {
   return (
     <Layout>
+      <NotificationAlert />
       <Notifications ssrData={ssrData} />
     </Layout>
   )