fix: Apply string set into the moderation section (#391)

* Add string set
  * CHANNEL_SETTING__OPERATORS__ADD_BUTTON: 'Add'
  * CHANNEL_SETTING__MODERATION__EMPTY_BAN: 'No banned members yet'
  * CHANNEL_SETTING__MODERATION__ALL_BAN: 'All banned members'
* Apply string set
  * on the BannedUserList component
    * `No banned members yet`
    * `All banned members`
    * `Unban` on the context menu of the banned user list
  * on the BannedUsersModal component
    * `Unban` on the context menu of the banned user list
  * on the AddOperatorsModal component
    * `Add` for the submit button
  * on the InviteUsersModal component
    * `Invite` for the submit button
  * on the MutedMembersModal component
    * `Unmute` on the context menu of the muted user list

* Remove string set
  * CHANNEL_SETTING__UNMUTE: 'Unmute'
* Replace the string set to CHANNEL_SETTING__MODERATION__UNMUTE on the MutedMemberList component

* Modify CSS
  * To improve the word break with StringSet customization on the submit button

Author: HoonBaek

src/smart-components/App/stories/integrated.stories.js

@@ -219,6 +219,18 @@ export const GroupChannel = () => {
             isMessageReceiptStatusEnabledOnChannelList={sampleOptions.messageStatus}
             imageCompression={{ compressionRate: sampleOptions.imageCompression ? 0.7 : 1 }}
             replyType={sampleOptions.replyType}
+            stringSet={{
+              CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR: '오퍼레이터 등록',
+              CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR: '오퍼레이터 해제',
+              CHANNEL_SETTING__MODERATION__MUTE: '유저 음소거',
+              CHANNEL_SETTING__MODERATION__UNMUTE: '유저 음소거 해제',
+              CHANNEL_SETTING__MODERATION__BAN: '유저 밴',
+              CHANNEL_SETTING__MODERATION__UNBAN: '유저 언밴',
+              BUTTON__CREATE: '만들다',
+              BUTTON__INVITE: '초대하다',
+              CHANNEL_SETTING__MODERATION__EMPTY_BAN: '차단된 된 유저가 아무도 없습니다',
+              CHANNEL_SETTING__MODERATION__ALL_BAN: '차단된 유저 모두보기'
+            }}
           />
         </div>
       </div>

src/smart-components/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx

@@ -49,7 +49,7 @@ export default function AddOperatorsModal({
       <Modal
         isFullScreenOnMobile
         type={ButtonTypes.PRIMARY}
-        submitText="Add"
+        submitText={stringSet.CHANNEL_SETTING__OPERATORS__ADD_BUTTON}
         onCancel={onCancel}
         onSubmit={() => {
           const members = Object.keys(selectedMembers).filter((m) => selectedMembers[m]);

src/smart-components/ChannelSettings/components/ModerationPanel/BannedUserList.tsx

@@ -3,7 +3,9 @@ import React, {
   useEffect,
   useState,
   useCallback,
+  useContext,
 } from 'react';
+import { BannedUserListQueryParams } from '@sendbird/chat';
 
 import Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';
 import
@@ -18,21 +20,23 @@ import ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';
 import UserListItem from '../UserListItem';
 import BannedUsersModal from './BannedUsersModal';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
+import { LocalizationContext } from '../../../../lib/LocalizationContext';
 
 export const BannedMemberList = (): ReactElement => {
   const [members, setMembers] = useState([]);
   const [hasNext, setHasNext] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
+  const { stringSet } = useContext(LocalizationContext);
   const { channel } = useChannelSettingsContext();
 
+  const bannedUserListQueryParams: BannedUserListQueryParams = { limit: 10 };
   useEffect(() => {
     if (!channel) {
       setMembers([]);
       return;
     }
-
-    const bannedUserListQuery = channel?.createBannedUserListQuery();
+    const bannedUserListQuery = channel?.createBannedUserListQuery(bannedUserListQueryParams);
     bannedUserListQuery.next().then((users) => {
       setMembers(users);
       setHasNext(bannedUserListQuery.hasNext);
@@ -44,8 +48,7 @@ export const BannedMemberList = (): ReactElement => {
       setMembers([]);
       return;
     }
-
-    const bannedUserListQuery = channel?.createBannedUserListQuery();
+    const bannedUserListQuery = channel?.createBannedUserListQuery(bannedUserListQueryParams);
     bannedUserListQuery.next().then((users) => {
       setMembers(users);
       setHasNext(bannedUserListQuery.hasNext);
@@ -91,7 +94,7 @@ export const BannedMemberList = (): ReactElement => {
                           })
                         }}
                       >
-                        Unban
+                        {stringSet.CHANNEL_SETTING__MODERATION__UNBAN}
                       </MenuItem>
                     </MenuItems>
                   )}
@@ -108,7 +111,7 @@ export const BannedMemberList = (): ReactElement => {
             type={LabelTypography.SUBTITLE_2}
             color={LabelColors.ONBACKGROUND_3}
           >
-            No banned members yet
+            {stringSet.CHANNEL_SETTING__MODERATION__EMPTY_BAN}
           </Label>
         )
       }
@@ -124,7 +127,7 @@ export const BannedMemberList = (): ReactElement => {
                 setShowModal(true);
               }}
             >
-              All banned members
+              {stringSet.CHANNEL_SETTING__MODERATION__ALL_BAN}
             </Button>
           </div>
         )
@@ -143,5 +146,4 @@ export const BannedMemberList = (): ReactElement => {
   );
 }
 
-
 export default BannedMemberList;

src/smart-components/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx

@@ -99,7 +99,7 @@ export default function BannedUsersModal({
                           })
                         }}
                       >
-                        Unban
+                        {stringSet.CHANNEL_SETTING__MODERATION__BAN}
                       </MenuItem>
                     </MenuItems>
                   )}

