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

Notifications ux

Browse Source
This commit is contained in:
Ian Philips 2022-07-14 11:48:04 -06:00
parent 27a544205f
commit 6a28643215
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/pages/notifications.tsx
View File

@ -36,6 +36,7 @@ import { groupBy, sum, uniq } from 'lodash'
import Custom404 from 'web/pages/404' import Custom404 from 'web/pages/404'
import { track } from '@amplitude/analytics-browser' import { track } from '@amplitude/analytics-browser'
import { Pagination } from 'web/components/pagination' import { Pagination } from 'web/components/pagination'
import { useWindowSize } from 'web/hooks/use-window-size'
export const NOTIFICATIONS_PER_PAGE = 30 export const NOTIFICATIONS_PER_PAGE = 30
const MULTIPLE_USERS_KEY = 'multipleUsers' const MULTIPLE_USERS_KEY = 'multipleUsers'
@ -183,7 +184,7 @@ function IncomeNotificationGroupItem(props: {
const groupedNotificationsBySourceTitle = groupBy( const groupedNotificationsBySourceTitle = groupBy(
groupedNotificationsBySourceType[sourceType], groupedNotificationsBySourceType[sourceType],
(notification) => { (notification) => {
return notification.sourceTitle return notification.sourceTitle ?? notification.sourceContractTitle
} }
) )
for (const contractId in groupedNotificationsBySourceTitle) { for (const contractId in groupedNotificationsBySourceTitle) {
@ -314,7 +315,8 @@ function IncomeNotificationItem(props: {
const { notification, justSummary } = props const { notification, justSummary } = props
const { sourceType, sourceUserName, sourceUserUsername } = notification const { sourceType, sourceUserName, sourceUserUsername } = notification
const [highlighted] = useState(!notification.isSeen) const [highlighted] = useState(!notification.isSeen)
const { width } = useWindowSize()
const isMobile = (width && width < 768) || false
useEffect(() => { useEffect(() => {
setNotificationsAsSeen([notification]) setNotificationsAsSeen([notification])
}, [notification]) }, [notification])
@ -351,7 +353,7 @@ function IncomeNotificationItem(props: {
{getReasonForShowingIncomeNotification(true)} {getReasonForShowingIncomeNotification(true)}
<QuestionOrGroupLink <QuestionOrGroupLink
notification={notification} notification={notification}
ignoreClick={true} ignoreClick={isMobile}
/> />
</span> </span>
</div> </div>
@ -406,6 +408,8 @@ function NotificationGroupItem(props: {
const { notificationGroup, className } = props const { notificationGroup, className } = props
const { notifications } = notificationGroup const { notifications } = notificationGroup
const { sourceContractTitle } = notifications[0] const { sourceContractTitle } = notifications[0]
const { width } = useWindowSize()
const isMobile = (width && width < 768) || false
const numSummaryLines = 3 const numSummaryLines = 3
const [expanded, setExpanded] = useState(false) const [expanded, setExpanded] = useState(false)
@ -445,7 +449,10 @@ function NotificationGroupItem(props: {
<div className={'flex w-full flex-row justify-between'}> <div className={'flex w-full flex-row justify-between'}>
<div className={'ml-2'}> <div className={'ml-2'}>
Activity on Activity on
<QuestionOrGroupLink notification={notifications[0]} /> <QuestionOrGroupLink
notification={notifications[0]}
ignoreClick={!expanded && isMobile}
/>
</div> </div>
<div className={'hidden sm:inline-block'}> <div className={'hidden sm:inline-block'}>
<RelativeTimestamp time={notifications[0].createdTime} /> <RelativeTimestamp time={notifications[0].createdTime} />