Skip to content

Commit 8a1e1a7

Browse files
HoonBaekHoonBaek
authored
[QU-390] Sequel patch for message threading (#64)
- Move the location of message status and timestamp into the message content - Use paragraph tag in the Text message and OG message contents and set their word-break property to break-word - Add type definition with replyType to the App and Channel components props
1 parent 9e289d1 commit 8a1e1a7

File tree

14 files changed

+190
-169
lines changed

14 files changed

+190
-169
lines changed

‎src/index.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -387,6 +387,7 @@ interface ChannelProps {
387387
renderChatHeader?: (props: RenderChatHeaderProps) => React.ReactNode;
388388
renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode;
389389
queries?: ChannelQueries;
390+
replyType?: ReplyType;
390391
}
391392
interface sendBirdSelectorsInterface {
392393
getSdk: (store: SendBirdState) => SendBirdSelectors.GetSdk;
@@ -448,6 +449,7 @@ interface AppProps {
448449
resizingWidth?: number | string,
449450
resizingHeight?: number | string,
450451
};
452+
replyType?: ReplyType;
451453
}
452454

453455
interface ClientMessage {

‎src/smart-components/App/stories/index.stories.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ export const user2 = () => fitPageSize(
220220
showSearchIcon
221221
allowProfileEdit
222222
profileUrl={addProfile}
223+
config={{ logLevel: 'all' }}
223224
replyType="QUOTE_REPLY"
224225
useMessageGrouping={false}
225226
imageCompression={{
@@ -238,6 +239,7 @@ export const user3 = () => fitPageSize(
238239
showSearchIcon
239240
allowProfileEdit
240241
profileUrl={addProfile}
242+
config={{ logLevel: 'all' }}
241243
replyType="QUOTE_REPLY"
242244
/>
243245
);
@@ -251,6 +253,7 @@ export const user4 = () => fitPageSize(
251253
allowProfileEdit
252254
useMessageGrouping={false}
253255
profileUrl={addProfile}
256+
config={{ logLevel: 'all' }}
254257
replyType="QUOTE_REPLY"
255258
/>
256259
);

‎src/ui/MessageContent/__tests__/MessageContent.spec.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ describe('MessageContent', () => {
7272
component.find('.sendbird-message-content__left__avatar').hostNodes().exists()
7373
).toBe(true);
7474
expect(
75-
component.find('.sendbird-message-content__left__created-at').hostNodes().exists()
75+
component.find('.sendbird-message-content__middle__body-container__created-at.left').hostNodes().exists()
7676
).toBe(false);
7777
expect(
7878
component.find('.sendbird-message-content-menu.outgoing').hostNodes().exists()
@@ -87,7 +87,7 @@ describe('MessageContent', () => {
8787
component.find('.sendbird-message-content__right.chain-top').hostNodes().exists()
8888
).toBe(false);
8989
expect(
90-
component.find('.sendbird-message-content__right__created-at').hostNodes().exists()
90+
component.find('.sendbird-message-content__middle__body-container__created-at.right').hostNodes().exists()
9191
).toBe(true);
9292
expect(
9393
component.find('.sendbird-message-content-menu.incoming').hostNodes().exists()
@@ -198,10 +198,7 @@ describe('MessageContent', () => {
198198
outgoingMessage.find('.sendbird-message-content__left__avatar').hostNodes().exists()
199199
).toBe(false);
200200
expect(
201-
outgoingMessage.find('.sendbird-message-content__left__created-at').hostNodes().exists()
202-
).toBe(false);
203-
expect(
204-
outgoingMessage.find('.sendbird-message-content__right__created-at').hostNodes().exists()
201+
outgoingMessage.find('.sendbird-message-content__middle__body-container__created-at').hostNodes().exists()
205202
).toBe(false);
206203
const incomingMessage = mount(
207204
<MessageContent
@@ -216,10 +213,7 @@ describe('MessageContent', () => {
216213
incomingMessage.find('.sendbird-message-content__left__avatar').hostNodes().exists()
217214
).toBe(false);
218215
expect(
219-
incomingMessage.find('.sendbird-message-content__left__created-at').hostNodes().exists()
220-
).toBe(false);
221-
expect(
222-
incomingMessage.find('.sendbird-message-content__right__created-at').hostNodes().exists()
216+
incomingMessage.find('.sendbird-message-content__middle__body-container__created-at').hostNodes().exists()
223217
).toBe(false);
224218
});
225219

‎src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -80,25 +80,25 @@ exports[`MessageContent should do a snapshot test of the MessageContent DOM 1`]
8080
<div
8181
className="sendbird-message-content__middle__body-container"
8282
>
83-
<div
84-
className="sendbird-message-content__middle__message-item-body sendbird-text-message-item-body incoming "
83+
<span
84+
className="sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
8585
>
86-
<span
87-
className="sendbird-text-message-item-body__message sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
86+
<p
87+
className="sendbird-message-content__middle__message-item-body sendbird-text-message-item-body incoming "
8888
>
8989
First second third
90-
</span>
91-
</div>
90+
</p>
91+
</span>
92+
<span
93+
className="sendbird-message-content__middle__body-container__created-at right sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
94+
>
95+
mock-date
96+
</span>
9297
</div>
9398
</div>
9499
<div
95100
className="sendbird-message-content__right "
96101
>
97-
<span
98-
className="sendbird-message-content__right__created-at sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
99-
>
100-
mock-date
101-
</span>
102102
<div
103103
className="sendbird-message-content-menu incoming"
104104
>

‎src/ui/MessageContent/index.scss‎

Lines changed: 55 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,28 @@
3636
flex-direction: column;
3737
max-width: 400px;
3838
align-items: flex-start;
39+
40+
.sendbird-message-content__middle__body-container {
41+
.sendbird-message-content__middle__body-container__created-at {
42+
position: absolute;
43+
bottom: 6px;
44+
right: -84px;
45+
white-space: nowrap;
46+
display: flex;
47+
flex-direction: row;
48+
min-width: 80px;
49+
&.supposed-hover {
50+
display: none;
51+
}
52+
}
53+
}
54+
3955
.sendbird-message-content__middle__sender-name {
4056
position: relative;
4157
margin-left: 12px;
4258
margin-bottom: 4px;
4359
}
60+
4461
.sendbird-message-content__middle__quote-message {
4562
position: relative;
4663
width: 100%;
@@ -64,16 +81,6 @@
6481
}
6582
}
6683

67-
.sendbird-message-content__right__created-at {
68-
position: absolute;
69-
bottom: 2px;
70-
white-space: nowrap;
71-
display: inline-flex;
72-
&.supposed-hover {
73-
display: none;
74-
}
75-
}
76-
7784
.sendbird-message-content-menu {
7885
position: relative;
7986
flex-direction: row;
@@ -87,13 +94,17 @@
8794

8895
&:hover {
8996
.sendbird-message-content__right {
90-
.sendbird-message-content__right__created-at {
91-
display: none;
92-
}
9397
.sendbird-message-content-menu {
9498
display: inline-flex;
9599
}
96100
}
101+
.sendbird-message-content__middle {
102+
.sendbird-message-content__middle__body-container {
103+
.sendbird-message-content__middle__body-container__created-at {
104+
display: none;
105+
}
106+
}
107+
}
97108
}
98109
}
99110

@@ -112,20 +123,6 @@
112123
}
113124
}
114125

115-
.sendbird-message-content__left__created-at {
116-
position: absolute;
117-
bottom: 2px;
118-
right: 4px;
119-
white-space: nowrap;
120-
display: flex;
121-
box-sizing: content-box;
122-
min-width: 16px;
123-
min-height: 16px;
124-
&.supposed-hover {
125-
display: none;
126-
}
127-
}
128-
129126
.sendbird-message-content-menu {
130127
position: absolute;
131128
top: 2px;
@@ -144,6 +141,7 @@
144141
flex-direction: column;
145142
max-width: 400px;
146143
align-items: flex-end;
144+
147145
.sendbird-message-content__middle__quote-message {
148146
position: relative;
149147
width: 100%;
@@ -153,7 +151,27 @@
153151
}
154152

155153
.sendbird-message-content__middle__body-container {
154+
position: relative;
156155
width: fit-content;
156+
157+
.sendbird-message-content__middle__body-container__created-at {
158+
position: absolute;
159+
bottom: 2px;
160+
left: -84px;
161+
white-space: nowrap;
162+
display: flex;
163+
justify-content: flex-end;
164+
box-sizing: content-box;
165+
min-width: 80px;
166+
min-height: 16px;
167+
&.supposed-hover {
168+
display: none;
169+
}
170+
.sendbird-message-content__middle__body-container__created-at__component-container {
171+
position: relative;
172+
display: inline-flex;
173+
}
174+
}
157175
}
158176
}
159177

@@ -163,19 +181,26 @@
163181

164182
&:hover {
165183
.sendbird-message-content__left {
166-
.sendbird-message-content__left__created-at {
167-
display: none;
168-
}
169184
.sendbird-message-content-menu {
170185
display: inline-flex;
171186
}
172187
}
188+
.sendbird-message-content__middle {
189+
.sendbird-message-content__middle__body-container {
190+
.sendbird-message-content__middle__body-container__created-at {
191+
display: none;
192+
}
193+
}
194+
}
173195
}
174196
}
175197

176198
.sendbird-message-content__middle__body-container {
177199
position: relative;
178200
width: fit-content;
201+
display: flex;
202+
flex-direction: column;
203+
179204
.sendbird-message-content__middle__message-item-body {
180205
width: 100%;
181206
box-sizing: border-box;

‎src/ui/MessageContent/index.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -132,15 +132,6 @@ export default function MessageContent({
132132
)}
133133
/>
134134
)}
135-
{(isByMe && !chainBottom) && (
136-
<div className={getClassName(['sendbird-message-content__left__created-at', supposedHoverClassName])}>
137-
<MessageStatus
138-
message={message}
139-
channel={channel}
140-
status={getOutgoingMessageState(channel, message)}
141-
/>
142-
</div>
143-
)}
144135
{/* outgoing menu */}
145136
{isByMe && (
146137
<div className={getClassName(['sendbird-message-content-menu', useReactionClassName, supposedHoverClassName, isByMeClassName])}>
@@ -200,6 +191,18 @@ export default function MessageContent({
200191
) : null}
201192
{/* container: message item body + emoji reactions */}
202193
<div className={getClassName(['sendbird-message-content__middle__body-container'])} >
194+
{/* message status component */}
195+
{(isByMe && !chainBottom) && (
196+
<div className={getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName])}>
197+
<div className="sendbird-message-content__middle__body-container__created-at__component-container">
198+
<MessageStatus
199+
message={message}
200+
channel={channel}
201+
status={getOutgoingMessageState(channel, message)}
202+
/>
203+
</div>
204+
</div>
205+
)}
203206
{/* message item body components */}
204207
{isTextMessage(message as UserMessage) && (
205208
<TextMessageItemBody
@@ -259,19 +262,19 @@ export default function MessageContent({
259262
/>
260263
</div>
261264
)}
265+
{(!isByMe && !chainBottom) && (
266+
<Label
267+
className={getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName])}
268+
type={LabelTypography.CAPTION_3}
269+
color={LabelColors.ONBACKGROUND_2}
270+
>
271+
{getMessageCreatedAt(message)}
272+
</Label>
273+
)}
262274
</div>
263275
</div>
264276
{/* right */}
265277
<div className={getClassName(['sendbird-message-content__right', chainTopClassName, useReactionClassName, useReplyingClassName])}>
266-
{(!isByMe && !chainBottom) && (
267-
<Label
268-
className={getClassName(['sendbird-message-content__right__created-at', supposedHoverClassName])}
269-
type={LabelTypography.CAPTION_3}
270-
color={LabelColors.ONBACKGROUND_2}
271-
>
272-
{getMessageCreatedAt(message)}
273-
</Label>
274-
)}
275278
{/* incoming menu */}
276279
{!isByMe && (
277280
<div className={getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])}>

‎src/ui/MessageInput/index.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@ const MessageInput = React.forwardRef((props, ref) => {
7979
}, [inputValue]);
8080
// clear input value when channel changes
8181
useEffect(() => {
82-
setInputValue('');
82+
if (!isEdit) {
83+
setInputValue('');
84+
}
8385
}, [channelUrl]);
8486

8587
const sendMessage = () => {

‎src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@ exports[`OGMessageItemBody should do a snapshot test of the OGMessageItemBody DO
44
<div
55
className=" sendbird-og-message-item-body incoming "
66
>
7-
<div
8-
className="sendbird-og-message-item-body__text-bubble"
9-
/>
7+
<span
8+
className="sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
9+
>
10+
<p
11+
className="sendbird-og-message-item-body__text-bubble"
12+
/>
13+
</span>
1014
<div
1115
className="sendbird-og-message-item-body__og-thumbnail"
1216
onClick={[Function]}

‎src/ui/OGMessageItemBody/index.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
padding: 8px 12px;
1414
box-sizing: border-box;
1515
border-radius: 16px 16px 0px 0px;
16-
word-break: break-all;
16+
word-break: break-word;
1717

1818
.sendbird-og-message-item-body__text-bubble__message {
1919
display: inline;
@@ -107,3 +107,7 @@
107107
border-radius: 16px 16px 0px 0px;
108108
}
109109
}
110+
111+
p.sendbird-og-message-item-body__text-bubble {
112+
margin: 0px;
113+
}

0 commit comments

Comments
 (0)