diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts index 021a82c4d..f846881fd 100644 --- 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 index 679ffc0d3..c860a4d70 100644 --- 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) ? ( - + handleUserInfo(contents.value) + } + > {contents.value} ) : ( diff --git a/packages/react/src/views/Markdown/Markdown.js b/packages/react/src/views/Markdown/Markdown.js index d9ee6b2ad..b98fe7caa 100644 --- 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 index d745ee9b7..8d9202677 100644 --- 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 = () => { />