// This displays a clickable user name (or whatever children element you provide), and displays a simple tooltip of created time. OnClick a modal with more information about the user is displayed. import { useState, ReactNode, FC } from 'react'; import { Divider, Modal, Typography, Row, Col, Space, Tooltip } from 'antd'; import formatDistanceToNow from 'date-fns/formatDistanceToNow'; import format from 'date-fns/format'; import { uniq } from 'lodash'; import { BanUserButton } from './BanUserButton'; import { ModeratorUserButton } from './ModeratorUserButton'; import { User, UserConnectionInfo } from '../../types/chat'; import { formatDisplayDate } from './UserTable'; import { formatUAstring } from '../../utils/format'; export type UserPopoverProps = { user: User; connectionInfo?: UserConnectionInfo | null; children: ReactNode; }; export const UserPopover: FC = ({ user, connectionInfo, children }) => { const [isModalOpen, setIsModalOpen] = useState(false); const handleShowModal = () => { setIsModalOpen(true); }; const handleCloseModal = () => { setIsModalOpen(false); }; const { displayName, createdAt, previousNames, nameChangedAt, disabledAt } = user; const { connectedAt, messageCount, userAgent } = connectionInfo || {}; let lastNameChangeDate = null; const nameList = previousNames && [...previousNames]; if (previousNames && previousNames.length > 1 && nameChangedAt) { lastNameChangeDate = new Date(nameChangedAt); // reverse prev names for display purposes nameList.reverse(); } const dateObject = new Date(createdAt); const createdAtDate = format(dateObject, 'PP pp'); const lastNameChangeDuration = lastNameChangeDate ? formatDistanceToNow(lastNameChangeDate) : null; return ( <> Created at: {createdAtDate}.
Click for more info. } placement="bottomLeft" >
{displayName}

User created at {createdAtDate}.

{connectionInfo && ( This user is currently connected to Chat.
  • Active for: {formatDistanceToNow(new Date(connectedAt))}
  • Messages sent: {messageCount}
  • User Agent:
    {formatUAstring(userAgent)}
)} {lastNameChangeDate && ( This user is also seen as:
    {uniq(nameList).map((name, index) => (
  • {name} {index === 0 ? ` (Changed ${lastNameChangeDuration} ago)` : ''}
  • ))}
)}
{disabledAt ? ( <> This user was banned on {formatDisplayDate(disabledAt)}.

) : ( )}
); }; UserPopover.defaultProps = { connectionInfo: null, };