Skip to content

Commit 8d36646

Browse files
isekovanicisekovanic
committed
perf: introduce message input text context
1 parent b947266 commit 8d36646

File tree

10 files changed

+145
-65
lines changed

10 files changed

+145
-65
lines changed

‎package/src/components/AutoCompleteInput/AutoCompleteInput.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { I18nManager, StyleSheet, TextInput, TextInputProps } from 'react-native
33

44
import throttle from 'lodash/throttle';
55

6+
import { MessageInputTextContextValue, useMessageInputTextContext } from '../../contexts';
7+
68
import {
79
MessageInputContextValue,
810
useMessageInputContext,
@@ -60,20 +62,16 @@ type AutoCompleteInputPropsWithContext = Pick<
6062
| 'onChange'
6163
| 'setGiphyActive'
6264
| 'setInputBoxRef'
63-
| 'text'
6465
| 'triggerSettings'
6566
> &
66-
Pick<
67-
SuggestionsContextValue,
68-
'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'
69-
> &
67+
Pick<SuggestionsContextValue, 'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'> &
7068
Pick<TranslationContextValue, 't'> & {
7169
/**
7270
* This is currently passed in from MessageInput to avoid rerenders
7371
* that would happen if we put this in the MessageInputContext
7472
*/
7573
cooldownActive?: boolean;
76-
};
74+
} & Pick<MessageInputTextContextValue, 'text'>;
7775

7876
export type AutoCompleteInputProps = Partial<AutoCompleteInputPropsWithContext>;
7977

@@ -461,9 +459,7 @@ const MemoizedAutoCompleteInput = React.memo(
461459
areEqual,
462460
) as typeof AutoCompleteInputWithContext;
463461

