React-native ui kit 세부사항 변경 가능건에 대한 문의

Sendbird Chat UIKit React Native
1

[Problem/Question]
// Detailed description of issue.

ui kit를 사용해서 개발중입니다
몇 가지 질문 남깁니다

  1. create channel 버튼을 누르면 모든 유저가 다 보이는데 유저마다 보이는 사람이 다르도록 하고 싶을때는 어떻게 필터링 해야하는지 방법을 모르겠습니다

  2. 위의 문제가 해결이 어렵다면 create channel 의 기능 자체의 동작을 막고싶습니다
    버튼이 아예 안보이고 눌러도 동작하지 않도록 하고 싶습니다
    찾아보니 필수 기능인것 같아 다른 방법이 있는지 궁금합니다

  3. 채팅방 내의 셋팅 페이지 에서 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?

2

안녕하세요.

  1. 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
3

도움주셔서 감사합니다!
문제를 해결했습니다!

1 Like