Skip to content

Commit a79fbd4

Browse files
HoonBaekHoonBaek
authored
Feature: [v2] Provide an auto select flag in the channel list (#99)
* Add an ableAutoSelectChannelItem props to the App and ChannelList component * Modify setting current channel logic by ableAutoSelectChannelItem flag * Call onChannelSelect event handler only when the props is true [UIKit-1503](https://sendbird.atlassian.net/browse/UIKit-1503)
1 parent 053b53c commit a79fbd4

File tree

7 files changed

+69
-32
lines changed

7 files changed

+69
-32
lines changed

‎src/index.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,7 @@ interface ChannelListProps {
372372
renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode;
373373
renderHeader?: (props: void) => React.ReactNode;
374374
queries?: ChannelListQueries;
375+
disableAutoSelect?: boolean;
375376
}
376377
interface ChannelProps {
377378
channelUrl: string;
@@ -456,6 +457,7 @@ interface AppProps {
456457
resizingHeight?: number | string,
457458
};
458459
replyType?: ReplyType;
460+
disableAutoSelect?: boolean;
459461
}
460462

461463
interface ClientMessage {

‎src/smart-components/App/index.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export default function App(props) {
3737
showSearchIcon,
3838
onProfileEditSuccess,
3939
imageCompression,
40+
disableAutoSelect,
4041
} = props;
4142
const [currentChannelUrl, setCurrentChannelUrl] = useState(null);
4243
const [showSettings, setShowSettings] = useState(false);
@@ -76,6 +77,7 @@ export default function App(props) {
7677
setCurrentChannelUrl('');
7778
}
7879
}}
80+
disableAutoSelect={disableAutoSelect}
7981
/>
8082
</div>
8183
<div
@@ -177,6 +179,7 @@ App.propTypes = {
177179
PropTypes.string,
178180
]),
179181
}),
182+
disableAutoSelect: PropTypes.bool,
180183
};
181184

