Skip to content

[QU-390] Sequel patch for message threading #64

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

Merged
HoonBaek merged 5 commits into from
Dec 7, 2021
Merged

[QU-390] Sequel patch for message threading #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85237ea
Move message status and created-at components into the body of messag…
HoonBaek Dec 6, 2021
d8f5e6d
Contain message text with paragraph tag and set their word-break prop…
HoonBaek Dec 6, 2021
bba2477
Add type definition of replyType to the App and Channel components props
HoonBaek Dec 6, 2021
cbd2dff
Fix flex-direccdtion property of body-container to the column
HoonBaek Dec 7, 2021
cc7cb08
Fix lint error and apply undisplaying timestamp in incoming message
HoonBaek Dec 7, 2021
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
2 changes: 2 additions & 0 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,7 @@ interface ChannelProps {
renderChatHeader?: (props: RenderChatHeaderProps) => React.ReactNode;
renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode;
queries?: ChannelQueries;
replyType?: ReplyType;
}
interface sendBirdSelectorsInterface {
getSdk: (store: SendBirdState) => SendBirdSelectors.GetSdk;
Expand Down Expand Up @@ -448,6 +449,7 @@ interface AppProps {
resizingWidth?: number | string,
resizingHeight?: number | string,
};
replyType?: ReplyType;
Copy link
Contributor

@sravan-s sravan-s Dec 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

}

