From a75c838ef33d0f0de67ffcc929c01014c8a9171c Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Fri, 18 Nov 2022 17:08:46 -0800
Subject: [PATCH] Populate user message tooltip. Closes #2343

---
 .../chat/ChatUserMessage/ChatUserMessage.tsx  | 23 ++++++++++++++++---
 .../chat/ChatUserMessage/messageFmt.ts        |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index 6d9572763..6cf5b8378 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import { FC, useEffect, useState } from 'react';
+import { FC, ReactNode, useEffect, useState } from 'react';
 import he from 'he';
 import cn from 'classnames';
 import { Tooltip } from 'antd';
@@ -11,6 +11,7 @@ import { formatTimestamp } from './messageFmt';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatUserBadge } from '../ChatUserBadge/ChatUserBadge';
 import { accessTokenAtom } from '../../stores/ClientConfigStore';
+import { User } from '../../../interfaces/user.model';
 
 // Lazy loaded components
 
@@ -32,6 +33,22 @@ export type ChatUserMessageProps = {
   isAuthorAuthenticated: boolean;
 };
 
+export type UserTooltipProps = {
+  user: User;
+  children: ReactNode;
+};
+
+const UserTooltip: FC<UserTooltipProps> = ({ children, user }) => {
+  const { displayName, createdAt } = user;
+  const content = `${displayName} first joined ${formatTimestamp(createdAt)}`;
+
+  return (
+    <Tooltip title={content} placement="topLeft" mouseEnterDelay={1}>
+      {children}
+    </Tooltip>
+  );
+};
+
 export const ChatUserMessage: FC<ChatUserMessageProps> = ({
   message,
   highlightString,
@@ -78,12 +95,12 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
         style={{ borderColor: color }}
       >
         {!sameUserAsLast && (
-          <Tooltip title="user info goes here" placement="topLeft" mouseEnterDelay={1}>
+          <UserTooltip user={user}>
             <div className={styles.user} style={{ color }}>
               <span className={styles.userName}>{displayName}</span>
               <span>{badgeNodes}</span>
             </div>
-          </Tooltip>
+          </UserTooltip>
         )}
         <Tooltip title={formattedTimestamp} mouseEnterDelay={1}>
           <Highlight search={highlightString}>
diff --git a/web/components/chat/ChatUserMessage/messageFmt.ts b/web/components/chat/ChatUserMessage/messageFmt.ts
index 13e2b445c..81fb53184 100644
--- a/web/components/chat/ChatUserMessage/messageFmt.ts
+++ b/web/components/chat/ChatUserMessage/messageFmt.ts
@@ -43,7 +43,7 @@ export function formatTimestamp(sentAt: Date) {
     const localeDate = now.toLocaleDateString('en-US', {
       dateStyle: 'medium',
     });
-    return `at ${localeDate} at ${now.toLocaleTimeString()}`;
+    return `${localeDate} at ${now.toLocaleTimeString()}`;
   }
 
   return `${now.toLocaleTimeString()}`;