Revert "Notifications ux fixes - wip (#383)"

This reverts commit b5057f4028.

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: Filter bets for only open bets
-  // TODO: Notify users of their own closed but not resolved contracts.
   if (
     sourceType === 'comment' ||
     sourceType === 'answer' ||

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 (
-    <div className={clsx('inline', className)}>
+    <>
       <DateTimeTooltip time={createdTime}>
         <Link
           href={`/${contract.creatorUsername}/${contract.slug}#${elementId}`}
@@ -55,6 +53,6 @@ export function CopyLinkDateTimeComponent(props: {
           </a>
         </Link>
       </DateTimeTooltip>
-    </div>
+    </>
   )
 }

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 {
+import { Notification } from 'common/notification'
-  Notification,
-  notification_reason_types,
-  notification_source_types,
-} 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 (
     <Page>
-      <div className={'p-2 sm:p-4'}>
+      <div className={'p-4'}>
-        <Title text={'Notifications'} className={'hidden sm:block'} />
+        <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-1'}>
-          <div
+          <UserLink
-            className={
+            name={sourceUserName || ''}
-              'flex max-w-sm shrink overflow-hidden text-ellipsis sm:max-w-md'
+            username={sourceUserUsername || ''}
-            }
+            className={'mr-0 flex-shrink-0'}
-          >
+          />
-            <UserLink
+          <a href={getSourceUrl(sourceId)} className={'flex-1 pl-1'}>
-              name={sourceUserName || ''}
+            {reasonText}
-              username={sourceUserUsername || ''}
+            {contract && sourceId && (
-              className={'mr-0 flex-shrink-0'}
+              <div className={'inline'}>
-            />
+                <CopyLinkDateTimeComponent
-            <a
+                  contract={contract}
-              href={getSourceUrl(sourceId)}
+                  createdTime={createdTime}
-              className={'inline-flex overflow-hidden text-ellipsis pl-1'}
+                  elementId={getSourceIdForLinkComponent(sourceId)}
-            >
+                />
-              {sourceType && reason ? (
+              </div>
-                <div className={'inline truncate'}>
+            )}
-                  {getReasonTextFromReason(sourceType, reason, contract)}
+          </a>
-                </div>
-              ) : (
-                reasonText
-              )}
-            </a>
-          </div>
-          {contract && sourceId && (
-            <CopyLinkDateTimeComponent
-              contract={contract}
-              createdTime={createdTime}
-              elementId={getSourceIdForLinkComponent(sourceId)}
-              className={'-mx-1 inline-flex sm:inline-block'}
-            />
-          )}
         </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 ''
-  }
-}