open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use react-query to cache notifications (#625)

Browse Source 
* 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
This commit is contained in:
Ian Philips 2022-07-07 14:41:50 -06:00 committed by GitHub
parent a22b29ad6d
commit cfbb78af48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 358 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/components/nav/sidebar.tsx
View File

@ -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 preferredNotifications = usePreferredNotifications(user?.id, {
unseenOnly: true,
const { currentPage, memberItems, privateUser } = props
const preferredNotifications = useUnseenPreferredNotifications(
privateUser,
{
customHref: '/group/',
})
},
memberItems.length > 0 ? memberItems.length : undefined
)
// Set notification as seen if our current page is equal to the isSeenOnHref property
useEffect(() => {

56
web/components/notifications-icon.tsx
View File

@ -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 (Date.now() - (privateUser.lastTimeCheckedBonuses ?? 0) > 65 * 1000)
requestBonuses({}).catch((error) => {
console.log("couldn't get bonuses:", error.message)
})
if (
privateUser &&
privateUser.lastTimeCheckedBonuses &&
Date.now() - privateUser.lastTimeCheckedBonuses > 1000 * 70
)
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 && (
<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>
)}
{privateUser && <UnseenNotificationsBubble privateUser={privateUser} />}
<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>
)
}

77
web/hooks/use-notifications.ts
View File

@ -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(
userId: string | undefined,
options: { unseenOnly: boolean }
) {
// For some reason react-query subscriptions don't actually listen for notifications
// Use useUnseenPreferredNotificationGroups to listen for new notifications
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(
userId: string | undefined,
options: { unseenOnly: boolean; customHref?: string }
export function useUnseenPreferredNotifications(
privateUser: PrivateUser,
options: { customHref?: string },
limit: number = NOTIFICATIONS_PER_PAGE
) {
const { unseenOnly, customHref } = options
const [privateUser, setPrivateUser] = useState<PrivateUser | null>(null)
const { customHref } = options
const [notifications, setNotifications] = useState<Notification[]>([])
const [userAppropriateNotifications, setUserAppropriateNotifications] =
useState<Notification[]>([])
useEffect(() => {
if (userId) listenForPrivateUser(userId, setPrivateUser)
}, [userId])
return listenForNotifications(privateUser.id, setNotifications, {
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
}

27
web/lib/firebase/notifications.ts
View File

@ -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))
return query(notifsCollection)
if (unseenOnlyOptions?.unseenOnly)
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)

275
web/pages/notifications.tsx
View File

@ -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 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 />
}
const privateUser = usePrivateUser(user?.id)
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 &&
"You don't have any notifications. Try changing your settings to see more."}
{paginatedNotificationGroups.map((notification) =>
<NotificationSettings />
</div>
),
},
]}
/>
</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
: (page - 1) * NOTIFICATIONS_PER_PAGE}
{page === 1 ? 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 /
NOTIFICATIONS_PER_PAGE && setPage(page + 1)
allGroupedNotifications?.length / NOTIFICATIONS_PER_PAGE &&
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 {
sourceType,
sourceUserName,
reason,
sourceUserUsername,
createdTime,
} = notification
const { sourceType, sourceUserName, sourceUserUsername } = 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 '}>
{sourceType && reason && (
<div className={'line-clamp-2 flex max-w-xl shrink '}>
<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)}
<span className={'ml-1 flex hidden sm:inline-block'}>
on
{getReasonForShowingIncomeNotification(false)} {' 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={' flex cursor-pointer truncate pl-1 sm:pl-0'}
className={'line-clamp-2 flex w-full flex-row flex-wrap pl-1 sm:pl-0'}
>
{sourceContractTitle ? (
<>
<span className={'flex-shrink-0'}>{'Activity on '}</span>
<span className={'truncate'}>
<div className={'flex w-full flex-row justify-between'}>
<div className={'ml-2'}>
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 && (
<div className={'inline flex truncate'}>
<span className={'ml-1 flex-shrink-0'}>
{getReasonForShowingNotification(notification, false, true)}
</span>
{!hideTitle && (
{getReasonForShowingNotification(
notification,
false,
isChildOfGroup
)}
{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 }) {
const { notification } = props
function NotificationLink(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 (
<span className={'flex-shrink-0'}>
{replaceOn ? reasonText.replace(' on', '') : reasonText}
</span>
)
return replaceOn ? reasonText.replace(' on', '') : reasonText
}
// TODO: where should we put referral bonus notifications?