interface ClientMessage {
Expand Down
3 changes: 3 additions & 0 deletions src/smart-components/App/stories/index.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,7 @@ export const user2 = () => fitPageSize(
showSearchIcon
allowProfileEdit
profileUrl={addProfile}
config={{ logLevel: 'all' }}
replyType="QUOTE_REPLY"
useMessageGrouping={false}
imageCompression={{
Expand All @@ -238,6 +239,7 @@ export const user3 = () => fitPageSize(
showSearchIcon
allowProfileEdit
profileUrl={addProfile}
config={{ logLevel: 'all' }}
replyType="QUOTE_REPLY"
/>
);
Expand All @@ -251,6 +253,7 @@ export const user4 = () => fitPageSize(
allowProfileEdit
useMessageGrouping={false}
profileUrl={addProfile}
config={{ logLevel: 'all' }}
replyType="QUOTE_REPLY"
/>
);
Expand Down
14 changes: 4 additions & 10 deletions src/ui/MessageContent/__tests__/MessageContent.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ describe('MessageContent', () => {
component.find('.sendbird-message-content__left__avatar').hostNodes().exists()
).toBe(true);
expect(
component.find('.sendbird-message-content__left__created-at').hostNodes().exists()
component.find('.sendbird-message-content__middle__body-container__created-at.left').hostNodes().exists()
).toBe(false);
expect(
component.find('.sendbird-message-content-menu.outgoing').hostNodes().exists()
Expand All @@ -87,7 +87,7 @@ describe('MessageContent', () => {
component.find('.sendbird-message-content__right.chain-top').hostNodes().exists()
).toBe(false);
expect(
component.find('.sendbird-message-content__right__created-at').hostNodes().exists()
component.find('.sendbird-message-content__middle__body-container__created-at.right').hostNodes().exists()
).toBe(true);
expect(
component.find('.sendbird-message-content-menu.incoming').hostNodes().exists()
Expand Down Expand Up @@ -198,10 +198,7 @@ describe('MessageContent', () => {
outgoingMessage.find('.sendbird-message-content__left__avatar').hostNodes().exists()
).toBe(false);
expect(
outgoingMessage.find('.sendbird-message-content__left__created-at').hostNodes().exists()
).toBe(false);
expect(
outgoingMessage.find('.sendbird-message-content__right__created-at').hostNodes().exists()
outgoingMessage.find('.sendbird-message-content__middle__body-container__created-at').hostNodes().exists()
).toBe(false);
const incomingMessage = mount(
<MessageContent
Expand All @@ -216,10 +213,7 @@ describe('MessageContent', () => {
incomingMessage.find('.sendbird-message-content__left__avatar').hostNodes().exists()
).toBe(false);
expect(
incomingMessage.find('.sendbird-message-content__left__created-at').hostNodes().exists()
).toBe(false);
expect(
incomingMessage.find('.sendbird-message-content__right__created-at').hostNodes().exists()
incomingMessage.find('.sendbird-message-content__middle__body-container__created-at').hostNodes().exists()
).toBe(false);
});

Expand Down
22 changes: 11 additions & 11 deletions src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,25 +80,25 @@ exports[`MessageContent should do a snapshot test of the MessageContent DOM 1`]
<div
className="sendbird-message-content__middle__body-container"
>
<div
className="sendbird-message-content__middle__message-item-body sendbird-text-message-item-body incoming "
<span
className="sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
>
<span
className="sendbird-text-message-item-body__message sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
<p
className="sendbird-message-content__middle__message-item-body sendbird-text-message-item-body incoming "
>
First second third
</span>
</div>
</p>
</span>
<span
className="sendbird-message-content__middle__body-container__created-at right sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
>
mock-date
</span>
</div>
</div>
<div
className="sendbird-message-content__right "
>
<span
className="sendbird-message-content__right__created-at sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
>
mock-date
</span>
<div
className="sendbird-message-content-menu incoming"
>
Expand Down
85 changes: 55 additions & 30 deletions src/ui/MessageContent/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,28 @@
flex-direction: column;
max-width: 400px;
align-items: flex-start;

.sendbird-message-content__middle__body-container {
.sendbird-message-content__middle__body-container__created-at {
position: absolute;
bottom: 6px;
right: -84px;
white-space: nowrap;
display: flex;
flex-direction: row;
min-width: 80px;
&.supposed-hover {
display: none;
}
}
}

.sendbird-message-content__middle__sender-name {
position: relative;
margin-left: 12px;
margin-bottom: 4px;
}

.sendbird-message-content__middle__quote-message {
position: relative;
width: 100%;
Expand All @@ -64,16 +81,6 @@
}
}

.sendbird-message-content__right__created-at {
position: absolute;
bottom: 2px;
white-space: nowrap;
display: inline-flex;
&.supposed-hover {
display: none;
}
}

.sendbird-message-content-menu {
position: relative;
flex-direction: row;
Expand All @@ -87,13 +94,17 @@

&:hover {
.sendbird-message-content__right {
.sendbird-message-content__right__created-at {
display: none;
}
.sendbird-message-content-menu {
display: inline-flex;
}
}
.sendbird-message-content__middle {
.sendbird-message-content__middle__body-container {
.sendbird-message-content__middle__body-container__created-at {
display: none;
}
}
}
}
}

Expand All @@ -112,20 +123,6 @@
}
}

.sendbird-message-content__left__created-at {
position: absolute;
bottom: 2px;
right: 4px;
white-space: nowrap;
display: flex;
box-sizing: content-box;
min-width: 16px;
min-height: 16px;
&.supposed-hover {
display: none;
}
}

.sendbird-message-content-menu {
position: absolute;
top: 2px;
Expand All @@ -144,6 +141,7 @@
flex-direction: column;
max-width: 400px;
align-items: flex-end;

.sendbird-message-content__middle__quote-message {
position: relative;
width: 100%;
Expand All @@ -153,7 +151,27 @@
}

.sendbird-message-content__middle__body-container {
position: relative;
width: fit-content;

.sendbird-message-content__middle__body-container__created-at {
position: absolute;
bottom: 2px;
left: -84px;
white-space: nowrap;
display: flex;
justify-content: flex-end;
box-sizing: content-box;
min-width: 80px;
min-height: 16px;
&.supposed-hover {
display: none;
}
.sendbird-message-content__middle__body-container__created-at__component-container {
position: relative;
display: inline-flex;
}
}
}
}

Expand All @@ -163,19 +181,26 @@

&:hover {
.sendbird-message-content__left {
.sendbird-message-content__left__created-at {
display: none;
}
.sendbird-message-content-menu {
display: inline-flex;
}
}
.sendbird-message-content__middle {
.sendbird-message-content__middle__body-container {
.sendbird-message-content__middle__body-container__created-at {
display: none;
}
}
}
}
}

.sendbird-message-content__middle__body-container {
position: relative;
width: fit-content;
display: flex;
flex-direction: column;

.sendbird-message-content__middle__message-item-body {
width: 100%;
box-sizing: border-box;
Expand Down
39 changes: 21 additions & 18 deletions src/ui/MessageContent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,15 +132,6 @@ export default function MessageContent({
)}
/>
)}
{(isByMe && !chainBottom) && (
<div className={getClassName(['sendbird-message-content__left__created-at', supposedHoverClassName])}>
<MessageStatus
message={message}
channel={channel}
status={getOutgoingMessageState(channel, message)}
/>
</div>
)}
{/* outgoing menu */}
{isByMe && (
<div className={getClassName(['sendbird-message-content-menu', useReactionClassName, supposedHoverClassName, isByMeClassName])}>
Expand Down Expand Up @@ -200,6 +191,18 @@ export default function MessageContent({
) : null}
{/* container: message item body + emoji reactions */}
<div className={getClassName(['sendbird-message-content__middle__body-container'])} >
{/* message status component */}
{(isByMe && !chainBottom) && (
<div className={getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName])}>
<div className="sendbird-message-content__middle__body-container__created-at__component-container">
<MessageStatus
message={message}
channel={channel}
status={getOutgoingMessageState(channel, message)}
/>
</div>
</div>
)}
{/* message item body components */}
{isTextMessage(message as UserMessage) && (
<TextMessageItemBody
Expand Down Expand Up @@ -259,19 +262,19 @@ export default function MessageContent({
/>
</div>
)}
{(!isByMe && !chainBottom) && (
<Label
className={getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName])}
type={LabelTypography.CAPTION_3}
color={LabelColors.ONBACKGROUND_2}
>
{getMessageCreatedAt(message)}
</Label>
)}
</div>
</div>
{/* right */}
<div className={getClassName(['sendbird-message-content__right', chainTopClassName, useReactionClassName, useReplyingClassName])}>
{(!isByMe && !chainBottom) && (
<Label
className={getClassName(['sendbird-message-content__right__created-at', supposedHoverClassName])}
type={LabelTypography.CAPTION_3}
color={LabelColors.ONBACKGROUND_2}
>
{getMessageCreatedAt(message)}
</Label>
)}
{/* incoming menu */}
{!isByMe && (
<div className={getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])}>
Expand Down
4 changes: 3 additions & 1 deletion src/ui/MessageInput/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,9 @@ const MessageInput = React.forwardRef((props, ref) => {
}, [inputValue]);
// clear input value when channel changes
useEffect(() => {
setInputValue('');
if (!isEdit) {
setInputValue('');
}
}, [channelUrl]);

const sendMessage = () => {
Expand Down
10 changes: 7 additions & 3 deletions src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,13 @@ exports[`OGMessageItemBody should do a snapshot test of the OGMessageItemBody DO
<div
className=" sendbird-og-message-item-body incoming "
>
<div
className="sendbird-og-message-item-body__text-bubble"
/>
<span
className="sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
>
<p
className="sendbird-og-message-item-body__text-bubble"
/>
</span>
<div
className="sendbird-og-message-item-body__og-thumbnail"
onClick={[Function]}
Expand Down
6 changes: 5 additions & 1 deletion src/ui/OGMessageItemBody/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
padding: 8px 12px;
box-sizing: border-box;
border-radius: 16px 16px 0px 0px;
word-break: break-all;
word-break: break-word;

.sendbird-og-message-item-body__text-bubble__message {
display: inline;
Expand Down Expand Up @@ -107,3 +107,7 @@
border-radius: 16px 16px 0px 0px;
}
}

p.sendbird-og-message-item-body__text-bubble {
margin: 0px;
}
Loading