From 96a378ec4b92c64a1f9a3336304ad3a0e38ef106 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Fri, 12 Aug 2022 17:48:41 -0700
Subject: [PATCH] Make `RelativeTimestamp` a little more efficient (#754)

* Don't do extra dayjs work in timestamp components

* Remove extra wrapper from `RelativeTimestamp`
---
 web/components/contract/contract-details.tsx | 25 ++++++++++----------
 web/components/datetime-tooltip.tsx          | 11 +++++----
 web/components/feed/copy-link-date-time.tsx  |  4 +++-
 web/components/relative-timestamp.tsx        | 12 ++++++----
 4 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 081b035d..4a9d40af 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -83,12 +83,10 @@ export function MiscDetails(props: {
       {!hideGroupLink && groupLinks && groupLinks.length > 0 && (
         <SiteLink
           href={groupPath(groupLinks[0].slug)}
-          className="text-sm text-gray-400"
+          className="line-clamp-1 text-sm text-gray-400"
         >
-          <Row className={'line-clamp-1 flex-wrap items-center '}>
-            <UserGroupIcon className="mx-1 mb-0.5 inline h-4 w-4 shrink-0" />
-            {groupLinks[0].name}
-          </Row>
+          <UserGroupIcon className="mx-1 mb-0.5 inline h-4 w-4 shrink-0" />
+          {groupLinks[0].name}
         </SiteLink>
       )}
     </Row>
@@ -211,7 +209,7 @@ export function ContractDetails(props: {
             <>
               <DateTimeTooltip
                 text="Market resolved:"
-                time={contract.resolutionTime}
+                time={dayjs(contract.resolutionTime)}
               >
                 {resolvedDate}
               </DateTimeTooltip>
@@ -267,13 +265,16 @@ function EditableCloseDate(props: {
 }) {
   const { closeTime, contract, isCreator } = props
 
+  const dayJsCloseTime = dayjs(closeTime)
+  const dayJsNow = dayjs()
+
   const [isEditingCloseTime, setIsEditingCloseTime] = useState(false)
   const [closeDate, setCloseDate] = useState(
-    closeTime && dayjs(closeTime).format('YYYY-MM-DDTHH:mm')
+    closeTime && dayJsCloseTime.format('YYYY-MM-DDTHH:mm')
   )
 
-  const isSameYear = dayjs(closeTime).isSame(dayjs(), 'year')
-  const isSameDay = dayjs(closeTime).isSame(dayjs(), 'day')
+  const isSameYear = dayJsCloseTime.isSame(dayJsNow, 'year')
+  const isSameDay = dayJsCloseTime.isSame(dayJsNow, 'day')
 
   const onSave = () => {
     const newCloseTime = dayjs(closeDate).valueOf()
@@ -314,11 +315,11 @@ function EditableCloseDate(props: {
       ) : (
         <DateTimeTooltip
           text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
-          time={closeTime}
+          time={dayJsCloseTime}
         >
           {isSameYear
-            ? dayjs(closeTime).format('MMM D')
-            : dayjs(closeTime).format('MMM D, YYYY')}
+            ? dayJsCloseTime.format('MMM D')
+            : dayJsCloseTime.format('MMM D, YYYY')}
           {isSameDay && <> ({fromNow(closeTime)})</>}
         </DateTimeTooltip>
       )}
diff --git a/web/components/datetime-tooltip.tsx b/web/components/datetime-tooltip.tsx
index 7aaf61aa..d820e728 100644
--- a/web/components/datetime-tooltip.tsx
+++ b/web/components/datetime-tooltip.tsx
@@ -1,4 +1,4 @@
-import dayjs from 'dayjs'
+import dayjs, { Dayjs } from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
 import advanced from 'dayjs/plugin/advancedFormat'
@@ -9,18 +9,19 @@ dayjs.extend(timezone)
 dayjs.extend(advanced)
 
 export function DateTimeTooltip(props: {
-  time: number
+  time: Dayjs
   text?: string
+  className?: string
   children?: React.ReactNode
   noTap?: boolean
 }) {
-  const { time, text, noTap } = props
+  const { className, time, text, noTap } = props
 
-  const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a z')
+  const formattedTime = time.format('MMM DD, YYYY hh:mm a z')
   const toolTip = text ? `${text} ${formattedTime}` : formattedTime
 
   return (
-    <Tooltip text={toolTip} noTap={noTap}>
+    <Tooltip className={className} text={toolTip} noTap={noTap}>
       {props.children}
     </Tooltip>
   )
diff --git a/web/components/feed/copy-link-date-time.tsx b/web/components/feed/copy-link-date-time.tsx
index cea8300a..8238d3e3 100644
--- a/web/components/feed/copy-link-date-time.tsx
+++ b/web/components/feed/copy-link-date-time.tsx
@@ -7,6 +7,7 @@ import { fromNow } from 'web/lib/util/time'
 import { ToastClipboard } from 'web/components/toast-clipboard'
 import { LinkIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
+import dayjs from 'dayjs'
 
 export function CopyLinkDateTimeComponent(props: {
   prefix: string
@@ -17,6 +18,7 @@ export function CopyLinkDateTimeComponent(props: {
 }) {
   const { prefix, slug, elementId, createdTime, className } = props
   const [showToast, setShowToast] = useState(false)
+  const time = dayjs(createdTime)
 
   function copyLinkToComment(
     event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
@@ -30,7 +32,7 @@ export function CopyLinkDateTimeComponent(props: {
   }
   return (
     <div className={clsx('inline', className)}>
-      <DateTimeTooltip time={createdTime} noTap>
+      <DateTimeTooltip time={time} noTap>
         <Link href={`/${prefix}/${slug}#${elementId}`} passHref={true}>
           <a
             onClick={(event) => copyLinkToComment(event)}
diff --git a/web/components/relative-timestamp.tsx b/web/components/relative-timestamp.tsx
index 160a665d..bd029cf6 100644
--- a/web/components/relative-timestamp.tsx
+++ b/web/components/relative-timestamp.tsx
@@ -1,14 +1,16 @@
 import { DateTimeTooltip } from './datetime-tooltip'
-import { fromNow } from 'web/lib/util/time'
+import dayjs from 'dayjs'
 import React from 'react'
 
 export function RelativeTimestamp(props: { time: number }) {
   const { time } = props
+  const dayJsTime = dayjs(time)
   return (
-    <DateTimeTooltip time={time}>
-      <span className="ml-1 whitespace-nowrap text-gray-400">
-        {fromNow(time)}
-      </span>
+    <DateTimeTooltip
+      className="ml-1 whitespace-nowrap text-gray-400"
+      time={dayJsTime}
+    >
+      {dayJsTime.fromNow()}
     </DateTimeTooltip>
   )
 }