refactor: ChannelSettingsProvider migration (#1229)

[CLNP-5044](https://sendbird.atlassian.net/browse/CLNP-5044)

### Fix
ChannelSettingsProvider migration
- Created a hook `useChannelSettings` for replacing
`useChannelSettingsContext`
- Created hooks `useSetChannel` and `useChannelHandler` to separate the
logics from the ChannelSettingsProvider

Author: HoonBaek

rollup.module-exports.mjs

@@ -57,7 +57,7 @@ export default {
 
   // ChannelSettings
   ChannelSettings: 'src/modules/ChannelSettings/index.tsx',
-  'ChannelSettings/context': 'src/modules/ChannelSettings/context/ChannelSettingsProvider.tsx',
+  'ChannelSettings/context': 'src/modules/ChannelSettings/context/index.tsx',
   'ChannelSettings/hooks/useMenuList': 'src/modules/ChannelSettings/components/ChannelSettingsUI/hooks/useMenuItems.tsx',
   'ChannelSettings/components/ChannelProfile': 'src/modules/ChannelSettings/components/ChannelProfile/index.tsx',
   'ChannelSettings/components/ChannelSettingsUI': 'src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx',

src/modules/ChannelSettings/components/ChannelProfile/index.tsx

@@ -1,22 +1,21 @@
 import './channel-profile.scss';
 import React, { useState, useContext, useMemo } from 'react';
 
-import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import useChannelSettings from '../../context/useChannelSettings';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
+import { LocalizationContext } from '../../../../lib/LocalizationContext';
 
 import ChannelAvatar from '../../../../ui/ChannelAvatar';
 import TextButton from '../../../../ui/TextButton';
 import Label, {
   LabelTypography,
   LabelColors,
 } from '../../../../ui/Label';
-
 import EditDetailsModal from '../EditDetailsModal';
 
 const ChannelProfile: React.FC = () => {
   const state = useSendbirdStateContext();
-  const channelSettingStore = useChannelSettingsContext();
+  const { state: { channel } } = useChannelSettings();
   const { stringSet } = useContext(LocalizationContext);
   const [showModal, setShowModal] = useState(false);
 
@@ -25,8 +24,6 @@ const ChannelProfile: React.FC = () => {
   const isOnline = state?.config?.isOnline;
   const disabled = !isOnline;
 
-  const channel = channelSettingStore?.channel;
-
   const channelName = useMemo(() => {
     if (channel?.name && channel.name !== 'Group Channel') {
       return channel.name;

src/modules/ChannelSettings/components/ChannelSettingsUI/MenuListByRole.tsx

@@ -8,16 +8,16 @@ import Icon from '../../../../ui/Icon';
 import { isOperator } from '../../../Channel/context/utils';
 
 import MenuItem from './MenuItem';
-import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import useMenuItems from './hooks/useMenuItems';
+import useChannelSettings from '../../context/useChannelSettings';
 
 interface MenuListByRoleProps {
   menuItems: ReturnType<typeof useMenuItems>;
 }
 export const MenuListByRole = ({
   menuItems,
 }: MenuListByRoleProps) => {
-  const { channel } = useChannelSettingsContext();
+  const { state: { channel } } = useChannelSettings();
   const menuItemsByRole = isOperator(channel) ? menuItems.operator : menuItems.nonOperator;
   // State to track the open accordion key
   const [openAccordionKey, setOpenAccordionKey] = useState<string | null>(null);

src/modules/ChannelSettings/components/ChannelSettingsUI/hooks/useMenuItems.tsx

@@ -11,9 +11,9 @@ import { IconColors, IconTypes, IconProps } from '../../../../../ui/Icon';
 import Badge from '../../../../../ui/Badge';
 import { Toggle } from '../../../../../ui/Toggle';
 import { LabelColors, LabelTypography, type LabelProps } from '../../../../../ui/Label';
-import { useChannelSettingsContext } from '../../../context/ChannelSettingsProvider';
 
 import { MenuItemAction, type MenuItemActionProps } from '../MenuItem';
+import useChannelSettings from '../../../context/useChannelSettings';
 
 const kFormatter = (num: number): string | number => {
   return Math.abs(num) > 999
@@ -55,7 +55,7 @@ const commonLabelProps = {
 export const useMenuItems = (): MenuItems => {
   const [frozen, setFrozen] = useState(false);
   const { stringSet } = useContext(LocalizationContext);
-  const { channel, renderUserListItem } = useChannelSettingsContext();
+  const { state: { channel, renderUserListItem } } = useChannelSettings();
 
   // work around for
   // https://sendbird.slack.com/archives/G01290GCDCN/p1595922832000900

src/modules/ChannelSettings/components/ChannelSettingsUI/index.tsx

@@ -1,23 +1,24 @@
 import './channel-settings-ui.scss';
 
-import React, { ReactNode, useContext, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
+import useChannelSettings from '../../context/useChannelSettings';
+import { useLocalization } from '../../../../lib/LocalizationContext';
+import useMenuItems from './hooks/useMenuItems';
 
+import { deleteNullish, classnames } from '../../../../utils/utils';
 import { ChannelSettingsHeader, ChannelSettingsHeaderProps } from './ChannelSettingsHeader';
 
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
-import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
+import { UserListItemProps } from '../../../../ui/UserListItem';
+
 import ChannelProfile from '../ChannelProfile';
 import LeaveChannelModal from '../LeaveChannel';
-import { deleteNullish, classnames } from '../../../../utils/utils';
 import MenuItem from './MenuItem';
 import MenuListByRole from './MenuListByRole';
-import useMenuItems from './hooks/useMenuItems';
-import { UserListItemProps } from '../../../../ui/UserListItem';
 
 interface ModerationPanelProps {
   menuItems: ReturnType<typeof useMenuItems>;
@@ -37,7 +38,6 @@ export interface ChannelSettingsUIProps {
 }
 
 const ChannelSettingsUI = (props: ChannelSettingsUIProps) => {
-  const { channel, invalidChannel, onCloseClick, loading } = useChannelSettingsContext();
   const {
     renderHeader = (props: ChannelSettingsHeaderProps) => <ChannelSettingsHeader {...props} />,
     renderLeaveChannel,
@@ -46,14 +46,22 @@ const ChannelSettingsUI = (props: ChannelSettingsUIProps) => {
     renderPlaceholderError,
     renderPlaceholderLoading,
   } = deleteNullish(props);
+  const {
+    config: { isOnline },
+  } = useSendbirdStateContext();
+  const {
+    state: {
+      channel,
+      invalidChannel,
+      onCloseClick,
+      loading,
+    },
+  } = useChannelSettings();
+  const { stringSet } = useLocalization();
   const menuItems = useMenuItems();
 
-  const state = useSendbirdStateContext();
   const [showLeaveChannelModal, setShowLeaveChannelModal] = useState(false);
 
-  const isOnline = state?.config?.isOnline;
-  const { stringSet } = useContext(LocalizationContext);
-
   if (loading) {
     if (renderPlaceholderLoading) return renderPlaceholderLoading();
     return <PlaceHolder type={PlaceHolderTypes.LOADING} />;
@@ -120,6 +128,7 @@ const ChannelSettingsUI = (props: ChannelSettingsUIProps) => {
 };
 
 export default ChannelSettingsUI;
+/** NOTE: For exportation */
 export { OperatorList } from '../ModerationPanel/OperatorList';
 export { MemberList } from '../ModerationPanel/MemberList';
 export { MutedMemberList } from '../ModerationPanel/MutedMemberList';

src/modules/ChannelSettings/components/EditDetailsModal/index.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useRef, useContext } from 'react';
 
-import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import useChannelSettings from '../../context/useChannelSettings';
 
 import Modal from '../../../../ui/Modal';
 import Input, { InputLabel } from '../../../../ui/Input';
@@ -26,11 +26,13 @@ const EditDetails: React.FC<EditDetailsProps> = (props: EditDetailsProps) => {
   } = props;
 
   const {
-    channel,
-    onChannelModified,
-    onBeforeUpdateChannel,
-    setChannelUpdateId,
-  } = useChannelSettingsContext();
+    state: {
+      channel,
+      onChannelModified,
+      onBeforeUpdateChannel,
+      setChannelUpdateId,
+    },
+  } = useChannelSettings();
   const title = channel?.name;
 
   const state = useSendbirdStateContext();

src/modules/ChannelSettings/components/LeaveChannel/index.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { noop } from '../../../../utils/utils';
 
 import Modal from '../../../../ui/Modal';
@@ -15,6 +14,7 @@ import Label, {
   LabelTypography,
   LabelColors,
 } from '../../../../ui/Label';
+import useChannelSettings from '../../context/useChannelSettings';
 
 export type LeaveChannelProps = {
   onSubmit: () => void;
@@ -27,7 +27,7 @@ const LeaveChannel: React.FC<LeaveChannelProps> = (props: LeaveChannelProps) =>
     onCancel = noop,
   } = props;
 
-  const { channel, onLeaveChannel } = useChannelSettingsContext();
+  const { state: { channel, onLeaveChannel } } = useChannelSettings();
   const { stringSet } = useLocalization();
   const state = useSendbirdStateContext();
   const logger = state?.config?.logger;

src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx

@@ -14,9 +14,9 @@ import Label, {
 } from '../../../../ui/Label';
 import { ButtonTypes } from '../../../../ui/Button';
 import UserListItem, { UserListItemProps } from '../../../../ui/UserListItem';
-import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { Member, MemberListQuery, OperatorFilter } from '@sendbird/chat/groupChannel';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
+import useChannelSettings from '../../context/useChannelSettings';
 
 export interface AddOperatorsModalProps {
   onCancel(): void;
@@ -34,7 +34,7 @@ export default function AddOperatorsModal({
   const [memberQuery, setMemberQuery] = useState<MemberListQuery | null>(null);
   const { stringSet } = useContext(LocalizationContext);
 
-  const { channel } = useChannelSettingsContext();
+  const { state: { channel } } = useChannelSettings();
 
   useEffect(() => {
     const memberListQuery = channel?.createMemberListQuery({

src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx

@@ -17,9 +17,9 @@ Label, {
 
 import UserListItem, { UserListItemProps } from '../../../../ui/UserListItem';
 import BannedUsersModal from './BannedUsersModal';
-import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import { UserListItemMenu } from '../../../../ui/UserListItemMenu';
+import useChannelSettings from '../../context/useChannelSettings';
 
 interface BannedUserListProps {
   renderUserListItem?: (props: UserListItemProps) => ReactNode;
@@ -35,7 +35,7 @@ export const BannedUserList = ({
   const [showModal, setShowModal] = useState(false);
 
   const { stringSet } = useContext(LocalizationContext);
-  const { channel } = useChannelSettingsContext();
+  const { state: { channel } } = useChannelSettings();
 
   const refreshList = useCallback(() => {
     if (!channel) {

src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx

@@ -4,15 +4,15 @@ import React, {
   useEffect,
   useState,
 } from 'react';
+import { BannedUserListQuery, BannedUserListQueryParams, RestrictedUser } from '@sendbird/chat';
 
-import Modal from '../../../../ui/Modal';
-import UserListItem, { UserListItemProps } from '../../../../ui/UserListItem';
-
-import { noop } from '../../../../utils/utils';
-import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
+import useChannelSettings from '../../context/useChannelSettings';
 import { useLocalization } from '../../../../lib/LocalizationContext';
-import { BannedUserListQuery, BannedUserListQueryParams, RestrictedUser } from '@sendbird/chat';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
+import { noop } from '../../../../utils/utils';
+
+import Modal from '../../../../ui/Modal';
+import UserListItem, { UserListItemProps } from '../../../../ui/UserListItem';
 import { UserListItemMenu } from '../../../../ui/UserListItemMenu';
 
 export interface BannedUsersModalProps {
@@ -28,7 +28,7 @@ export function BannedUsersModal({
 }: BannedUsersModalProps): ReactElement {
   const [members, setMembers] = useState<RestrictedUser[]>([]);
   const [memberQuery, setMemberQuery] = useState<BannedUserListQuery | null>(null);
-  const { channel } = useChannelSettingsContext();
+  const { state: { channel } } = useChannelSettings();
   const { stringSet } = useLocalization();
 
   useEffect(() => {