fix(chat): make mentions interactive with user detail modal

RocketChat · Dec 5, 2024 · eb828e3 · eb828e3
1 parent 43807a7
commit eb828e3
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts
@@ -1124,4 +1124,24 @@ export default class EmbeddedChatApi {
     const data = response.json();
     return data;
   }
+
+  async userData(username: string) {
+    const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+    const response = await fetch(
+      `${this.host}/api/v1/users.info?username=${username}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+      }
+    );
+    const data = response.json();
+    return data;
+  }
 }
+
+
+
diff --git a/packages/markups/src/mentions/UserMention.js b/packages/markups/src/mentions/UserMention.js
@@ -1,11 +1,30 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@embeddedchat/ui-elements';
+import { useUserStore } from '@embeddedchat/react/src/store';
+import useSetExclusiveState from '@embeddedchat/react/src/hooks/useSetExclusiveState';
+import RCContext from '@embeddedchat/react/src/context/RCInstance';
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
 import useMentionStyles from '../elements/elements.styles';
 
 const UserMention = ({ contents }) => {
   const { members, username } = useContext(MarkupInteractionContext);
+  const { RCInstance } = useContext(RCContext);
+  const setExclusiveState = useSetExclusiveState();
+  const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
+    setShowCurrentUserInfo: state.setShowCurrentUserInfo,
+    setCurrentUser: state.setCurrentUser,
+  }));
+
+  const handleUserInfo = async (uname) => {
+    const data = await RCInstance.userData(uname);
+    setCurrentUser({
+      _id: data.user._id,
+      username: data.user.username,
+      name: data.user.name,
+    });
+    setExclusiveState(setShowCurrentUserInfo);
+  };
 
   const hasMember = (user) => {
     if (user === 'all' || user === 'here') return true;
@@ -23,7 +42,15 @@ const UserMention = ({ contents }) => {
   return (
     <>
       {hasMember(contents.value) ? (
-        <Box is="span" css={styles.mention}>
+        <Box
+          is="span"
+          css={styles.mention}
+          onClick={
+            ['here', 'all'].includes(contents.value)
+              ? null
+              : () => handleUserInfo(contents.value)
+          }
+        >
           {contents.value}
         </Box>
       ) : (

diff --git a/packages/react/src/views/Markdown/Markdown.js b/packages/react/src/views/Markdown/Markdown.js
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box } from '@embeddedchat/ui-elements';
-import { Markup, MarkupInteractionContext } from '@embeddedchat/markups';
+import { Markup, MarkupInteractionContext } from '@embeddedchat/markups/src';
 import EmojiReaction from '../EmojiReaction/EmojiReaction';
 import { useMemberStore, useUserStore } from '../../store';
 

diff --git a/packages/react/src/views/UserInformation/UserInformation.js b/packages/react/src/views/UserInformation/UserInformation.js
@@ -39,7 +39,7 @@ const UserInformation = () => {
   useEffect(() => {
     const getCurrentUserInfo = async () => {
       try {
-        const res = await RCInstance.userInfo(currentUser._id);
+        const res = await RCInstance.userData(currentUser.username);
         if (res?.user) {
           setCurrentUserInfo(res.user);
           setIsUserInfoFetched(true);
@@ -123,7 +123,11 @@ const UserInformation = () => {
             />
             <UserInfoField
               label="Last login"
-              value={formatTimestamp(currentUserInfo.lastLogin)}
+              value={
+                currentUserInfo?.username === 'rocket.cat'
+                  ? 'Never'
+                  : formatTimestamp(currentUserInfo.lastLogin)
+              }
               isAdmin={isAdmin}
               authenticatedUserId={authenticatedUserId}
               currentUserInfo={currentUserInfo}