Skip to content

Commit d3a0122

Browse files
author
Sravan S
authored
fix: use ref instead of querySelector to target actions (#364)
1 parent 18f2f6c commit d3a0122

File tree

15 files changed

+79
-46
lines changed

15 files changed

+79
-46
lines changed

‎src/smart-components/Channel/context/ChannelProvider.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,12 +321,18 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
321321
replyType,
322322
}, {
323323
logger,
324+
scrollRef,
324325
messagesDispatcher,
325326
});
326327

327328
// handles API calls from withSendbird
328329
useEffect(() => {
329-
const subscriber = utils.pubSubHandler(channelUrl, pubSub, messagesDispatcher);
330+
const subscriber = utils.pubSubHandler({
331+
channelUrl,
332+
pubSub,
333+
messagesDispatcher,
334+
scrollRef,
335+
});
330336
return () => {
331337
utils.pubSubHandleRemover(subscriber);
332338
};
@@ -336,6 +342,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
336342
useHandleReconnect({ isOnline, replyType, disableMarkAsRead }, {
337343
logger,
338344
sdk,
345+
scrollRef,
339346
currentGroupChannel,
340347
messagesDispatcher,
341348
userFilledMessageListQuery,
@@ -357,6 +364,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
357364
{
358365
logger,
359366
pubSub,
367+
scrollRef,
360368
messagesDispatcher,
361369
},
362370
);
@@ -365,6 +373,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
365373
{
366374
logger,
367375
pubSub,
376+
scrollRef,
368377
messagesDispatcher,
369378
},
370379
);

‎src/smart-components/Channel/context/hooks/useHandleChannelEvents.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function useHandleChannelEvents(
7474
if (!disableMarkAsRead) {
7575
currentGroupChannel?.markAsRead?.();
7676
}
77-
scrollIntoLast();
77+
scrollIntoLast(0, scrollRef);
7878
});
7979
} catch (error) {
8080
logger.warning('Channel | onMessageReceived | scroll to end failed');

‎src/smart-components/Channel/context/hooks/useHandleReconnect.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ interface StaticParams {
2020
logger: Logger;
2121
sdk: SendbirdGroupChat;
2222
currentGroupChannel: GroupChannel;
23+
scrollRef: React.RefObject<HTMLDivElement>;
2324
messagesDispatcher: ({ type: string, payload: any }) => void;
2425
userFilledMessageListQuery?: Record<string, any>;
2526
}
@@ -29,6 +30,7 @@ function useHandleReconnect(
2930
{
3031
logger,
3132
sdk,
33+
scrollRef,
3234
currentGroupChannel,
3335
messagesDispatcher,
3436
userFilledMessageListQuery,
@@ -80,7 +82,7 @@ function useHandleReconnect(
8082
messages,
8183
},
8284
});
83-
setTimeout(() => utils.scrollIntoLast());
85+
setTimeout(() => utils.scrollIntoLast(0, scrollRef));
8486
})
8587
.catch((error) => {
8688
logger.error('Channel: Fetching messages failed', error);

‎src/smart-components/Channel/context/hooks/useInitialMessagesFetch.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ function useInitialMessagesFetch({
1212
replyType,
1313
}, {
1414
logger,
15+
scrollRef,
1516
messagesDispatcher,
1617
}) {
1718
const channelUrl = currentGroupChannel?.url;
@@ -76,7 +77,7 @@ function useInitialMessagesFetch({
7677
})
7778
.finally(() => {
7879
if (!initialTimeStamp) {
79-
setTimeout(() => utils.scrollIntoLast());
80+
setTimeout(() => utils.scrollIntoLast(0, scrollRef));
8081
}
8182
});
8283
}

‎src/smart-components/Channel/context/hooks/useSendFileMessageCallback.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function useSendFileMessageCallback({
1111
}, {
1212
logger,
1313
pubSub,
14+
scrollRef,
1415
messagesDispatcher,
1516
}) {
1617
const sendMessage = useCallback((file, quoteMessage = null) => {
@@ -87,7 +88,7 @@ export default function useSendFileMessageCallback({
8788
},
8889
channel: currentGroupChannel,
8990
});
90-
setTimeout(() => utils.scrollIntoLast(), 1000);
91+
setTimeout(() => utils.scrollIntoLast(0, scrollRef), 1000);
9192
})
9293
.onFailed((err, failedMessage) => {
9394
logger.error('Channel: Sending file message failed!', { failedMessage, err });
@@ -137,7 +138,7 @@ export default function useSendFileMessageCallback({
137138
},
138139
channel: currentGroupChannel,
139140
});
140-
setTimeout(() => utils.scrollIntoLast(), 1000);
141+
setTimeout(() => utils.scrollIntoLast(0, scrollRef), 1000);
141142
})
142143
.onFailed((error, message) => {
143144
logger.error('Channel: Sending file message failed!', { message, error });

‎src/smart-components/Channel/context/hooks/useSendMessageCallback.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function useSendMessageCallback({
1111
}, {
1212
logger,
1313
pubSub,
14+
scrollRef,
1415
messagesDispatcher,
1516
}) {
1617
const messageInputRef = useRef(null);
@@ -63,7 +64,7 @@ export default function useSendMessageCallback({
6364
message: pendingMsg,
6465
channel: currentGroupChannel,
6566
});
66-
setTimeout(() => utils.scrollIntoLast());
67+
setTimeout(() => utils.scrollIntoLast(0, scrollRef));
6768
})
6869
.onFailed((err, msg) => {
6970
logger.warning('Channel: Sending message failed!', { message: msg, error: err });

‎src/smart-components/Channel/context/utils.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ import { OutgoingMessageStates } from '../../../utils/exports/getOutgoingMessage
88
const UNDEFINED = 'undefined';
99
const { SUCCEEDED, FAILED, PENDING } = getSendingMessageStatus();
1010

11-
export const scrollIntoLast = (intialTry = 0) => {
11+
export const scrollIntoLast = (initialTry = 0, scrollRef) => {
1212
const MAX_TRIES = 10;
13-
const currentTry = intialTry;
13+
const currentTry = initialTry;
1414
if (currentTry > MAX_TRIES) {
1515
return;
1616
}
1717
try {
18-
const scrollDOM = document.querySelector('.sendbird-conversation__messages-padding');
18+
const scrollDOM = scrollRef?.current || document.querySelector('.sendbird-conversation__messages-padding');
1919
// eslint-disable-next-line no-multi-assign
2020
scrollDOM.scrollTop = scrollDOM.scrollHeight;
2121
} catch (error) {
2222
setTimeout(() => {
23-
scrollIntoLast(currentTry + 1);
23+
scrollIntoLast(currentTry + 1, scrollRef);
2424
}, 500 * currentTry);
2525
}
2626
};
@@ -35,12 +35,17 @@ export const pubSubHandleRemover = (subscriber) => {
3535
});
3636
};
3737

38-
export const pubSubHandler = (channelUrl, pubSub, dispatcher) => {
38+
export const pubSubHandler = ({
39+
channelUrl,
40+
pubSub,
41+
dispatcher,
42+
scrollRef,
43+
}) => {
3944
const subscriber = new Map();
4045
if (!pubSub || !pubSub.subscribe) return subscriber;
4146
subscriber.set(topics.SEND_USER_MESSAGE, pubSub.subscribe(topics.SEND_USER_MESSAGE, (msg) => {
4247
const { channel, message } = msg;
43-
scrollIntoLast();
48+
scrollIntoLast(0, scrollRef);
4449
if (channelUrl === channel?.url) {
4550
dispatcher({
4651
type: channelActions.SEND_MESSAGEGE_SUCESS,
@@ -59,7 +64,7 @@ export const pubSubHandler = (channelUrl, pubSub, dispatcher) => {
5964
}));
6065
subscriber.set(topics.SEND_FILE_MESSAGE, pubSub.subscribe(topics.SEND_FILE_MESSAGE, (msg) => {
6166
const { channel, message } = msg;
62-
scrollIntoLast();
67+
scrollIntoLast(0, scrollRef);
6368
if (channelUrl === channel?.url) {
6469
dispatcher({
6570
type: channelActions.SEND_MESSAGEGE_SUCESS,

‎src/smart-components/OpenChannel/components/OpenChannelUI/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const OpenChannelUI: React.FC<OpenChannelUIProps> = ({
3636
loading,
3737
isInvalid,
3838
messageInputRef,
39+
conversationScrollRef,
3940
} = useOpenChannelContext();
4041
if (
4142
!currentOpenChannel
@@ -70,6 +71,7 @@ const OpenChannelUI: React.FC<OpenChannelUIProps> = ({
7071
)
7172
}
7273
<OpenChannelMessageList
74+
ref={conversationScrollRef}
7375
renderMessage={renderMessage}
7476
renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}
7577
/>

‎src/smart-components/OpenChannel/context/OpenChannelProvider.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -166,11 +166,11 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
166166
);
167167
useHandleChannelEvents(
168168
{ currentOpenChannel, checkScrollBottom },
169-
{ sdk, logger, messagesDispatcher },
169+
{ sdk, logger, messagesDispatcher, scrollRef: conversationScrollRef },
170170
);
171171
useInitialMessagesFetch(
172172
{ currentOpenChannel, userFilledMessageListParams },
173-
{ logger, messagesDispatcher },
173+
{ logger, messagesDispatcher, scrollRef: conversationScrollRef },
174174
);
175175

176176
const fetchMore: boolean = utils.shouldFetchMore(allMessages?.length, messageLimit);
@@ -181,11 +181,11 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
181181
);
182182
const handleSendMessage = useSendMessageCallback(
183183
{ currentOpenChannel, onBeforeSendUserMessage, checkScrollBottom, messageInputRef },
184-
{ sdk, logger, messagesDispatcher },
184+
{ sdk, logger, messagesDispatcher, scrollRef: conversationScrollRef },
185185
);
186186
const handleFileUpload = useFileUploadCallback(
187187
{ currentOpenChannel, onBeforeSendFileMessage, checkScrollBottom, imageCompression },
188-
{ sdk, logger, messagesDispatcher },
188+
{ sdk, logger, messagesDispatcher, scrollRef: conversationScrollRef },
189189
);
190190
const updateMessage = useUpdateMessageCallback(
191191
{ currentOpenChannel, onBeforeSendUserMessage },
@@ -213,7 +213,7 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
213213
}
214214
subscriber.set(topics.SEND_USER_MESSAGE, pubSub.subscribe(topics.SEND_USER_MESSAGE, (msg) => {
215215
const { channel, message } = msg;
216-
scrollIntoLast();
216+
scrollIntoLast(0, conversationScrollRef);
217217
if (channel && (channelUrl === channel?.url)) {
218218
messagesDispatcher({
219219
type: messageActionTypes.SENDING_MESSAGE_SUCCEEDED,
@@ -232,7 +232,7 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
232232
}));
233233
subscriber.set(topics.SEND_FILE_MESSAGE, pubSub.subscribe(topics.SEND_FILE_MESSAGE, (msg) => {
234234
const { channel, message } = msg;
235-
scrollIntoLast();
235+
scrollIntoLast(0, conversationScrollRef);
236236
if (channel && (channelUrl === channel?.url)) {
237237
messagesDispatcher({
238238
type: messageActionTypes.SENDING_MESSAGE_SUCCEEDED,

‎src/smart-components/OpenChannel/context/hooks/useFileUploadCallback.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useCallback } from 'react';
1+
import React, { useCallback } from 'react';
22
import type { OpenChannel, SendbirdOpenChat } from '@sendbird/chat/openChannel';
33
import type { FileMessageCreateParams } from '@sendbird/chat/message';
44

@@ -19,19 +19,19 @@ interface DynamicParams {
1919
interface StaticParams {
2020
sdk: SendbirdOpenChat;
2121
logger: Logger;
22+
scrollRef: React.RefObject<HTMLElement>;
2223
messagesDispatcher: ({ type: string, payload: any }) => void;
2324
}
2425

2526
type CallbackReturn = (file: File) => void;
2627

27-
function useFileUploadCallback(
28-
{
29-
currentOpenChannel,
30-
checkScrollBottom,
31-
imageCompression = {},
32-
onBeforeSendFileMessage,
28+
function useFileUploadCallback({
29+
currentOpenChannel,
30+
checkScrollBottom,
31+
imageCompression = {},
32+
onBeforeSendFileMessage,
3333
}: DynamicParams,
34-
{ sdk, logger, messagesDispatcher }: StaticParams,
34+
{ sdk, logger, messagesDispatcher, scrollRef }: StaticParams,
3535
): CallbackReturn {
3636
return useCallback((file) => {
3737
if (sdk) {
@@ -113,7 +113,7 @@ function useFileUploadCallback(
113113
});
114114
if (isBottom) {
115115
setTimeout(() => {
116-
utils.scrollIntoLast();
116+
utils.scrollIntoLast(0, scrollRef);
117117
});
118118
}
119119
})
@@ -167,7 +167,7 @@ function useFileUploadCallback(
167167
});
168168
if (isBottom) {
169169
setTimeout(() => {
170-
utils.scrollIntoLast();
170+
utils.scrollIntoLast(0, scrollRef);
171171
});
172172
}
173173
})

0 commit comments

Comments
 (0)