Use react-query to cache notifications (#625)

* Use react-query to cache notifications

* Fix imports

* Cleanup

* Limit unseen notifs query

* Catch the bounced query

* Don't use interval

* Unused var

* Avoid flash of page nav

* Give notification question priority & 2 lines

* Right justify timestamps

* Rewording

* Margin

* Simplify error msg

* Be explicit about limit for unseen notifs

* Pass limit > 0

web/components/nav/sidebar.tsx

@@ -12,7 +12,7 @@ import {
 import clsx from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useUser } from 'web/hooks/use-user'
+import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import { firebaseLogout, User } from 'web/lib/firebase/users'
 import { ManifoldLogo } from './manifold-logo'
 import { MenuButton } from './menu'
@@ -26,8 +26,9 @@ import { groupPath } from 'web/lib/firebase/groups'
 import { trackCallback, withTracking } from 'web/lib/service/analytics'
 import { Group } from 'common/group'
 import { Spacer } from '../layout/spacer'
-import { usePreferredNotifications } from 'web/hooks/use-notifications'
+import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
 import { setNotificationsAsSeen } from 'web/pages/notifications'
+import { PrivateUser } from 'common/user'
 
 function getNavigation() {
   return [
@@ -186,6 +187,7 @@ export default function Sidebar(props: { className?: string }) {
   const currentPage = router.pathname
 
   const user = useUser()
+  const privateUser = usePrivateUser(user?.id)
   const navigationOptions = !user ? signedOutNavigation : getNavigation()
   const mobileNavigationOptions = !user
     ? signedOutMobileNavigation
@@ -220,11 +222,13 @@ export default function Sidebar(props: { className?: string }) {
           />
         )}
 
+        {privateUser && (
           <GroupsList
             currentPage={router.asPath}
             memberItems={memberItems}
-          user={user}
+            privateUser={privateUser}
           />
+        )}
       </div>
 
       {/* Desktop navigation */}
@@ -243,11 +247,13 @@ export default function Sidebar(props: { className?: string }) {
             <div className="h-[1px] bg-gray-300" />
           </div>
         )}
+        {privateUser && (
           <GroupsList
             currentPage={router.asPath}
             memberItems={memberItems}
-          user={user}
+            privateUser={privateUser}
           />
+        )}
       </div>
     </nav>
   )
@@ -256,13 +262,16 @@ export default function Sidebar(props: { className?: string }) {
 function GroupsList(props: {
   currentPage: string
   memberItems: Item[]
-  user: User | null | undefined
+  privateUser: PrivateUser
 }) {
-  const { currentPage, memberItems, user } = props
+  const { currentPage, memberItems, privateUser } = props
-  const preferredNotifications = usePreferredNotifications(user?.id, {
+  const preferredNotifications = useUnseenPreferredNotifications(
-    unseenOnly: true,
+    privateUser,
+    {
       customHref: '/group/',
-  })
+    },
+    memberItems.length > 0 ? memberItems.length : undefined
+  )
 
   // Set notification as seen if our current page is equal to the isSeenOnHref property
   useEffect(() => {

web/components/notifications-icon.tsx

@@ -4,45 +4,53 @@ import { Row } from 'web/components/layout/row'
 import { useEffect, useState } from 'react'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import { useRouter } from 'next/router'
-import { usePreferredGroupedNotifications } from 'web/hooks/use-notifications'
+import { useUnseenPreferredNotificationGroups } from 'web/hooks/use-notifications'
 import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications'
 import { requestBonuses } from 'web/lib/firebase/api-call'
+import { PrivateUser } from 'common/user'
 
 export default function NotificationsIcon(props: { className?: string }) {
   const user = useUser()
   const privateUser = usePrivateUser(user?.id)
-  const notifications = usePreferredGroupedNotifications(privateUser?.id, {
-    unseenOnly: true,
-  })
-  const [seen, setSeen] = useState(false)
 
   useEffect(() => {
-    if (!privateUser) return
+    if (
-
+      privateUser &&
-    if (Date.now() - (privateUser.lastTimeCheckedBonuses ?? 0) > 65 * 1000)
+      privateUser.lastTimeCheckedBonuses &&
-      requestBonuses({}).catch((error) => {
+      Date.now() - privateUser.lastTimeCheckedBonuses > 1000 * 70
-        console.log("couldn't get bonuses:", error.message)
+    )
-      })
+      requestBonuses({}).catch(() => console.log('no bonuses for you (yet)'))
   }, [privateUser])
 
-  const router = useRouter()
-  useEffect(() => {
-    if (router.pathname.endsWith('notifications')) return setSeen(true)
-    else setSeen(false)
-  }, [router.pathname])
-
   return (
     <Row className={clsx('justify-center')}>
       <div className={'relative'}>
-        {!seen && notifications && notifications.length > 0 && (
+        {privateUser && <UnseenNotificationsBubble privateUser={privateUser} />}
-          <div className="-mt-0.75 absolute ml-3.5 min-w-[15px] rounded-full bg-indigo-500 p-[2px] text-center text-[10px] leading-3 text-white lg:-mt-1 lg:ml-2">
-            {notifications.length > NOTIFICATIONS_PER_PAGE
-              ? `${NOTIFICATIONS_PER_PAGE}+`
-              : notifications.length}
-          </div>
-        )}
         <BellIcon className={clsx(props.className)} />
       </div>
     </Row>
   )
 }
+function UnseenNotificationsBubble(props: { privateUser: PrivateUser }) {
+  const router = useRouter()
+  const { privateUser } = props
+  const [seen, setSeen] = useState(false)
+
+  useEffect(() => {
+    if (router.pathname.endsWith('notifications')) return setSeen(true)
+    else setSeen(false)
+  }, [router.pathname])
+
+  const notifications = useUnseenPreferredNotificationGroups(privateUser)
+  if (!notifications || notifications.length === 0 || seen) {
+    return <div />
+  }
+
+  return (
+    <div className="-mt-0.75 absolute ml-3.5 min-w-[15px] rounded-full bg-indigo-500 p-[2px] text-center text-[10px] leading-3 text-white lg:-mt-1 lg:ml-2">
+      {notifications.length > NOTIFICATIONS_PER_PAGE
+        ? `${NOTIFICATIONS_PER_PAGE}+`
+        : notifications.length}
+    </div>
+  )
+}

web/hooks/use-notifications.ts

@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react'
-import { listenForPrivateUser } from 'web/lib/firebase/users'
 import { notification_subscribe_types, PrivateUser } from 'common/user'
 import { Notification } from 'common/notification'
-import { listenForNotifications } from 'web/lib/firebase/notifications'
+import {
+  getNotificationsQuery,
+  listenForNotifications,
+} from 'web/lib/firebase/notifications'
 import { groupBy, map } from 'lodash'
+import { useFirestoreQuery } from '@react-query-firebase/firestore'
+import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications'
 
 export type NotificationGroup = {
   notifications: Notification[]
@@ -13,15 +17,30 @@ export type NotificationGroup = {
   type: 'income' | 'normal'
 }
 
-export function usePreferredGroupedNotifications(
+// For some reason react-query subscriptions don't actually listen for notifications
-  userId: string | undefined,
+// Use useUnseenPreferredNotificationGroups to listen for new notifications
-  options: { unseenOnly: boolean }
+export function usePreferredGroupedNotifications(privateUser: PrivateUser) {
-) {
   const [notificationGroups, setNotificationGroups] = useState<
     NotificationGroup[] | undefined
   >(undefined)
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const key = `notifications-${privateUser.id}-all`
+
+  const result = useFirestoreQuery([key], getNotificationsQuery(privateUser.id))
+  useEffect(() => {
+    if (result.isLoading) return
+    if (!result.data) return setNotifications([])
+    const notifications = result.data.docs.map(
+      (doc) => doc.data() as Notification
+    )
+
+    const notificationsToShow = getAppropriateNotifications(
+      notifications,
+      privateUser.notificationPreferences
+    ).filter((n) => !n.isSeenOnHref)
+    setNotifications(notificationsToShow)
+  }, [privateUser.notificationPreferences, result.data, result.isLoading])
 
-  const notifications = usePreferredNotifications(userId, options)
   useEffect(() => {
     if (!notifications) return
 
@@ -32,6 +51,20 @@ export function usePreferredGroupedNotifications(
   return notificationGroups
 }
 
+export function useUnseenPreferredNotificationGroups(privateUser: PrivateUser) {
+  const notifications = useUnseenPreferredNotifications(privateUser, {})
+  const [notificationGroups, setNotificationGroups] = useState<
+    NotificationGroup[] | undefined
+  >(undefined)
+  useEffect(() => {
+    if (!notifications) return
+
+    const groupedNotifications = groupNotifications(notifications)
+    setNotificationGroups(groupedNotifications)
+  }, [notifications])
+  return notificationGroups
+}
+
 export function groupNotifications(notifications: Notification[]) {
   let notificationGroups: NotificationGroup[] = []
   const notificationGroupsByDay = groupBy(notifications, (notification) =>
@@ -85,32 +118,24 @@ export function groupNotifications(notifications: Notification[]) {
   return notificationGroups
 }
 
-export function usePreferredNotifications(
+export function useUnseenPreferredNotifications(
-  userId: string | undefined,
+  privateUser: PrivateUser,
-  options: { unseenOnly: boolean; customHref?: string }
+  options: { customHref?: string },
+  limit: number = NOTIFICATIONS_PER_PAGE
 ) {
-  const { unseenOnly, customHref } = options
+  const { customHref } = options
-  const [privateUser, setPrivateUser] = useState<PrivateUser | null>(null)
   const [notifications, setNotifications] = useState<Notification[]>([])
   const [userAppropriateNotifications, setUserAppropriateNotifications] =
     useState<Notification[]>([])
 
   useEffect(() => {
-    if (userId) listenForPrivateUser(userId, setPrivateUser)
+    return listenForNotifications(privateUser.id, setNotifications, {
-  }, [userId])
+      unseenOnly: true,
+      limit,
+    })
+  }, [limit, privateUser.id])
 
   useEffect(() => {
-    if (privateUser)
-      return listenForNotifications(
-        privateUser.id,
-        setNotifications,
-        unseenOnly
-      )
-  }, [privateUser, unseenOnly])
-
-  useEffect(() => {
-    if (!privateUser) return
-
     const notificationsToShow = getAppropriateNotifications(
       notifications,
       privateUser.notificationPreferences
@@ -118,7 +143,7 @@ export function usePreferredNotifications(
       customHref ? n.isSeenOnHref?.includes(customHref) : !n.isSeenOnHref
     )
     setUserAppropriateNotifications(notificationsToShow)
-  }, [privateUser, notifications, customHref])
+  }, [notifications, customHref, privateUser.notificationPreferences])
 
   return userAppropriateNotifications
 }

web/lib/firebase/notifications.ts

@@ -1,21 +1,36 @@
-import { collection, query, where } from 'firebase/firestore'
+import { collection, limit, orderBy, query, where } from 'firebase/firestore'
 import { Notification } from 'common/notification'
 import { db } from 'web/lib/firebase/init'
 import { listenForValues } from 'web/lib/firebase/utils'
+import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications'
 
-function getNotificationsQuery(userId: string, unseenOnly?: boolean) {
+export function getNotificationsQuery(
+  userId: string,
+  unseenOnlyOptions?: { unseenOnly: boolean; limit: number }
+) {
   const notifsCollection = collection(db, `/users/${userId}/notifications`)
-  if (unseenOnly) return query(notifsCollection, where('isSeen', '==', false))
+  if (unseenOnlyOptions?.unseenOnly)
-  return query(notifsCollection)
+    return query(
+      notifsCollection,
+      where('isSeen', '==', false),
+      orderBy('createdTime', 'desc'),
+      limit(unseenOnlyOptions.limit)
+    )
+  return query(
+    notifsCollection,
+    orderBy('createdTime', 'desc'),
+    // Nobody's going through 10 pages of notifications, right?
+    limit(NOTIFICATIONS_PER_PAGE * 10)
+  )
 }
 
 export function listenForNotifications(
   userId: string,
   setNotifications: (notifs: Notification[]) => void,
-  unseenOnly?: boolean
+  unseenOnlyOptions?: { unseenOnly: boolean; limit: number }
 ) {
   return listenForValues<Notification>(
-    getNotificationsQuery(userId, unseenOnly),
+    getNotificationsQuery(userId, unseenOnlyOptions),
     (notifs) => {
       notifs.sort((n1, n2) => n2.createdTime - n1.createdTime)
       setNotifications(notifs)

web/pages/notifications.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from 'web/components/layout/tabs'
-import { useUser } from 'web/hooks/use-user'
+import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import React, { useEffect, useState } from 'react'
 import { Notification, notification_source_types } from 'common/notification'
 import { Avatar, EmptyAvatar } from 'web/components/avatar'
@@ -8,8 +8,6 @@ import { Page } from 'web/components/page'
 import { Title } from 'web/components/title'
 import { doc, updateDoc } from 'firebase/firestore'
 import { db } from 'web/lib/firebase/init'
-import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
-import Custom404 from 'web/pages/404'
 import { UserLink } from 'web/components/user-page'
 import { notification_subscribe_types, PrivateUser } from 'common/user'
 import { Contract } from 'common/contract'
@@ -35,54 +33,83 @@ import { formatMoney } from 'common/util/format'
 import { groupPath } from 'web/lib/firebase/groups'
 import { UNIQUE_BETTOR_BONUS_AMOUNT } from 'common/numeric-constants'
 import { groupBy, sum, uniq } from 'lodash'
+import Custom404 from 'web/pages/404'
 
 export const NOTIFICATIONS_PER_PAGE = 30
 const MULTIPLE_USERS_KEY = 'multipleUsers'
 
 export default function Notifications() {
   const user = useUser()
-  const [page, setPage] = useState(1)
+  const privateUser = usePrivateUser(user?.id)
-
-  const groupedNotifications = usePreferredGroupedNotifications(user?.id, {
-    unseenOnly: false,
-  })
-  const [paginatedNotificationGroups, setPaginatedNotificationGroups] =
-    useState<NotificationGroup[]>([])
-  useEffect(() => {
-    if (!groupedNotifications) return
-    const start = (page - 1) * NOTIFICATIONS_PER_PAGE
-    const end = start + NOTIFICATIONS_PER_PAGE
-    const maxNotificationsToShow = groupedNotifications.slice(start, end)
-    const remainingNotification = groupedNotifications.slice(end)
-    for (const notification of remainingNotification) {
-      if (notification.isSeen) break
-      else setNotificationsAsSeen(notification.notifications)
-    }
-    setPaginatedNotificationGroups(maxNotificationsToShow)
-  }, [groupedNotifications, page])
-
-  if (user === undefined) {
-    return <LoadingIndicator />
-  }
-  if (user === null) {
-    return <Custom404 />
-  }
 
+  if (!user) return <Custom404 />
   return (
     <Page>
       <div className={'p-2 sm:p-4'}>
         <Title text={'Notifications'} className={'hidden md:block'} />
+        <div>
           <Tabs
             labelClassName={'pb-2 pt-1 '}
+            className={'mb-0 sm:mb-2'}
             defaultIndex={0}
             tabs={[
               {
                 title: 'Notifications',
-              content: groupedNotifications ? (
+                content: privateUser ? (
+                  <NotificationsList privateUser={privateUser} />
+                ) : (
+                  <LoadingIndicator />
+                ),
+              },
+              {
+                title: 'Settings',
+                content: (
                   <div className={''}>
-                  {paginatedNotificationGroups.length === 0 &&
+                    <NotificationSettings />
-                    "You don't have any notifications. Try changing your settings to see more."}
+                  </div>
-                  {paginatedNotificationGroups.map((notification) =>
+                ),
+              },
+            ]}
+          />
+        </div>
+      </div>
+    </Page>
+  )
+}
+
+function NotificationsList(props: { privateUser: PrivateUser }) {
+  const { privateUser } = props
+  const [page, setPage] = useState(1)
+  const allGroupedNotifications = usePreferredGroupedNotifications(privateUser)
+  const [paginatedGroupedNotifications, setPaginatedGroupedNotifications] =
+    useState<NotificationGroup[] | undefined>(undefined)
+
+  useEffect(() => {
+    if (!allGroupedNotifications) return
+    const start = (page - 1) * NOTIFICATIONS_PER_PAGE
+    const end = start + NOTIFICATIONS_PER_PAGE
+    const maxNotificationsToShow = allGroupedNotifications.slice(start, end)
+    const remainingNotification = allGroupedNotifications.slice(end)
+    for (const notification of remainingNotification) {
+      if (notification.isSeen) break
+      else setNotificationsAsSeen(notification.notifications)
+    }
+    setPaginatedGroupedNotifications(maxNotificationsToShow)
+  }, [allGroupedNotifications, page])
+
+  if (!paginatedGroupedNotifications || !allGroupedNotifications)
+    return <LoadingIndicator />
+
+  return (
+    <div className={'min-h-[100vh]'}>
+      {paginatedGroupedNotifications.length === 0 && (
+        <div className={'mt-2'}>
+          You don't have any notifications. Try changing your settings to see
+          more.
+        </div>
+      )}
+
+      {paginatedGroupedNotifications.map((notification) =>
         notification.type === 'income' ? (
           <IncomeNotificationGroupItem
             notificationGroup={notification}
@@ -100,7 +127,8 @@ export default function Notifications() {
           />
         )
       )}
-                  {groupedNotifications.length > NOTIFICATIONS_PER_PAGE && (
+      {paginatedGroupedNotifications.length > 0 &&
+        allGroupedNotifications.length > NOTIFICATIONS_PER_PAGE && (
           <nav
             className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
             aria-label="Pagination"
@@ -109,9 +137,7 @@ export default function Notifications() {
               <p className="text-sm text-gray-700">
                 Showing{' '}
                 <span className="font-medium">
-                            {page === 1
+                  {page === 1 ? page : (page - 1) * NOTIFICATIONS_PER_PAGE}
-                              ? page
-                              : (page - 1) * NOTIFICATIONS_PER_PAGE}
                 </span>{' '}
                 to{' '}
                 <span className="font-medium">
@@ -119,7 +145,7 @@ export default function Notifications() {
                 </span>{' '}
                 of{' '}
                 <span className="font-medium">
-                            {groupedNotifications.length}
+                  {allGroupedNotifications.length}
                 </span>{' '}
                 results
               </p>
@@ -137,8 +163,8 @@ export default function Notifications() {
                 className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                 onClick={() =>
                   page <
-                              groupedNotifications?.length /
+                    allGroupedNotifications?.length / NOTIFICATIONS_PER_PAGE &&
-                                NOTIFICATIONS_PER_PAGE && setPage(page + 1)
+                  setPage(page + 1)
                 }
               >
                 Next
@@ -147,22 +173,6 @@ export default function Notifications() {
           </nav>
         )}
     </div>
-              ) : (
-                <LoadingIndicator />
-              ),
-            },
-            {
-              title: 'Settings',
-              content: (
-                <div className={''}>
-                  <NotificationSettings />
-                </div>
-              ),
-            },
-          ]}
-        />
-      </div>
-    </Page>
   )
 }
 
@@ -261,20 +271,22 @@ function IncomeNotificationGroupItem(props: {
       )}
       <Row className={'items-center text-gray-500 sm:justify-start'}>
         <TrendingUpIcon className={'text-primary h-7 w-7'} />
-        <div className={'flex truncate'}>
         <div
+          className={'flex w-full flex-row flex-wrap pl-1 sm:pl-0'}
           onClick={() => setExpanded(!expanded)}
-            className={'line-clamp-1 cursor-pointer pl-1  sm:pl-0'}
         >
-            <span>
+          <div className={'flex w-full flex-row justify-between'}>
+            <div>
               {'Daily Income Summary: '}
               <span className={'text-primary'}>
                 {'+' + formatMoney(totalIncome)}
               </span>
-            </span>
+            </div>
+            <div className={'inline-block'}>
               <RelativeTimestamp time={notifications[0].createdTime} />
             </div>
           </div>
+        </div>
       </Row>
       <div>
         <div className={clsx('mt-1 md:text-base', expanded ? 'pl-4' : '')}>
@@ -329,13 +341,7 @@ function IncomeNotificationItem(props: {
   justSummary?: boolean
 }) {
   const { notification, justSummary } = props
-  const {
+  const { sourceType, sourceUserName, sourceUserUsername } = notification
-    sourceType,
-    sourceUserName,
-    reason,
-    sourceUserUsername,
-    createdTime,
-  } = notification
   const [highlighted] = useState(!notification.isSeen)
 
   useEffect(() => {
@@ -354,7 +360,7 @@ function IncomeNotificationItem(props: {
     } else if (sourceType === 'tip') {
       reasonText = !simple ? `tipped you` : `in tips on`
     }
-    return <span className={'flex-shrink-0'}>{reasonText}</span>
+    return reasonText
   }
 
   if (justSummary) {
@@ -374,7 +380,7 @@ function IncomeNotificationItem(props: {
               </div>
               <span className={'flex truncate'}>
                 {getReasonForShowingIncomeNotification(true)}
-                <NotificationLink notification={notification} />
+                <NotificationLink notification={notification} noClick={true} />
               </span>
             </div>
           </div>
@@ -392,8 +398,7 @@ function IncomeNotificationItem(props: {
     >
       <a href={getSourceUrl(notification)}>
         <Row className={'items-center text-gray-500 sm:justify-start'}>
-          <div className={'flex max-w-xl shrink '}>
+          <div className={'line-clamp-2 flex max-w-xl shrink '}>
-            {sourceType && reason && (
             <div className={'inline'}>
               <span className={'mr-1'}>
                 <NotificationTextLabel
@@ -402,7 +407,8 @@ function IncomeNotificationItem(props: {
                   notification={notification}
                 />
               </span>
-
+            </div>
+            <span>
               {sourceType != 'bonus' &&
                 (sourceUserUsername === MULTIPLE_USERS_KEY ? (
                   <span className={'mr-1 truncate'}>Multiple users</span>
@@ -414,20 +420,11 @@ function IncomeNotificationItem(props: {
                     justFirstName={true}
                   />
                 ))}
-              </div>
+              {getReasonForShowingIncomeNotification(false)} {' on'}
-            )}
-            {getReasonForShowingIncomeNotification(false)}
-            <span className={'ml-1 flex hidden sm:inline-block'}>
-              on
               <NotificationLink notification={notification} />
             </span>
-            <RelativeTimestamp time={createdTime} />
           </div>
         </Row>
-        <span className={'flex truncate text-gray-500 sm:hidden'}>
-          on
-          <NotificationLink notification={notification} />
-        </span>
         <div className={'mt-4 border-b border-gray-300'} />
       </a>
     </div>
@@ -473,24 +470,26 @@ function NotificationGroupItem(props: {
       )}
       <Row className={'items-center text-gray-500 sm:justify-start'}>
         <EmptyAvatar multi />
-        <div className={'flex truncate pl-2'}>
         <div
-            onClick={() => setExpanded(!expanded)}
+          className={'line-clamp-2 flex w-full flex-row flex-wrap pl-1 sm:pl-0'}
-            className={' flex cursor-pointer truncate pl-1  sm:pl-0'}
         >
           {sourceContractTitle ? (
-              <>
+            <div className={'flex w-full flex-row justify-between'}>
-                <span className={'flex-shrink-0'}>{'Activity on '}</span>
+              <div className={'ml-2'}>
-                <span className={'truncate'}>
+                Activity on
                 <NotificationLink notification={notifications[0]} />
-                </span>
-              </>
-            ) : (
-              'Other activity'
-            )}
               </div>
+              <div className={'hidden sm:inline-block'}>
                 <RelativeTimestamp time={notifications[0].createdTime} />
               </div>
+            </div>
+          ) : (
+            <span>
+              Other activity
+              <RelativeTimestamp time={notifications[0].createdTime} />
+            </span>
+          )}
+        </div>
       </Row>
       <div>
         <div className={clsx('mt-1 md:text-base', expanded ? 'pl-4' : '')}>
@@ -528,7 +527,7 @@ function NotificationGroupItem(props: {
                     notification={notification}
                     key={notification.id}
                     justSummary={false}
-                    hideTitle={true}
+                    isChildOfGroup={true}
                   />
                 ))}
               </>
@@ -545,22 +544,18 @@ function NotificationGroupItem(props: {
 function NotificationItem(props: {
   notification: Notification
   justSummary?: boolean
-  hideTitle?: boolean
+  isChildOfGroup?: boolean
 }) {
-  const { notification, justSummary, hideTitle } = props
+  const { notification, justSummary, isChildOfGroup } = props
   const {
     sourceType,
-    sourceId,
     sourceUserName,
     sourceUserAvatarUrl,
     sourceUpdateType,
     reasonText,
     reason,
     sourceUserUsername,
-    createdTime,
     sourceText,
-    sourceContractCreatorUsername,
-    sourceContractSlug,
   } = notification
 
   const [defaultNotificationText, setDefaultNotificationText] =
@@ -629,44 +624,38 @@ function NotificationItem(props: {
             className={'mr-2'}
             username={sourceUserName}
           />
-          <div className={'flex-1 overflow-hidden sm:flex'}>
+          <div className={'flex w-full flex-row pl-1 sm:pl-0'}>
             <div
               className={
-                'flex max-w-xl shrink overflow-hidden text-ellipsis pl-1 sm:pl-0'
+                'line-clamp-2 sm:line-clamp-none flex w-full flex-row justify-between'
               }
             >
+              <div>
                 {sourceUpdateType != 'closed' && (
                   <UserLink
                     name={sourceUserName || ''}
                     username={sourceUserUsername || ''}
-                  className={'mr-0 flex-shrink-0'}
+                    className={'mr-1 flex-shrink-0'}
                     justFirstName={true}
                   />
                 )}
-              {sourceType && reason && (
+                {getReasonForShowingNotification(
-                <div className={'inline flex truncate'}>
+                  notification,
-                  <span className={'ml-1 flex-shrink-0'}>
+                  false,
-                    {getReasonForShowingNotification(notification, false, true)}
+                  isChildOfGroup
-                  </span>
+                )}
-                  {!hideTitle && (
+                {isChildOfGroup ? (
+                  <RelativeTimestamp time={notification.createdTime} />
+                ) : (
                   <NotificationLink notification={notification} />
                 )}
               </div>
-              )}
-              {sourceId &&
-              sourceContractSlug &&
-              sourceContractCreatorUsername ? (
-                <CopyLinkDateTimeComponent
-                  prefix={sourceContractCreatorUsername}
-                  slug={sourceContractSlug}
-                  createdTime={createdTime}
-                  elementId={getSourceIdForLinkComponent(sourceId)}
-                  className={'-mx-1 inline-flex sm:inline-block'}
-                />
-              ) : (
-                <RelativeTimestamp time={createdTime} />
-              )}
             </div>
+            {!isChildOfGroup && (
+              <div className={'hidden sm:inline-block'}>
+                <RelativeTimestamp time={notification.createdTime} />
+              </div>
+            )}
           </div>
         </Row>
         <div className={'mt-1 ml-1 md:text-base'}>
@@ -697,8 +686,11 @@ export const setNotificationsAsSeen = (notifications: Notification[]) => {
   return notifications
 }
 
-function NotificationLink(props: { notification: Notification }) {
+function NotificationLink(props: {
-  const { notification } = props
+  notification: Notification
+  noClick?: boolean
+}) {
+  const { notification, noClick } = props
   const {
     sourceType,
     sourceContractTitle,
@@ -707,8 +699,17 @@ function NotificationLink(props: { notification: Notification }) {
     sourceSlug,
     sourceTitle,
   } = notification
+  if (noClick)
+    return (
+      <span className={'ml-1 font-bold '}>
+        {sourceContractTitle || sourceTitle}
+      </span>
+    )
   return (
     <a
+      className={
+        'ml-1 font-bold hover:underline hover:decoration-indigo-400 hover:decoration-2 '
+      }
       href={
         sourceContractCreatorUsername
           ? `/${sourceContractCreatorUsername}/${sourceContractSlug}`
@@ -716,9 +717,6 @@ function NotificationLink(props: { notification: Notification }) {
           ? `${groupPath(sourceSlug)}`
           : ''
       }
-      className={
-        'ml-1 inline max-w-xs truncate font-bold text-gray-500 hover:underline hover:decoration-indigo-400 hover:decoration-2 sm:max-w-sm'
-      }
     >
       {sourceContractTitle || sourceTitle}
     </a>
@@ -852,14 +850,6 @@ function getReasonForShowingNotification(
         reasonText = !simple ? 'tagged you on' : 'tagged you'
       else if (reason === 'reply_to_users_comment')
         reasonText = !simple ? 'replied to you on' : 'replied'
-      else if (reason === 'on_users_contract')
-        reasonText = !simple ? `commented on your question` : 'commented'
-      else if (reason === 'on_contract_with_users_comment')
-        reasonText = `commented on`
-      else if (reason === 'on_contract_with_users_answer')
-        reasonText = `commented on`
-      else if (reason === 'on_contract_with_users_shares_in')
-        reasonText = `commented on`
       else reasonText = `commented on`
       break
     case 'contract':
@@ -871,12 +861,6 @@ function getReasonForShowingNotification(
       break
     case 'answer':
       if (reason === 'on_users_contract') reasonText = `answered your question `
-      else if (reason === 'on_contract_with_users_comment')
-        reasonText = `answered`
-      else if (reason === 'on_contract_with_users_answer')
-        reasonText = `answered`
-      else if (reason === 'on_contract_with_users_shares_in')
-        reasonText = `answered`
       else reasonText = `answered`
       break
     case 'follow':
@@ -897,12 +881,7 @@ function getReasonForShowingNotification(
     default:
       reasonText = ''
   }
-
+  return replaceOn ? reasonText.replace(' on', '') : reasonText
-  return (
-    <span className={'flex-shrink-0'}>
-      {replaceOn ? reasonText.replace(' on', '') : reasonText}
-    </span>
-  )
 }
 
 // TODO: where should we put referral bonus notifications?