182185
App.defaultProps = {
@@ -198,4 +201,5 @@ App.defaultProps = {
198201
stringSet: null,
199202
colorSet: null,
200203
imageCompression: {},
204+
disableAutoSelect: false,
201205
};

‎src/smart-components/ChannelList/dux/actionTypes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export const RESET_CHANNEL_LIST = 'RESET_CHANNEL_LIST';
22
export const CREATE_CHANNEL = 'CREATE_CHANNEL';
33
export const UNLOAD_CHANNELS = 'UNLOAD_CHANNELS';
44
export const SET_CHANNEL_LOADING = 'SET_CHANNEL_LOADING';
5+
export const SET_AUTO_SELECT_CHANNEL_ITEM = 'SET_AUTO_SELECT_CHANNEL_ITEM';
56
export const LEAVE_CHANNEL_SUCCESS = 'LEAVE_CHANNEL_SUCCESS';
67

78
export const SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL';

‎src/smart-components/ChannelList/dux/initialState.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export default {
77
showSettings: false,
88
channelListQuery: null,
99
currentUserId: '',
10+
disableAutoSelect: false,
1011
};

‎src/smart-components/ChannelList/dux/reducers.js‎

Lines changed: 46 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,18 @@ export default function reducer(state, action) {
1111
};
1212
case actions.RESET_CHANNEL_LIST:
1313
return initialState;
14-
case actions.INIT_CHANNELS_SUCCESS:
14+
case actions.INIT_CHANNELS_SUCCESS: {
15+
const nextChannel = (action.payload && action.payload.length && action.payload.length > 0)
16+
? action.payload[0].url
17+
: null;
1518
return {
1619
...state,
1720
initialized: true,
1821
loading: false,
1922
allChannels: action.payload,
20-
currentChannel: (action.payload && action.payload.length && action.payload.length > 0)
21-
? action.payload[0].url
22-
: null,
23+
currentChannel: state.disableAutoSelect ? null : nextChannel,
2324
};
25+
}
2426
case actions.FETCH_CHANNELS_SUCCESS: {
2527
const currentChannels = state.allChannels.map((c) => c.url);
2628
const filteredChannels = action.payload.filter(
@@ -64,22 +66,24 @@ export default function reducer(state, action) {
6466
};
6567
}
6668
}
69+
const nextChannel = (channel.url === state.currentChannel)
70+
? state.allChannels[state.allChannels[0].url === channel.url ? 1 : 0].url
71+
: state.currentChannel;
6772
return {
6873
...state,
69-
currentChannel: (channel.url === state.currentChannel)
70-
? state.allChannels[state.allChannels[0].url === channel.url ? 1 : 0].url
71-
: state.currentChannel,
74+
currentChannel: state.disableAutoSelect ? null : nextChannel,
7275
allChannels: state.allChannels.filter(({ url }) => url !== channel.url),
7376
};
7477
}
7578
case actions.LEAVE_CHANNEL_SUCCESS:
7679
case actions.ON_CHANNEL_DELETED: {
7780
const channelUrl = action.payload;
81+
const nextChannel = (channelUrl === state.currentChannel)
82+
? state.allChannels[0].url
83+
: state.currentChannel;
7884
return {
7985
...state,
80-
currentChannel: (channelUrl === state.currentChannel)
81-
? state.allChannels[0].url
82-
: state.currentChannel,
86+
currentChannel: state.disableAutoSelect ? null : nextChannel,
8387
allChannels: state.allChannels.filter(({ url }) => url !== channelUrl),
8488
};
8589
}
@@ -88,28 +92,31 @@ export default function reducer(state, action) {
8892
if (state.channelListQuery) {
8993
if (filterChannelListParams(state.channelListQuery, channel, state.currentUserId)) {
9094
const filteredChannels = getChannelsWithUpsertedChannel(state.allChannels, channel);
95+
const nextChannel = (isMe && (channel.url === state.currentChannel))
96+
? filteredChannels[0].url
97+
: state.currentChannel;
9198
return {
9299
...state,
93-
currentChannel: (isMe && (channel.url === state.currentChannel))
94-
? filteredChannels[0].url
95-
: state.currentChannel,
100+
currentChannel: state.disableAutoSelect ? null : nextChannel,
96101
allChannels: filteredChannels,
97102
};
98103
}
104+
const nextChannel = (channel.url === state.currentChannel)
105+
? state.allChannels[0].url
106+
: state.currentChannel;
99107
return {
100108
...state,
101-
currentChannel: (channel.url === state.currentChannel)
102-
? state.allChannels[0].url
103-
: state.currentChannel,
109+
currentChannel: state.disableAutoSelect ? null : nextChannel,
104110
allChannels: state.allChannels.filter(({ url }) => url !== channel.url),
105111
};
106112
}
107113
const filteredChannels = state.allChannels.filter((c) => !(c.url === channel.url && isMe));
114+
const nextChannel = (isMe && (channel.url === state.currentChannel))
115+
? filteredChannels[0].url
116+
: state.currentChannel;
108117
return {
109118
...state,
110-
currentChannel: (isMe && (channel.url === state.currentChannel))
111-
? filteredChannels[0].url
112-
: state.currentChannel,
119+
currentChannel: state.disableAutoSelect ? null : nextChannel,
113120
allChannels: filteredChannels,
114121
};
115122
}
@@ -128,12 +135,13 @@ export default function reducer(state, action) {
128135
allChannels: getChannelsWithUpsertedChannel(allChannels, channel),
129136
};
130137
}
138+
const nextChannel = (channel.url === state.currentChannel)
139+
? state.allChannels[state.allChannels[0].url === channel.url ? 1 : 0].url
140+
// if coming channel is first of channel list, current channel will be the next one
141+
: state.currentChannel;
131142
return {
132143
...state,
133-
currentChannel: (channel.url === state.currentChannel)
134-
? state.allChannels[state.allChannels[0].url === channel.url ? 1 : 0].url
135-
// if coming channel is first of channel list, current channel will be the next one
136-
: state.currentChannel,
144+
currentChannel: state.disableAutoSelect ? null : nextChannel,
137145
allChannels: state.allChannels.filter(({ url }) => url !== channel.url),
138146
};
139147
}
@@ -186,12 +194,13 @@ export default function reducer(state, action) {
186194
allChannels: getChannelsWithUpsertedChannel(state.allChannels, channel),
187195
};
188196
}
197+
const nextChannel = (channel.url === state.currentChannel)
198+
? state.allChannels[state.allChannels[0].url === channel.url ? 1 : 0].url
199+
// if coming channel is first of channel list, current channel will be the next one
200+
: state.currentChannel;
189201
return {
190202
...state,
191-
currentChannel: (channel.url === state.currentChannel)
192-
? state.allChannels[state.allChannels[0].url === channel.url ? 1 : 0].url
193-
// if coming channel is first of channel list, current channel will be the next one
194-
: state.currentChannel,
203+
currentChannel: state.disableAutoSelect ? null : nextChannel,
195204
allChannels: state.allChannels.filter(({ url }) => url !== channel.url),
196205
};
197206
}
@@ -216,12 +225,13 @@ export default function reducer(state, action) {
216225
allChannels: getChannelsWithUpsertedChannel(state.allChannels, channel),
217226
};
218227
}
228+
const nextChannel = (channel.url === state.currentChannel)
229+
? state.allChannels[state.allChannels[0].url === channel.url ? 1 : 0].url
230+
// if coming channel is first of channel list, current channel will be the next one
231+
: state.currentChannel;
219232
return {
220233
...state,
221-
currentChannel: (channel.url === state.currentChannel)
222-
? state.allChannels[state.allChannels[0].url === channel.url ? 1 : 0].url
223-
// if coming channel is first of channel list, current channel will be the next one
224-
: state.currentChannel,
234+
currentChannel: state.disableAutoSelect ? null : nextChannel,
225235
allChannels: state.allChannels.filter(({ url }) => url !== channel.url),
226236
};
227237
}
@@ -252,6 +262,11 @@ export default function reducer(state, action) {
252262
currentUserId: action.payload.currentUserId,
253263
channelListQuery: action.payload.channelListQuery,
254264
};
265+
case actions.SET_AUTO_SELECT_CHANNEL_ITEM:
266+
return {
267+
...state,
268+
disableAutoSelect: action.payload,
269+
};
255270
default:
256271
return state;
257272
}

