From 699b03eb420ac4f7fb657e22d4bc167ffafa9ccd Mon Sep 17 00:00:00 2001 From: Ian Philips Date: Wed, 1 Jun 2022 11:52:27 -0600 Subject: [PATCH] Revert "Notifications ux fixes - wip (#383)" This reverts commit b5057f4028c1e7a6be254049cc7f47f766093636. --- functions/src/create-notification.ts | 3 +- web/components/feed/copy-link-date-time.tsx | 8 +- web/pages/notifications.tsx | 90 +++++++-------------- 3 files changed, 32 insertions(+), 69 deletions(-) diff --git a/functions/src/create-notification.ts b/functions/src/create-notification.ts index bd77f690..57f5d6ef 100644 --- a/functions/src/create-notification.ts +++ b/functions/src/create-notification.ts @@ -65,8 +65,7 @@ export const createNotification = async ( // TODO: Update for liquidity. // TODO: Find tagged users. // TODO: Find replies to comments. - // TODO: Filter bets for only open bets. - // TODO: Notify users of their own closed but not resolved contracts. + // TODO: Filter bets for only open bets if ( sourceType === 'comment' || sourceType === 'answer' || diff --git a/web/components/feed/copy-link-date-time.tsx b/web/components/feed/copy-link-date-time.tsx index 0ffac52e..60395801 100644 --- a/web/components/feed/copy-link-date-time.tsx +++ b/web/components/feed/copy-link-date-time.tsx @@ -8,15 +8,13 @@ import Link from 'next/link' import { fromNow } from 'web/lib/util/time' import { ToastClipboard } from 'web/components/toast-clipboard' import { LinkIcon } from '@heroicons/react/outline' -import clsx from 'clsx' export function CopyLinkDateTimeComponent(props: { contract: Contract createdTime: number elementId: string - className?: string }) { - const { contract, elementId, createdTime, className } = props + const { contract, elementId, createdTime } = props const [showToast, setShowToast] = useState(false) function copyLinkToComment( @@ -32,7 +30,7 @@ export function CopyLinkDateTimeComponent(props: { setTimeout(() => setShowToast(false), 2000) } return ( -
+ <> -
+ ) } diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx index 669f7a2b..b3c10a20 100644 --- a/web/pages/notifications.tsx +++ b/web/pages/notifications.tsx @@ -1,11 +1,7 @@ import { Tabs } from 'web/components/layout/tabs' import { useUser } from 'web/hooks/use-user' import React, { useEffect, useState } from 'react' -import { - Notification, - notification_reason_types, - notification_source_types, -} from 'common/notification' +import { Notification } from 'common/notification' import { listenForNotifications } from 'web/lib/firebase/notifications' import { Avatar } from 'web/components/avatar' import { Row } from 'web/components/layout/row' @@ -19,9 +15,9 @@ import { Comment } from 'web/lib/firebase/comments' import { getValue } from 'web/lib/firebase/utils' import Custom404 from 'web/pages/404' import { UserLink } from 'web/components/user-page' +import { Linkify } from 'web/components/linkify' import { User } from 'common/user' import { useContract } from 'web/hooks/use-contract' -import { Contract } from 'common/contract' export default function Notifications() { const user = useUser() @@ -41,8 +37,8 @@ export default function Notifications() { // TODO: use infinite scroll return ( -
- + <div className={'p-4'}> + <Title text={'Notifications'} /> <Tabs className={'pb-2 pt-1 '} defaultIndex={0} @@ -83,7 +79,6 @@ function Notification(props: { sourceUserName, sourceUserAvatarUrl, reasonText, - reason, sourceUserUsername, createdTime, } = notification @@ -145,7 +140,7 @@ function Notification(props: { } return ( - <div className={'bg-white px-1 pt-6 text-sm sm:px-4'}> + <div className={' bg-white px-4 pt-6'}> <Row className={'items-center text-gray-500 sm:justify-start'}> <Avatar avatarUrl={sourceUserAvatarUrl} @@ -153,47 +148,35 @@ function Notification(props: { className={'mr-2'} username={sourceUserName} /> - <div className={'flex-1 overflow-hidden sm:flex'}> - <div - className={ - 'flex max-w-sm shrink overflow-hidden text-ellipsis sm:max-w-md' - } - > - <UserLink - name={sourceUserName || ''} - username={sourceUserUsername || ''} - className={'mr-0 flex-shrink-0'} - /> - <a - href={getSourceUrl(sourceId)} - className={'inline-flex overflow-hidden text-ellipsis pl-1'} - > - {sourceType && reason ? ( - <div className={'inline truncate'}> - {getReasonTextFromReason(sourceType, reason, contract)} - </div> - ) : ( - reasonText - )} - </a> - </div> - {contract && sourceId && ( - <CopyLinkDateTimeComponent - contract={contract} - createdTime={createdTime} - elementId={getSourceIdForLinkComponent(sourceId)} - className={'-mx-1 inline-flex sm:inline-block'} - /> - )} + <div className={'flex-1'}> + <UserLink + name={sourceUserName || ''} + username={sourceUserUsername || ''} + className={'mr-0 flex-shrink-0'} + /> + <a href={getSourceUrl(sourceId)} className={'flex-1 pl-1'}> + {reasonText} + {contract && sourceId && ( + <div className={'inline'}> + <CopyLinkDateTimeComponent + contract={contract} + createdTime={createdTime} + elementId={getSourceIdForLinkComponent(sourceId)} + /> + </div> + )} + </a> </div> </Row> <a href={getSourceUrl(sourceId)}> - <div className={'mt-1 md:text-base'}> + <div className={'ml-4 mt-1'}> {' '} {contract && subText === contract.question ? ( - <div className={'text-indigo-700 hover:underline'}>{subText}</div> + <div className={'text-md text-indigo-700 hover:underline'}> + {subText} + </div> ) : ( - <div className={'line-clamp-4 whitespace-pre-line'}>{subText}</div> + <Linkify text={subText} /> )} </div> @@ -202,20 +185,3 @@ function Notification(props: { </div> ) } - -function getReasonTextFromReason( - source: notification_source_types, - reason: notification_reason_types, - contract: Contract | undefined -) { - switch (source) { - case 'comment': - return `commented on ${contract?.question}` - case 'contract': - return `${reason} ${contract?.question}` - case 'answer': - return `answered ${contract?.question}` - default: - return '' - } -}