Skip to content

Commit 4e32041

Browse files
HoonBaekHoonBaek
authored
[UK-932]Integrate message threading (#56)
1 parent 712fd76 commit 4e32041

File tree

64 files changed

+12090
-19693
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+12090
-19693
lines changed

‎package-lock.json‎

Lines changed: 10787 additions & 19043 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@
4848
"prop-types": "^15.7.2",
4949
"react": "^16.8.6 || ^17.0.0",
5050
"react-dom": "^16.8.6 || ^17.0.0",
51-
"sendbird": "^3.0.154"
51+
"sendbird": "^3.0.160"
5252
},
5353
"dependencies": {
5454
"css-vars-ponyfill": "^2.3.2",
5555
"date-fns": "^2.16.1",
5656
"prop-types": "^15.7.2",
5757
"react": "^16.8.6 || ^17.0.0",
5858
"react-dom": "^16.8.6 || ^17.0.0",
59-
"sendbird": "^3.0.154"
59+
"sendbird": "^3.0.160"
6060
},
6161
"bugs": {
6262
"url": "https://community.sendbird.com"

‎src/index.d.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ export type Logger = {
108108
};
109109

110110
export type SendbirdError = Sendbird.SendBirdError;
111+
export type ReplyType = "NONE" | "QUOTE_REPLY" | "THREAD";
111112

112113
export interface RenderOpenChannelTitleProps {
113114
channel: Sendbird.OpenChannel;
@@ -165,6 +166,7 @@ export interface RenderGroupChannelMessageInputProps {
165166
channel: Sendbird.GroupChannel;
166167
user: Sendbird.User;
167168
disabled: boolean;
169+
quoteMessage?: Sendbird.UserMessage | Sendbird.FileMessage;
168170
}
169171

170172
export interface ClientMessageSearchQuery extends SendBird.MessageSearchQuery {
@@ -375,8 +377,8 @@ interface ChannelProps {
375377
onSearchClick?(): void;
376378
highlightedMessage?: string | number;
377379
startingPoint?: number;
378-
onBeforeSendUserMessage?(text: string): Sendbird.UserMessageParams;
379-
onBeforeSendFileMessage?(file: File): Sendbird.FileMessageParams;
380+
onBeforeSendUserMessage?(text: string, quoteMessage?: Sendbird.UserMessage | Sendbird.FileMessage): Sendbird.UserMessageParams;
381+
onBeforeSendFileMessage?(file: File, quoteMessage?: Sendbird.UserMessage | Sendbird.FileMessage): Sendbird.FileMessageParams;
380382
onBeforeUpdateUserMessage?(text: string): Sendbird.UserMessageParams;
381383
onChatHeaderActionClick?(event: React.MouseEvent<HTMLElement>): void;
382384
renderCustomMessage?: RenderCustomMessage;

‎src/smart-components/App/index.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default function App(props) {
2626
profileUrl,
2727
config = {},
2828
useReaction,
29+
// replyType,
2930
useMessageGrouping,
3031
colorSet,
3132
stringSet,
@@ -96,6 +97,7 @@ export default function App(props) {
9697
startingPoint={startingPoint}
9798
highlightedMessage={highlightedMessage}
9899
useReaction={useReaction}
100+
// replyType={replyType}
99101
useMessageGrouping={useMessageGrouping}
100102
/>
101103
</div>
@@ -156,6 +158,7 @@ App.propTypes = {
156158
]),
157159
}),
158160
useReaction: PropTypes.bool,
161+
// replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
159162
showSearchIcon: PropTypes.bool,
160163
useMessageGrouping: PropTypes.bool,
161164
stringSet: PropTypes.objectOf(PropTypes.string),
@@ -186,6 +189,7 @@ App.defaultProps = {
186189
renderUserProfile: null,
187190
config: {},
188191
useReaction: true,
192+
// replyType: 'NONE',
189193
useMessageGrouping: true,
190194
stringSet: null,
191195
colorSet: null,

‎src/smart-components/App/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
.sendbird-app__conversation-wrap {
2020
flex: 1;
2121
position: relative;
22+
width: calc(100% - 320px);
2223
}
2324
.sendbird-app__channellist-wrap {
2425
max-width: 320px;

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

Lines changed: 63 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@ export const versionInfo = () => {
2424
<>
2525
<div>UIKit: {pkg.version}</div>
2626
<div>Sendbird SDK: {pkg.dependencies.sendbird.version}</div>
27-
<button onClick={() => { setshowAll(!showAll)}}>Show all</button>
27+
<button onClick={() => { setshowAll(!showAll) }}>Show all</button>
2828
{
2929
showAll && (
30-
<div>
31-
{
32-
Object.keys(pkg.dependencies)
33-
.map((p) => (
34-
<div key={p}>{p}: {pkg.dependencies[p].version}</div>
35-
))
36-
}
37-
</div>
30+
<div>
31+
{
32+
Object.keys(pkg.dependencies)
33+
.map((p) => (
34+
<div key={p}>{p}: {pkg.dependencies[p].version}</div>
35+
))
36+
}
37+
</div>
3838
)
3939
}
4040
</>
@@ -47,7 +47,7 @@ export const basicSDK = () => fitPageSize(
4747
userId={userId}
4848
nickname={userId}
4949
showSearchIcon
50-
/*config={{ logLevel: 'all' }}*/
50+
/*config={{ logLevel: 'all' }}*/
5151
/>
5252
);
5353

@@ -68,6 +68,7 @@ export const login = () => {
6868
const [theme, setTheme] = useState('light');
6969
const [messageSearch, setMessageSearch] = useState(true);
7070
const [profileEdit, setProfileEdit] = useState(true);
71+
const [useReply, setUseReply] = useState(true);
7172
return isLoginPage
7273
? fitPageSize(
7374
<div
@@ -111,8 +112,8 @@ export const login = () => {
111112
type="button"
112113
value={
113114
messageSearch
114-
? 'Use MessageSearch'
115-
: 'Not use MessageSearch'
115+
? 'Use MessageSearch'
116+
: 'Not use MessageSearch'
116117
}
117118
onClick={() => setMessageSearch(!messageSearch)}
118119
/>
@@ -121,11 +122,21 @@ export const login = () => {
121122
type="button"
122123
value={
123124
profileEdit
124-
? 'Use ProfileEdit'
125-
: 'Not use ProfileEdit'
125+
? 'Use ProfileEdit'
126+
: 'Not use ProfileEdit'
126127
}
127128
onClick={() => setProfileEdit(!profileEdit)}
128129
/>
130+
<input
131+
className="input__toggle-use-reply"
132+
type="button"
133+
value={
134+
useReply
135+
? 'Use Reply'
136+
: 'Not use Reply'
137+
}
138+
onClick={() => setUseReply(!useReply)}
139+
/>
129140
<input
130141
className="login-submit"
131142
type="submit"
@@ -142,6 +153,7 @@ export const login = () => {
142153
theme={theme}
143154
showSearchIcon={messageSearch}
144155
allowProfileEdit={profileEdit}
156+
replyType={useReply ? 'QUOTE_REPLY' : 'NONE'}
145157
/>
146158
)
147159
};
@@ -162,7 +174,7 @@ export const updateProfile = () => {
162174
);
163175
};
164176

165-
const age = 60;
177+
const age = 70;
166178
const array = [
167179
`hoon${age}1`,
168180
`hoon${age}2`,
@@ -196,6 +208,7 @@ export const user1 = () => fitPageSize(
196208
profileUrl={addProfile}
197209
config={{ logLevel: 'all' }}
198210
queries={{}}
211+
replyType="QUOTE_REPLY"
199212
/>
200213
);
201214
export const user2 = () => fitPageSize(
@@ -206,7 +219,12 @@ export const user2 = () => fitPageSize(
206219
showSearchIcon
207220
allowProfileEdit
208221
profileUrl={addProfile}
209-
// config={{ logLevel: 'all' }}
222+
replyType="QUOTE_REPLY"
223+
imageCompression={{
224+
compressionRate: 0.5,
225+
resizingWidth: 100,
226+
resizingHeight: '100px',
227+
}}
210228
/>
211229
);
212230
export const user3 = () => fitPageSize(
@@ -218,11 +236,7 @@ export const user3 = () => fitPageSize(
218236
showSearchIcon
219237
allowProfileEdit
220238
profileUrl={addProfile}
221-
imageCompression={{
222-
compressionRate: 0.5,
223-
resizingWidth: 100,
224-
resizingHeight: '100px',
225-
}}
239+
replyType="QUOTE_REPLY"
226240
/>
227241
);
228242

@@ -262,10 +276,25 @@ const CustomApp = () => {
262276
imageCompression={{ compressionRate: 0.5, resizingWidth: 100, resizingHeight: '100px' }}
263277
>
264278
<div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'row' }}>
265-
<SBChannelList setChannelUrl={setChannelUrl} />
266-
<div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
279+
<SBChannelList setChannelUrl={setChannelUrl} />
280+
<div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
281+
<div style={{ width: '100%' }}>
282+
<Conversation
283+
channelUrl={channelUrl}
284+
onChatHeaderActionClick={() => {
285+
setChannelSearch(false);
286+
setChannelSettings(true);
287+
}}
288+
showSearchIcon
289+
onSearchClick={() => {
290+
setChannelSettings(false);
291+
setChannelSearch(true);
292+
}}
293+
/>
294+
</div>
295+
{channelSearch && (
267296
<div style={{ width: '100%' }}>
268-
<Conversation
297+
<MessageSearch
269298
channelUrl={channelUrl}
270299
onChatHeaderActionClick={() => {
271300
setChannelSearch(false);
@@ -281,25 +310,17 @@ const CustomApp = () => {
281310
}}
282311
/>
283312
</div>
284-
{channelSearch && (
285-
<div style={{ width: '100%' }}>
286-
<MessageSearch
287-
channelUrl={channelUrl}
288-
searchString="hello"
289-
onResultClick={() => {}}
290-
/>
291-
</div>
292-
)}
293-
{channelSettings && (
294-
<div style={{ display: 'inline-flex'}}>
295-
<ChannelSettings
296-
channelUrl={channelUrl}
297-
onCloseClick={() => setChannelSettings(false)}
298-
/>
299-
</div>
300-
)}
301-
</div>
313+
)}
314+
{channelSettings && (
315+
<div style={{ display: 'inline-flex' }}>
316+
<ChannelSettings
317+
channelUrl={channelUrl}
318+
onCloseClick={() => setChannelSettings(false)}
319+
/>
320+
</div>
321+
)}
302322
</div>
323+
</div>
303324
</Sendbird>
304325
);
305326
};

‎src/smart-components/ChannelList/utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ export const pubSubHandler = (pubSub, channelListDispatcher) => {
248248
subScriber.set(topics.UPDATE_USER_MESSAGE, pubSub.subscribe(topics.UPDATE_USER_MESSAGE, (msg) => {
249249
const { channel, message } = msg;
250250
const updatedChannel = channel;
251-
if (updatedChannel.lastMessage && updatedChannel.lastMessage.messageId === message.messageId) {
251+
if (updatedChannel?.lastMessage?.messageId === message.messageId) {
252252
updatedChannel.lastMessage = message;
253253
}
254254
if (channel) {

0 commit comments

Comments
 (0)