‎src/smart-components/ChannelList/index.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ function ChannelList(props) {
5353
onThemeChange,
5454
onBeforeCreateChannel,
5555
onChannelSelect,
56+
disableAutoSelect,
5657
} = props;
5758
const { config = {} } = props;
5859
// enable if it is true atleast once(both are flase by default)
@@ -101,6 +102,7 @@ function ChannelList(props) {
101102
userFilledChannelListQuery,
102103
logger,
103104
sortChannelList,
105+
disableAutoSelect,
104106
});
105107
} else {
106108
logger.info('ChannelList: Removing channelHandlers');
@@ -136,6 +138,13 @@ function ChannelList(props) {
136138
logger.warning(warning, { before: allChannels, after: sortedChannels });
137139
}
138140

141+
useEffect(() => {
142+
channelListDispatcher({
143+
type: channelListActions.SET_AUTO_SELECT_CHANNEL_ITEM,
144+
payload: disableAutoSelect,
145+
});
146+
}, [disableAutoSelect]);
147+
139148
useEffect(() => {
140149
if (!sdk || !sdk.GroupChannel || !currentChannel) { return; }
141150
sdk.GroupChannel.getChannel(currentChannel, (groupChannel) => {
@@ -392,6 +401,7 @@ ChannelList.propTypes = {
392401
PropTypes.func,
393402
]),
394403
onChannelSelect: PropTypes.func,
404+
disableAutoSelect: PropTypes.bool,
395405
};
396406

397407
ChannelList.defaultProps = {
@@ -406,6 +416,7 @@ ChannelList.defaultProps = {
406416
onProfileEditSuccess: null,
407417
queries: {},
408418
onChannelSelect: noop,
419+
disableAutoSelect: false,
409420
};
410421

411422
export default withSendbirdContext(ChannelList);

‎src/smart-components/ChannelList/utils.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ function setupChannelList({
151151
userFilledChannelListQuery,
152152
logger,
153153
sortChannelList,
154+
disableAutoSelect,
154155
}) {
155156
if (sdk && sdk.ChannelHandler) {
156157
createEventHandler({
@@ -209,7 +210,9 @@ function setupChannelList({
209210
sorted = sortChannelList(channelList);
210211
logger.info('ChannelList - channel list sorted', sorted);
211212
}
212-
onChannelSelect(sorted[0]);
213+
if (!disableAutoSelect) {
214+
onChannelSelect(sorted[0]);
215+
}
213216
channelListDispatcher({
214217
type: channelActions.INIT_CHANNELS_SUCCESS,
215218
payload: sorted,

0 commit comments

Comments
 (0)