1- import './channel-list-ui.scss' ;
2-
31import React from 'react' ;
42import type { GroupChannel } from '@sendbird/chat/groupChannel' ;
53import ChannelPreview from '../ChannelPreview' ;
@@ -10,32 +8,22 @@ import * as channelListActions from '../../dux/actionTypes';
108import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext' ;
119import { GroupChannelListUIView } from '../../../GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView' ;
1210import AddChannel from '../AddChannel' ;
11+ import { GroupChannelListItemBasicProps } from '../../../GroupChannelList/components/GroupChannelListItem/GroupChannelListItemView' ;
1312
14- interface RenderChannelPreviewProps {
15- channel : GroupChannel ;
16- onLeaveChannel ( channel : GroupChannel , onLeaveChannelCb ?: ( channel : GroupChannel , error ?: null ) => void ) : void ;
13+ interface ChannelPreviewProps extends Omit < GroupChannelListItemBasicProps , 'onLeaveChannel' > {
14+ onLeaveChannel ( channel ?: GroupChannel , onLeaveChannelCb ?: ( channel : GroupChannel , error ?: null ) => void ) : Promise < void > ;
1715}
1816
1917export interface ChannelListUIProps {
20- renderChannelPreview ?: (
21- props : RenderChannelPreviewProps
22- ) => React . ReactElement ;
18+ renderChannelPreview ?: ( props : ChannelPreviewProps ) => React . ReactElement ;
2319 renderHeader ?: ( props : void ) => React . ReactElement ;
2420 renderPlaceHolderError ?: ( props : void ) => React . ReactElement ;
2521 renderPlaceHolderLoading ?: ( props : void ) => React . ReactElement ;
2622 renderPlaceHolderEmptyList ?: ( props : void ) => React . ReactElement ;
2723}
2824
29- const ChannelListUI : React . FC < ChannelListUIProps > = (
30- props : ChannelListUIProps ,
31- ) => {
32- const {
33- renderHeader,
34- renderChannelPreview,
35- renderPlaceHolderError,
36- renderPlaceHolderLoading,
37- renderPlaceHolderEmptyList,
38- } = props ;
25+ const ChannelListUI : React . FC < ChannelListUIProps > = ( props : ChannelListUIProps ) => {
26+ const { renderHeader, renderChannelPreview, renderPlaceHolderError, renderPlaceHolderLoading, renderPlaceHolderEmptyList } = props ;
3927
4028 const {
4129 onThemeChange,
@@ -56,63 +44,53 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (
5644 const renderListItem = ( props : { item : GroupChannel ; index : number } ) => {
5745 const { item : channel , index } = props ;
5846
59- const onLeaveChannel : RenderChannelPreviewProps [ 'onLeaveChannel' ] = ( channel , cb ) => {
60- logger . info ( 'ChannelList: Leaving channel' , channel ) ;
61- channel
62- . leave ( )
63- . then ( ( res ) => {
64- logger . info ( 'ChannelList: Leaving channel success' , res ) ;
65- if ( cb && typeof cb === 'function' ) cb ( channel , null ) ;
66-
67- channelListDispatcher ( {
68- type : channelListActions . LEAVE_CHANNEL_SUCCESS ,
69- payload : channel . url ,
70- } ) ;
71- } )
72- . catch ( ( err ) => {
73- logger . error ( 'ChannelList: Leaving channel failed' , err ) ;
74- if ( cb && typeof cb === 'function' ) cb ( channel , err ) ;
47+ const previewProps : ChannelPreviewProps = {
48+ channel,
49+ tabIndex : index ,
50+ isSelected : channel ?. url === currentChannel ?. url ,
51+ isTyping : typingChannels ?. some ( ( { url } ) => url === channel ?. url ) ,
52+ renderChannelAction : ( props ) => < ChannelPreviewAction { ...props } /> ,
53+ onClick ( ) {
54+ if ( ! isOnline && ! sdk ?. isCacheEnabled ) {
55+ logger . warning ( 'ChannelList: Inactivated clicking channel item during offline.' ) ;
56+ return ;
57+ }
58+ logger . info ( 'ChannelList: Clicked on channel:' , channel ) ;
59+ channelListDispatcher ( {
60+ type : channelListActions . SET_CURRENT_CHANNEL ,
61+ payload : channel ,
7562 } ) ;
76- } ;
63+ } ,
64+ async onLeaveChannel ( channel ?: GroupChannel , cb ?: ( channel : GroupChannel , error ?: null ) => void ) {
65+ logger . info ( 'ChannelList: Leaving channel' , channel ) ;
66+ if ( channel ) {
67+ try {
68+ const response = await channel . leave ( ) ;
69+
70+ logger . info ( 'ChannelList: Leaving channel success' , response ) ;
71+ if ( cb && typeof cb === 'function' ) cb ( channel , null ) ;
7772
78- const onClickChannel = ( ) => {
79- if ( ! isOnline && ! sdk ?. isCacheEnabled ) {
80- logger . warning ( 'ChannelList: Inactivated clicking channel item during offline.' ) ;
81- return ;
82- }
83- logger . info ( 'ChannelList: Clicked on channel: ' , channel ) ;
84- channelListDispatcher ( {
85- type : channelListActions . SET_CURRENT_CHANNEL ,
86- payload : channel ,
87- } ) ;
73+ channelListDispatcher ( {
74+ type : channelListActions . LEAVE_CHANNEL_SUCCESS ,
75+ payload : channel . url ,
76+ } ) ;
77+ } catch ( err ) {
78+ logger . error ( 'ChannelList: Leaving channel failed ' , err ) ;
79+ if ( cb && typeof cb === 'function' ) cb ( channel , err ) ;
80+ }
81+ }
82+ } ,
8883 } ;
8984
9085 if ( renderChannelPreview ) {
9186 return (
92- < div key = { channel ?. url } onClick = { onClickChannel } >
93- { renderChannelPreview ( { channel , onLeaveChannel } ) }
87+ < div key = { channel ?. url } onClick = { previewProps . onClick } >
88+ { renderChannelPreview ( previewProps ) }
9489 </ div >
9590 ) ;
9691 }
9792
98- return (
99- < ChannelPreview
100- key = { channel ?. url }
101- tabIndex = { index }
102- onClick = { onClickChannel }
103- channel = { channel }
104- onLeaveChannel = { ( ) => onLeaveChannel ( channel , null ) }
105- isActive = { channel ?. url === currentChannel ?. url }
106- isTyping = { typingChannels ?. some ( ( { url } ) => url === channel ?. url ) }
107- renderChannelAction = { ( ) => (
108- < ChannelPreviewAction
109- channel = { channel }
110- disabled = { ! isOnline }
111- onLeaveChannel = { ( ) => onLeaveChannel ( channel , null ) }
112- />
113- ) }
114- />
115- ) ;
93+ return < ChannelPreview key = { channel ?. url } { ...previewProps } /> ;
11694 } ;
11795
11896 return (
0 commit comments