Skip to content

Commit 2a51aa3

Browse files
khushal87khushal87
authored
fix: spacing between message in MessageList (#3429)
This pull request introduces several improvements and refactors to the message components, focusing on simplifying message grouping styles, cleaning up the `MessageFooter` logic, and updating the pinned message header. The changes enhance maintainability, improve style handling, and remove unnecessary complexity from the codebase. **Message Grouping and Styling Refactor:** * Refactored `MessageSimple` component to use a new `useStyles` hook for dynamic style calculation based on message grouping and alignment, replacing static style objects and simplifying style logic. [[1]](diffhunk://#diff-6c4943fcf0d32148b663091935ac039195d602cef7654b16bb93514ca2b3ba83L22-R158) [[2]](diffhunk://#diff-6c4943fcf0d32148b663091935ac039195d602cef7654b16bb93514ca2b3ba83L126-R239) [[3]](diffhunk://#diff-6c4943fcf0d32148b663091935ac039195d602cef7654b16bb93514ca2b3ba83R249-R264) * Removed unused style properties and consolidated style handling in `MessageSimple`, eliminating redundant container and grouping styles. **Message Footer Logic Simplification:** * Removed the `OnlyVisibleToYouComponent` and related props (`otherAttachments`, `deletedMessagesVisibilityType`, `isDeleted`) from `MessageFooter`, streamlining its logic and prop interface. [[1]](diffhunk://#diff-e83a4be8d03b1ae25525ce8d7eb287d33a5ad7eb49a63c2aa31de3c6d86b5ff1L21-L91) [[2]](diffhunk://#diff-e83a4be8d03b1ae25525ce8d7eb287d33a5ad7eb49a63c2aa31de3c6d86b5ff1L110-L120) [[3]](diffhunk://#diff-e83a4be8d03b1ae25525ce8d7eb287d33a5ad7eb49a63c2aa31de3c6d86b5ff1L129-L131) [[4]](diffhunk://#diff-e83a4be8d03b1ae25525ce8d7eb287d33a5ad7eb49a63c2aa31de3c6d86b5ff1L152) [[5]](diffhunk://#diff-e83a4be8d03b1ae25525ce8d7eb287d33a5ad7eb49a63c2aa31de3c6d86b5ff1L162) [[6]](diffhunk://#diff-e83a4be8d03b1ae25525ce8d7eb287d33a5ad7eb49a63c2aa31de3c6d86b5ff1L181-L186) [[7]](diffhunk://#diff-e83a4be8d03b1ae25525ce8d7eb287d33a5ad7eb49a63c2aa31de3c6d86b5ff1L201-L207) [[8]](diffhunk://#diff-e83a4be8d03b1ae25525ce8d7eb287d33a5ad7eb49a63c2aa31de3c6d86b5ff1L242-L265) * Updated `MessageDeleted` to no longer pass the `isDeleted` prop to `MessageFooter`, reflecting the simplified footer logic. **Pinned Message Header Updates:** * Renamed and moved `MessagePinnedHeader` to a new directory, updated icon size, and adjusted font weight for improved appearance and code organization. [[1]](diffhunk://#diff-c42cee148dd3f2dba08dc7b7acc9507cf41a2f073d955c45c37c7683f18d0fb2L4-R12) [[2]](diffhunk://#diff-c42cee148dd3f2dba08dc7b7acc9507cf41a2f073d955c45c37c7683f18d0fb2L33-R33) [[3]](diffhunk://#diff-c42cee148dd3f2dba08dc7b7acc9507cf41a2f073d955c45c37c7683f18d0fb2L64-R64) * Fixed import paths for `MessagePinnedHeader` in `Channel.tsx`. [[1]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85R143) [[2]](diffhunk://#diff-f7139f4cdb523365cfc277d72b827a3432325b9c6460cf14628f9df67d0e4d85L151) **Equality Checks Optimization:** * Simplified equality checks for `groupStyles` in both `Message` and `MessageContent` components, improving performance and reducing unnecessary renders. [[1]](diffhunk://#diff-4234b2ddfee0f9e29e7b465026e851cf75f5d16f03a175c86374168589335d8eL972-R972) [[2]](diffhunk://#diff-2a29e74fd66f9ef94ef76086ce6594fde5dee0f20f1532c7a3b5667fc5cf46aaL426-R426) **Minor UI Adjustments:** * Adjusted padding and map view size in `MessageLocation` for better visual consistency. * Removed top margin from message wrapper in `MessageWithContext` for improved layout.
1 parent 5c473d3 commit 2a51aa3

20 files changed

Lines changed: 313 additions & 290 deletions

File tree

‎examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -160,12 +160,11 @@ export const MessageLocation = ({ message }: MessageLocationProps) => {
160160
const IMAGE_SIZE = 35;
161161

162162
const styles = StyleSheet.create({
163-
container: {
164-
flex: 1,
165-
},
163+
container: {},
166164
mapView: {
167-
height: 250,
168-
width: 250,
165+
height: 252,
166+
width: 252,
167+
borderRadius: 12,
169168
},
170169
textStyle: {
171170
fontSize: 12,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ import {
140140
KeyboardCompatibleViewProps,
141141
} from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
142142
import { Message as MessageDefault } from '../Message/Message';
143+
import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/Headers/MessagePinnedHeader';
143144
import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
144145
import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageSimple/MessageBlocked';
145146
import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
@@ -148,7 +149,6 @@ import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimpl
148149
import { MessageError as MessageErrorDefault } from '../Message/MessageSimple/MessageError';
149150
import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
150151
import { MessageHeader as MessageHeaderDefault } from '../Message/MessageSimple/MessageHeader';
151-
import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/MessagePinnedHeader';
152152
import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimple/MessageReplies';
153153
import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
154154
import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -821,7 +821,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
821821
>
822822
<View
823823
style={[
824-
{ marginTop: 2, paddingHorizontal: screenPadding },
824+
{ paddingHorizontal: screenPadding },
825825
wrapper,
826826
(isTargetedMessage || message.pinned) && !isMessageTypeDeleted
827827
? {
@@ -969,8 +969,7 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
969969
return false;
970970
}
971971

972-
const groupStylesEqual =
973-
prevGroupStyles.length === nextGroupStyles.length && prevGroupStyles[0] === nextGroupStyles[0];
972+
const groupStylesEqual = prevGroupStyles === nextGroupStyles;
974973
if (!groupStylesEqual) {
975974
return false;
976975
}

package/src/components/Message/MessageSimple/MessagePinnedHeader.tsx renamed to package/src/components/Message/MessageSimple/Headers/MessagePinnedHeader.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React, { useMemo } from 'react';
22
import { StyleSheet, Text, View } from 'react-native';
33

4-
import { useChatContext } from '../../../contexts/chatContext/ChatContext';
4+
import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
55
import {
66
MessageContextValue,
77
useMessageContext,
8-
} from '../../../contexts/messageContext/MessageContext';
9-
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
10-
import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
11-
import { NewPin } from '../../../icons/NewPin';
12-
import { primitives } from '../../../theme';
8+
} from '../../../../contexts/messageContext/MessageContext';
9+
import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
10+
import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
11+
import { NewPin } from '../../../../icons/NewPin';
12+
import { primitives } from '../../../../theme';
1313

1414
export type MessagePinnedHeaderProps = Partial<Pick<MessageContextValue, 'message'>>;
1515

@@ -30,7 +30,7 @@ export const MessagePinnedHeader = (props: MessagePinnedHeaderProps) => {
3030

3131
return (
3232
<View accessibilityLabel='Message Pinned Header' style={styles.container}>
33-
<NewPin height={12} width={12} stroke={semantics.textPrimary} />
33+
<NewPin height={16} width={16} stroke={semantics.textPrimary} />
3434
<Text style={styles.label}>
3535
{t('Pinned by')}{' '}
3636
{message?.pinned_by?.id === client?.user?.id ? t('You') : message?.pinned_by?.name}
@@ -61,7 +61,7 @@ const useStyles = () => {
6161
label: {
6262
color: semantics.textPrimary,
6363
fontSize: primitives.typographyFontSizeXs,
64-
fontWeight: primitives.typographyFontWeightRegular,
64+
fontWeight: primitives.typographyFontWeightSemiBold,
6565
lineHeight: primitives.typographyLineHeightTight,
6666
...label,
6767
},

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -423,9 +423,7 @@ const areEqual = (
423423
return false;
424424
}
425425

426-
const groupStylesEqual =
427-
prevGroupStyles.length === nextGroupStyles.length &&
428-
prevGroupStyles?.[0] === nextGroupStyles?.[0];
426+
const groupStylesEqual = prevGroupStyles === nextGroupStyles;
429427
if (!groupStylesEqual) {
430428
return false;
431429
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const MessageDeletedWithContext = (props: MessageDeletedPropsWithContext) => {
6161
<CircleBan height={16} width={16} stroke={semantics.textSecondary} />
6262
<Text style={[styles.deletedText, deletedText]}>{t('Message deleted')}</Text>
6363
</View>
64-
<MessageFooter date={date} isDeleted />
64+
<MessageFooter date={date} />
6565
</View>
6666
);
6767
};

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

Lines changed: 4 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -18,77 +18,37 @@ import {
1818

1919
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
2020
import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
21-
import { Eye } from '../../../icons';
2221

2322
import { primitives } from '../../../theme';
2423
import { isEditedMessage, MessageStatusTypes } from '../../../utils/utils';
2524

2625
type MessageFooterComponentProps = {
2726
date?: string | Date;
2827
formattedDate?: string | Date;
29-
isDeleted?: boolean;
3028
};
3129

3230
type MessageFooterPropsWithContext = Pick<
3331
MessageContextValue,
3432
| 'alignment'
3533
| 'members'
3634
| 'message'
37-
| 'otherAttachments'
3835
| 'showMessageStatus'
3936
| 'lastGroupMessage'
4037
| 'isMessageAIGenerated'
4138
> &
42-
Pick<
43-
MessagesContextValue,
44-
'deletedMessagesVisibilityType' | 'MessageStatus' | 'MessageTimestamp'
45-
> &
39+
Pick<MessagesContextValue, 'MessageStatus'> &
4640
MessageFooterComponentProps;
4741

48-
const OnlyVisibleToYouComponent = ({ alignment }: { alignment: Alignment }) => {
49-
const {
50-
theme: {
51-
colors: { grey_dark },
52-
messageSimple: {
53-
content: { eyeIcon, metaText },
54-
},
55-
},
56-
} = useTheme();
57-
const { t } = useTranslationContext();
58-
59-
return (
60-
<>
61-
<Eye pathFill={grey_dark} {...eyeIcon} />
62-
<Text
63-
style={[
64-
{
65-
color: grey_dark,
66-
textAlign: alignment,
67-
},
68-
metaText,
69-
]}
70-
testID='only-visible-to-you'
71-
>
72-
{t('Only visible to you')}
73-
</Text>
74-
</>
75-
);
76-
};
77-
7842
const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
7943
const {
8044
alignment,
8145
date,
82-
deletedMessagesVisibilityType,
8346
formattedDate,
84-
isDeleted,
8547
isMessageAIGenerated,
8648
lastGroupMessage,
8749
members,
8850
message,
8951
MessageStatus,
90-
MessageTimestamp,
91-
otherAttachments,
9252
showMessageStatus,
9353
} = props;
9454
const styles = useStyles();
@@ -107,17 +67,6 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
10767
[message, isMessageAIGenerated],
10868
);
10969

110-
if (isDeleted) {
111-
return (
112-
<View style={[styles.container, container]}>
113-
{deletedMessagesVisibilityType === 'sender' && (
114-
<OnlyVisibleToYouComponent alignment={alignment} />
115-
)}
116-
<MessageTimestamp formattedDate={formattedDate} timestamp={date} />
117-
</View>
118-
);
119-
}
120-
12170
if (lastGroupMessage === false && message.status === MessageStatusTypes.RECEIVED) {
12271
return null;
12372
}
@@ -126,9 +75,6 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
12675

12776
return (
12877
<View style={[styles.container, container]} testID='message-status-time'>
129-
{otherAttachments.length && otherAttachments[0].actions ? (
130-
<OnlyVisibleToYouComponent alignment={alignment} />
131-
) : null}
13278
{Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
13379
<Text style={[styles.name, name]}>{message.user.name}</Text>
13480
) : null}
@@ -149,7 +95,6 @@ const areEqual = (
14995
lastGroupMessage: prevLastGroupMessage,
15096
members: prevMembers,
15197
message: prevMessage,
152-
otherAttachments: prevOtherAttachments,
15398
showMessageStatus: prevShowMessageStatus,
15499
} = prevProps;
155100
const {
@@ -159,7 +104,6 @@ const areEqual = (
159104
lastGroupMessage: nextLastGroupMessage,
160105
members: nextMembers,
161106
message: nextMessage,
162-
otherAttachments: nextOtherAttachments,
163107
showMessageStatus: nextShowMessageStatus,
164108
} = nextProps;
165109

@@ -178,12 +122,6 @@ const areEqual = (
178122
return false;
179123
}
180124

181-
const deletedMessagesVisibilityTypeEqual =
182-
prevProps.deletedMessagesVisibilityType === nextProps.deletedMessagesVisibilityType;
183-
if (!deletedMessagesVisibilityTypeEqual) {
184-
return false;
185-
}
186-
187125
const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
188126
const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
189127

@@ -198,13 +136,6 @@ const areEqual = (
198136
return false;
199137
}
200138

201-
const otherAttachmentsEqual =
202-
prevOtherAttachments.length === nextOtherAttachments.length &&
203-
prevOtherAttachments?.[0]?.actions?.length === nextOtherAttachments?.[0]?.actions?.length;
204-
if (!otherAttachmentsEqual) {
205-
return false;
206-
}
207-
208139
const showMessageStatusEqual = prevShowMessageStatus === nextShowMessageStatus;
209140
if (!showMessageStatusEqual) {
210141
return false;
@@ -239,30 +170,21 @@ export type MessageFooterProps = Partial<Pick<ChannelContextValue, 'members'>> &
239170
};
240171

241172
export const MessageFooter = (props: MessageFooterProps) => {
242-
const {
243-
alignment,
244-
isMessageAIGenerated,
245-
lastGroupMessage,
246-
members,
247-
message,
248-
otherAttachments,
249-
showMessageStatus,
250-
} = useMessageContext();
173+
const { alignment, isMessageAIGenerated, lastGroupMessage, members, message, showMessageStatus } =
174+
useMessageContext();
251175

252-
const { deletedMessagesVisibilityType, MessageStatus, MessageTimestamp } = useMessagesContext();
176+
const { MessageStatus, MessageTimestamp } = useMessagesContext();
253177

254178
return (
255179
<MemoizedMessageFooter
256180
{...{
257181
alignment,
258-
deletedMessagesVisibilityType,
259182
isMessageAIGenerated,
260183
lastGroupMessage,
261184
members,
262185
message,
263186
MessageStatus,
264187
MessageTimestamp,
265-
otherAttachments,
266188
showMessageStatus,
267189
}}
268190
{...props}

0 commit comments

Comments
 (0)