464-
export const AutoCompleteInput = (
465-
props: AutoCompleteInputProps,
466-
) => {
462+
export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
467463
const {
468464
giphyEnabled,
469465
additionalTextInputProps,
@@ -476,11 +472,11 @@ export const AutoCompleteInput = (
476472
onChange,
477473
setGiphyActive,
478474
setInputBoxRef,
479-
text,
480475
triggerSettings,
481476
} = useMessageInputContext();
482477
const { closeSuggestions, openSuggestions, updateSuggestions } = useSuggestionsContext();
483478
const { t } = useTranslationContext();
479+
const { text } = useMessageInputTextContext();
484480

485481
return (
486482
<MemoizedAutoCompleteInput

‎package/src/components/Channel/Channel.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { useMessageListPagination } from './hooks/useMessageListPagination';
4040
import { useTargetedMessage } from './hooks/useTargetedMessage';
4141

4242
import { MessageContextValue } from '../../contexts';
43+
import { MessageInputTextContextValue, MessageInputTextProvider } from '../../contexts';
4344
import { ChannelContextValue, ChannelProvider } from '../../contexts/channelContext/ChannelContext';
4445
import type { UseChannelStateValue } from '../../contexts/channelsStateContext/useChannelState';
4546
import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
@@ -471,7 +472,8 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
471472
InputMessageInputContextValue,
472473
'openPollCreationDialog' | 'CreatePollContent' | 'StopMessageStreamingButton'
473474
>
474-
>;
475+
> &
476+
Partial<Pick<MessageInputTextContextValue, 'initialValue'>>;
475477

476478
const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) => {
477479
const {
@@ -1760,7 +1762,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
17601762
hasFilePicker,
17611763
hasImagePicker,
17621764
ImageUploadPreview,
1763-
initialValue,
17641765
Input,
17651766
InputButtons,
17661767
InputEditingStateHeader,
@@ -1918,6 +1919,13 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
19181919
};
19191920
}, [AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem, AutoCompleteSuggestionList]);
19201921

1922+
const messageInputTextContext = useMemo(
1923+
() => ({
1924+
initialValue,
1925+
}),
1926+
[initialValue],
1927+
);
1928+
19211929
const threadContext = useCreateThreadContext({
19221930
allowThreadMessagesInChannel,
19231931
closeThread,
@@ -1967,9 +1975,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
19671975
<MessagesProvider value={messagesContext}>
19681976
<ThreadProvider value={threadContext}>
19691977
<SuggestionsProvider value={suggestionsContext}>
1970-
<MessageInputProvider value={inputMessageInputContext}>
1971-
<View style={{ height: '100%' }}>{children}</View>
1972-
</MessageInputProvider>
1978+
<MessageInputTextProvider value={messageInputTextContext}>
1979+
<MessageInputProvider value={inputMessageInputContext}>
1980+
<View style={{ height: '100%' }}>{children}</View>
1981+
</MessageInputProvider>
1982+
</MessageInputTextProvider>
19731983
</SuggestionsProvider>
19741984
</ThreadProvider>
19751985
</MessagesProvider>

‎package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export const useCreateInputMessageInputContext = ({
3737
hasFilePicker,
3838
hasImagePicker,
3939
ImageUploadPreview,
40-
initialValue,
4140
Input,
4241
InputButtons,
4342
InputEditingStateHeader,
@@ -107,7 +106,6 @@ export const useCreateInputMessageInputContext = ({
107106
hasFilePicker,
108107
hasImagePicker,
109108
ImageUploadPreview,
110-
initialValue,
111109
Input,
112110
InputButtons,
113111
InputEditingStateHeader,
@@ -139,7 +137,6 @@ export const useCreateInputMessageInputContext = ({
139137
compressImageQuality,
140138
channelId,
141139
editingDep,
142-
initialValue,
143140
maxMessageLength,
144141
quotedMessageId,
145142
CreatePollContent,

‎package/src/components/MessageInput/InputButtons.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useCallback } from 'react';
22
import { StyleSheet, View } from 'react-native';
33

4+
import { MessageInputTextContextValue, useMessageInputTextContext } from '../../contexts';
45
import {
56
MessageInputContextValue,
67
useMessageInputContext,
@@ -23,14 +24,14 @@ export type InputButtonsWithContextProps = Pick<
2324
| 'hasCommands'
2425
| 'hasFilePicker'
2526
| 'hasImagePicker'
26-
| 'hasText'
2727
| 'MoreOptionsButton'
2828
| 'openCommandsPicker'
2929
| 'selectedPicker'
3030
| 'setShowMoreOptions'
3131
| 'showMoreOptions'
3232
| 'toggleAttachmentPicker'
33-
>;
33+
> &
34+
Pick<MessageInputTextContextValue, 'hasText'>;
3435

3536
export const InputButtonsWithContext = (props: InputButtonsWithContextProps) => {
3637
const {
@@ -159,14 +160,14 @@ export const InputButtons = (props: InputButtonsProps) => {
159160
hasCommands,
160161
hasFilePicker,
161162
hasImagePicker,
162-
hasText,
163163
MoreOptionsButton,
164164
openCommandsPicker,
165165
selectedPicker,
166166
setShowMoreOptions,
167167
showMoreOptions,
168168
toggleAttachmentPicker,
169169
} = useMessageInputContext();
170+
const { hasText } = useMessageInputTextContext();
170171

171172
return (
172173
<MemoizedInputButtonsWithContext

‎package/src/components/MessageInput/MessageInput.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@ import type { UserResponse } from 'stream-chat';
2828
import { useAudioController } from './hooks/useAudioController';
2929
import { useCountdown } from './hooks/useCountdown';
3030

31-
import { ChatContextValue, useChatContext, useOwnCapabilitiesContext } from '../../contexts';
31+
import {
32+
ChatContextValue,
33+
MessageInputTextContextValue,
34+
useChatContext,
35+
useMessageInputTextContext,
36+
useOwnCapabilitiesContext,
37+
} from '../../contexts';
3238
import {
3339
AttachmentPickerContextValue,
3440
useAttachmentPickerContext,
@@ -104,7 +110,10 @@ const styles = StyleSheet.create({
104110
},
105111
});
106112

107-
type MessageInputPropsWithContext = Pick<AttachmentPickerContextValue, 'AttachmentPickerSelectionBar'> &
113+
type MessageInputPropsWithContext = Pick<
114+
AttachmentPickerContextValue,
115+
'AttachmentPickerSelectionBar'
116+
> &
108117
Pick<ChatContextValue, 'isOnline'> &
109118
Pick<ChannelContextValue, 'channel' | 'members' | 'threadList' | 'watchers'> &
110119
Pick<
@@ -154,7 +163,6 @@ type MessageInputPropsWithContext = Pick<AttachmentPickerContextValue, 'Attachme
154163
| 'StartAudioRecordingButton'
155164
| 'removeFile'
156165
| 'removeImage'
157-
| 'text'
158166
| 'uploadNewFile'
159167
| 'uploadNewImage'
160168
| 'openPollCreationDialog'
@@ -174,7 +182,8 @@ type MessageInputPropsWithContext = Pick<AttachmentPickerContextValue, 'Attachme
174182
| 'triggerType'
175183
> &
176184
Pick<ThreadContextValue, 'thread'> &
177-
Pick<TranslationContextValue, 't'>;
185+
Pick<TranslationContextValue, 't'> &
186+
Pick<MessageInputTextContextValue, 'hasText'>;
178187

179188
const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
180189
const {
@@ -231,14 +240,15 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
231240
StartAudioRecordingButton,
232241
StopMessageStreamingButton,
233242
suggestions,
234-
text,
235243
thread,
236244
threadList,
237245
triggerType,
238246
uploadNewFile,
239247
uploadNewImage,
240248
watchers,
249+
hasText,
241250
} = props;
251+
console.log('HASTEXT: ', hasText);
242252

243253
const [height, setHeight] = useState(0);
244254

@@ -637,7 +647,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
637647
if (recording) {
638648
return false;
639649
}
640-
if (text && text.trim()) {
650+
if (hasText) {
641651
return true;
642652
}
643653

@@ -968,6 +978,7 @@ const areEqual = (
968978
t: prevT,
969979
thread: prevThread,
970980
threadList: prevThreadList,
981+
hasText: prevHasText,
971982
} = prevProps;
972983
const {
973984
additionalTextInputProps: nextAdditionalTextInputProps,
@@ -994,8 +1005,14 @@ const areEqual = (
9941005
t: nextT,
9951006
thread: nextThread,
9961007
threadList: nextThreadList,
1008+
hasText: nextHasText,
9971009
} = nextProps;
9981010

1011+
const hasTextEqual = prevHasText === nextHasText;
1012+
if (!hasTextEqual) {
1013+
return false;
1014+
}
1015+
9991016
const tEqual = prevT === nextT;
10001017
if (!tEqual) {
10011018
return false;
@@ -1210,12 +1227,12 @@ export const MessageInput = (props: MessageInputProps) => {
12101227
ShowThreadMessageInChannelButton,
12111228
StartAudioRecordingButton,
12121229
StopMessageStreamingButton,
1213-
text,
12141230
uploadNewFile,
12151231
uploadNewImage,
12161232
} = useMessageInputContext();
12171233

12181234
const { Reply } = useMessagesContext();
1235+
const { hasText } = useMessageInputTextContext();
12191236

12201237
const {
12211238
AutoCompleteSuggestionHeader,
@@ -1269,6 +1286,7 @@ export const MessageInput = (props: MessageInputProps) => {
12691286
FileUploadPreview,
12701287
fileUploads,
12711288
giphyActive,
1289+
hasText,
12721290
ImageUploadPreview,
12731291
imageUploads,
12741292
Input,
@@ -1303,7 +1321,6 @@ export const MessageInput = (props: MessageInputProps) => {
13031321
StopMessageStreamingButton,
13041322
suggestions,
13051323
t,
1306-
text,
13071324
thread,
13081325
threadList,
13091326
triggerType,

‎package/src/contexts/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export * from './messageContext/MessageContext';
1010
export * from './messageInputContext/hooks/useCreateMessageInputContext';
1111
export * from './messageInputContext/hooks/useMessageDetailsForState';
1212
export * from './messageInputContext/MessageInputContext';
13+
export * from './messageInputTextContext/MessageInputTextContext';
1314
export * from './messagesContext/MessagesContext';
1415
export * from './paginatedMessageListContext/PaginatedMessageListContext';
1516
export * from './overlayContext/OverlayContext';

0 commit comments

Comments
 (0)