Skip to content

Commit a68300b

Browse files
khushal87khushal87
committed
refactor: the component usecallback logic
1 parent 6d9e0ac commit a68300b

File tree

3 files changed

+105
-96
lines changed

3 files changed

+105
-96
lines changed

‎package/src/components/Message/Message.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export type MessagePropsWithContext<
209209
*
210210
* @param message A message object to open the thread upon.
211211
*/
212-
onThreadSelect?: (message: MessageType<StreamChatGenerics>) => void;
212+
onThreadSelect?: (message: ThreadContextValue<StreamChatGenerics>['thread']) => void;
213213
showUnreadUnderlay?: boolean;
214214
style?: StyleProp<ViewStyle>;
215215
};

‎package/src/components/MessageList/MessageItem.tsx‎

Lines changed: 95 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useChatContext } from '../../contexts/chatContext/ChatContext';
99
import { useMessagesContext } from '../../contexts/messagesContext/MessagesContext';
1010

1111
import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
12+
import { ThreadContextValue } from '../../contexts/threadContext/ThreadContext';
1213
import { ChannelUnreadState, DefaultStreamChatGenerics } from '../../types/types';
1314

1415
const shouldShowUnreadSeparator = <
@@ -36,108 +37,108 @@ const shouldShowUnreadSeparator = <
3637
return showUnreadSeparator;
3738
};
3839

39-
export const MessageItem = React.memo(
40-
<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({
41-
index,
42-
message,
43-
goToMessage,
44-
highlightedMessageId,
45-
lastReceivedMessageId,
46-
onThreadSelect,
47-
shouldApplyAndroidWorkaround,
48-
}: {
49-
index: number;
50-
message: MessageType<StreamChatGenerics>;
51-
goToMessage: (messageId: string) => Promise<void>;
52-
highlightedMessageId?: string;
53-
lastReceivedMessageId?: string;
54-
onThreadSelect?: (message: MessageType<DefaultStreamChatGenerics>) => void;
55-
shouldApplyAndroidWorkaround: boolean;
56-
}) => {
57-
const { client } = useChatContext();
58-
const clientUserId = client.user?.id;
59-
const { theme } = useTheme();
60-
const {
61-
messageList: { messageContainer },
62-
screenPadding,
63-
} = theme;
64-
65-
const { channelUnreadState, threadList } = useChannelContext();
66-
const {
67-
Message,
68-
MessageSystem,
69-
myMessageTheme,
70-
InlineDateSeparator,
71-
InlineUnreadIndicator,
72-
shouldShowUnreadUnderlay,
73-
} = useMessagesContext();
74-
75-
const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
76-
77-
const modifiedTheme = useMemo(
78-
() => mergeThemes({ style: myMessageTheme, theme }),
79-
// eslint-disable-next-line react-hooks/exhaustive-deps
80-
[myMessageThemeString, theme],
81-
);
82-
83-
const showUnreadUnderlay =
84-
!!shouldShowUnreadUnderlay && shouldShowUnreadSeparator(message, index, channelUnreadState);
85-
86-
const wrapMessageInTheme = clientUserId === message.user?.id && !!myMessageTheme;
87-
const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
88-
message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
89-
90-
const renderMessage = (
91-
<Message
92-
goToMessage={goToMessage}
93-
groupStyles={isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []}
94-
isTargetedMessage={highlightedMessageId === message.id}
95-
lastReceivedId={
96-
lastReceivedMessageId === message.id || message.quoted_message_id
97-
? lastReceivedMessageId
98-
: undefined
99-
}
100-
message={message}
101-
onThreadSelect={onThreadSelect}
102-
showUnreadUnderlay={showUnreadUnderlay}
103-
style={[messageContainer]}
104-
threadList={threadList}
105-
/>
106-
);
107-
108-
return (
109-
<View
110-
style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
111-
testID={`message-list-item-${index}`}
112-
>
113-
{message.type === 'system' ? (
114-
<MessageSystem
115-
message={message}
116-
style={[{ paddingHorizontal: screenPadding }, messageContainer]}
117-
/>
118-
) : wrapMessageInTheme ? (
119-
<ThemeProvider mergedStyle={modifiedTheme}>
120-
<View testID={`message-list-item-${index}`}>
121-
{renderDateSeperator}
122-
{renderMessage}
123-
</View>
124-
</ThemeProvider>
125-
) : (
40+
export const UnmemoizedMessageItem = <
41+
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
42+
>({
43+
index,
44+
message,
45+
goToMessage,
46+
highlightedMessageId,
47+
lastReceivedMessageId,
48+
onThreadSelect,
49+
shouldApplyAndroidWorkaround,
50+
}: {
51+
index: number;
52+
message: MessageType<StreamChatGenerics>;
53+
goToMessage: (messageId: string) => Promise<void>;
54+
highlightedMessageId?: string;
55+
lastReceivedMessageId?: string;
56+
onThreadSelect?: (message: ThreadContextValue<StreamChatGenerics>['thread']) => void;
57+
shouldApplyAndroidWorkaround: boolean;
58+
}) => {
59+
const { client } = useChatContext();
60+
const clientUserId = client.user?.id;
61+
const { theme } = useTheme();
62+
const {
63+
messageList: { messageContainer },
64+
screenPadding,
65+
} = theme;
66+
67+
const { channelUnreadState, threadList } = useChannelContext();
68+
const {
69+
Message,
70+
MessageSystem,
71+
myMessageTheme,
72+
InlineDateSeparator,
73+
InlineUnreadIndicator,
74+
shouldShowUnreadUnderlay,
75+
} = useMessagesContext<StreamChatGenerics>();
76+
77+
const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
78+
79+
const modifiedTheme = useMemo(
80+
() => mergeThemes({ style: myMessageTheme, theme }),
81+
// eslint-disable-next-line react-hooks/exhaustive-deps
82+
[myMessageThemeString, theme],
83+
);
84+
85+
const showUnreadUnderlay =
86+
!!shouldShowUnreadUnderlay && shouldShowUnreadSeparator(message, index, channelUnreadState);
87+
88+
const wrapMessageInTheme = clientUserId === message.user?.id && !!myMessageTheme;
89+
const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
90+
message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
91+
92+
const renderMessage = (
93+
<Message
94+
goToMessage={goToMessage}
95+
groupStyles={isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []}
96+
isTargetedMessage={highlightedMessageId === message.id}
97+
lastReceivedId={
98+
lastReceivedMessageId === message.id || message.quoted_message_id
99+
? lastReceivedMessageId
100+
: undefined
101+
}
102+
message={message}
103+
onThreadSelect={onThreadSelect}
104+
showUnreadUnderlay={showUnreadUnderlay}
105+
style={[messageContainer]}
106+
threadList={threadList}
107+
/>
108+
);
109+
110+
return (
111+
<View
112+
style={[shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined]}
113+
testID={`message-list-item-${index}`}
114+
>
115+
{message.type === 'system' ? (
116+
<MessageSystem
117+
message={message}
118+
style={[{ paddingHorizontal: screenPadding }, messageContainer]}
119+
/>
120+
) : wrapMessageInTheme ? (
121+
<ThemeProvider mergedStyle={modifiedTheme}>
126122
<View testID={`message-list-item-${index}`}>
127123
{renderDateSeperator}
128124
{renderMessage}
129125
</View>
130-
)}
131-
{showUnreadUnderlay && <InlineUnreadIndicator />}
132-
</View>
133-
);
134-
},
135-
);
126+
</ThemeProvider>
127+
) : (
128+
<View testID={`message-list-item-${index}`}>
129+
{renderDateSeperator}
130+
{renderMessage}
131+
</View>
132+
)}
133+
{showUnreadUnderlay && <InlineUnreadIndicator />}
134+
</View>
135+
);
136+
};
136137

