Skip to content

Commit ac80dc2

Browse files
bang9bang9
authored
fix: should pass render props properly in channel module (#965)
- Fixed a bug where `renderChannelHeader` is not passed properly ticket: [CLNP-2209] [CLNP-2209]: https://sendbird.atlassian.net/browse/CLNP-2209?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
1 parent 7691130 commit ac80dc2

File tree

4 files changed

+79
-102
lines changed

4 files changed

+79
-102
lines changed

‎src/modules/Channel/components/ChannelUI/index.tsx‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,37 @@
11
import React from 'react';
22

3-
import type { MessageContentProps } from '../../../../ui/MessageContent';
4-
import type { GroupChannelHeaderProps } from '../../../GroupChannel/components/GroupChannelHeader';
5-
import type { RenderCustomSeparatorProps } from '../../../../types';
6-
import { RenderMessageParamsType } from '../../../../types';
73
import { useChannelContext } from '../../context/ChannelProvider';
8-
import { GroupChannelUIView } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
4+
import { GroupChannelUIBasicProps, GroupChannelUIView } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
5+
96
import ChannelHeader from '../ChannelHeader';
107
import MessageList from '../MessageList';
118
import MessageInputWrapper from '../MessageInputWrapper';
129

13-
export interface ChannelUIProps {
10+
export interface ChannelUIProps extends GroupChannelUIBasicProps {
1411
isLoading?: boolean;
15-
renderPlaceholderLoader?: () => React.ReactElement;
16-
renderPlaceholderInvalid?: () => React.ReactElement;
17-
renderPlaceholderEmpty?: () => React.ReactElement;
18-
renderChannelHeader?: (props: GroupChannelHeaderProps) => React.ReactElement;
19-
renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
20-
renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
21-
renderMessageInput?: () => React.ReactElement;
22-
renderFileUploadIcon?: () => React.ReactElement;
23-
renderVoiceMessageIcon?: () => React.ReactElement;
24-
renderSendMessageIcon?: () => React.ReactElement;
25-
renderTypingIndicator?: () => React.ReactElement;
26-
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
27-
renderFrozenNotification?: () => React.ReactElement;
2812
}
2913

3014
const ChannelUI = (props: ChannelUIProps) => {
3115
const context = useChannelContext();
16+
const { channelUrl, isInvalid, loading } = context;
17+
18+
// Inject components to presentation layer
3219
const {
33-
channelUrl,
34-
isInvalid,
35-
loading,
36-
} = context;
20+
renderChannelHeader = (p) => <ChannelHeader {...p} />,
21+
renderMessageList = (p) => <MessageList {...p} className="sendbird-conversation__message-list" />,
22+
renderMessageInput = () => <MessageInputWrapper {...props} />,
23+
} = props;
3724

3825
return (
3926
<GroupChannelUIView
4027
{...props}
4128
{...context}
42-
requestedChannelUrl={channelUrl}
4329
loading={props?.isLoading ?? loading}
4430
isInvalid={isInvalid}
45-
renderChannelHeader={(props) => (<ChannelHeader {...props} />)}
46-
renderMessageList={(props) => (<MessageList {...props} />)}
47-
renderMessageInput={() => (
48-
props.renderMessageInput?.()
49-
?? <MessageInputWrapper {...props} />
50-
)}
31+
channelUrl={channelUrl}
32+
renderChannelHeader={renderChannelHeader}
33+
renderMessageList={renderMessageList}
34+
renderMessageInput={renderMessageInput}
5135
/>
5236
);
5337
};

‎src/modules/Channel/components/MessageList/index.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@ import '../../../GroupChannel/components/MessageList/index.scss';
44
import React, { useState } from 'react';
55
import type { UserMessage } from '@sendbird/chat/message';
66

7-
import type { MessageContentProps } from '../../../../ui/MessageContent';
87
import { useChannelContext } from '../../context/ChannelProvider';
98
import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
109
import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
1110
import Message from '../Message';
12-
import { EveryMessage, RenderCustomSeparatorProps, RenderMessageParamsType, TypingIndicatorType } from '../../../../types';
11+
import { EveryMessage, TypingIndicatorType } from '../../../../types';
1312
import { isAboutSame } from '../../context/utils';
14-
import { getMessagePartsInfo } from '../../../GroupChannel/components/MessageList/getMessagePartsInfo';
1513
import UnreadCount from '../UnreadCount';
1614
import FrozenNotification from '../FrozenNotification';
1715
import { SCROLL_BUFFER } from '../../../../utils/consts';
@@ -23,18 +21,12 @@ import { useScrollBehavior } from './hooks/useScrollBehavior';
2321
import TypingIndicatorBubble from '../../../../ui/TypingIndicatorBubble';
2422
import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
2523

26-
const SCROLL_BOTTOM_PADDING = 50;
24+
import { getMessagePartsInfo } from '../../../GroupChannel/components/MessageList/getMessagePartsInfo';
25+
import { GroupChannelMessageListProps } from '../../../GroupChannel/components/MessageList';
2726

28-
export interface MessageListProps {
29-
className?: string;
30-
renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
31-
renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
32-
renderPlaceholderEmpty?: () => React.ReactElement;
33-
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
34-
renderPlaceholderLoader?: () => React.ReactElement;
35-
renderFrozenNotification?: () => React.ReactElement;
36-
}
27+
const SCROLL_BOTTOM_PADDING = 50;
3728

29+
export type MessageListProps = GroupChannelMessageListProps;
3830
export const MessageList = ({
3931
className = '',
4032
renderMessage,

‎src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx‎

Lines changed: 44 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,63 @@
11
import './index.scss';
22
import React from 'react';
33

4-
import type { GroupChannelUIProps } from '.';
54
import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
65

7-
import GroupChannelHeader, { type GroupChannelHeaderProps } from '../GroupChannelHeader';
8-
import MessageList from '../MessageList';
96
import TypingIndicator from '../TypingIndicator';
107
import { TypingIndicatorType } from '../../../../types';
118
import ConnectionStatus from '../../../../ui/ConnectionStatus';
129
import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
13-
import MessageInputWrapper from '../MessageInputWrapper';
1410

15-
export interface GroupChannelUIViewProps extends GroupChannelUIProps, GroupChannelHeaderProps {
16-
requestedChannelUrl: string;
11+
import type { RenderCustomSeparatorProps, RenderMessageParamsType } from '../../../../types';
12+
import type { GroupChannelHeaderProps } from '../GroupChannelHeader';
13+
import type { GroupChannelMessageListProps } from '../MessageList';
14+
import type { MessageContentProps } from '../../../../ui/MessageContent';
15+
16+
export interface GroupChannelUIBasicProps {
17+
// Components
18+
renderPlaceholderLoader?: () => React.ReactElement;
19+
renderPlaceholderInvalid?: () => React.ReactElement;
20+
renderPlaceholderEmpty?: () => React.ReactElement;
21+
renderChannelHeader?: (props: GroupChannelHeaderProps) => React.ReactElement;
22+
renderMessageList?: (props: GroupChannelMessageListProps) => React.ReactElement;
23+
renderMessageInput?: () => React.ReactElement;
24+
25+
// Sub components
26+
// MessageList
27+
renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
28+
renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
29+
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
30+
renderFrozenNotification?: () => React.ReactElement;
31+
32+
// MessageInput
33+
renderFileUploadIcon?: () => React.ReactElement;
34+
renderVoiceMessageIcon?: () => React.ReactElement;
35+
renderSendMessageIcon?: () => React.ReactElement;
36+
renderTypingIndicator?: () => React.ReactElement;
37+
}
38+
39+
export interface GroupChannelUIViewProps extends GroupChannelUIBasicProps {
1740
loading: boolean;
1841
isInvalid: boolean;
42+
channelUrl: string;
43+
renderChannelHeader: GroupChannelUIBasicProps['renderChannelHeader'];
44+
renderMessageList: GroupChannelUIBasicProps['renderMessageList'];
45+
renderMessageInput: GroupChannelUIBasicProps['renderMessageInput'];
1946
}
2047

2148
export const GroupChannelUIView = (props: GroupChannelUIViewProps) => {
2249
const {
23-
requestedChannelUrl,
2450
loading,
2551
isInvalid,
26-
renderChannelHeader = (props) => (
27-
<GroupChannelHeader {...props} />
28-
),
29-
renderMessageList = (props) => (
30-
<MessageList
31-
{...props}
32-
className="sendbird-conversation__message-list"
33-
/>
34-
),
35-
renderMessageInput = () => <MessageInputWrapper />,
52+
channelUrl,
53+
renderChannelHeader,
54+
renderMessageList,
55+
renderMessageInput,
3656
renderTypingIndicator,
3757
renderPlaceholderLoader,
3858
renderPlaceholderInvalid,
3959
} = props;
60+
4061
const { stores, config } = useSendbirdStateContext();
4162
const sdkError = stores?.sdkStore?.error;
4263
const { logger, isOnline } = config;
@@ -45,9 +66,9 @@ export const GroupChannelUIView = (props: GroupChannelUIViewProps) => {
4566
return <div className="sendbird-conversation">{renderPlaceholderLoader?.() || <PlaceHolder type={PlaceHolderTypes.LOADING} />}</div>;
4667
}
4768

48-
if (!requestedChannelUrl) {
69+
if (!channelUrl) {
4970
return (
50-
<div className="sendbird-conversation">{renderPlaceholderInvalid?.() || <PlaceHolder type={PlaceHolderTypes.NO_CHANNELS} />}</div>
71+
<div className="sendbird-conversation">{renderPlaceholderInvalid?.() || <PlaceHolder type={PlaceHolderTypes.NO_CHANNELS} />}</div>
5172
);
5273
}
5374

@@ -72,21 +93,16 @@ export const GroupChannelUIView = (props: GroupChannelUIViewProps) => {
7293
}
7394

7495
return (
75-
<div className='sendbird-conversation'>
96+
<div className="sendbird-conversation">
7697
{renderChannelHeader?.({ className: 'sendbird-conversation__channel-header' })}
7798
{renderMessageList?.(props)}
7899
<div className="sendbird-conversation__footer">
79100
{renderMessageInput?.()}
80101
<div className="sendbird-conversation__footer__typing-indicator">
81102
{renderTypingIndicator?.()
82-
|| (
83-
config?.groupChannel?.enableTypingIndicator
84-
&& config?.groupChannel?.typingIndicatorTypes?.has(TypingIndicatorType.Text)
85-
&& (
86-
<TypingIndicator channelUrl={requestedChannelUrl} />
87-
)
88-
)
89-
}
103+
|| (config?.groupChannel?.enableTypingIndicator && config?.groupChannel?.typingIndicatorTypes?.has(TypingIndicatorType.Text) && (
104+
<TypingIndicator channelUrl={channelUrl} />
105+
))}
90106
{!isOnline && <ConnectionStatus />}
91107
</div>
92108
</div>

‎src/modules/GroupChannel/components/GroupChannelUI/index.tsx‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,35 @@
11
import React from 'react';
22

3-
import type { GroupChannelHeaderProps } from '../GroupChannelHeader';
4-
import type { MessageListProps } from '../../../Channel/components/MessageList';
5-
import type { GroupChannelMessageListProps } from '../MessageList';
6-
import { RenderCustomSeparatorProps, RenderMessageParamsType } from '../../../../types';
73
import { useGroupChannelContext } from '../../context/GroupChannelProvider';
8-
import { GroupChannelUIView } from './GroupChannelUIView';
9-
import type { MessageContentProps } from '../../../../ui/MessageContent';
4+
import { GroupChannelUIBasicProps, GroupChannelUIView } from './GroupChannelUIView';
5+
6+
import GroupChannelHeader from '../GroupChannelHeader';
7+
import MessageList from '../MessageList';
108
import MessageInputWrapper from '../MessageInputWrapper';
119

12-
export interface GroupChannelUIProps {
13-
renderPlaceholderLoader?: () => React.ReactElement;
14-
renderPlaceholderInvalid?: () => React.ReactElement;
15-
renderPlaceholderEmpty?: () => React.ReactElement;
16-
renderChannelHeader?: (props: GroupChannelHeaderProps) => React.ReactElement;
17-
renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
18-
renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
19-
renderMessageList?: (props: MessageListProps | GroupChannelMessageListProps) => React.ReactElement;
20-
renderMessageInput?: () => React.ReactElement;
21-
renderFileUploadIcon?: () => React.ReactElement;
22-
renderVoiceMessageIcon?: () => React.ReactElement;
23-
renderSendMessageIcon?: () => React.ReactElement;
24-
renderTypingIndicator?: () => React.ReactElement;
25-
renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
26-
renderFrozenNotification?: () => React.ReactElement;
27-
}
10+
export interface GroupChannelUIProps extends GroupChannelUIBasicProps {}
2811

2912
export const GroupChannelUI = (props: GroupChannelUIProps) => {
3013
const context = useGroupChannelContext();
14+
const { currentChannel, channelUrl, loading } = context;
15+
16+
// Inject components to presentation layer
3117
const {
32-
currentChannel,
33-
channelUrl,
34-
loading,
35-
} = context;
18+
renderChannelHeader = (props) => <GroupChannelHeader {...props} />,
19+
renderMessageList = (props) => <MessageList {...props} className="sendbird-conversation__message-list" />,
20+
renderMessageInput = () => <MessageInputWrapper {...props} />,
21+
} = props;
3622

3723
return (
3824
<GroupChannelUIView
3925
{...props}
4026
{...context}
41-
requestedChannelUrl={channelUrl}
4227
loading={loading}
4328
isInvalid={channelUrl && !currentChannel}
44-
renderMessageInput={() => (
45-
props.renderMessageInput?.()
46-
?? <MessageInputWrapper {...props} />
47-
)}
29+
channelUrl={channelUrl}
30+
renderChannelHeader={renderChannelHeader}
31+
renderMessageList={renderMessageList}
32+
renderMessageInput={renderMessageInput}
4833
/>
4934
);
5035
};

0 commit comments

Comments
 (0)