Skip to content

Commit 2942ebe

Browse files
committed
chore: rename MessageAvatar to MessageAuthor
1 parent 7faabf9 commit 2942ebe

File tree

12 files changed

+79
-50
lines changed

12 files changed

+79
-50
lines changed

package/src/components/Channel/Channel.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/Me
148148
import { MessageReminderHeader as MessageReminderHeaderDefault } from '../Message/MessageItemView/Headers/MessageReminderHeader';
149149
import { MessageSavedForLaterHeader as MessageSavedForLaterHeaderDefault } from '../Message/MessageItemView/Headers/MessageSavedForLaterHeader';
150150
import { SentToChannelHeader as SentToChannelHeaderDefault } from '../Message/MessageItemView/Headers/SentToChannelHeader';
151-
import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageItemView/MessageAvatar';
151+
import { MessageAuthor as MessageAuthorDefault } from '../Message/MessageItemView/MessageAuthor';
152152
import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageItemView/MessageBlocked';
153153
import { MessageBounce as MessageBounceDefault } from '../Message/MessageItemView/MessageBounce';
154154
import { MessageContent as MessageContentDefault } from '../Message/MessageItemView/MessageContent';
@@ -159,6 +159,7 @@ import { MessageHeader as MessageHeaderDefault } from '../Message/MessageItemVie
159159
import { MessageItemView as MessageItemViewDefault } from '../Message/MessageItemView/MessageItemView';
160160
import { MessageReplies as MessageRepliesDefault } from '../Message/MessageItemView/MessageReplies';
161161
import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageItemView/MessageRepliesAvatars';
162+
import { MessageSpacer as MessageSpacerDefault } from '../Message/MessageItemView/MessageSpacer';
162163
import { MessageStatus as MessageStatusDefault } from '../Message/MessageItemView/MessageStatus';
163164
import { MessageSwipeContent as MessageSwipeContentDefault } from '../Message/MessageItemView/MessageSwipeContent';
164165
import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageItemView/MessageTimestamp';
@@ -367,7 +368,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
367368
| 'MessageActionList'
368369
| 'MessageActionListItem'
369370
| 'messageActions'
370-
| 'MessageAvatar'
371+
| 'MessageAuthor'
371372
| 'MessageBounce'
372373
| 'MessageBlocked'
373374
| 'MessageContent'
@@ -385,6 +386,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
385386
| 'SentToChannelHeader'
386387
| 'MessageReplies'
387388
| 'MessageRepliesAvatars'
389+
| 'MessageSpacer'
388390
| 'MessageItemView'
389391
| 'MessageStatus'
390392
| 'MessageSystem'
@@ -685,7 +687,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
685687
MessageActionList = MessageActionListDefault,
686688
MessageActionListItem = MessageActionListItemDefault,
687689
messageActions,
688-
MessageAvatar = MessageAvatarDefault,
690+
MessageAuthor = MessageAuthorDefault,
689691
MessageBlocked = MessageBlockedDefault,
690692
MessageBounce = MessageBounceDefault,
691693
MessageContent = MessageContentDefault,
@@ -719,6 +721,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
719721
MessageReactionPicker = MessageReactionPickerDefault,
720722
MessageReplies = MessageRepliesDefault,
721723
MessageRepliesAvatars = MessageRepliesAvatarsDefault,
724+
MessageSpacer = MessageSpacerDefault,
722725
MessageItemView = MessageItemViewDefault,
723726
MessageStatus = MessageStatusDefault,
724727
MessageSwipeContent = MessageSwipeContentDefault,
@@ -1968,7 +1971,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
19681971
MessageActionList,
19691972
MessageActionListItem,
19701973
messageActions,
1971-
MessageAvatar,
1974+
MessageAuthor,
19721975
MessageBlocked,
19731976
MessageBounce,
19741977
MessageContent,
@@ -1987,6 +1990,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
19871990
MessageReactionPicker,
19881991
MessageReplies,
19891992
MessageRepliesAvatars,
1993+
MessageSpacer,
19901994
MessageItemView,
19911995
MessageStatus,
19921996
MessageSwipeContent,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const useCreateMessagesContext = ({
5353
MessageActionList,
5454
MessageActionListItem,
5555
messageActions,
56-
MessageAvatar,
56+
MessageAuthor,
5757
MessageBlocked,
5858
MessageBounce,
5959
MessageContent,
@@ -72,6 +72,7 @@ export const useCreateMessagesContext = ({
7272
MessageReactionPicker,
7373
MessageReplies,
7474
MessageRepliesAvatars,
75+
MessageSpacer,
7576
MessageItemView,
7677
MessageStatus,
7778
MessageSwipeContent,
@@ -177,7 +178,7 @@ export const useCreateMessagesContext = ({
177178
MessageActionList,
178179
MessageActionListItem,
179180
messageActions,
180-
MessageAvatar,
181+
MessageAuthor,
181182
MessageBlocked,
182183
MessageBounce,
183184
MessageContent,
@@ -196,6 +197,7 @@ export const useCreateMessagesContext = ({
196197
MessageReactionPicker,
197198
MessageReplies,
198199
MessageRepliesAvatars,
200+
MessageSpacer,
199201
MessageItemView,
200202
MessageStatus,
201203
MessageSwipeContent,

package/src/components/Message/MessageItemView/MessageAvatar.tsx renamed to package/src/components/Message/MessageItemView/MessageAuthor.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,26 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
99
import { AvatarProps, UserAvatar } from '../../ui';
1010
import { avatarSizes } from '../../ui/Avatar/constants';
1111

12-
export type MessageAvatarPropsWithContext = Pick<
12+
export type MessageAuthorPropsWithContext = Pick<
1313
MessageContextValue,
1414
'lastGroupMessage' | 'message' | 'showAvatar'
1515
> &
1616
Partial<Pick<AvatarProps, 'size'>>;
1717

18-
const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
18+
const MessageAuthorWithContext = (props: MessageAuthorPropsWithContext) => {
1919
const { lastGroupMessage, message, showAvatar, size } = props;
2020
const {
2121
theme: {
2222
messageItemView: {
23-
avatarWrapper: { container },
23+
authorWrapper: { container },
2424
},
2525
},
2626
} = useTheme();
2727

2828
const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;
2929

3030
return (
31-
<View style={container} testID='message-avatar'>
31+
<View style={container} testID='message-author'>
3232
{visible && message.user ? (
3333
<UserAvatar user={message.user} size={size ?? 'md'} />
3434
) : (
@@ -39,8 +39,8 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
3939
};
4040

4141
const areEqual = (
42-
prevProps: MessageAvatarPropsWithContext,
43-
nextProps: MessageAvatarPropsWithContext,
42+
prevProps: MessageAuthorPropsWithContext,
43+
nextProps: MessageAuthorPropsWithContext,
4444
) => {
4545
const { lastGroupMessage: prevLastGroupMessage, message: prevMessage } = prevProps;
4646
const { lastGroupMessage: nextLastGroupMessage, message: nextMessage } = nextProps;
@@ -61,18 +61,18 @@ const areEqual = (
6161
return true;
6262
};
6363

64-
const MemoizedMessageAvatar = React.memo(
65-
MessageAvatarWithContext,
64+
const MemoizedMessageAuthor = React.memo(
65+
MessageAuthorWithContext,
6666
areEqual,
67-
) as typeof MessageAvatarWithContext;
67+
) as typeof MessageAuthorWithContext;
6868

69-
export type MessageAvatarProps = Partial<MessageAvatarPropsWithContext>;
69+
export type MessageAuthorProps = Partial<MessageAuthorPropsWithContext>;
7070

71-
export const MessageAvatar = (props: MessageAvatarProps) => {
71+
export const MessageAuthor = (props: MessageAuthorProps) => {
7272
const { lastGroupMessage, message, showAvatar } = useMessageContext();
7373

7474
return (
75-
<MemoizedMessageAvatar
75+
<MemoizedMessageAuthor
7676
{...{
7777
lastGroupMessage,
7878
message,
@@ -83,4 +83,4 @@ export const MessageAvatar = (props: MessageAvatarProps) => {
8383
);
8484
};
8585

86-
MessageAvatar.displayName = 'MessageAvatar{messageItemView{avatarWrapper}}';
86+
MessageAuthor.displayName = 'MessageAuthor{messageItemView{authorWrapper}}';

package/src/components/Message/MessageItemView/MessageItemView.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -176,13 +176,14 @@ export type MessageItemViewPropsWithContext = Pick<
176176
| 'enableMessageGroupingByUser'
177177
| 'enableSwipeToReply'
178178
| 'myMessageTheme'
179-
| 'MessageAvatar'
179+
| 'MessageAuthor'
180180
| 'MessageContent'
181181
| 'MessageDeleted'
182182
| 'MessageError'
183183
| 'MessageFooter'
184184
| 'MessageHeader'
185185
| 'MessageReplies'
186+
| 'MessageSpacer'
186187
| 'MessageSwipeContent'
187188
| 'messageSwipeToReplyHitSlop'
188189
| 'ReactionListBottom'
@@ -213,13 +214,14 @@ const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithCont
213214
groupStyles,
214215
isMyMessage,
215216
message,
216-
MessageAvatar,
217+
MessageAuthor,
217218
MessageContent,
218219
MessageDeleted,
219220
MessageError,
220221
MessageFooter,
221222
MessageHeader,
222223
MessageReplies,
224+
MessageSpacer,
223225
MessageSwipeContent,
224226
messageSwipeToReplyHitSlop = { left: width, right: width },
225227
onlyEmojis,
@@ -296,7 +298,7 @@ const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithCont
296298
return (
297299
<View ref={ref}>
298300
<View pointerEvents='box-none' style={styles.container} testID='message-item-view-wrapper'>
299-
{alignment === 'left' ? <MessageAvatar /> : null}
301+
{alignment === 'left' ? <MessageAuthor /> : null}
300302
{isMessageTypeDeleted ? (
301303
<MessageDeleted date={message.created_at} groupStyle={groupStyle} />
302304
) : (
@@ -357,6 +359,7 @@ const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithCont
357359
<MessageFooter date={message.created_at} />
358360
</View>
359361
)}
362+
<MessageSpacer />
360363
</View>
361364
</View>
362365
);
@@ -511,13 +514,14 @@ export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, re
511514
customMessageSwipeAction,
512515
enableMessageGroupingByUser,
513516
enableSwipeToReply,
514-
MessageAvatar,
517+
MessageAuthor,
515518
MessageContent,
516519
MessageDeleted,
517520
MessageError,
518521
MessageFooter,
519522
MessageHeader,
520523
MessageReplies,
524+
MessageSpacer,
521525
MessageSwipeContent,
522526
messageSwipeToReplyHitSlop,
523527
myMessageTheme,
@@ -543,13 +547,14 @@ export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, re
543547
groupStyles,
544548
isMyMessage,
545549
message,
546-
MessageAvatar,
550+
MessageAuthor,
547551
MessageContent,
548552
MessageDeleted,
549553
MessageError,
550554
MessageFooter,
551555
MessageHeader,
552556
MessageReplies,
557+
MessageSpacer,
553558
MessageSwipeContent,
554559
messageSwipeToReplyHitSlop,
555560
myMessageTheme,
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const MessageSpacer = () => null;

package/src/components/Message/MessageItemView/__tests__/MessageAvatar.test.js renamed to package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,35 @@ import {
1010
import { generateStaticUser } from '../../../../mock-builders/generator/user';
1111
import { getTestClientWithUser } from '../../../../mock-builders/mock';
1212
import { Chat } from '../../../Chat/Chat';
13-
import { MessageAvatar } from '../MessageAvatar';
13+
import { MessageAuthor } from '../MessageAuthor';
1414

1515
afterEach(cleanup);
1616

17-
describe('MessageAvatar', () => {
17+
describe('MessageAuthor', () => {
1818
let chatClient;
1919

2020
beforeEach(async () => {
2121
chatClient = await getTestClientWithUser({ id: 'me' });
2222
});
2323

24-
it('should render message avatar', async () => {
24+
it('should render message author', async () => {
2525
const staticUser = generateStaticUser(0);
2626
const message = generateMessage({
2727
user: { ...staticUser, image: undefined },
2828
});
2929
render(
3030
<Chat client={chatClient} style={defaultTheme}>
31-
<MessageAvatar alignment='right' groupStyles={['bottom']} message={message} />
31+
<MessageAuthor alignment='right' groupStyles={['bottom']} message={message} />
3232
</Chat>,
3333
);
3434

3535
await waitFor(() => {
36-
expect(screen.getByTestId('message-avatar')).toBeTruthy();
36+
expect(screen.getByTestId('message-author')).toBeTruthy();
3737
});
3838

3939
screen.rerender(
4040
<Chat client={chatClient} style={defaultTheme}>
41-
<MessageAvatar alignment='right' groupStyles={[]} message={message} />
41+
<MessageAuthor alignment='right' groupStyles={[]} message={message} />
4242
</Chat>,
4343
);
4444

@@ -53,7 +53,7 @@ describe('MessageAvatar', () => {
5353

5454
screen.rerender(
5555
<Chat client={chatClient} style={defaultTheme}>
56-
<MessageAvatar
56+
<MessageAuthor
5757
alignment='left'
5858
groupStyles={['single']}
5959
message={staticMessage}
@@ -63,7 +63,7 @@ describe('MessageAvatar', () => {
6363
);
6464

6565
await waitFor(() => {
66-
expect(screen.getByTestId('message-avatar')).toBeTruthy();
66+
expect(screen.getByTestId('message-author')).toBeTruthy();
6767
expect(screen.getByTestId('user-avatar')).toBeTruthy();
6868
expect(screen.toJSON()).toMatchSnapshot();
6969
});

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,24 +64,24 @@ describe('MessageItemView', () => {
6464
});
6565
});
6666

67-
it('renders MessageAvatar when alignment is left', async () => {
67+
it('renders MessageAuthor when alignment is left', async () => {
6868
const user = generateUser();
6969
const message = generateMessage({ user });
7070

7171
renderMessage({ message });
7272

7373
await waitFor(() => {
74-
expect(screen.queryByTestId('message-avatar')).toBeDefined();
74+
expect(screen.queryByTestId('message-author')).toBeDefined();
7575
});
7676
});
7777

78-
it('do not renders MessageAvatar when alignment is right', async () => {
78+
it('do not renders MessageAuthor when alignment is right', async () => {
7979
const user = generateUser({ id: 'id', name: 'name' });
8080
const message = generateMessage({ user });
8181
renderMessage({ message });
8282

8383
await waitFor(() => {
84-
expect(screen.queryByTestId('message-avatar')).toBeNull();
84+
expect(screen.queryByTestId('message-author')).toBeNull();
8585
});
8686
});
8787

@@ -107,6 +107,17 @@ describe('MessageItemView', () => {
107107
});
108108
});
109109

110+
it('renders MessageSpacer component if defined', async () => {
111+
const user = generateUser();
112+
const message = generateMessage({ user });
113+
114+
renderMessage({ message }, { MessageSpacer: () => <Text>Message Spacer</Text> });
115+
116+
await waitFor(() => {
117+
expect(screen.queryByText('Message Spacer')).not.toBeNull();
118+
});
119+
});
120+
110121
it('renders ReactionListTop when reactionListPosition is top', async () => {
111122
const user = generateUser();
112123
const message = generateMessage({ user });

package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAvatar.test.js.snap renamed to package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
22

3-
exports[`MessageAvatar should render message avatar 1`] = `
3+
exports[`MessageAuthor should render message author 1`] = `
44
<View
55
style={{}}
6-
testID="message-avatar"
6+
testID="message-author"
77
>
88
<View
99
testID="user-avatar"

0 commit comments

Comments
 (0)