[Problem/Question]
// Detailed description of issue.
ui kit를 사용해서 개발중입니다
몇 가지 질문 남깁니다
-
create channel 버튼을 누르면 모든 유저가 다 보이는데 유저마다 보이는 사람이 다르도록 하고 싶을때는 어떻게 필터링 해야하는지 방법을 모르겠습니다
-
위의 문제가 해결이 어렵다면 create channel 의 기능 자체의 동작을 막고싶습니다
버튼이 아예 안보이고 눌러도 동작하지 않도록 하고 싶습니다
찾아보니 필수 기능인것 같아 다른 방법이 있는지 궁금합니다
-
채팅방 내의 셋팅 페이지 에서 moderation 기능을 사용하지 않고 유저에게도 안보이도록 하고 싶습니다
moderation 기능 역시 필수로 지정이 되어있는것을 확인 했습니다
필수로 지정된 것을 사용하지 않는 방법을 알고 싶습니다
// If problem, please fill out the below. If question, please delete.
[UIKit Version] ^2.4.1
// What version of the SDK are you using?
[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.
[Frequency]
// How frequently is this issue occurring?
[Current impact]
// How is this currently impacting your implementation?
안녕하세요.
- GroupChannelCreateFragment 의 queryCreator 프롭과 renderUser 을 사용하면, 고객사의 API 를 사용해서도 리스트를 커스터마이징 할 수 있습니다. (단 API 에서 반환하는 user 객체에 userId 는 필수적으로 포함되어있어야 합니다.)
import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { CustomQuery } from '@sendbird/uikit-chat-hooks';
import { createGroupChannelCreateFragment } from '@sendbird/uikit-react-native';
import { useAppNavigation } from '../../../hooks/useAppNavigation';
import { Routes } from '../../../libs/navigation';
interface MyUserInterface {
userId: string; // **Required key
userNickname: string;
userProfileUrl: string;
}
// Your User list API
const UserAPI = {
fetched: false,
async fetchUsers() {
this.fetched = true;
return [
{
userId: '1',
userNickname: 'UserNickname1',
userProfileUrl: 'https://user-profile-1.png',
},
{
userId: '2',
userNickname: 'UserNickname2',
userProfileUrl: 'https://user-profile-2.png',
},
];
},
hasNext() {
return !this.fetched;
},
isLoading() {
return false;
},
};
const GroupChannelCreateFragment = createGroupChannelCreateFragment<MyUserInterface>();
const GroupChannelCreateScreen = () => {
const { navigation, params } = useAppNavigation<Routes.GroupChannelCreate>();
return (
<GroupChannelCreateFragment
//...
renderUser={(user, selectedUsers, setSelectedUsers) => {
const selected = Boolean(selectedUsers.find((it) => it.userId === user.userId));
return (
<Pressable
onPress={() => {
if (selected) {
setSelectedUsers(selectedUsers.filter((it) => it.userId !== user.userId));
} else {
setSelectedUsers([...selectedUsers, user]);
}
}}
>
<View style={{ backgroundColor: selected ? 'red' : 'white' }}>
<Text>{user.userNickname}</Text>
</View>
</Pressable>
);
}}
queryCreator={() => {
return new CustomQuery<MyUserInterface>({
async next() {
return UserAPI.fetchUsers();
},
hasNext() {
return UserAPI.hasNext();
},
isLoading() {
return UserAPI.isLoading();
},
});
}}
/>
);
};
export default GroupChannelCreateScreen;
2 - Create channel 기능은 GroupChannelListFragment 의 헤더를 커스터마이징 해서 막을 수 있습니다.
const GroupChannelListFragment = createGroupChannelListFragment({
Header: () => {
const { HeaderComponent } = useHeaderStyle();
const { headerTitle } = useContext(GroupChannelListContexts.Fragment);
return <HeaderComponent title={headerTitle} />;
},
});
3 - GroupChannelSettings 의 menuItemsCreator 프롭을 이용해서 메뉴를 커스터마이징 할 수 있습니다. (메뉴는 배열에 담겨있으며, 순서는 UI 에 보이는 순서대로입니다.)
import React from 'react';
import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
import { createGroupChannelSettingsFragment, useSendbirdChat } from '@sendbird/uikit-react-native';
import { useAppNavigation } from '../../../hooks/useAppNavigation';
import { Routes } from '../../../libs/navigation';
const GroupChannelSettingsFragment = createGroupChannelSettingsFragment();
const GroupChannelSettingsScreen = () => {
const { navigation, params } = useAppNavigation<Routes.GroupChannelSettings>();
const { sdk } = useSendbirdChat();
const { channel } = useGroupChannel(sdk, params.channelUrl);
if (!channel) return null;
return (
<GroupChannelSettingsFragment
// ...
menuItemsCreator={(defaultMenuItems) => {
if (channel.myRole === 'operator') {
defaultMenuItems.shift(); // If myRole is operator, remove moderation menuItem from the menuItems
}
return defaultMenuItems;
}}
/>
);
};
export default GroupChannelSettingsScreen;
1 Like