137138
const styles = StyleSheet.create({
138139
invertAndroid: {
139140
transform: [{ scaleX: -1 }, { scaleY: -1 }],
140141
},
141142
});
142143

143-
MessageItem.displayName = 'MessageItem';
144+
export const MessageItem = React.memo(UnmemoizedMessageItem) as typeof UnmemoizedMessageItem;

‎package/src/components/MessageList/MessageList.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ const MessageListWithContext = <
288288
NetworkDownIndicator,
289289
noGroupByUser,
290290
onListScroll,
291+
onThreadSelect,
291292
overlay,
292293
reloadChannel,
293294
ScrollToBottomButton,
@@ -740,10 +741,17 @@ const MessageListWithContext = <
740741
index={index}
741742
lastReceivedMessageId={lastReceivedMessageId}
742743
message={message}
744+
onThreadSelect={onThreadSelect}
743745
shouldApplyAndroidWorkaround={shouldApplyAndroidWorkaround}
744746
/>
745747
),
746-
[goToMessage, highlightedMessageId, lastReceivedMessageId, shouldApplyAndroidWorkaround],
748+
[
749+
goToMessage,
750+
highlightedMessageId,
751+
lastReceivedMessageId,
752+
onThreadSelect,
753+
shouldApplyAndroidWorkaround,
754+
],
747755
);
748756

749757
/**

0 commit comments

Comments
 (0)