Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Chat] Message에 sender 정보를 포함하는 api 변경에 대응합니다. #2973

Merged
merged 6 commits into from
Nov 6, 2023
Merged

[Chat] Message에 sender 정보를 포함하는 api 변경에 대응합니다. #2973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e2c21b9
message에 sender 정보 추가
dongoc Oct 31, 2023
a533491
userInfo 제거 및 me 대체
dongoc Oct 31, 2023
b4f7548
pusher와 중복되는 unread 이벤트 삭제
dongoc Oct 31, 2023
6ca36d1
예시 코드 추가
dongoc Oct 31, 2023
517bd9f
getUnreadRoom prop명 변경
dongoc Nov 1, 2023
4baba7b
unread 코드 복원
dongoc Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 6 additions & 14 deletions packages/chat/src/chat-bubble/chat-bubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
OtherUnreadInterface,
PostMessageActionType,
TextPayload,
UserInfoInterface,
UserType,
} from '../types'
import { getProfileImageUrl } from '../utils'
Expand All @@ -16,7 +15,7 @@ import { ChatBubbleStyle } from '../types/ui'
import { ChatBubbleUI } from './chat-bubble-ui'

interface ChatBubbleProps {
userInfo: UserInfoInterface
my: boolean
message: MessageInterface
otherReadInfo?: OtherUnreadInterface[]
displayTarget: UserType
Expand All @@ -29,9 +28,9 @@ interface ChatBubbleProps {
}

const ChatBubble = ({
my,
message,
message: { senderId, createdAt },
userInfo: { me, others },
message: { sender, createdAt },
otherReadInfo,
displayTarget: componentDisplayTarget,
postMessageAction,
Expand All @@ -41,11 +40,6 @@ const ChatBubble = ({
blindedText,
bubbleStyle,
}: ChatBubbleProps) => {
const otherUserInfo = useMemo(
() => others.find((other) => other.id === senderId),
[senderId, others],
)

const unreadCount =
!disableUnreadCount && otherReadInfo
? otherReadInfo.reduce(
Expand Down Expand Up @@ -92,11 +86,9 @@ const ChatBubble = ({

return (
<ChatBubbleUI
type={me.id !== senderId ? 'received' : 'sent'}
profileImageUrl={
otherUserInfo ? getProfileImageUrl(otherUserInfo) : undefined
}
profileName={otherUserInfo?.profile.name}
type={my ? 'sent' : 'received'}
profileImageUrl={my ? undefined : getProfileImageUrl(sender)}
profileName={sender.profile.name}
unreadCount={unreadCount}
createdAt={createdAt}
payload={payload}
Expand Down
100 changes: 46 additions & 54 deletions packages/chat/src/chat/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
RoomInterface,
TextPayload,
UpdateChatData,
UserInfoInterface,
UserInterface,
UserType,
} from '../types'
import ChatBubble from '../chat-bubble'
Expand All @@ -30,10 +30,7 @@ export const CHAT_CONTAINER_ID = 'chat-inner-container'

export interface ChatProps {
displayTarget: UserType
/**
* me(sender), others(receiver)에 대한 기본 정보
*/
userInfo: UserInfoInterface
me: UserInterface
/**
* 초기 메시지들
*/
Expand Down Expand Up @@ -72,7 +69,7 @@ export interface ChatProps {
*/
export const Chat = ({
displayTarget,
userInfo,
me,
room,
messages: initMessages,
beforeSentMessages: initBeforeSentMessages,
Expand Down Expand Up @@ -136,7 +133,7 @@ export const Chat = ({

useChatMessage({
roomId: room.id,
userMeId: userInfo.me.id,
userMeId: me.id,
notifyNewMessage,
dispatch,
updateChatData,
Expand Down Expand Up @@ -232,9 +229,10 @@ export const Chat = ({
message: {
id: new Date().getTime(),
roomId: room.id,
senderId: userInfo.me.id,
senderId: me.id,
payload,
displayTarget: 'all',
sender: me,
},
})

Expand Down Expand Up @@ -304,52 +302,46 @@ export const Chat = ({
<HiddenElement />
</IntersectionObserver>
<Container ref={chatRoomRef} id={CHAT_CONTAINER_ID} {...props}>
{userInfo ? (
<>
<ul id="messages_list">
{[...messages, ...beforeSentMessages].map(
(message: MessageInterface) => (
<li key={message.id}>
<ChatBubble
displayTarget={displayTarget}
message={message}
userInfo={userInfo}
postMessageAction={
postMessage ? postMessageAction : undefined
}
otherReadInfo={otherUnreadInfo}
onRetryButtonClick={onRetry}
onRetryCancelButtonClick={onRetryCancel}
disableUnreadCount={disableUnreadCount}
blindedText={blindedText}
bubbleStyle={bubbleStyle}
/>
</li>
),
)}
</ul>
<ul id="failed_messages_list">
{failedMessages.map((message: MessageInterface) => (
<li key={message.id}>
<ChatBubble
displayTarget={displayTarget}
message={message}
userInfo={userInfo}
postMessageAction={
postMessage ? postMessageAction : undefined
}
otherReadInfo={otherUnreadInfo}
onRetryButtonClick={onRetry}
onRetryCancelButtonClick={onRetryCancel}
disableUnreadCount={disableUnreadCount}
blindedText={blindedText}
bubbleStyle={bubbleStyle}
/>
</li>
))}
</ul>
</>
) : null}
<ul id="messages_list">
{[...messages, ...beforeSentMessages].map(
(message: MessageInterface) => (
<li key={message.id}>
<ChatBubble
my={me.id === message.sender.id}
displayTarget={displayTarget}
message={message}
postMessageAction={
postMessage ? postMessageAction : undefined
}
otherReadInfo={otherUnreadInfo}
onRetryButtonClick={onRetry}
onRetryCancelButtonClick={onRetryCancel}
disableUnreadCount={disableUnreadCount}
blindedText={blindedText}
bubbleStyle={bubbleStyle}
/>
</li>
),
)}
</ul>
<ul id="failed_messages_list">
{failedMessages.map((message: MessageInterface) => (
<li key={message.id}>
<ChatBubble
my
displayTarget={displayTarget}
message={message}
postMessageAction={postMessage ? postMessageAction : undefined}
otherReadInfo={otherUnreadInfo}
onRetryButtonClick={onRetry}
onRetryCancelButtonClick={onRetryCancel}
disableUnreadCount={disableUnreadCount}
blindedText={blindedText}
bubbleStyle={bubbleStyle}
/>
</li>
))}
</ul>
</Container>
<HiddenElement ref={bottomRef} />
</>
Expand Down
1 change: 1 addition & 0 deletions packages/chat/src/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export interface MessageInterface {
displayTarget?: UserType[] | DisplayTargetAll
alternative?: TextPayload | ImagePayload | RichPayload
blindedAt?: string
sender: UserInterface
}

export interface UserInterface {
Expand Down
84 changes: 58 additions & 26 deletions packages/chat/src/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,33 +37,17 @@ export const MEDIA_ARGS: ChatContextValue = {

export const CHAT_ARGS: ChatProps = {
displayTarget: UserType.TNA_PARTNER,
userInfo: {
me: {
id: '61ea67f0de3e37001997a80f',
type: UserType.TNA_PARTNER,
identifier: '130',
code: 'TNA_BPM',
profile: {
name: 'TNA_BPM',
thumbnail:
'https://s3.ap-northeast-2.amazonaws.com/triple-tna-dev/partner/logo/1e2496ab-8725-4df4-84c7-db9804d3c71d.jpeg',
message: '',
},
me: {
id: '61ea67f0de3e37001997a80f',
type: UserType.TNA_PARTNER,
identifier: '130',
code: 'TNA_BPM',
profile: {
name: 'TNA_BPM',
thumbnail:
'https://s3.ap-northeast-2.amazonaws.com/triple-tna-dev/partner/logo/1e2496ab-8725-4df4-84c7-db9804d3c71d.jpeg',
message: '',
},
others: [
{
id: '6344be9953749900140bca42',
type: UserType.TRIPLE_USER,
identifier: '4043',
code: '_KA2408084137-1661761357899',
profile: {
name: '후라이',
thumbnail:
'https://media.triple.guide/triple-dev/c_limit,f_auto,h_2048,w_2048/52557846-363d-430a-9afd-1cd7fd4fe0b4.jpeg',
message: '',
},
},
],
},
getMessages: async () => {
return [
Expand Down Expand Up @@ -96,6 +80,18 @@ export const CHAT_ARGS: ChatProps = {
message:
'안녕하세요.\nTNA_BPM입니다. 예약해주셔서 감사합니다!\n\n궁금한 점이 있으시면 TNA_BPM 문의를 편하게 이용해주세요.',
},
sender: {
id: '61ea67f0de3e37001997a80f',
type: UserType.TNA_PARTNER,
identifier: '130',
code: 'TNA_BPM',
profile: {
name: 'TNA_BPM',
thumbnail:
'https://s3.ap-northeast-2.amazonaws.com/triple-tna-dev/partner/logo/1e2496ab-8725-4df4-84c7-db9804d3c71d.jpeg',
message: '',
},
},
},
{
id: 5749,
Expand All @@ -107,6 +103,18 @@ export const CHAT_ARGS: ChatProps = {
type: MessageType.TEXT,
message: '테스트 메시지',
},
sender: {
id: '6344be9953749900140bca42',
type: UserType.TRIPLE_USER,
identifier: '4043',
code: '1',
profile: {
name: '후라이',
thumbnail:
'https://media.triple.guide/triple-dev/c_limit,f_auto,h_2048,w_2048/52557846-363d-430a-9afd-1cd7fd4fe0b4.jpeg',
message: '',
},
},
},
]
},
Expand Down Expand Up @@ -153,6 +161,18 @@ export const CHAT_ARGS: ChatProps = {
type: MessageType.TEXT,
message: '테스트 메시지',
},
sender: {
id: '6344be9953749900140bca42',
type: UserType.TRIPLE_USER,
identifier: '4043',
code: '1',
profile: {
name: '후라이',
thumbnail:
'https://media.triple.guide/triple-dev/c_limit,f_auto,h_2048,w_2048/52557846-363d-430a-9afd-1cd7fd4fe0b4.jpeg',
message: '',
},
},
},
unreadCount: 0,
metadata: {
Expand All @@ -171,6 +191,18 @@ export const CHAT_ARGS: ChatProps = {
createdAt: '2022-11-04T06:44:57.017Z',
displayTarget: 'all',
payload,
sender: {
id: '61ea67f0de3e37001997a80f',
type: UserType.TNA_PARTNER,
identifier: '130',
code: 'TNA_BPM',
profile: {
name: 'TNA_BPM',
thumbnail:
'https://s3.ap-northeast-2.amazonaws.com/triple-tna-dev/partner/logo/1e2496ab-8725-4df4-84c7-db9804d3c71d.jpeg',
message: '',
},
},
},
],
}
Expand Down
Loading