src/smart-components/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx

@@ -43,7 +43,7 @@ export default function InviteUsers({
       <Modal
         isFullScreenOnMobile
         disabled={Object.keys(selectedMembers).length === 0}
-        submitText="Invite"
+        submitText={stringSet.BUTTON__INVITE}
         type={ButtonTypes.PRIMARY}
         onCancel={() => onCancel()}
         onSubmit={() => {

src/smart-components/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx

@@ -10,7 +10,7 @@ import IconButton from '../../../../ui/IconButton';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
 import ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';
 import
-  Label, {
+Label, {
   LabelTypography,
   LabelColors,
 } from '../../../../ui/Label';
@@ -106,7 +106,7 @@ export const MutedMemberList = (): ReactElement => {
                         }}
                       >
                         <>
-                          {stringSet.CHANNEL_SETTING__UNMUTE}
+                          {stringSet?.CHANNEL_SETTING__UNMUTE || stringSet.CHANNEL_SETTING__MODERATION__UNMUTE}
                         </>
                       </MenuItem>
                     </MenuItems>

src/smart-components/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx

@@ -107,7 +107,7 @@ export default function MutedMembersModal({
                           })
                         }}
                       >
-                        Unmute
+                        {stringSet.CHANNEL_SETTING__MODERATION__UNMUTE}
                       </MenuItem>
                     </MenuItems>
                   )}

src/smart-components/OpenChannelApp/components/CommunityChannelList.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState, useRef } from 'react';
+import React, { ReactElement, useEffect, useState, useRef, useContext } from 'react';
 import type { User } from '@sendbird/chat';
 import type { OpenChannel, OpenChannelCreateParams, OpenChannelListQuery, SendbirdOpenChat } from '@sendbird/chat/openChannel';
 import withSendBird from '../../../lib/SendbirdSdkContext';
@@ -13,6 +13,7 @@ import IconButton from '../../../ui/IconButton';
 import Icon, { IconColors, IconTypes } from '../../../ui/Icon';
 import Modal from '../../../ui/Modal';
 import TextButton from '../../../ui/TextButton';
+import { LocalizationContext } from '../../../lib/LocalizationContext';
 
 const SB_COMMUNITY_TYPE = 'SB_COMMUNITY_TYPE';
 
@@ -39,6 +40,7 @@ function CommunityChannelList({
   const [currentFile, setCurrentFile] = useState(null);
   const [currentChannelName, setCurrentChannelName] = useState('');
   const hiddenInputRef = useRef(null);
+  const { stringSet } = useContext(LocalizationContext);
 
   useEffect(() => {
     if (!sdk || !sdk.openChannel) {
@@ -105,7 +107,7 @@ function CommunityChannelList({
                   });
               }}
               type="PRIMARY"
-              submitText="Create"
+              submitText={stringSet.CREATE_OPEN_CHANNEL_LIST__SUBMIT}
             >
               <div className="community-channel__add-channel">
                 <div className="community-channel__add-channel__image-box">

src/smart-components/OpenChannelSettings/components/OperatorUI/AddOperatorsModal.tsx

@@ -47,7 +47,7 @@ export default function AddOperatorsModal({
       <Modal
         isFullScreenOnMobile
         type={ButtonTypes.PRIMARY}
-        submitText="Add"
+        submitText={stringSet.CHANNEL_SETTING__OPERATORS__ADD_BUTTON}
         onCancel={onCancel}
         onSubmit={() => {
           const users = Object.keys(selectedUsers).filter((m) => selectedUsers[m]);

src/ui/Label/stringSet.js

@@ -63,9 +63,9 @@ const getStringSet = (lang = 'en') => {
       CHANNEL_SETTING__OPERATORS__TITLE: 'Operators',
       CHANNEL_SETTING__OPERATORS__TITLE_ALL: 'All operators',
       CHANNEL_SETTING__OPERATORS__TITLE_ADD: 'Add operator',
+      CHANNEL_SETTING__OPERATORS__ADD_BUTTON: 'Add',
       CHANNEL_SETTING__MUTED_MEMBERS__TITLE: 'Muted members',
       CHANNEL_SETTING__MUTED_MEMBERS__TITLE_ALL: 'All muted members',
-      CHANNEL_SETTING__UNMUTE: 'Unmute',
       CHANNEL_SETTING__NO_UNMUTED: 'No muted members yet',
       CHANNEL_SETTING__BANNED_MEMBERS__TITLE: 'Banned users',
       CHANNEL_SETTING__FREEZE_CHANNEL: 'Freeze Channel',
@@ -75,6 +75,8 @@ const getStringSet = (lang = 'en') => {
       CHANNEL_SETTING__MODERATION__UNMUTE: 'Unmute',
       CHANNEL_SETTING__MODERATION__BAN: 'Ban',
       CHANNEL_SETTING__MODERATION__UNBAN: 'Unban',
+      CHANNEL_SETTING__MODERATION__EMPTY_BAN: 'No banned members yet',
+      CHANNEL_SETTING__MODERATION__ALL_BAN: 'All banned members',
       BUTTON__CANCEL: 'Cancel',
       BUTTON__DELETE: 'Delete',
       BUTTON__SAVE: 'Save',