;
- metaDataKeyFilter?: string;
- metaDataValuesFilter?: Array
;
-}
+import useSetChannel from './hooks/useSetChannel';
+import { useStore } from '../../../hooks/useStore';
+import { useChannelHandler } from './hooks/useChannelHandler';
-interface ChannelSettingsQueries {
- applicationUserListQuery?: ApplicationUserListQuery;
-}
+import uuidv4 from '../../../utils/uuid';
+import { classnames } from '../../../utils/utils';
+import { createStore } from '../../../utils/storeManager';
+import { UserProfileProvider } from '../../../lib/UserProfileContext';
+import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
+import useChannelSettings from './useChannelSettings';
+
+export const ChannelSettingsContext = createContext> | null>(null);
+
+const initialState: ChannelSettingsState = {
+ // Props
+ channelUrl: '',
+ onCloseClick: undefined,
+ onLeaveChannel: undefined,
+ onChannelModified: undefined,
+ onBeforeUpdateChannel: undefined,
+ renderUserListItem: undefined,
+ queries: {},
+ overrideInviteUser: undefined,
+ // Managed states
+ channel: null,
+ loading: false,
+ invalidChannel: false,
+ forceUpdateUI: () => { },
+ setChannelUpdateId: () => { },
+};
-type OverrideInviteUserType = {
- users: Array;
- onClose: () => void;
- channel: GroupChannel;
+/**
+ * @returns {ReturnType>}
+ */
+const useChannelSettingsStore = () => {
+ return useStore(ChannelSettingsContext, state => state, initialState);
};
-interface CommonChannelSettingsProps {
- channelUrl: string;
- onCloseClick?(): void;
- onLeaveChannel?(): void;
- onChannelModified?(channel: GroupChannel): void;
- onBeforeUpdateChannel?(currentTitle: string, currentImg: File | null, data: string | undefined): GroupChannelUpdateParams;
- overrideInviteUser?(params: OverrideInviteUserType): void;
- queries?: ChannelSettingsQueries;
- renderUserListItem?: (props: UserListItemProps) => ReactNode;
-}
-export interface ChannelSettingsContextProps extends
- CommonChannelSettingsProps,
- Pick {
- children?: React.ReactElement;
- className?: string;
-}
+const ChannelSettingsManager = ({
+ channelUrl,
+ onCloseClick,
+ onLeaveChannel,
+ onChannelModified,
+ overrideInviteUser,
+ onBeforeUpdateChannel,
+ queries,
+ renderUserListItem,
+}: ChannelSettingsContextProps) => {
+ const { state } = useSendbird();
+ const { config, stores } = state;
+ const { updateState } = useChannelSettingsStore();
+ const { logger } = config;
+ const { sdk, initialized } = stores?.sdkStore ?? {};
-interface ChannelSettingsProviderInterface extends CommonChannelSettingsProps {
- setChannelUpdateId(uniqId: string): void;
- forceUpdateUI(): void;
- channel: GroupChannel | null;
- loading: boolean;
- invalidChannel: boolean;
-}
+ const [channelUpdateId, setChannelUpdateId] = useState(() => uuidv4());
+ const forceUpdateUI = useCallback(() => setChannelUpdateId(uuidv4()), []);
-const ChannelSettingsContext = React.createContext(null);
+ const dependencies = [channelUpdateId];
+ useSetChannel({
+ channelUrl,
+ sdk,
+ logger,
+ initialized,
+ dependencies,
+ });
+ useChannelHandler({
+ sdk,
+ channelUrl,
+ logger,
+ forceUpdateUI,
+ dependencies,
+ });
-const ChannelSettingsProvider = (props: ChannelSettingsContextProps) => {
- const {
- children,
- className,
+ useEffect(() => {
+ updateState({
+ channelUrl,
+ onCloseClick,
+ onLeaveChannel,
+ onChannelModified,
+ onBeforeUpdateChannel,
+ renderUserListItem,
+ queries,
+ overrideInviteUser,
+ forceUpdateUI,
+ setChannelUpdateId,
+ });
+ }, [
channelUrl,
onCloseClick,
onLeaveChannel,
onChannelModified,
- overrideInviteUser,
onBeforeUpdateChannel,
- queries,
renderUserListItem,
- } = props;
- const { config, stores } = useSendbirdStateContext();
- const { sdkStore } = stores;
- const { logger } = config;
- const [channelHandlerId, setChannelHandlerId] = useState();
-
- // hack to keep track of channel updates by triggering useEffect
- const [channelUpdateId, setChannelUpdateId] = useState(() => uuidv4());
- const forceUpdateUI = () => setChannelUpdateId(uuidv4());
-
- const {
- response: channel = null,
- loading,
- error,
- refresh,
- } = useAsyncRequest(
- async () => {
- logger.info('ChannelSettings: fetching channel');
-
- if (!channelUrl) {
- logger.warning('ChannelSettings: channel url is required');
- return;
- } else if (!sdkStore.initialized || !sdkStore.sdk) {
- logger.warning('ChannelSettings: SDK is not initialized');
- return;
- } else if (!sdkStore.sdk.groupChannel) {
- logger.warning('ChannelSettings: GroupChannelModule is not specified in the SDK');
- return;
- }
-
- try {
- if (channelHandlerId) {
- if (sdkStore.sdk?.groupChannel?.removeGroupChannelHandler) {
- logger.info('ChannelSettings: Removing message reciver handler', channelHandlerId);
- sdkStore.sdk.groupChannel.removeGroupChannelHandler(channelHandlerId);
- } else if (sdkStore.sdk?.groupChannel) {
- logger.error('ChannelSettings: Not found the removeGroupChannelHandler');
- }
-
- setChannelHandlerId(undefined);
- }
-
- // FIXME :: refactor below code by new state management protocol
- const channel = await sdkStore.sdk.groupChannel.getChannel(channelUrl);
- const channelHandler: GroupChannelHandler = {
- onUserLeft: (channel, user) => {
- if (compareIds(channel?.url, channelUrl)) {
- logger.info('ChannelSettings: onUserLeft', { channel, user });
- refresh();
- }
- },
- onUserBanned: (channel, user) => {
- if (compareIds(channel?.url, channelUrl) && channel.isGroupChannel()) {
- logger.info('ChannelSettings: onUserBanned', { channel, user });
- refresh();
- }
- },
- };
+ queries,
+ overrideInviteUser,
+ forceUpdateUI,
+ ]);
- const newChannelHandlerId = uuidv4();
- sdkStore.sdk.groupChannel?.addGroupChannelHandler(newChannelHandlerId, new GroupChannelHandler(channelHandler));
- setChannelHandlerId(newChannelHandlerId);
+ return null;
+};
- return channel;
- } catch (error) {
- logger.error('ChannelSettings: fetching channel error:', error);
- throw error;
- }
- },
- {
- resetResponseOnRefresh: true,
- persistLoadingIfNoResponse: true,
- deps: [sdkStore.initialized, sdkStore.sdk.groupChannel],
- },
+const createChannelSettingsStore = () => createStore(initialState);
+const InternalChannelSettingsProvider = ({ children }) => {
+ const storeRef = useRef(createChannelSettingsStore());
+ return (
+
+ {children}
+
);
+};
- useEffect(() => {
- refresh();
- }, [channelUrl, channelUpdateId]);
-
+const ChannelSettingsProvider = (props: ChannelSettingsContextProps) => {
+ const { children, className } = props;
return (
-
+
+
- {children}
+
+ {children}
+
-
+
);
};
const useChannelSettingsContext = () => {
- const context = React.useContext(ChannelSettingsContext);
- if (!context) throw new Error('ChannelSettingsContext not found. Use within the ChannelSettings module');
-
- return context;
+ const { state, actions } = useChannelSettings();
+ return { ...state, ...actions };
};
+
export { ChannelSettingsProvider, useChannelSettingsContext };
diff --git a/src/modules/ChannelSettings/context/hooks/useChannelHandler.ts b/src/modules/ChannelSettings/context/hooks/useChannelHandler.ts
new file mode 100644
index 0000000000..1cbdfb5643
--- /dev/null
+++ b/src/modules/ChannelSettings/context/hooks/useChannelHandler.ts
@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
+
+import uuidv4 from '../../../../utils/uuid';
+import compareIds from '../../../../utils/compareIds';
+import type { SdkStore, Logger } from '../../../../lib/Sendbird/types';
+
+interface UseChannelHandlerProps {
+ sdk: SdkStore['sdk'];
+ channelUrl: string;
+ logger: Logger;
+ forceUpdateUI: () => void;
+ dependencies?: any[];
+}
+
+export const useChannelHandler = ({
+ sdk,
+ channelUrl,
+ logger,
+ forceUpdateUI,
+ dependencies = [],
+}: UseChannelHandlerProps) => {
+ useEffect(() => {
+ if (!sdk || !sdk.groupChannel) {
+ logger.warning('ChannelSettings: SDK or GroupChannelModule is not available');
+ return;
+ }
+ const newChannelHandlerId = uuidv4();
+
+ const channelHandler = new GroupChannelHandler({
+ onUserLeft: (channel, user) => {
+ if (compareIds(channel?.url, channelUrl)) {
+ logger.info('ChannelSettings: onUserLeft', { channel, user });
+ forceUpdateUI();
+ }
+ },
+ onUserBanned: (channel, user) => {
+ if (compareIds(channel?.url, channelUrl) && channel.isGroupChannel()) {
+ logger.info('ChannelSettings: onUserBanned', { channel, user });
+ forceUpdateUI();
+ }
+ },
+ });
+
+ sdk.groupChannel.addGroupChannelHandler(newChannelHandlerId, channelHandler);
+
+ return () => {
+ if (sdk.groupChannel && newChannelHandlerId) {
+ logger.info('ChannelSettings: Removing message receiver handler', newChannelHandlerId);
+ sdk.groupChannel.removeGroupChannelHandler(newChannelHandlerId);
+ }
+ };
+ }, [sdk, channelUrl, logger, ...dependencies]);
+
+ return null;
+};
diff --git a/src/modules/ChannelSettings/context/hooks/useSetChannel.ts b/src/modules/ChannelSettings/context/hooks/useSetChannel.ts
new file mode 100644
index 0000000000..fbd9905ea7
--- /dev/null
+++ b/src/modules/ChannelSettings/context/hooks/useSetChannel.ts
@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+import type { Logger, SdkStore } from '../../../../lib/Sendbird/types';
+import useChannelSettings from '../useChannelSettings';
+
+interface Props {
+ channelUrl: string;
+ sdk: SdkStore['sdk'];
+ logger: Logger;
+ initialized: boolean;
+ dependencies?: any[];
+}
+
+function useSetChannel({
+ channelUrl,
+ sdk,
+ logger,
+ initialized,
+ dependencies = [],
+}: Props) {
+ const { actions: { setChannel, setInvalid, setLoading } } = useChannelSettings();
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const { signal } = controller;
+
+ const fetchChannel = async () => {
+ try {
+ if (!channelUrl) {
+ logger.warning('ChannelSettings: channel url is required');
+ setLoading(false);
+ return;
+ }
+ if (!initialized || !sdk) {
+ logger.warning('ChannelSettings: SDK is not initialized');
+ setLoading(false);
+ return;
+ }
+ if (!sdk.groupChannel) {
+ logger.warning('ChannelSettings: GroupChannelModule is not specified in the SDK');
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ const groupChannel = await sdk.groupChannel.getChannel(channelUrl);
+ if (!signal.aborted) {
+ logger.info('ChannelSettings | useSetChannel: fetched group channel', groupChannel);
+ setChannel(groupChannel);
+ }
+ } catch (error) {
+ if (!signal.aborted) {
+ logger.error('ChannelSettings | useSetChannel: failed fetching channel', error);
+ setInvalid(true);
+ }
+ } finally {
+ if (!signal.aborted) {
+ setLoading(false);
+ }
+ }
+ };
+
+ fetchChannel();
+
+ return () => controller.abort(); // Cleanup with AbortController
+ }, [channelUrl, initialized, sdk, ...dependencies]);
+}
+
+export default useSetChannel;
diff --git a/src/modules/ChannelSettings/context/index.tsx b/src/modules/ChannelSettings/context/index.tsx
new file mode 100644
index 0000000000..0a95763cf7
--- /dev/null
+++ b/src/modules/ChannelSettings/context/index.tsx
@@ -0,0 +1,3 @@
+export { ChannelSettingsProvider, useChannelSettingsContext } from './ChannelSettingsProvider';
+export { useChannelSettings } from './useChannelSettings';
+export type { ChannelSettingsContextProps } from './types';
diff --git a/src/modules/ChannelSettings/context/types.ts b/src/modules/ChannelSettings/context/types.ts
new file mode 100644
index 0000000000..685c0e586f
--- /dev/null
+++ b/src/modules/ChannelSettings/context/types.ts
@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { GroupChannel, GroupChannelUpdateParams } from '@sendbird/chat/groupChannel';
+import type { UserListItemProps } from '../../../ui/UserListItem';
+import type { UserProfileProviderProps } from '../../../lib/UserProfileContext';
+
+interface ApplicationUserListQuery {
+ limit?: number;
+ userIdsFilter?: Array;
+ metaDataKeyFilter?: string;
+ metaDataValuesFilter?: Array;
+}
+
+export interface ChannelSettingsQueries {
+ applicationUserListQuery?: ApplicationUserListQuery;
+}
+
+type OverrideInviteUserType = {
+ users: Array;
+ onClose: () => void;
+ channel: GroupChannel;
+};
+
+export interface CommonChannelSettingsProps {
+ channelUrl: string;
+ onCloseClick?(): void;
+ onLeaveChannel?(): void;
+ overrideInviteUser?(params: OverrideInviteUserType): void;
+ onChannelModified?(channel: GroupChannel): void;
+ onBeforeUpdateChannel?(currentTitle: string, currentImg: File | null, data: string | undefined): GroupChannelUpdateParams;
+ queries?: ChannelSettingsQueries;
+ renderUserListItem?: (props: UserListItemProps) => ReactNode;
+}
+
+export interface ChannelSettingsState extends CommonChannelSettingsProps {
+ channel: GroupChannel | null;
+ loading: boolean;
+ invalidChannel: boolean;
+ forceUpdateUI(): void;
+ setChannelUpdateId(uniqId: string): void;
+}
+
+export interface ChannelSettingsContextProps extends
+ CommonChannelSettingsProps,
+ Pick {
+ children?: React.ReactElement;
+ className?: string;
+}
diff --git a/src/modules/ChannelSettings/context/useChannelSettings.ts b/src/modules/ChannelSettings/context/useChannelSettings.ts
new file mode 100644
index 0000000000..26e04d4467
--- /dev/null
+++ b/src/modules/ChannelSettings/context/useChannelSettings.ts
@@ -0,0 +1,33 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useMemo, useContext } from 'react';
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+
+import { ChannelSettingsContext } from './ChannelSettingsProvider';
+import { ChannelSettingsState } from './types';
+
+export const useChannelSettings = () => {
+ const store = useContext(ChannelSettingsContext);
+ if (!store) throw new Error('useChannelSettings must be used within a ChannelSettingsProvider');
+
+ const state: ChannelSettingsState = useSyncExternalStore(store.subscribe, store.getState);
+ const actions = useMemo(() => ({
+ setChannel: (channel: GroupChannel) => store.setState(state => ({
+ ...state,
+ channel,
+ })),
+
+ setLoading: (loading: boolean) => store.setState((state): ChannelSettingsState => ({
+ ...state,
+ loading,
+ })),
+
+ setInvalid: (invalid: boolean) => store.setState((state): ChannelSettingsState => ({
+ ...state,
+ invalidChannel: invalid,
+ })),
+ }), [store]);
+
+ return { state, actions };
+};
+
+export default useChannelSettings;
diff --git a/src/modules/ChannelSettings/index.tsx b/src/modules/ChannelSettings/index.tsx
index edf7a0fb04..7db161d92f 100644
--- a/src/modules/ChannelSettings/index.tsx
+++ b/src/modules/ChannelSettings/index.tsx
@@ -3,10 +3,7 @@ import ChannelSettingsUI, {
ChannelSettingsUIProps,
} from './components/ChannelSettingsUI';
-import {
- ChannelSettingsProvider,
- ChannelSettingsContextProps,
-} from './context/ChannelSettingsProvider';
+import { ChannelSettingsProvider, ChannelSettingsContextProps } from './context/index';
interface ChannelSettingsProps extends ChannelSettingsContextProps, Omit { }
diff --git a/src/modules/CreateChannel/components/CreateChannelUI/__tests__/CreateChannelUI.integration.test.tsx b/src/modules/CreateChannel/components/CreateChannelUI/__tests__/CreateChannelUI.integration.test.tsx
new file mode 100644
index 0000000000..e4ddfbf7d4
--- /dev/null
+++ b/src/modules/CreateChannel/components/CreateChannelUI/__tests__/CreateChannelUI.integration.test.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import * as useCreateChannelModule from '../../../context/useCreateChannel';
+import { CHANNEL_TYPE } from '../../../types';
+import { act, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { LocalizationContext } from '../../../../../lib/LocalizationContext';
+import CreateChannelUI from '../index';
+
+jest.mock('../../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
+ __esModule: true,
+ default: jest.fn(() => ({
+ state: {
+ stores: {
+ userStore: {
+ user: {
+ userId: ' test-user-id',
+ },
+ },
+ sdkStore: {
+ sdk: {
+ currentUser: {
+ userId: 'test-user-id',
+ },
+ createApplicationUserListQuery: () => ({
+ next: () => Promise.resolve([{ userId: 'test-user-id' }]),
+ isLoading: false,
+ }),
+ },
+ initialized: true,
+ },
+ },
+ config: {
+ logger: console,
+ userId: 'test-user-id',
+ groupChannel: {
+ enableMention: true,
+ },
+ isOnline: true,
+ },
+ },
+ })),
+}));
+jest.mock('../../../context/useCreateChannel');
+
+const mockStringSet = {
+ MODAL__CREATE_CHANNEL__TITLE: 'CREATE_CHANNEL',
+ MODAL__INVITE_MEMBER__SELECTED: 'USERS_SELECTED',
+};
+
+const mockLocalizationContext = {
+ stringSet: mockStringSet,
+};
+
+const defaultMockState = {
+ sdk: undefined,
+ userListQuery: undefined,
+ onCreateChannelClick: undefined,
+ onChannelCreated: undefined,
+ onBeforeCreateChannel: undefined,
+ pageStep: 0,
+ type: CHANNEL_TYPE.GROUP,
+ onCreateChannel: undefined,
+ overrideInviteUser: undefined,
+};
+
+const defaultMockActions = {
+ setPageStep: jest.fn(),
+ setType: jest.fn(),
+};
+
+describe('CreateChannelUI Integration Tests', () => {
+ const mockUseCreateChannel = useCreateChannelModule.default as jest.Mock;
+
+ const renderComponent = (mockState = {}, mockActions = {}) => {
+ mockUseCreateChannel.mockReturnValue({
+ state: { ...defaultMockState, ...mockState },
+ actions: { ...defaultMockActions, ...mockActions },
+ });
+
+ return render(
+
+
+ ,
+ );
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ document.body.innerHTML = `
+
+ `;
+ });
+
+ it('display initial state correctly', () => {
+ renderComponent();
+
+ expect(screen.getByText('CREATE_CHANNEL')).toBeInTheDocument();
+ });
+
+ it('display SelectChannelType when pageStep is 0', () => {
+ renderComponent({ pageStep: 0 });
+
+ expect(screen.getByText('CREATE_CHANNEL')).toBeInTheDocument();
+ });
+
+ it('display InviteUsers when pageStep is 1', async () => {
+ await act(async () => {
+ renderComponent({ pageStep: 1 });
+ });
+
+ expect(screen.getByText('0 USERS_SELECTED')).toBeInTheDocument();
+ });
+
+});
diff --git a/src/modules/CreateChannel/components/CreateChannelUI/index.tsx b/src/modules/CreateChannel/components/CreateChannelUI/index.tsx
index e96258f2bc..8469efc7f6 100644
--- a/src/modules/CreateChannel/components/CreateChannelUI/index.tsx
+++ b/src/modules/CreateChannel/components/CreateChannelUI/index.tsx
@@ -2,10 +2,10 @@ import './create-channel-ui.scss';
import React from 'react';
-import { useCreateChannelContext } from '../../context/CreateChannelProvider';
import InviteUsers from '../InviteUsers';
import SelectChannelType from '../SelectChannelType';
+import useCreateChannel from '../../context/useCreateChannel';
export interface CreateChannelUIProps {
onCancel?(): void;
@@ -16,15 +16,19 @@ const CreateChannel: React.FC = (props: CreateChannelUIPro
const { onCancel, renderStepOne } = props;
const {
- step,
- setStep,
- userListQuery,
- } = useCreateChannelContext();
+ state: {
+ pageStep,
+ userListQuery,
+ },
+ actions: {
+ setPageStep,
+ },
+ } = useCreateChannel();
return (
<>
{
- step === 0 && (
+ pageStep === 0 && (
renderStepOne?.() || (
= (props: CreateChannelUIPro
)
}
{
- step === 1 && (
+ pageStep === 1 && (
{
- setStep(0);
+ setPageStep(0);
onCancel?.();
}}
/>
diff --git a/src/modules/CreateChannel/components/InviteUsers/__tests__/index.spec.tsx b/src/modules/CreateChannel/components/InviteUsers/__tests__/index.spec.tsx
index 7cafa9820a..9b4a8fb5d8 100644
--- a/src/modules/CreateChannel/components/InviteUsers/__tests__/index.spec.tsx
+++ b/src/modules/CreateChannel/components/InviteUsers/__tests__/index.spec.tsx
@@ -1,21 +1,31 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
-import '@testing-library/jest-dom/matchers';
import InviteUsers from '../index';
import { ApplicationUserListQuery } from '@sendbird/chat';
-import { SendbirdSdkContext } from '../../../../../lib/SendbirdSdkContext';
-import { SendBirdState } from '../../../../../lib/types';
-
-jest.mock('../../../context/CreateChannelProvider', () => ({
- useCreateChannelContext: jest.fn(() => ({
- onBeforeCreateChannel: jest.fn(),
- onCreateChannel: jest.fn(),
- overrideInviteUser: jest.fn(),
- createChannel: jest.fn().mockResolvedValue({}),
- type: 'group',
- })),
+import { CHANNEL_TYPE } from '../../../types';
+import * as useCreateChannelModule from '../../../context/useCreateChannel';
+import { LocalizationContext } from '../../../../../lib/LocalizationContext';
+
+const mockState = {
+ stores: {
+ sdkStore: {
+ sdk: {
+ currentUser: {
+ userId: 'test-user-id',
+ },
+ },
+ initialized: true,
+ },
+ },
+ config: { logger: console },
+};
+jest.mock('../../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
+ __esModule: true,
+ default: jest.fn(() => ({ state: mockState })),
+ useSendbird: jest.fn(() => ({ state: mockState })),
}));
+jest.mock('../../../context/useCreateChannel');
// Mock createPortal function to render content directly without portal
jest.mock('react-dom', () => ({
@@ -23,7 +33,60 @@ jest.mock('react-dom', () => ({
createPortal: (node) => node,
}));
+const mockStringSet = {
+ MODAL__CREATE_CHANNEL__TITLE: 'CREATE_CHANNEL',
+ MODAL__INVITE_MEMBER__SELECTED: 'USERS_SELECTED',
+ BUTTON__CREATE: 'CREATE',
+};
+
+const mockLocalizationContext = {
+ stringSet: mockStringSet,
+};
+
+const defaultMockState = {
+ sdk: undefined,
+ createChannel: undefined,
+ userListQuery: undefined,
+ onCreateChannelClick: undefined,
+ onChannelCreated: undefined,
+ onBeforeCreateChannel: undefined,
+ step: 0,
+ type: CHANNEL_TYPE.GROUP,
+ onCreateChannel: undefined,
+ overrideInviteUser: undefined,
+};
+
+const defaultMockActions = {
+ setStep: jest.fn(),
+ setType: jest.fn(),
+};
+
+const defaultMockInvitUserState = {
+ user: { userId: 'test-user-id' },
+};
+
describe('InviteUsers', () => {
+ const mockUseCreateChannel = useCreateChannelModule.default as jest.Mock;
+
+ const renderComponent = (mockState = {}, mockActions = {}, mockInviteUsersState = {}) => {
+ mockUseCreateChannel.mockReturnValue({
+ state: { ...defaultMockState, ...mockState },
+ actions: { ...defaultMockActions, ...mockActions },
+ });
+
+ const inviteUserProps = { ...defaultMockInvitUserState, ...mockInviteUsersState };
+
+ return render(
+
+
+ ,
+ );
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
it('should enable the modal submit button when there is only the logged-in user is in the user list', async () => {
const userListQuery = jest.fn(
() => ({
@@ -32,13 +95,9 @@ describe('InviteUsers', () => {
} as unknown as ApplicationUserListQuery),
);
- render(
-
-
- ,
- );
+ renderComponent({}, {}, { userListQuery });
- expect(await screen.findByText('Create')).toBeEnabled();
+ expect(await screen.findByText('CREATE')).toBeEnabled();
});
// TODO: add this case too
diff --git a/src/modules/CreateChannel/components/InviteUsers/index.tsx b/src/modules/CreateChannel/components/InviteUsers/index.tsx
index 2cb75a0b3c..32c7ede757 100644
--- a/src/modules/CreateChannel/components/InviteUsers/index.tsx
+++ b/src/modules/CreateChannel/components/InviteUsers/index.tsx
@@ -4,8 +4,7 @@ import type { GroupChannelCreateParams } from '@sendbird/chat/groupChannel';
import './invite-users.scss';
import { LocalizationContext } from '../../../../lib/LocalizationContext';
-import { useCreateChannelContext } from '../../context/CreateChannelProvider';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
import Modal from '../../../../ui/Modal';
import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
@@ -15,6 +14,7 @@ import UserListItem from '../../../../ui/UserListItem';
import { createDefaultUserListQuery, filterUser, setChannelType } from './utils';
import { noop } from '../../../../utils/utils';
import { UserListQuery } from '../../../../types';
+import useCreateChannel from '../../context/useCreateChannel';
export interface InviteUsersProps {
onCancel?: () => void;
@@ -28,18 +28,20 @@ const InviteUsers: React.FC = ({
userListQuery,
}: InviteUsersProps) => {
const {
- onCreateChannelClick,
- onBeforeCreateChannel,
- onChannelCreated,
- createChannel,
- onCreateChannel,
- overrideInviteUser,
- type,
- } = useCreateChannelContext();
+ state: {
+ onCreateChannelClick,
+ onBeforeCreateChannel,
+ onChannelCreated,
+ onCreateChannel,
+ overrideInviteUser,
+ type,
+ },
+ actions: {
+ createChannel,
+ },
+ } = useCreateChannel();
- const globalStore = useSendbirdStateContext();
- const userId = globalStore?.config?.userId;
- const sdk = globalStore?.stores?.sdkStore?.sdk;
+ const { state: { config: { userId }, stores: { sdkStore: { sdk } } } } = useSendbird();
const idsToFilter = [userId];
const [users, setUsers] = useState([]);
const [selectedUsers, setSelectedUsers] = useState>({});
diff --git a/src/modules/CreateChannel/components/InviteUsers/utils.ts b/src/modules/CreateChannel/components/InviteUsers/utils.ts
index fc7d19a8b4..23cbf7c1b7 100644
--- a/src/modules/CreateChannel/components/InviteUsers/utils.ts
+++ b/src/modules/CreateChannel/components/InviteUsers/utils.ts
@@ -1,7 +1,7 @@
import type { ApplicationUserListQuery } from '@sendbird/chat';
import type { GroupChannelCreateParams } from '@sendbird/chat/groupChannel';
import { CHANNEL_TYPE } from '../../types';
-import { SdkStore } from '../../../../lib/types';
+import type { SdkStore } from '../../../../lib/Sendbird/types';
export const filterUser = (idsToFilter: string[]) => (currentId: string): boolean => idsToFilter?.includes(currentId);
diff --git a/src/modules/CreateChannel/components/SelectChannelType.tsx b/src/modules/CreateChannel/components/SelectChannelType.tsx
index 9394d7667e..305d43a875 100644
--- a/src/modules/CreateChannel/components/SelectChannelType.tsx
+++ b/src/modules/CreateChannel/components/SelectChannelType.tsx
@@ -1,9 +1,6 @@
import React, { useContext } from 'react';
import * as sendbirdSelectors from '../../../lib/selectors';
-import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
-
-import { useCreateChannelContext } from '../context/CreateChannelProvider';
import { LocalizationContext } from '../../../lib/LocalizationContext';
import Label, { LabelColors, LabelTypography } from '../../../ui/Label';
@@ -16,6 +13,8 @@ import {
isSuperGroupChannelEnabled,
} from '../utils';
import { CHANNEL_TYPE } from '../types';
+import useCreateChannel from '../context/useCreateChannel';
+import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
export interface SelectChannelTypeProps {
onCancel?(): void;
@@ -23,15 +22,15 @@ export interface SelectChannelTypeProps {
const SelectChannelType: React.FC = (props: SelectChannelTypeProps) => {
const { onCancel } = props;
- const store = useSendbirdStateContext();
-
- const sdk = sendbirdSelectors.getSdk(store);
+ const { state } = useSendbird();
+ const sdk = sendbirdSelectors.getSdk(state);
- const createChannelProps = useCreateChannelContext();
const {
- setStep,
- setType,
- } = createChannelProps;
+ actions: {
+ setPageStep,
+ setType,
+ },
+ } = useCreateChannel();
const { stringSet } = useContext(LocalizationContext);
@@ -50,13 +49,13 @@ const SelectChannelType: React.FC = (props: SelectChanne
className="sendbird-add-channel__rectangle"
onClick={() => {
setType(CHANNEL_TYPE.GROUP);
- setStep(1);
+ setPageStep(1);
}}
role="button"
tabIndex={0}
onKeyDown={() => {
setType(CHANNEL_TYPE.GROUP);
- setStep(1);
+ setPageStep(1);
}}
>
= (props: SelectChanne
className="sendbird-add-channel__rectangle"
onClick={() => {
setType(CHANNEL_TYPE.SUPERGROUP);
- setStep(1);
+ setPageStep(1);
}}
role="button"
tabIndex={0}
onKeyDown={() => {
setType(CHANNEL_TYPE.SUPERGROUP);
- setStep(1);
+ setPageStep(1);
}}
>
= (props: SelectChanne
className="sendbird-add-channel__rectangle"
onClick={() => {
setType(CHANNEL_TYPE.BROADCAST);
- setStep(1);
+ setPageStep(1);
}}
role="button"
tabIndex={0}
onKeyDown={() => {
setType(CHANNEL_TYPE.BROADCAST);
- setStep(1);
+ setPageStep(1);
}}
>
(null);
+import { SendbirdChatType } from '../../../lib/Sendbird/types';
+import { createStore } from '../../../utils/storeManager';
+import { useStore } from '../../../hooks/useStore';
+import useCreateChannel from './useCreateChannel';
+import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
+
+const CreateChannelContext = React.createContext> | null>(null);
+
+const initialState = {
+ sdk: undefined,
+ userListQuery: undefined,
+ onCreateChannelClick: undefined,
+ onChannelCreated: undefined,
+ onBeforeCreateChannel: undefined,
+ pageStep: 0,
+ type: CHANNEL_TYPE.GROUP,
+ onCreateChannel: undefined,
+ overrideInviteUser: undefined,
+};
export interface UserListQuery {
hasNext?: boolean;
@@ -54,11 +68,8 @@ export interface CreateChannelProviderProps {
overrideInviteUser?(params: OverrideInviteUserType): void;
}
-type CreateChannel = (channelParams: GroupChannelCreateParams) => Promise;
-
-export interface CreateChannelContextInterface {
+export interface CreateChannelState {
sdk: SendbirdChatType;
- createChannel: CreateChannel;
userListQuery?(): UserListQuery;
/**
@@ -75,10 +86,8 @@ export interface CreateChannelContextInterface {
* */
onBeforeCreateChannel?(users: Array): GroupChannelCreateParams;
- step: number,
- setStep: React.Dispatch>,
+ pageStep: number,
type: CHANNEL_TYPE,
- setType: React.Dispatch>,
/**
* @deprecated
* Use the onChannelCreated instead
@@ -91,9 +100,8 @@ export interface CreateChannelContextInterface {
overrideInviteUser?(params: OverrideInviteUserType): void;
}
-const CreateChannelProvider: React.FC = (props: CreateChannelProviderProps) => {
+const CreateChannelManager: React.FC = (props: CreateChannelProviderProps) => {
const {
- children,
onCreateChannelClick,
onBeforeCreateChannel,
onChannelCreated,
@@ -102,39 +110,64 @@ const CreateChannelProvider: React.FC = (props: Crea
overrideInviteUser,
} = props;
- const store = useSendbirdStateContext();
- const _userListQuery = userListQuery ?? store?.config?.userListQuery;
+ const { updateState } = useCreateChannelStore();
+ const { state: { config } } = useSendbird();
+ const _userListQuery = userListQuery ?? config?.userListQuery;
- const [step, setStep] = useState(0);
- const [type, setType] = useState(CHANNEL_TYPE.GROUP);
-
- return (
- {
+ updateState({
onCreateChannelClick,
onBeforeCreateChannel,
onChannelCreated,
userListQuery: _userListQuery,
- step,
- setStep,
- type,
- setType,
onCreateChannel,
overrideInviteUser,
- }}>
+ });
+ }, [
+ onCreateChannelClick,
+ onBeforeCreateChannel,
+ onChannelCreated,
+ userListQuery,
+ onCreateChannel,
+ overrideInviteUser,
+ _userListQuery,
+ ]);
+
+ return null;
+};
+const CreateChannelProvider: React.FC = (props: CreateChannelProviderProps) => {
+ const { children } = props;
+
+ return (
+
+
+ {children}
+
+ );
+};
+
+const createCreateChannelStore = () => createStore(initialState);
+const InternalCreateChannelProvider: React.FC> = ({ children }) => {
+ const storeRef = useRef(createCreateChannelStore());
+
+ return (
+
{children}
);
};
+const useCreateChannelStore = () => {
+ return useStore(CreateChannelContext, state => state, initialState);
+};
+
const useCreateChannelContext = () => {
- const context = React.useContext(CreateChannelContext);
- if (!context) throw new Error('CreateChannelContext not found. Use within the CreateChannel module.');
- return context;
+ const { state, actions } = useCreateChannel();
+ return { ...state, ...actions };
};
export {
CreateChannelProvider,
+ CreateChannelContext,
useCreateChannelContext,
};
diff --git a/src/modules/CreateChannel/context/__tests__/CreateChannel.migration.spec.tsx b/src/modules/CreateChannel/context/__tests__/CreateChannel.migration.spec.tsx
index 5cfb3ee418..e2e49caff7 100644
--- a/src/modules/CreateChannel/context/__tests__/CreateChannel.migration.spec.tsx
+++ b/src/modules/CreateChannel/context/__tests__/CreateChannel.migration.spec.tsx
@@ -7,7 +7,7 @@ import {
useCreateChannelContext,
} from '../CreateChannelProvider';
-const mockSendbirdStateContext = {
+const mockState = {
stores: {
userStore: {
user: {
@@ -34,16 +34,12 @@ const mockSendbirdStateContext = {
},
isOnline: true,
},
-};
-
-jest.mock('../../../../hooks/useSendbirdStateContext', () => ({
- __esModule: true,
- default: () => mockSendbirdStateContext,
-}));
+}; const mockActions = { connect: jest.fn(), disconnect: jest.fn() };
-jest.mock('../../../../lib/Sendbird', () => ({
+jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
__esModule: true,
- useSendbirdStateContext: () => mockSendbirdStateContext,
+ default: jest.fn(() => ({ state: mockState, actions: mockActions })),
+ useSendbird: jest.fn(() => ({ state: mockState, actions: mockActions })),
}));
const mockProps: CreateChannelProviderProps = {
diff --git a/src/modules/CreateChannel/context/__tests__/CreateChannelProvider.spec.tsx b/src/modules/CreateChannel/context/__tests__/CreateChannelProvider.spec.tsx
new file mode 100644
index 0000000000..44389007b1
--- /dev/null
+++ b/src/modules/CreateChannel/context/__tests__/CreateChannelProvider.spec.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { act, waitFor, renderHook } from '@testing-library/react';
+import { CreateChannelProvider } from '../CreateChannelProvider';
+import { CHANNEL_TYPE } from '../../types';
+import useCreateChannel from '../useCreateChannel';
+
+jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
+ __esModule: true,
+ default: jest.fn(() => ({
+ state: {
+ stores: {
+ sdkStore: {
+ sdk: {
+ currentUser: {
+ userId: 'test-user-id',
+ },
+ },
+ initialized: true,
+ },
+ },
+ config: { logger: console },
+ },
+ })),
+}));
+
+describe('CreateChannelProvider', () => {
+ const initialState = {
+ sdk: undefined,
+ userListQuery: undefined,
+ onCreateChannelClick: undefined,
+ onChannelCreated: expect.any(Function),
+ onBeforeCreateChannel: undefined,
+ pageStep: 0,
+ type: CHANNEL_TYPE.GROUP,
+ onCreateChannel: undefined,
+ overrideInviteUser: undefined,
+ };
+
+ it('provide the correct initial state', () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useCreateChannel(), { wrapper });
+
+ expect(result.current.state).toEqual(initialState);
+ });
+
+ it('provides correct actions through useCreateChannel hook', () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useCreateChannel(), { wrapper });
+
+ expect(result.current.actions).toHaveProperty('setPageStep');
+ expect(result.current.actions).toHaveProperty('setType');
+ });
+
+ it('update state correctly when setPageStep is called', async () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useCreateChannel(), { wrapper });
+ await act(async () => {
+ result.current.actions.setPageStep(1);
+ await waitFor(() => {
+ const updatedState = result.current.state;
+ expect(updatedState.pageStep).toEqual(1);
+ });
+ });
+ });
+
+ it('update state correctly when setType is called', async () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useCreateChannel(), { wrapper });
+
+ await act(async () => {
+ result.current.actions.setType(CHANNEL_TYPE.BROADCAST);
+ await waitFor(() => {
+ const updatedState = result.current.state;
+ expect(updatedState.type).toEqual(CHANNEL_TYPE.BROADCAST);
+ });
+ });
+ });
+
+});
diff --git a/src/modules/CreateChannel/context/__tests__/useCreateChannel.spec.tsx b/src/modules/CreateChannel/context/__tests__/useCreateChannel.spec.tsx
new file mode 100644
index 0000000000..bdc83b5e5b
--- /dev/null
+++ b/src/modules/CreateChannel/context/__tests__/useCreateChannel.spec.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { CHANNEL_TYPE } from '../../types';
+import { CreateChannelProvider } from '../CreateChannelProvider';
+import { renderHook } from '@testing-library/react';
+import useCreateChannel from '../useCreateChannel';
+
+jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
+ __esModule: true,
+ default: jest.fn(() => ({
+ state: {
+ stores: {
+ sdkStore: {
+ sdk: {
+ currentUser: {
+ userId: 'test-user-id',
+ },
+ },
+ initialized: true,
+ },
+ },
+ config: { logger: console },
+ },
+ })),
+}));
+
+const initialState = {
+ sdk: undefined,
+ userListQuery: undefined,
+ onCreateChannelClick: undefined,
+ onChannelCreated: expect.any(Function),
+ onBeforeCreateChannel: undefined,
+ pageStep: 0,
+ type: CHANNEL_TYPE.GROUP,
+ onCreateChannel: undefined,
+ overrideInviteUser: undefined,
+};
+
+const wrapper = ({ children }) => (
+ jest.fn()}>
+ {children}
+
+);
+
+describe('useCreateChannel', () => {
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('throws an error if used outside of GroupChannelListProvider', () => {
+ expect(() => {
+ renderHook(() => useCreateChannel());
+ }).toThrow(new Error('useCreateChannel must be used within a CreateChannelProvider'));
+ });
+
+ it('provide the correct initial state', () => {
+ const { result } = renderHook(() => useCreateChannel(), { wrapper });
+
+ expect(result.current.state).toEqual(expect.objectContaining(initialState));
+ });
+
+});
diff --git a/src/modules/CreateChannel/context/index.tsx b/src/modules/CreateChannel/context/index.tsx
new file mode 100644
index 0000000000..98af4d5c14
--- /dev/null
+++ b/src/modules/CreateChannel/context/index.tsx
@@ -0,0 +1,2 @@
+export * from './CreateChannelProvider';
+export { default as useCreateChannel } from './useCreateChannel';
diff --git a/src/modules/CreateChannel/context/useCreateChannel.ts b/src/modules/CreateChannel/context/useCreateChannel.ts
new file mode 100644
index 0000000000..b65d42a80e
--- /dev/null
+++ b/src/modules/CreateChannel/context/useCreateChannel.ts
@@ -0,0 +1,31 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useContext, useMemo } from 'react';
+import { CreateChannelContext, CreateChannelState } from './CreateChannelProvider';
+import { CHANNEL_TYPE } from '../types';
+import { getCreateGroupChannel } from '../../../lib/selectors';
+import { useSendbirdStateContext } from '../../../index';
+
+const useCreateChannel = () => {
+ const store = useContext(CreateChannelContext);
+ const sendbirdStore = useSendbirdStateContext();
+ if (!store) throw new Error('useCreateChannel must be used within a CreateChannelProvider');
+
+ const state: CreateChannelState = useSyncExternalStore(store.subscribe, store.getState);
+ const actions = useMemo(() => ({
+ setPageStep: (pageStep: number) => store.setState(state => ({
+ ...state,
+ pageStep,
+ })),
+
+ setType: (type: CHANNEL_TYPE) => store.setState(state => ({
+ ...state,
+ type,
+ })),
+
+ createChannel: getCreateGroupChannel(sendbirdStore),
+ }), [store]);
+
+ return { state, actions };
+};
+
+export default useCreateChannel;
diff --git a/src/modules/CreateChannel/utils.ts b/src/modules/CreateChannel/utils.ts
index d9e44a948f..3bc4d00929 100644
--- a/src/modules/CreateChannel/utils.ts
+++ b/src/modules/CreateChannel/utils.ts
@@ -1,4 +1,4 @@
-import { SdkStore } from '../../lib/types';
+import type { SdkStore } from '../../lib/Sendbird/types';
export const isBroadcastChannelEnabled = (sdk: SdkStore['sdk']): boolean => {
const ALLOW_BROADCAST_CHANNEL = 'allow_broadcast_channel';
diff --git a/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx b/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx
index 65cb476943..8431ed6d04 100644
--- a/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx
+++ b/src/modules/CreateOpenChannel/context/CreateOpenChannelProvider.tsx
@@ -1,8 +1,7 @@
import React, { useCallback } from 'react';
import { OpenChannel, OpenChannelCreateParams } from '@sendbird/chat/openChannel';
-import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
-import { Logger } from '../../../lib/SendbirdState';
-import { SdkStore } from '../../../lib/types';
+import { SdkStore, Logger } from '../../../lib/Sendbird/types';
+import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
export interface CreateNewOpenChannelCallbackProps {
name: string;
@@ -30,7 +29,8 @@ export const CreateOpenChannelProvider: React.FC
onCreateChannel,
onBeforeCreateChannel,
}: CreateOpenChannelProviderProps): React.ReactElement => {
- const { stores, config } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { stores, config } = state;
const { logger } = config;
const sdk = stores?.sdkStore?.sdk || null;
const sdkInitialized = stores?.sdkStore?.initialized || false;
diff --git a/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx b/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
index 74a53f9522..bc38c9fdab 100644
--- a/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
+++ b/src/modules/EditUserProfile/components/EditUserProfileUI/EditUserProfileUIView.tsx
@@ -6,7 +6,7 @@ import Avatar from '../../../../ui/Avatar';
import TextButton from '../../../../ui/TextButton';
import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
import Icon, { IconTypes } from '../../../../ui/Icon';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
export interface EditUserProfileUIViewProps {
formRef: MutableRefObject;
@@ -20,7 +20,8 @@ export const EditUserProfileUIView = ({
onThemeChange,
setProfileImage,
}: EditUserProfileUIViewProps) => {
- const { stores, config } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { stores, config } = state;
const { theme, setCurrentTheme } = config;
const user = stores.userStore?.user;
const { stringSet } = useLocalization();
diff --git a/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx b/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
index 9fffc65ee3..37db1baf98 100644
--- a/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
+++ b/src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx
@@ -8,22 +8,22 @@ import React, {
import { User } from '@sendbird/chat';
import './edit-user-profile.scss';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import { useEditUserProfileContext } from '../../context/EditUserProfileProvider';
import { LocalizationContext } from '../../../../lib/LocalizationContext';
-import { SendBirdState } from '../../../../lib/types';
-import { USER_ACTIONS } from '../../../../lib/dux/user/actionTypes';
import Modal from '../../../../ui/Modal';
import { ButtonTypes } from '../../../../ui/Button';
import { EditUserProfileUIView } from './EditUserProfileUIView';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
+import { SendbirdState } from '../../../../lib/Sendbird/types';
interface HandleUpdateUserInfoParams {
- globalContext: SendBirdState;
+ globalContext: SendbirdState;
formRef: MutableRefObject;
inputRef: MutableRefObject;
profileImage: File | null;
onEditProfile?: (user: User) => void;
+ updateUserInfo: (user: User) => void;
}
const handleUpdateUserInfo = ({
globalContext,
@@ -31,11 +31,11 @@ const handleUpdateUserInfo = ({
inputRef,
profileImage,
onEditProfile,
+ updateUserInfo,
}: HandleUpdateUserInfoParams) => {
- const { stores, dispatchers } = globalContext;
+ const { stores } = globalContext;
const sdk = stores.sdkStore.sdk;
const user = stores.userStore.user;
- const { userDispatcher } = dispatchers;
if (user?.nickname !== '' && !inputRef.current.value) {
formRef.current.reportValidity?.(); // might not work in explorer
@@ -45,7 +45,7 @@ const handleUpdateUserInfo = ({
nickname: inputRef?.current?.value,
profileImage: profileImage ?? undefined,
}).then((updatedUser) => {
- userDispatcher({ type: USER_ACTIONS.UPDATE_USER_INFO, payload: updatedUser });
+ updateUserInfo(updatedUser);
onEditProfile?.(updatedUser);
});
};
@@ -56,17 +56,18 @@ export interface UseEditUserProfileUIStateParams {
export const useEditUserProfileUISates = ({
onEditProfile,
}: UseEditUserProfileUIStateParams) => {
- const globalContext = useSendbirdStateContext();
+ const { state, actions } = useSendbird();
const inputRef = useRef(null);
const formRef = useRef(null);
const [profileImage, setProfileImage] = useState(null);
const updateUserInfo = () => {
handleUpdateUserInfo({
- globalContext,
+ globalContext: state,
formRef,
inputRef,
profileImage,
onEditProfile,
+ updateUserInfo: actions.updateUserInfo,
});
};
diff --git a/src/modules/GroupChannel/__test__/GroupChannelUIView.integration.test.tsx b/src/modules/GroupChannel/__test__/GroupChannelUIView.integration.test.tsx
new file mode 100644
index 0000000000..d951d7a81b
--- /dev/null
+++ b/src/modules/GroupChannel/__test__/GroupChannelUIView.integration.test.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { GroupChannelUIView } from '../components/GroupChannelUI/GroupChannelUIView';
+import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
+
+jest.mock('../../../lib/Sendbird/context/hooks/useSendbird');
+
+const mockUseSendbird = useSendbird as jest.Mock;
+
+describe('GroupChannelUIView Integration Tests', () => {
+ const defaultProps = {
+ channelUrl: 'test-channel',
+ isInvalid: false,
+ renderChannelHeader: jest.fn(() => Channel Header
),
+ renderMessageList: jest.fn(() => Message List
),
+ renderMessageInput: jest.fn(() => Message Input
),
+ };
+
+ beforeEach(() => {
+ mockUseSendbird.mockImplementation(() => ({
+ state: {
+ stores: {
+ sdkStore: { error: null },
+ },
+ config: {
+ logger: { info: jest.fn() },
+ isOnline: true,
+ groupChannel: {
+ enableTypingIndicator: true,
+ typingIndicatorTypes: new Set(['text']),
+ },
+ },
+ },
+ }));
+ });
+
+ it('renders basic channel components correctly', () => {
+ render();
+
+ expect(screen.getByText('Channel Header')).toBeInTheDocument();
+ expect(screen.getByText('Message List')).toBeInTheDocument();
+ expect(screen.getByText('Message Input')).toBeInTheDocument();
+ });
+
+ it('renders loading placeholder when isLoading is true', () => {
+ render();
+ // Placeholder is a just loading spinner in this case
+ expect(screen.getByRole('button')).toHaveClass('sendbird-icon-spinner');
+ });
+
+ it('renders invalid placeholder when channelUrl is missing', () => {
+ render();
+ expect(screen.getByText('No channels')).toBeInTheDocument();
+ });
+
+ it('renders error placeholder when isInvalid is true', () => {
+ render();
+ expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+ });
+
+ it('renders SDK error placeholder when SDK has error', () => {
+ mockUseSendbird.mockImplementation(() => ({
+ state: {
+ stores: {
+ sdkStore: { error: new Error('SDK Error') },
+ },
+ config: {
+ logger: { info: jest.fn() },
+ isOnline: true,
+ },
+ },
+ }));
+
+ render();
+ expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+ expect(screen.getByText('Retry')).toBeInTheDocument();
+ });
+
+ it('renders custom placeholders when provided', () => {
+ const renderPlaceholderLoader = () => Custom Loader
;
+ const renderPlaceholderInvalid = () => Custom Invalid
;
+
+ const { rerender } = render(
+ ,
+ );
+ expect(screen.getByText('Custom Loader')).toBeInTheDocument();
+
+ rerender(
+ ,
+ );
+ expect(screen.getByText('Custom Invalid')).toBeInTheDocument();
+ });
+});
diff --git a/src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx b/src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx
index dccfa3f7b6..62e52effc8 100644
--- a/src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx
+++ b/src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx
@@ -10,8 +10,8 @@ import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
import Label, { LabelColors, LabelTypography, LabelStringSet } from '../../../../ui/Label';
import { isImage, isSupportedFileView, isVideo } from '../../../../utils';
import { MODAL_ROOT } from '../../../../hooks/useModal';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import Modal from '../../../../ui/Modal';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
type DeleteMessageTypeLegacy = (message: CoreMessageType) => Promise;
export interface FileViewerViewProps extends FileViewerProps {
@@ -28,7 +28,8 @@ export const FileViewerView = ({
const { sender, type, url, name = '', threadInfo } = message;
const { profileUrl, nickname, userId } = sender;
- const { config } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { config } = state;
return createPortal(
void;
@@ -11,9 +11,11 @@ export interface FileViewerProps {
}
export const FileViewer = (props: FileViewerProps) => {
- const { deleteMessage, onBeforeDownloadFileMessage } = useGroupChannelContext();
- const { config } = useSendbirdStateContext();
- const { logger } = config;
+ const {
+ state: { onBeforeDownloadFileMessage },
+ actions: { deleteMessage },
+ } = useGroupChannel();
+ const { state: { config: { logger } } } = useSendbird();
return (
{
- const { config } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { config } = state;
const { userId, theme } = config;
const { isMobile } = useMediaQueryContext();
diff --git a/src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx b/src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx
index cae0ad0757..1f490865fe 100644
--- a/src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx
+++ b/src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx
@@ -1,8 +1,6 @@
import './index.scss';
import React from 'react';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-
import TypingIndicator from '../TypingIndicator';
import { TypingIndicatorType } from '../../../../types';
import ConnectionStatus from '../../../../ui/ConnectionStatus';
@@ -14,6 +12,7 @@ import type { GroupChannelMessageListProps } from '../MessageList';
import type { MessageContentProps } from '../../../../ui/MessageContent';
import { SuggestedRepliesProps } from '../SuggestedReplies';
import { deleteNullish } from '../../../../utils/utils';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
export interface GroupChannelUIBasicProps {
// Components
@@ -103,8 +102,8 @@ export const GroupChannelUIView = (props: GroupChannelUIViewProps) => {
renderPlaceholderLoader,
renderPlaceholderInvalid,
} = deleteNullish(props);
-
- const { stores, config } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { stores, config } = state;
const sdkError = stores?.sdkStore?.error;
const { logger, isOnline } = config;
diff --git a/src/modules/GroupChannel/components/GroupChannelUI/index.tsx b/src/modules/GroupChannel/components/GroupChannelUI/index.tsx
index 06e2887c61..8ad95ca1f1 100644
--- a/src/modules/GroupChannel/components/GroupChannelUI/index.tsx
+++ b/src/modules/GroupChannel/components/GroupChannelUI/index.tsx
@@ -7,12 +7,13 @@ import GroupChannelHeader, { GroupChannelHeaderProps } from '../GroupChannelHead
import MessageList, { GroupChannelMessageListProps } from '../MessageList';
import MessageInputWrapper from '../MessageInputWrapper';
import { deleteNullish } from '../../../../utils/utils';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
export interface GroupChannelUIProps extends GroupChannelUIBasicProps {}
export const GroupChannelUI = (props: GroupChannelUIProps) => {
const context = useGroupChannelContext();
- const { channelUrl, fetchChannelError } = context;
+ const { state: { channelUrl, fetchChannelError } } = useGroupChannel();
// Inject components to presentation layer
const {
diff --git a/src/modules/GroupChannel/components/Message/MessageView.tsx b/src/modules/GroupChannel/components/Message/MessageView.tsx
index 4ad40fc161..1380305823 100644
--- a/src/modules/GroupChannel/components/Message/MessageView.tsx
+++ b/src/modules/GroupChannel/components/Message/MessageView.tsx
@@ -6,7 +6,6 @@ import type { FileMessage, UserMessage, UserMessageCreateParams, UserMessageUpda
import format from 'date-fns/format';
import { useLocalization } from '../../../../lib/LocalizationContext';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import { MAX_USER_MENTION_COUNT, MAX_USER_SUGGESTION_COUNT, ThreadReplySelectType } from '../../context/const';
import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../context/utils';
import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
@@ -20,8 +19,9 @@ import MessageContent, { MessageContentProps } from '../../../../ui/MessageConte
import SuggestedReplies, { SuggestedRepliesProps } from '../SuggestedReplies';
import SuggestedMentionListView from '../SuggestedMentionList/SuggestedMentionListView';
-import type { OnBeforeDownloadFileMessageType } from '../../context/GroupChannelProvider';
+import type { OnBeforeDownloadFileMessageType } from '../../context/types';
import { classnames, deleteNullish } from '../../../../utils/utils';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
export interface MessageProps {
message: EveryMessage;
@@ -152,7 +152,7 @@ const MessageView = (props: MessageViewProps) => {
} = deleteNullish(props);
const { dateLocale, stringSet } = useLocalization();
- const globalStore = useSendbirdStateContext();
+ const { state } = useSendbird();
const {
userId,
@@ -160,7 +160,7 @@ const MessageView = (props: MessageViewProps) => {
userMention,
logger,
groupChannel,
- } = globalStore.config;
+ } = state.config;
const maxUserMentionCount = userMention?.maxMentionCount || MAX_USER_MENTION_COUNT;
const maxUserSuggestionCount = userMention?.maxSuggestionCount || MAX_USER_SUGGESTION_COUNT;
diff --git a/src/modules/GroupChannel/components/Message/index.tsx b/src/modules/GroupChannel/components/Message/index.tsx
index 96f0ff675c..f86a91f9a8 100644
--- a/src/modules/GroupChannel/components/Message/index.tsx
+++ b/src/modules/GroupChannel/components/Message/index.tsx
@@ -1,41 +1,46 @@
import React from 'react';
import { useIIFE } from '@sendbird/uikit-tools';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import { getSuggestedReplies, isSendableMessage } from '../../../../utils';
import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../context/utils';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
import MessageView, { MessageProps } from './MessageView';
import FileViewer from '../FileViewer';
import RemoveMessageModal from '../RemoveMessageModal';
import { ThreadReplySelectType } from '../../context/const';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
export const Message = (props: MessageProps): React.ReactElement => {
- const { config, emojiManager } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { config, emojiManager } = state;
const {
- loading,
- currentChannel,
- animatedMessageId,
- setAnimatedMessageId,
- scrollToMessage,
- replyType,
- threadReplySelectType,
- isReactionEnabled,
- toggleReaction,
- nicknamesMap,
- setQuoteMessage,
- renderUserMentionItem,
- filterEmojiCategoryIds,
- onQuoteMessageClick,
- onReplyInThreadClick,
- onMessageAnimated,
- onBeforeDownloadFileMessage,
- messages,
- updateUserMessage,
- sendUserMessage,
- resendMessage,
- deleteMessage,
- } = useGroupChannelContext();
+ state: {
+ loading,
+ currentChannel,
+ animatedMessageId,
+ replyType,
+ threadReplySelectType,
+ isReactionEnabled,
+ nicknamesMap,
+ renderUserMentionItem,
+ filterEmojiCategoryIds,
+ onQuoteMessageClick,
+ onReplyInThreadClick,
+ onMessageAnimated,
+ onBeforeDownloadFileMessage,
+ messages,
+ },
+ actions: {
+ toggleReaction,
+ setQuoteMessage,
+ setAnimatedMessageId,
+ scrollToMessage,
+ updateUserMessage,
+ sendUserMessage,
+ resendMessage,
+ deleteMessage,
+ },
+ } = useGroupChannel();
const { message } = props;
const initialized = !loading && Boolean(currentChannel);
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
index 60aa925083..9e9b385207 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx
@@ -18,7 +18,6 @@ import {
isDisabledBecauseSuggestedReplies,
isDisabledBecauseMessageForm,
} from '../../context/utils';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import { useLocalization } from '../../../../lib/LocalizationContext';
import SuggestedMentionList from '../SuggestedMentionList';
import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
@@ -29,6 +28,7 @@ import MessageInput from '../../../../ui/MessageInput';
import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
import { MessageInputKeys } from '../../../../ui/MessageInput/const';
import { useHandleUploadFiles } from './useHandleUploadFiles';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
export interface MessageInputWrapperViewProps {
// Basic
@@ -80,7 +80,8 @@ export const MessageInputWrapperView = React.forwardRef((
} = props;
const { stringSet } = useLocalization();
const { isMobile } = useMediaQueryContext();
- const { stores, config } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { stores, config } = state;
const { isOnline, userMention, logger, groupChannel } = config;
const sdk = stores.sdkStore.sdk;
const { maxMentionCount, maxSuggestionCount } = userMention;
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/VoiceMessageInputWrapper.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/VoiceMessageInputWrapper.tsx
index 5b7a57a393..696c61a581 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/VoiceMessageInputWrapper.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/VoiceMessageInputWrapper.tsx
@@ -11,9 +11,9 @@ import { VoiceMessageInput } from '../../../../ui/VoiceMessageInput';
import { VoiceMessageInputStatus } from '../../../../ui/VoiceMessageInput/types';
import Modal from '../../../../ui/Modal';
import Button, { ButtonSizes, ButtonTypes } from '../../../../ui/Button';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import { VOICE_PLAYER_STATUS } from '../../../../hooks/VoicePlayer/dux/initialState';
import uuidv4 from '../../../../utils/uuid';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
export type VoiceMessageInputWrapperProps = {
channel?: GroupChannel;
@@ -33,7 +33,8 @@ export const VoiceMessageInputWrapper = ({
const [isDisabled, setDisabled] = useState(false);
const [showModal, setShowModal] = useState(false);
const { stringSet } = useLocalization();
- const { config } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { config } = state;
const {
start,
stop,
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
index af518d88ce..721eb1f2f3 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import MessageInputWrapperView from './MessageInputWrapperView';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
export interface MessageInputWrapperProps {
value?: string;
@@ -13,8 +13,8 @@ export interface MessageInputWrapperProps {
}
export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
- const context = useGroupChannelContext();
- return ;
+ const { state, actions } = useGroupChannel();
+ return ;
};
export { VoiceMessageInputWrapper, type VoiceMessageInputWrapperProps } from './VoiceMessageInputWrapper';
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/useHandleUploadFiles.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/useHandleUploadFiles.tsx
index 11252becf8..48bc0c73a3 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/useHandleUploadFiles.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/useHandleUploadFiles.tsx
@@ -1,7 +1,6 @@
import React, { useCallback } from 'react';
-import { Logger } from '../../../../lib/SendbirdState';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import type { Logger } from '../../../../lib/Sendbird/types';
import { isImage, SendableMessageType } from '../../../../utils';
import { useGlobalModalContext } from '../../../../hooks/useModal';
import { ButtonTypes } from '../../../../ui/Button';
@@ -10,6 +9,7 @@ import { ModalFooter } from '../../../../ui/Modal';
import { FileMessage, MultipleFilesMessage, MultipleFilesMessageCreateParams } from '@sendbird/chat/message';
import { compressImages } from '../../../../utils/compressImages';
import { FileMessageCreateParams } from '@sendbird/chat/lib/__definition';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
/**
* The handleUploadFiles is a function sending a FileMessage and MultipleFilesMessage
@@ -29,7 +29,8 @@ export const useHandleUploadFiles = (
{ logger }: useHandleUploadFilesStaticProps,
) => {
const { stringSet } = useLocalization();
- const { config } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { config } = state;
const { imageCompression } = config;
const uikitUploadSizeLimit = config?.uikitUploadSizeLimit;
const uikitMultipleFilesMessageLimit = config?.uikitMultipleFilesMessageLimit;
diff --git a/src/modules/GroupChannel/components/MessageList/InfiniteList.tsx b/src/modules/GroupChannel/components/MessageList/InfiniteList.tsx
index e98076f8fb..299bbcfcea 100644
--- a/src/modules/GroupChannel/components/MessageList/InfiniteList.tsx
+++ b/src/modules/GroupChannel/components/MessageList/InfiniteList.tsx
@@ -1,4 +1,4 @@
-import React, { DependencyList, forwardRef, UIEventHandler, useLayoutEffect, useRef } from 'react';
+import React, { DependencyList, forwardRef, UIEventHandler, useCallback, useLayoutEffect, useRef } from 'react';
import type { BaseMessage } from '@sendbird/chat/message';
import { isAboutSame } from '../../../Channel/context/utils';
import { SCROLL_BUFFER } from '../../../../utils/consts';
@@ -61,7 +61,7 @@ export const InfiniteList = forwardRef((props: Props, listRef: React.RefObject = async () => {
+ const handleScroll: UIEventHandler = useCallback(async () => {
if (!listRef.current) return;
const list = listRef.current;
@@ -87,7 +87,7 @@ export const InfiniteList = forwardRef((props: Props, listRef: React.RefObject
diff --git a/src/modules/GroupChannel/components/MessageList/index.tsx b/src/modules/GroupChannel/components/MessageList/index.tsx
index 86411554a4..d58cc534ea 100644
--- a/src/modules/GroupChannel/components/MessageList/index.tsx
+++ b/src/modules/GroupChannel/components/MessageList/index.tsx
@@ -12,15 +12,15 @@ import Message from '../Message';
import UnreadCount from '../UnreadCount';
import FrozenNotification from '../FrozenNotification';
import { SCROLL_BUFFER } from '../../../../utils/consts';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import TypingIndicatorBubble from '../../../../ui/TypingIndicatorBubble';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
import { deleteNullish } from '../../../../utils/utils';
import { getMessagePartsInfo } from './getMessagePartsInfo';
import { MessageProvider } from '../../../Message/context/MessageProvider';
import { getComponentKeyFromMessage, isContextMenuClosed } from '../../context/utils';
import { InfiniteList } from './InfiniteList';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
import { useLocalization } from '../../../../lib/LocalizationContext';
export interface GroupChannelMessageListProps {
@@ -68,27 +68,31 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
} = deleteNullish(props);
const {
- channelUrl,
- hasNext,
- loading,
- messages,
- newMessages,
- scrollToBottom,
- isScrollBottomReached,
- isMessageGroupingEnabled,
- scrollRef,
- scrollDistanceFromBottomRef,
- scrollPositionRef,
- currentChannel,
- replyType,
- scrollPubSub,
- loadNext,
- loadPrevious,
- setIsScrollBottomReached,
- resetNewMessages,
- } = useGroupChannelContext();
-
- const store = useSendbirdStateContext();
+ state: {
+ channelUrl,
+ hasNext,
+ loading,
+ messages,
+ newMessages,
+ isScrollBottomReached,
+ isMessageGroupingEnabled,
+ currentChannel,
+ replyType,
+ scrollPubSub,
+ loadNext,
+ loadPrevious,
+ resetNewMessages,
+ scrollRef,
+ scrollPositionRef,
+ scrollDistanceFromBottomRef,
+ },
+ actions: {
+ scrollToBottom,
+ setIsScrollBottomReached,
+ },
+ } = useGroupChannel();
+
+ const { state } = useSendbird();
const { stringSet } = useLocalization();
const [unreadSinceDate, setUnreadSinceDate] = useState();
@@ -165,8 +169,8 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
{
currentMessage: message as CoreMessageType,
currentChannel: currentChannel!,
});
- const isOutgoingMessage = isSendableMessage(message) && message.sender.userId === store.config.userId;
+ const isOutgoingMessage = isSendableMessage(message) && message.sender.userId === state.config.userId;
return (
{renderMessage({
@@ -212,8 +216,8 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
}}
typingIndicator={
!hasNext()
- && store?.config?.groupChannel?.enableTypingIndicator
- && store?.config?.groupChannel?.typingIndicatorTypes?.has(TypingIndicatorType.Bubble) && (
+ && state?.config?.groupChannel?.enableTypingIndicator
+ && state?.config?.groupChannel?.typingIndicatorTypes?.has(TypingIndicatorType.Bubble) && (
)
}
@@ -227,8 +231,13 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
};
const TypingIndicatorBubbleWrapper = (props: { handleScroll: () => void; channelUrl: string }) => {
- const { stores } = useSendbirdStateContext();
- const { isScrollBottomReached, scrollPubSub } = useGroupChannelContext();
+ const { state: { stores } } = useSendbird();
+ const {
+ state: {
+ isScrollBottomReached,
+ scrollPubSub,
+ },
+ } = useGroupChannel();
const [typingMembers, setTypingMembers] = useState([]);
useGroupChannelHandler(stores.sdkStore.sdk, {
diff --git a/src/modules/GroupChannel/components/RemoveMessageModal/index.tsx b/src/modules/GroupChannel/components/RemoveMessageModal/index.tsx
index 23cb445cc7..c0772fe68c 100644
--- a/src/modules/GroupChannel/components/RemoveMessageModal/index.tsx
+++ b/src/modules/GroupChannel/components/RemoveMessageModal/index.tsx
@@ -1,9 +1,9 @@
import React from 'react';
-import { useGroupChannelContext } from '../../context/GroupChannelProvider';
import RemoveMessageModalView, { RemoveMessageModalProps } from './RemoveMessageModalView';
+import { useGroupChannel } from '../../context/hooks/useGroupChannel';
export const RemoveMessageModal = (props: RemoveMessageModalProps) => {
- const { deleteMessage } = useGroupChannelContext();
+ const { actions: { deleteMessage } } = useGroupChannel();
return ;
};
diff --git a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
index 252835da9c..54cea87d9e 100644
--- a/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
+++ b/src/modules/GroupChannel/components/SuggestedMentionList/SuggestedMentionListView.tsx
@@ -6,13 +6,13 @@ import type { GroupChannel, Member } from '@sendbird/chat/groupChannel';
import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
import SuggestedUserMentionItem from './SuggestedUserMentionItem';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
import { useLocalization } from '../../../../lib/LocalizationContext';
import { MAX_USER_MENTION_COUNT, MAX_USER_SUGGESTION_COUNT, USER_MENTION_TEMP_CHAR } from '../../context/const';
import { MessageInputKeys } from '../../../../ui/MessageInput/const';
import uuidv4 from '../../../../utils/uuid';
import { fetchMembersFromChannel, fetchMembersFromQuery } from './utils';
import { classnames } from '../../../../utils/utils';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
export interface SuggestedMentionListViewProps {
className?: string;
@@ -46,7 +46,8 @@ export const SuggestedMentionListView = (props: SuggestedMentionListViewProps) =
maxMentionCount = MAX_USER_MENTION_COUNT,
maxSuggestionCount = MAX_USER_SUGGESTION_COUNT,
} = props;
- const { config, stores } = useSendbirdStateContext();
+ const { state } = useSendbird();
+ const { config, stores } = state;
const { logger } = config;
const currentUserId = stores?.sdkStore?.sdk?.currentUser?.userId || '';
const scrollRef = useRef(null);
diff --git a/src/modules/GroupChannel/components/TypingIndicator.tsx b/src/modules/GroupChannel/components/TypingIndicator.tsx
index a9ff08ceb6..0200e40236 100644
--- a/src/modules/GroupChannel/components/TypingIndicator.tsx
+++ b/src/modules/GroupChannel/components/TypingIndicator.tsx
@@ -4,8 +4,8 @@ import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
import Label, { LabelTypography, LabelColors } from '../../../ui/Label';
import { LocalizationContext } from '../../../lib/LocalizationContext';
-import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
import { uuidv4 } from '../../../utils/uuid';
+import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
export interface TypingIndicatorTextProps {
members: Member[];
@@ -37,9 +37,9 @@ export interface TypingIndicatorProps {
}
export const TypingIndicator = ({ channelUrl }: TypingIndicatorProps) => {
- const globalStore = useSendbirdStateContext();
- const sb = globalStore?.stores?.sdkStore?.sdk;
- const logger = globalStore?.config?.logger;
+ const { state } = useSendbird();
+ const sb = state?.stores?.sdkStore?.sdk;
+ const logger = state?.config?.logger;
const [handlerId, setHandlerId] = useState(uuidv4());
const [typingMembers, setTypingMembers] = useState([]);
diff --git a/src/modules/GroupChannel/context/GroupChannelProvider.tsx b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
index 48cb42f1b0..bd76b0d8ad 100644
--- a/src/modules/GroupChannel/context/GroupChannelProvider.tsx
+++ b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
@@ -1,116 +1,76 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import type { EmojiCategory, SendbirdError, User } from '@sendbird/chat';
+import React, { useMemo, useEffect, useRef, createContext } from 'react';
import {
- type FileMessage,
- FileMessageCreateParams,
- type MultipleFilesMessage,
- MultipleFilesMessageCreateParams,
ReplyType as ChatReplyType,
- UserMessageCreateParams,
- UserMessageUpdateParams,
} from '@sendbird/chat/message';
-import type { GroupChannel, MessageCollectionParams, MessageFilterParams } from '@sendbird/chat/groupChannel';
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
import { MessageFilter } from '@sendbird/chat/groupChannel';
-import { useAsyncEffect, useAsyncLayoutEffect, useGroupChannelMessages, useIIFE, usePreservedCallback } from '@sendbird/uikit-tools';
-
-import type { SendableMessageType } from '../../../utils';
-import { UserProfileProvider, UserProfileProviderProps } from '../../../lib/UserProfileContext';
-import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
-import { ThreadReplySelectType } from './const';
-import { ReplyType } from '../../../types';
-import useToggleReactionCallback from './hooks/useToggleReactionCallback';
-import { getCaseResolvedReplyType, getCaseResolvedThreadReplySelectType } from '../../../lib/utils/resolvedReplyType';
-import { getMessageTopOffset, isContextMenuClosed } from './utils';
-import { ScrollTopics, ScrollTopicUnion, useMessageListScroll } from './hooks/useMessageListScroll';
-import PUBSUB_TOPICS, { PubSubSendMessagePayload } from '../../../lib/pubSub/topics';
-import { PubSubTypes } from '../../../lib/pubSub';
-import { useMessageActions } from './hooks/useMessageActions';
+import {
+ useAsyncEffect,
+ useAsyncLayoutEffect,
+ useIIFE,
+ useGroupChannelMessages,
+} from '@sendbird/uikit-tools';
+
+import { UserProfileProvider } from '../../../lib/UserProfileContext';
+import { useMessageListScroll } from './hooks/useMessageListScroll';
import { getIsReactionEnabled } from '../../../utils/getIsReactionEnabled';
+import {
+ getCaseResolvedReplyType,
+ getCaseResolvedThreadReplySelectType,
+} from '../../../lib/utils/resolvedReplyType';
+import { isContextMenuClosed } from './utils';
+import PUBSUB_TOPICS from '../../../lib/pubSub/topics';
+import { createStore } from '../../../utils/storeManager';
+import { useStore } from '../../../hooks/useStore';
+import { useGroupChannel } from './hooks/useGroupChannel';
+import { ThreadReplySelectType } from './const';
+import type {
+ GroupChannelProviderProps,
+ MessageListQueryParamsType,
+ GroupChannelState,
+} from './types';
+import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
+import useDeepCompareEffect from '../../../hooks/useDeepCompareEffect';
+
+const initialState = {
+ currentChannel: null,
+ channelUrl: '',
+ fetchChannelError: null,
+ nicknamesMap: new Map(),
+
+ quoteMessage: null,
+ animatedMessageId: null,
+ isScrollBottomReached: true,
+
+ scrollRef: { current: null },
+ scrollDistanceFromBottomRef: { current: 0 },
+ scrollPositionRef: { current: 0 },
+ messageInputRef: { current: null },
+
+ isReactionEnabled: false,
+ isMessageGroupingEnabled: true,
+ isMultipleFilesMessageEnabled: false,
+ showSearchIcon: true,
+ replyType: 'NONE',
+ threadReplySelectType: ThreadReplySelectType.PARENT,
+ disableMarkAsRead: false,
+ scrollBehavior: 'auto',
+ scrollPubSub: null,
+} as GroupChannelState;
+
+export const GroupChannelContext = createContext> | null>(null);
+
+export const InternalGroupChannelProvider: React.FC> = ({ children }) => {
+ const storeRef = useRef(createStore(initialState));
-export { ThreadReplySelectType } from './const'; // export for external usage
-
-export type OnBeforeHandler = (params: T) => T | Promise | void | Promise;
-type MessageListQueryParamsType = Omit & MessageFilterParams;
-type MessageActions = ReturnType;
-type MessageListDataSourceWithoutActions = Omit, keyof MessageActions | `_dangerous_${string}`>;
-export type OnBeforeDownloadFileMessageType = (params: { message: FileMessage | MultipleFilesMessage; index?: number }) => Promise;
-
-interface ContextBaseType extends
- Pick {
- // Required
- channelUrl: string;
-
- // Flags
- isReactionEnabled?: boolean;
- isMessageGroupingEnabled?: boolean;
- isMultipleFilesMessageEnabled?: boolean;
- showSearchIcon?: boolean;
- replyType?: ReplyType;
- threadReplySelectType?: ThreadReplySelectType;
- disableMarkAsRead?: boolean;
- scrollBehavior?: 'smooth' | 'auto';
- forceLeftToRightMessageLayout?: boolean;
-
- startingPoint?: number;
-
- // Message Focusing
- animatedMessageId?: number | null;
- onMessageAnimated?: () => void;
-
- // Custom
- messageListQueryParams?: MessageListQueryParamsType;
- filterEmojiCategoryIds?: (message: SendableMessageType) => EmojiCategory['id'][];
-
- // Handlers
- onBeforeSendUserMessage?: OnBeforeHandler;
- onBeforeSendFileMessage?: OnBeforeHandler;
- onBeforeSendVoiceMessage?: OnBeforeHandler;
- onBeforeSendMultipleFilesMessage?: OnBeforeHandler;
- onBeforeUpdateUserMessage?: OnBeforeHandler;
- onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
-
- // Click
- onBackClick?(): void;
- onChatHeaderActionClick?(event: React.MouseEvent): void;
- onReplyInThreadClick?: (props: { message: SendableMessageType }) => void;
- onSearchClick?(): void;
- onQuoteMessageClick?: (props: { message: SendableMessageType }) => void;
-
- // Render
- renderUserMentionItem?: (props: { user: User }) => JSX.Element;
-}
-
-export interface GroupChannelContextType extends ContextBaseType, MessageListDataSourceWithoutActions, MessageActions {
- currentChannel: GroupChannel | null;
- fetchChannelError: SendbirdError | null;
- nicknamesMap: Map;
-
- scrollRef: React.RefObject;
- scrollDistanceFromBottomRef: React.MutableRefObject;
- scrollPositionRef: React.MutableRefObject;
- scrollPubSub: PubSubTypes;
- messageInputRef: React.RefObject;
-
- quoteMessage: SendableMessageType | null;
- setQuoteMessage: React.Dispatch>;
- animatedMessageId: number | null;
- setAnimatedMessageId: React.Dispatch>;
- isScrollBottomReached: boolean;
- setIsScrollBottomReached: React.Dispatch>;
-
- scrollToBottom: (animated?: boolean) => void;
- scrollToMessage: (createdAt: number, messageId: number) => void;
- toggleReaction(message: SendableMessageType, emojiKey: string, isReacted: boolean): void;
-}
-
-export interface GroupChannelProviderProps extends
- ContextBaseType,
- Pick {
- children?: React.ReactNode;
-}
+ return (
+
+ {children}
+
+ );
+};
-export const GroupChannelContext = React.createContext(null);
-export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
+const GroupChannelManager :React.FC> = (props) => {
const {
channelUrl,
children,
@@ -141,267 +101,252 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
filterEmojiCategoryIds,
} = props;
- // Global context
- const { config, stores } = useSendbirdStateContext();
-
+ const { state, actions } = useGroupChannel();
+ const { updateState } = useGroupChannelStore();
+ const { state: { config, stores } } = useSendbird();
const { sdkStore } = stores;
- const { markAsReadScheduler, logger } = config;
+ const { markAsReadScheduler, logger, pubSub } = config;
- // State
- const [quoteMessage, setQuoteMessage] = useState(null);
- const [animatedMessageId, setAnimatedMessageId] = useState(null);
- const [currentChannel, setCurrentChannel] = useState(null);
- const [fetchChannelError, setFetchChannelError] = useState(null);
+ // ScrollHandler initialization
+ const {
+ scrollRef,
+ scrollPubSub,
+ scrollDistanceFromBottomRef,
+ scrollPositionRef,
+ } = useMessageListScroll(scrollBehavior, [state.currentChannel?.url]);
- // Ref
- const { scrollRef, scrollPubSub, scrollDistanceFromBottomRef, isScrollBottomReached, setIsScrollBottomReached, scrollPositionRef } = useMessageListScroll(scrollBehavior, [currentChannel?.url]);
- const messageInputRef = useRef(null);
+ const { isScrollBottomReached } = state;
- const toggleReaction = useToggleReactionCallback(currentChannel, logger);
- const replyType = getCaseResolvedReplyType(moduleReplyType ?? config.groupChannel.replyType).upperCase;
- const threadReplySelectType = getCaseResolvedThreadReplySelectType(
+ // Configuration resolution
+ const resolvedReplyType = getCaseResolvedReplyType(moduleReplyType ?? config.groupChannel.replyType).upperCase;
+ const resolvedThreadReplySelectType = getCaseResolvedThreadReplySelectType(
moduleThreadReplySelectType ?? config.groupChannel.threadReplySelectType,
).upperCase;
+ const replyType = getCaseResolvedReplyType(moduleReplyType ?? config.groupChannel.replyType).upperCase;
+ const resolvedIsReactionEnabled = getIsReactionEnabled({
+ channel: state.currentChannel,
+ config,
+ moduleLevel: moduleReactionEnabled,
+ });
const chatReplyType = useIIFE(() => {
if (replyType === 'NONE') return ChatReplyType.NONE;
return ChatReplyType.ONLY_REPLY_TO_CHANNEL;
});
- const isReactionEnabled = getIsReactionEnabled({
- channel: currentChannel,
- config,
- moduleLevel: moduleReactionEnabled,
- });
- const nicknamesMap = useMemo(
- () => new Map((currentChannel?.members ?? []).map(({ userId, nickname }) => [userId, nickname])),
- [currentChannel?.members],
- );
- const messageDataSource = useGroupChannelMessages(sdkStore.sdk, currentChannel!, {
+ // Message Collection setup
+ const messageDataSource = useGroupChannelMessages(sdkStore.sdk, state.currentChannel!, {
startingPoint,
replyType: chatReplyType,
- collectionCreator: getCollectionCreator(currentChannel!, messageListQueryParams),
+ collectionCreator: getCollectionCreator(state.currentChannel!, messageListQueryParams),
shouldCountNewMessages: () => !isScrollBottomReached,
markAsRead: (channels) => {
if (isScrollBottomReached && !disableMarkAsRead) {
channels.forEach((it) => markAsReadScheduler.push(it));
}
},
- onMessagesReceived: () => {
- // FIXME: onMessagesReceived called with onApiResult
- if (isScrollBottomReached && isContextMenuClosed()) {
- setTimeout(() => {
- scrollPubSub.publish('scrollToBottom', {});
- }, 10);
+ onMessagesReceived: (messages) => {
+ if (isScrollBottomReached
+ && isContextMenuClosed()
+ // Note: this shouldn't happen ideally, but it happens on re-rendering GroupChannelManager
+ // even though the next messages and the current messages length are the same.
+ // So added this condition to check if they are the same to prevent unnecessary calling scrollToBottom action
+ && messages.length !== state.messages.length) {
+ setTimeout(() => actions.scrollToBottom(true), 10);
}
},
onChannelDeleted: () => {
- setCurrentChannel(null);
- setFetchChannelError(null);
+ actions.setCurrentChannel(null);
onBackClick?.();
},
onCurrentUserBanned: () => {
- setCurrentChannel(null);
- setFetchChannelError(null);
+ actions.setCurrentChannel(null);
onBackClick?.();
},
- onChannelUpdated: (channel) => setCurrentChannel(channel),
+ onChannelUpdated: (channel) => {
+ actions.setCurrentChannel(channel);
+ },
logger: logger as any,
});
- // SideEffect: Fetch and set to current channel by channelUrl prop.
+ // Channel initialization
useAsyncEffect(async () => {
if (sdkStore.initialized && channelUrl) {
try {
const channel = await sdkStore.sdk.groupChannel.getChannel(channelUrl);
- setCurrentChannel(channel);
- setFetchChannelError(null);
+ actions.setCurrentChannel(channel);
} catch (error) {
- setCurrentChannel(null);
- setFetchChannelError(error as SendbirdError);
+ actions.handleChannelError(error);
logger?.error?.('GroupChannelProvider: error when fetching channel', error);
- } finally {
- // Reset states when channel changes
- setQuoteMessage(null);
- setAnimatedMessageId(null);
}
}
}, [sdkStore.initialized, sdkStore.sdk, channelUrl]);
- // SideEffect: Scroll to the bottom
- // - On the initialized message list
- // - On messages sent from the thread
+ // Message sync effect
useAsyncLayoutEffect(async () => {
if (messageDataSource.initialized) {
- scrollPubSub.publish('scrollToBottom', {});
+ actions.scrollToBottom();
}
- const onSentMessageFromOtherModule = (data: PubSubSendMessagePayload) => {
- if (data.channel.url === currentChannel?.url) scrollPubSub.publish('scrollToBottom', {});
+ const handleExternalMessage = (data) => {
+ if (data.channel.url === state.currentChannel?.url) {
+ actions.scrollToBottom(true);
+ }
};
- const subscribes = [
- config.pubSub.subscribe(PUBSUB_TOPICS.SEND_USER_MESSAGE, onSentMessageFromOtherModule),
- config.pubSub.subscribe(PUBSUB_TOPICS.SEND_FILE_MESSAGE, onSentMessageFromOtherModule),
+
+ if (pubSub?.subscribe === undefined) return;
+ const subscriptions = [
+ config.pubSub.subscribe(PUBSUB_TOPICS.SEND_USER_MESSAGE, handleExternalMessage),
+ config.pubSub.subscribe(PUBSUB_TOPICS.SEND_FILE_MESSAGE, handleExternalMessage),
];
+
return () => {
- subscribes.forEach((subscribe) => subscribe.remove());
+ subscriptions.forEach(subscription => subscription.remove());
};
- }, [messageDataSource.initialized, currentChannel?.url]);
+ }, [messageDataSource.initialized, state.currentChannel?.url]);
- // SideEffect: Reset MessageCollection with startingPoint prop.
+ // Starting point handling
useEffect(() => {
if (typeof startingPoint === 'number') {
- // We do not handle animation for message search here.
- // Please update the animatedMessageId prop to trigger the animation.
- scrollToMessage(startingPoint, 0, false, false);
+ actions.scrollToMessage(startingPoint, 0, false, false);
}
}, [startingPoint]);
- // SideEffect: Update animatedMessageId prop to state.
+ // Animated message handling
useEffect(() => {
- if (_animatedMessageId) setAnimatedMessageId(_animatedMessageId);
+ if (_animatedMessageId) {
+ actions.setAnimatedMessageId(_animatedMessageId);
+ }
}, [_animatedMessageId]);
- const scrollToBottom = usePreservedCallback(async (animated?: boolean) => {
- if (!scrollRef.current) return;
-
- setAnimatedMessageId(null);
- setIsScrollBottomReached(true);
-
- if (config.isOnline && messageDataSource.hasNext()) {
- await messageDataSource.resetWithStartingPoint(Number.MAX_SAFE_INTEGER);
- scrollPubSub.publish('scrollToBottom', { animated });
- } else {
- scrollPubSub.publish('scrollToBottom', { animated });
- }
+ // State update effect
+ const eventHandlers = useMemo(() => ({
+ onBeforeSendUserMessage,
+ onBeforeSendFileMessage,
+ onBeforeSendVoiceMessage,
+ onBeforeSendMultipleFilesMessage,
+ onBeforeUpdateUserMessage,
+ onBeforeDownloadFileMessage,
+ onBackClick,
+ onChatHeaderActionClick,
+ onReplyInThreadClick,
+ onSearchClick,
+ onQuoteMessageClick,
+ onMessageAnimated,
+ }), [
+ onBeforeSendUserMessage,
+ onBeforeSendFileMessage,
+ onBeforeSendVoiceMessage,
+ onBeforeSendMultipleFilesMessage,
+ onBeforeUpdateUserMessage,
+ onBeforeDownloadFileMessage,
+ onBackClick,
+ onChatHeaderActionClick,
+ onReplyInThreadClick,
+ onSearchClick,
+ onQuoteMessageClick,
+ onMessageAnimated,
+ ]);
- if (currentChannel && !messageDataSource.hasNext()) {
- messageDataSource.resetNewMessages();
- if (!disableMarkAsRead) markAsReadScheduler.push(currentChannel);
- }
- });
+ const renderProps = useMemo(() => ({
+ renderUserMentionItem,
+ filterEmojiCategoryIds,
+ }), [renderUserMentionItem, filterEmojiCategoryIds]);
- const scrollToMessage = usePreservedCallback(
- async (createdAt: number, messageId: number, messageFocusAnimated?: boolean, scrollAnimated?: boolean) => {
- // NOTE: To prevent multiple clicks on the message in the channel while scrolling
- // Check if it can be replaced with event.stopPropagation()
- const element = scrollRef.current;
- const parentNode = element?.parentNode as HTMLDivElement;
- const clickHandler = {
- activate() {
- if (!element || !parentNode) return;
- element.style.pointerEvents = 'auto';
- parentNode.style.cursor = 'auto';
- },
- deactivate() {
- if (!element || !parentNode) return;
- element.style.pointerEvents = 'none';
- parentNode.style.cursor = 'wait';
- },
- };
-
- clickHandler.deactivate();
-
- setAnimatedMessageId(null);
- const message = messageDataSource.messages.find((it) => it.messageId === messageId || it.createdAt === createdAt);
- if (message) {
- const topOffset = getMessageTopOffset(message.createdAt);
- if (topOffset) scrollPubSub.publish('scroll', { top: topOffset, animated: scrollAnimated });
- if (messageFocusAnimated ?? true) setAnimatedMessageId(messageId);
- } else {
- await messageDataSource.resetWithStartingPoint(createdAt);
- setTimeout(() => {
- const topOffset = getMessageTopOffset(createdAt);
- if (topOffset) scrollPubSub.publish('scroll', { top: topOffset, lazy: false, animated: scrollAnimated });
- if (messageFocusAnimated ?? true) setAnimatedMessageId(messageId);
- });
- }
+ const configurations = useMemo(() => ({
+ isReactionEnabled: resolvedIsReactionEnabled,
+ isMessageGroupingEnabled,
+ isMultipleFilesMessageEnabled,
+ replyType: resolvedReplyType,
+ threadReplySelectType: resolvedThreadReplySelectType,
+ showSearchIcon: showSearchIcon ?? config.groupChannelSettings.enableMessageSearch,
+ disableMarkAsRead,
+ scrollBehavior,
+ }), [
+ resolvedIsReactionEnabled,
+ isMessageGroupingEnabled,
+ isMultipleFilesMessageEnabled,
+ resolvedReplyType,
+ resolvedThreadReplySelectType,
+ showSearchIcon,
+ disableMarkAsRead,
+ scrollBehavior,
+ config.groupChannelSettings.enableMessageSearch,
+ ]);
+
+ const scrollState = useMemo(() => ({
+ scrollRef,
+ scrollPubSub,
+ scrollDistanceFromBottomRef,
+ scrollPositionRef,
+ isScrollBottomReached,
+ }), [
+ scrollRef,
+ scrollPubSub,
+ scrollDistanceFromBottomRef,
+ scrollPositionRef,
+ isScrollBottomReached,
+ ]);
+
+ useDeepCompareEffect(() => {
+ updateState({
+ // Channel state
+ channelUrl,
+ currentChannel: state.currentChannel,
+
+ // Grouped states
+ ...configurations,
+ ...scrollState,
+ ...eventHandlers,
+ ...renderProps,
+
+ // Message data source & actions
+ ...messageDataSource,
+ });
+ }, [
+ channelUrl,
+ state.currentChannel?.serialize(),
+ configurations,
+ scrollState,
+ eventHandlers,
+ renderProps,
+ messageDataSource.initialized,
+ messageDataSource.loading,
+ messageDataSource.messages.map(it => it.serialize()),
+ ]);
+
+ return children;
+};
- clickHandler.activate();
- },
+const GroupChannelProvider: React.FC = (props) => {
+ return (
+
+
+
+ {props.children}
+
+
+
);
+};
- const messageActions = useMessageActions({
- ...props,
- ...messageDataSource,
- scrollToBottom,
- quoteMessage,
- replyType,
- pubSub: config.pubSub,
- channel: currentChannel,
- });
+/**
+ * A specialized hook for GroupChannel state management
+ * @returns {ReturnType>}
+ */
+const useGroupChannelStore = () => {
+ return useStore(GroupChannelContext, state => state, initialState);
+};
- return (
-
-
- {children}
-
-
- );
+// Keep this function for backward compatibility.
+const useGroupChannelContext = () => {
+ const { state, actions } = useGroupChannel();
+ return { ...state, ...actions };
};
-export const useGroupChannelContext = () => {
- const context = useContext(GroupChannelContext);
- if (!context) throw new Error('GroupChannelContext not found. Use within the GroupChannel module.');
- return context;
+export {
+ GroupChannelProvider,
+ useGroupChannelContext,
+ GroupChannelManager,
};
function getCollectionCreator(groupChannel: GroupChannel, messageListQueryParams?: MessageListQueryParamsType) {
diff --git a/src/modules/GroupChannel/context/__tests__/GroupChannel.migration.spec.tsx b/src/modules/GroupChannel/context/__tests__/GroupChannel.migration.spec.tsx
index c661bb3286..0c4d6db02f 100644
--- a/src/modules/GroupChannel/context/__tests__/GroupChannel.migration.spec.tsx
+++ b/src/modules/GroupChannel/context/__tests__/GroupChannel.migration.spec.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { act } from 'react';
import { render, screen } from '@testing-library/react';
-import { GroupChannelProvider, GroupChannelProviderProps, useGroupChannelContext } from '../GroupChannelProvider';
+import type { GroupChannelProviderProps } from '../types';
+import { GroupChannelProvider, useGroupChannelContext } from '../GroupChannelProvider';
import { ThreadReplySelectType } from '../const';
import { match } from 'ts-pattern';
-const mockSendbirdStateContext = {
+const mockState = {
config: {
pubSub: { subscribe: () => ({ remove: () => {} }) },
isOnline: true,
@@ -31,14 +32,11 @@ const mockSendbirdStateContext = {
},
},
};
-
-jest.mock('../../../../lib/Sendbird', () => ({
- __esModule: true,
- useSendbirdStateContext: () => mockSendbirdStateContext,
-}));
-jest.mock('../../../../hooks/useSendbirdStateContext', () => ({
+const mockActions = { connect: jest.fn(), disconnect: jest.fn() };
+jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
__esModule: true,
- default: () => mockSendbirdStateContext,
+ default: jest.fn(() => ({ state: mockState, actions: mockActions })),
+ useSendbird: jest.fn(() => ({ state: mockState, actions: mockActions })),
}));
const mockProps: GroupChannelProviderProps = {
@@ -59,8 +57,7 @@ const mockProps: GroupChannelProviderProps = {
scrollBehavior: 'smooth',
forceLeftToRightMessageLayout: false,
- startingPoint: 0,
-
+ startingPoint: undefined,
// Message Focusing
animatedMessageId: null,
onMessageAnimated: jest.fn(),
@@ -95,15 +92,15 @@ const mockProps: GroupChannelProviderProps = {
describe('GroupChannel Migration Compatibility Tests', () => {
// 1. Provider Props Interface test
describe('GroupChannelProvider Props Compatibility', () => {
- it('should accept all legacy props without type errors', () => {
- const { rerender } = render(
+ it('should accept all legacy props without type errors', async () => {
+ const { rerender } = await act(async () => render(
{mockProps.children}
,
- );
+ ));
// Props change scenario test
- rerender(
+ await act(async () => rerender(
{
>
{mockProps.children}
,
- );
+ ));
});
});
diff --git a/src/modules/GroupChannel/context/__tests__/GroupChannelProvider.spec.tsx b/src/modules/GroupChannel/context/__tests__/GroupChannelProvider.spec.tsx
new file mode 100644
index 0000000000..52614d19bf
--- /dev/null
+++ b/src/modules/GroupChannel/context/__tests__/GroupChannelProvider.spec.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { waitFor, act, renderHook } from '@testing-library/react';
+import { GroupChannelProvider, useGroupChannelContext } from '../GroupChannelProvider';
+import { useGroupChannel } from '../hooks/useGroupChannel';
+
+const mockLogger = { warning: jest.fn() };
+const mockChannel = {
+ url: 'test-channel',
+ members: [{ userId: '1', nickname: 'user1' }],
+ serialize: () => JSON.stringify(this),
+};
+
+const mockGetChannel = jest.fn().mockResolvedValue(mockChannel);
+const mockMessageCollection = {
+ dispose: jest.fn(),
+ setMessageCollectionHandler: jest.fn(),
+ initialize: jest.fn().mockResolvedValue(null),
+ loadPrevious: jest.fn(),
+ loadNext: jest.fn(),
+ messages: [],
+};
+jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
+ __esModule: true,
+ default: jest.fn(() => ({
+ state: {
+ stores: {
+ sdkStore: {
+ sdk: {
+ groupChannel: {
+ getChannel: mockGetChannel,
+ addGroupChannelHandler: jest.fn(),
+ removeGroupChannelHandler: jest.fn(),
+ },
+ createMessageCollection: jest.fn().mockReturnValue(mockMessageCollection),
+ },
+ initialized: true,
+ },
+ },
+ config: {
+ logger: mockLogger,
+ markAsReadScheduler: {
+ push: jest.fn(),
+ },
+ groupChannel: {
+ replyType: 'NONE',
+ threadReplySelectType: 'PARENT',
+ },
+ groupChannelSettings: {
+ enableMessageSearch: true,
+ },
+ isOnline: true,
+ pubSub: {
+ subscribe: () => ({ remove: jest.fn() }),
+ },
+ },
+ },
+ })),
+}));
+
+describe('GroupChannelProvider', () => {
+ it('provides the correct initial state', () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useGroupChannelContext(), { wrapper });
+
+ expect(result.current.channelUrl).toBe('test-channel');
+ expect(result.current.currentChannel).toBe(null);
+ expect(result.current.isScrollBottomReached).toBe(true);
+ });
+
+ it('updates state correctly when channel is fetched', async () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ act(() => {
+ waitFor(() => {
+ expect(result.current.state.currentChannel).toBeTruthy();
+ expect(result.current.state.currentChannel?.url).toBe('test-channel');
+ });
+ });
+ });
+
+ it('handles channel error correctly', async () => {
+ const mockError = new Error('Channel fetch failed');
+ jest.spyOn(console, 'error').mockImplementation(() => {});
+
+ jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
+ default: () => ({
+ state: {
+ stores: {
+ sdkStore: {
+ sdk: {
+ groupChannel: {
+ getChannel: jest.fn().mockRejectedValue(mockError),
+ },
+ },
+ initialized: true,
+ },
+ },
+ config: { logger: console },
+ },
+ }),
+ }));
+
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ act(() => {
+ waitFor(() => {
+ expect(result.current.state.currentChannel).toBeTruthy();
+ expect(result.current.state.fetchChannelError).toBeNull();
+ });
+ });
+
+ act(() => {
+ waitFor(() => {
+ expect(result.current.state.currentChannel).toBeNull();
+ });
+ });
+ });
+
+ it('correctly handles scroll to bottom', async () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ act(() => {
+ result.current.actions.scrollToBottom();
+ waitFor(() => {
+ expect(result.current.state.isScrollBottomReached).toBe(true);
+ });
+ });
+ });
+});
diff --git a/src/modules/GroupChannel/context/__tests__/useGroupChannel.spec.tsx b/src/modules/GroupChannel/context/__tests__/useGroupChannel.spec.tsx
new file mode 100644
index 0000000000..ef336312d2
--- /dev/null
+++ b/src/modules/GroupChannel/context/__tests__/useGroupChannel.spec.tsx
@@ -0,0 +1,475 @@
+import React from 'react';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { GroupChannel } from '@sendbird/chat/groupChannel';
+import { GroupChannelProvider, GroupChannelContext } from '../GroupChannelProvider';
+import { useGroupChannel } from '../hooks/useGroupChannel';
+import { SendableMessageType } from '../../../../utils';
+
+const mockLogger = { warning: jest.fn() };
+const mockChannel = {
+ url: 'test-channel',
+ members: [{ userId: '1', nickname: 'user1' }],
+ serialize: () => JSON.stringify(this),
+};
+
+const mockGetChannel = jest.fn().mockResolvedValue(mockChannel);
+const mockMessageCollection = {
+ dispose: jest.fn(),
+ setMessageCollectionHandler: jest.fn(),
+ initialize: jest.fn().mockResolvedValue(null),
+ loadPrevious: jest.fn(),
+ loadNext: jest.fn(),
+ messages: [],
+};
+const mockMarkAsReadScheduler = { push: jest.fn() };
+jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
+ __esModule: true,
+ default: jest.fn(() => ({
+ state: {
+ stores: {
+ sdkStore: {
+ sdk: {
+ groupChannel: {
+ getChannel: mockGetChannel,
+ addGroupChannelHandler: jest.fn(),
+ removeGroupChannelHandler: jest.fn(),
+ },
+ createMessageCollection: jest.fn().mockReturnValue(mockMessageCollection),
+ },
+ initialized: true,
+ },
+ },
+ config: {
+ logger: mockLogger,
+ markAsReadScheduler: mockMarkAsReadScheduler,
+ groupChannel: {
+ replyType: 'NONE',
+ threadReplySelectType: 'PARENT',
+ },
+ groupChannelSettings: {
+ enableMessageSearch: true,
+ },
+ isOnline: true,
+ pubSub: {
+ subscribe: () => ({ remove: jest.fn() }),
+ },
+ },
+ },
+ })),
+}));
+jest.mock('../utils', () => ({
+ getMessageTopOffset: jest.fn().mockReturnValue(100),
+}));
+
+const createMockStore = (initialState = {}) => {
+ let state = {
+ currentChannel: null,
+ fetchChannelError: null,
+ quoteMessage: null,
+ animatedMessageId: null,
+ isScrollBottomReached: true,
+ messages: [],
+ scrollRef: { current: null },
+ hasNext: () => false,
+ resetWithStartingPoint: jest.fn(),
+ scrollPubSub: {
+ publish: jest.fn(),
+ },
+ resetNewMessages: jest.fn(),
+ ...initialState,
+ };
+
+ const subscribers = new Set<() => void>();
+
+ return {
+ getState: () => state,
+ setState: (updater: (prev: typeof state) => typeof state) => {
+ state = updater(state);
+ subscribers.forEach(subscriber => subscriber());
+ },
+ subscribe: (callback: () => void) => {
+ subscribers.add(callback);
+ return () => subscribers.delete(callback);
+ },
+ };
+};
+
+const createWrapper = (mockStore) => {
+ return ({ children }) => (
+
+ {children}
+
+ );
+};
+
+describe('useGroupChannel', () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+
+ );
+
+ describe('State management', () => {
+ it('provides initial state', () => {
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ expect(result.current.state).toEqual(expect.objectContaining({
+ currentChannel: null,
+ channelUrl: mockChannel.url,
+ fetchChannelError: null,
+ quoteMessage: null,
+ animatedMessageId: null,
+ isScrollBottomReached: true,
+ }));
+ });
+
+ it('updates channel state', () => {
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ act(() => {
+ result.current.actions.setCurrentChannel(mockChannel as GroupChannel);
+ });
+
+ expect(result.current.state.currentChannel).toEqual(mockChannel);
+ expect(result.current.state.fetchChannelError).toBeNull();
+
+ // nicknamesMap should be created from channel members
+ expect(result.current.state.nicknamesMap.get('1')).toBe('user1');
+ });
+
+ it('handles channel error', () => {
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+ const error = new Error('Failed to fetch channel');
+
+ act(() => {
+ result.current.actions.handleChannelError(error as any);
+ });
+
+ expect(result.current.state.currentChannel).toBeNull();
+ expect(result.current.state.fetchChannelError).toBe(error);
+ expect(result.current.state.quoteMessage).toBeNull();
+ expect(result.current.state.animatedMessageId).toBeNull();
+ });
+
+ it('manages quote message state', () => {
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+ const mockMessage = { messageId: 1, message: 'test' } as SendableMessageType;
+
+ act(() => {
+ result.current.actions.setQuoteMessage(mockMessage);
+ });
+
+ expect(result.current.state.quoteMessage).toEqual(mockMessage);
+
+ act(() => {
+ result.current.actions.setQuoteMessage(null);
+ });
+
+ expect(result.current.state.quoteMessage).toBeNull();
+ });
+
+ it('manages animated message state', () => {
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ act(() => {
+ result.current.actions.setAnimatedMessageId(123);
+ });
+
+ expect(result.current.state.animatedMessageId).toBe(123);
+
+ act(() => {
+ result.current.actions.setAnimatedMessageId(null);
+ });
+
+ expect(result.current.state.animatedMessageId).toBeNull();
+ });
+
+ it('manages scroll bottom reached state', () => {
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ expect(result.current.state.isScrollBottomReached).toBe(true); // initial state
+
+ act(() => {
+ result.current.actions.setIsScrollBottomReached(false);
+ });
+
+ expect(result.current.state.isScrollBottomReached).toBe(false);
+
+ act(() => {
+ result.current.actions.setIsScrollBottomReached(true);
+ });
+
+ expect(result.current.state.isScrollBottomReached).toBe(true);
+ });
+ });
+
+ describe('Channel actions', () => {
+ describe('scrollToBottom', () => {
+ it('should not scroll if scrollRef is not set', async () => {
+ const mockStore = createMockStore({
+ scrollRef: { current: null },
+ scrollPubSub: { publish: jest.fn() },
+ });
+ const { result } = renderHook(() => useGroupChannel(), {
+ wrapper: createWrapper(mockStore),
+ });
+ await act(async () => {
+ await result.current.actions.scrollToBottom(true);
+ await waitFor(() => {
+ expect(result.current.state.scrollPubSub.publish).not.toHaveBeenCalled();
+ });
+ });
+ });
+ it('should reset new messages and mark as read if no next messages', async () => {
+ const mockStore = createMockStore({
+ scrollRef: { current: {} },
+ hasNext: () => false,
+ currentChannel: mockChannel,
+ resetNewMessages: jest.fn(),
+ scrollPubSub: { publish: jest.fn() },
+ });
+ const { result } = renderHook(() => useGroupChannel(), {
+ wrapper: createWrapper(mockStore),
+ });
+ await act(async () => {
+ await result.current.actions.scrollToBottom(true);
+ await waitFor(() => {
+ expect(result.current.state.resetNewMessages).toHaveBeenCalled();
+ expect(mockMarkAsReadScheduler.push).toHaveBeenCalledWith(mockChannel);
+ });
+ });
+ });
+ it('should scroll to bottom when online and has next message', async () => {
+ const mockScrollRef = { current: {} };
+ const mockScrollPubSub = { publish: jest.fn() };
+ const mockStore = createMockStore({
+ scrollRef: mockScrollRef,
+ hasNext: () => true,
+ resetWithStartingPoint: jest.fn().mockResolvedValue(undefined),
+ scrollPubSub: mockScrollPubSub,
+ });
+ const { result } = renderHook(() => useGroupChannel(), {
+ wrapper: createWrapper(mockStore),
+ });
+ await act(async () => {
+ await result.current.actions.scrollToBottom(true);
+ await waitFor(() => {
+ expect(result.current.state.resetWithStartingPoint).toHaveBeenCalledWith(Number.MAX_SAFE_INTEGER);
+ expect(result.current.state.scrollPubSub.publish).toHaveBeenCalledWith('scrollToBottom', { animated: true });
+ });
+ });
+ });
+ });
+ describe('scrollToMessage', () => {
+ it('should not scroll if element is not found', async () => {
+ const mockStore = createMockStore({
+ messages: [],
+ scrollRef: { current: document.createElement('div') },
+ scrollPubSub: { publish: jest.fn() },
+ });
+ const { result } = renderHook(() => useGroupChannel(), {
+ wrapper: createWrapper(mockStore),
+ });
+ await act(async () => {
+ await result.current.actions.scrollToMessage(9999, 9999, true, true);
+ await waitFor(() => {
+ expect(result.current.state.scrollPubSub.publish).not.toHaveBeenCalled();
+ });
+ });
+ });
+ it('scroll to message when message exists', async () => {
+ const mockMessage = { messageId: 123, createdAt: 1000, serialize: () => JSON.stringify(this) };
+ const mockStore = createMockStore({
+ messages: [mockMessage],
+ scrollRef: { current: document.createElement('div') },
+ scrollPubSub: { publish: jest.fn() },
+ });
+ const { result } = renderHook(() => useGroupChannel(), {
+ wrapper: createWrapper(mockStore),
+ });
+ await act(async () => {
+ await result.current.actions.scrollToMessage(mockMessage.createdAt, mockMessage.messageId, true, true);
+ await waitFor(() => {
+ expect(mockStore.getState().scrollPubSub.publish)
+ .toHaveBeenCalledWith('scroll', {
+ top: 100,
+ animated: true,
+ });
+ expect(result.current.state.animatedMessageId).toBe(mockMessage.messageId);
+ });
+ });
+ });
+ it('loads message and scrolls when message does not exist', async () => {
+ const mockScrollPubSub = { publish: jest.fn() };
+ const mockResetWithStartingPoint = jest.fn().mockResolvedValue(undefined);
+ const mockStore = createMockStore({
+ messages: [],
+ scrollRef: {
+ current: document.createElement('div'),
+ },
+ scrollPubSub: mockScrollPubSub,
+ resetWithStartingPoint: mockResetWithStartingPoint,
+ });
+ const { result } = renderHook(() => useGroupChannel(), {
+ wrapper: createWrapper(mockStore),
+ });
+ await act(async () => {
+ await result.current.actions.scrollToMessage(1000, 123, true, true);
+ await waitFor(() => {
+ expect(mockResetWithStartingPoint).toHaveBeenCalledWith(1000);
+ // mocking setTimeout
+ jest.runAllTimers();
+ expect(mockStore.getState().scrollPubSub.publish)
+ .toHaveBeenCalledWith('scroll', {
+ top: 100,
+ lazy: false,
+ animated: true,
+ });
+ expect(mockStore.getState().animatedMessageId).toBe(123);
+ });
+ });
+ });
+ });
+ it('processes reaction toggle', async () => {
+ const mockChannelWithReactions = {
+ ...mockChannel,
+ addReaction: jest.fn().mockResolvedValue({}),
+ deleteReaction: jest.fn().mockResolvedValue({}),
+ };
+
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ act(() => {
+ result.current.actions.setCurrentChannel(mockChannelWithReactions as any);
+ });
+
+ const mockMessage = { messageId: 1 };
+ const emojiKey = 'thumbs_up';
+
+ act(() => {
+ result.current.actions.toggleReaction(
+ mockMessage as SendableMessageType,
+ emojiKey,
+ false,
+ );
+ });
+
+ expect(mockChannelWithReactions.addReaction)
+ .toHaveBeenCalledWith(mockMessage, emojiKey);
+
+ // Test removing reaction
+ act(() => {
+ result.current.actions.toggleReaction(
+ mockMessage as SendableMessageType,
+ emojiKey,
+ true,
+ );
+ });
+
+ expect(mockChannelWithReactions.deleteReaction)
+ .toHaveBeenCalledWith(mockMessage, emojiKey);
+ });
+
+ it('logs errors for reaction deletion failure', async () => {
+ const mockError = new Error('Failed to delete reaction');
+ const deleteReaction = jest.fn().mockRejectedValue(mockError);
+ const mockChannelWithReactions = {
+ ...mockChannel,
+ deleteReaction,
+ };
+
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ act(() => {
+ result.current.actions.setCurrentChannel(mockChannelWithReactions as any);
+ });
+
+ act(() => {
+ result.current.actions.toggleReaction(
+ { messageId: 1 } as SendableMessageType,
+ 'thumbs_up',
+ true,
+ );
+ });
+
+ waitFor(() => {
+ expect(mockChannelWithReactions.deleteReaction).toHaveBeenCalled();
+ expect(mockLogger.warning).toHaveBeenCalledWith(
+ 'Failed to delete reaction:',
+ mockError,
+ );
+ });
+
+ });
+
+ describe('toggleReaction', () => {
+ it('should be able to add and delete reactions', async () => {
+ const mockChannel = {
+ addReaction: jest.fn().mockResolvedValue(undefined),
+ deleteReaction: jest.fn().mockResolvedValue(undefined),
+ };
+ const mockStore = createMockStore({
+ currentChannel: mockChannel,
+ });
+ const { result } = renderHook(() => useGroupChannel(), {
+ wrapper: createWrapper(mockStore),
+ });
+ const mockMessage = { messageId: 123 } as SendableMessageType;
+
+ await waitFor(() => {
+ expect(result.current.actions).toBeDefined();
+ });
+
+ await act(async () => {
+ result.current.actions.toggleReaction(mockMessage, '👍', false);
+ await waitFor(() => {
+ expect(mockChannel.addReaction).toHaveBeenCalledWith(mockMessage, '👍');
+ });
+ });
+ await act(async () => {
+ result.current.actions.toggleReaction(mockMessage, '👍', true);
+ await waitFor(() => {
+ expect(mockChannel.deleteReaction).toHaveBeenCalledWith(mockMessage, '👍');
+ });
+ });
+ });
+ it('processes successful reaction toggles without logging errors', async () => {
+ const mockChannelWithReactions = {
+ ...mockChannel,
+ addReaction: jest.fn().mockResolvedValue({}),
+ deleteReaction: jest.fn().mockResolvedValue({}),
+ };
+
+ const { result } = renderHook(() => useGroupChannel(), { wrapper });
+
+ act(() => {
+ result.current.actions.setCurrentChannel(mockChannelWithReactions as any);
+ });
+
+ act(async () => {
+ result.current.actions.toggleReaction(
+ { messageId: 1 } as SendableMessageType,
+ 'thumbs_up',
+ false,
+ );
+ await waitFor(() => {
+ expect(mockChannelWithReactions.addReaction).toHaveBeenCalled();
+ expect(mockLogger.warning).not.toHaveBeenCalled();
+ });
+ });
+
+ act(async () => {
+ result.current.actions.toggleReaction(
+ { messageId: 1 } as SendableMessageType,
+ 'thumbs_up',
+ true,
+ );
+ await waitFor(() => {
+ expect(mockChannelWithReactions.deleteReaction).toHaveBeenCalled();
+ expect(mockLogger.warning).not.toHaveBeenCalled();
+ });
+ });
+ });
+ });
+ });
+});
diff --git a/src/modules/GroupChannel/context/__tests__/useMessageActions.spec.ts b/src/modules/GroupChannel/context/__tests__/useMessageActions.spec.ts
deleted file mode 100644
index 1741ecc37d..0000000000
--- a/src/modules/GroupChannel/context/__tests__/useMessageActions.spec.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useMessageActions } from '../hooks/useMessageActions';
-import { UserMessageCreateParams, FileMessageCreateParams } from '@sendbird/chat/message';
-
-const mockEventHandlers = {
- message: {
- onSendMessageFailed: jest.fn(),
- onUpdateMessageFailed: jest.fn(),
- onFileUploadFailed: jest.fn(),
- },
-};
-
-jest.mock('../../../../hooks/useSendbirdStateContext', () => ({
- __esModule: true,
- default: () => ({
- eventHandlers: mockEventHandlers,
- }),
-}));
-
-describe('useMessageActions', () => {
- const mockParams = {
- sendUserMessage: jest.fn(),
- sendFileMessage: jest.fn(),
- sendMultipleFilesMessage: jest.fn(),
- updateUserMessage: jest.fn(),
- scrollToBottom: jest.fn(),
- replyType: 'NONE',
- };
-
- beforeEach(() => {
- jest.clearAllMocks();
- });
-
- describe('processParams', () => {
- it('should handle successful user message', async () => {
- const { result } = renderHook(() => useMessageActions(mockParams));
- const params: UserMessageCreateParams = { message: 'test' };
-
- await result.current.sendUserMessage(params);
-
- expect(mockParams.sendUserMessage).toHaveBeenCalledWith(
- expect.objectContaining({ message: 'test' }),
- expect.any(Function),
- );
- });
-
- it('should handle void return from onBeforeSendFileMessage', async () => {
- const onBeforeSendFileMessage = jest.fn();
- const { result } = renderHook(() => useMessageActions({
- ...mockParams,
- onBeforeSendFileMessage,
- }),
- );
-
- const fileParams: FileMessageCreateParams = {
- file: new File([], 'test.txt'),
- };
-
- await result.current.sendFileMessage(fileParams);
-
- expect(onBeforeSendFileMessage).toHaveBeenCalled();
- expect(mockParams.sendFileMessage).toHaveBeenCalledWith(
- expect.objectContaining(fileParams),
- expect.any(Function),
- );
- });
-
- it('should handle file upload error', async () => {
- // Arrange
- const error = new Error('Upload failed');
- const onBeforeSendFileMessage = jest.fn().mockRejectedValue(error);
- const fileParams: FileMessageCreateParams = {
- file: new File([], 'test.txt'),
- fileName: 'test.txt',
- };
-
- const { result } = renderHook(() => useMessageActions({
- ...mockParams,
- onBeforeSendFileMessage,
- }),
- );
-
- await expect(async () => {
- await result.current.sendFileMessage(fileParams);
- }).rejects.toThrow('Upload failed');
-
- // Wait for next tick to ensure all promises are resolved
- await new Promise(process.nextTick);
-
- expect(onBeforeSendFileMessage).toHaveBeenCalled();
- expect(mockEventHandlers.message.onFileUploadFailed).toHaveBeenCalledWith(error);
- expect(mockEventHandlers.message.onSendMessageFailed).toHaveBeenCalledWith(
- expect.objectContaining({
- file: fileParams.file,
- fileName: fileParams.fileName,
- }),
- error,
- );
- });
-
- it('should handle message update error', async () => {
- // Arrange
- const error = new Error('Update failed');
- const onBeforeUpdateUserMessage = jest.fn().mockRejectedValue(error);
- const messageParams = {
- messageId: 1,
- message: 'update message',
- };
-
- const { result } = renderHook(() => useMessageActions({
- ...mockParams,
- onBeforeUpdateUserMessage,
- }),
- );
-
- await expect(async () => {
- await result.current.updateUserMessage(messageParams.messageId, {
- message: messageParams.message,
- });
- }).rejects.toThrow('Update failed');
-
- // Wait for next tick to ensure all promises are resolved
- await new Promise(process.nextTick);
-
- expect(onBeforeUpdateUserMessage).toHaveBeenCalled();
- expect(mockEventHandlers.message.onUpdateMessageFailed).toHaveBeenCalledWith(
- expect.objectContaining({
- message: messageParams.message,
- }),
- error,
- );
- });
-
- it('should preserve modified params from onBefore handlers', async () => {
- const onBeforeSendUserMessage = jest.fn().mockImplementation((params) => ({
- ...params,
- message: 'modified',
- }));
-
- const { result } = renderHook(() => useMessageActions({
- ...mockParams,
- onBeforeSendUserMessage,
- }),
- );
-
- await result.current.sendUserMessage({ message: 'original' });
-
- expect(mockParams.sendUserMessage).toHaveBeenCalledWith(
- expect.objectContaining({ message: 'modified' }),
- expect.any(Function),
- );
- });
- });
-});
diff --git a/src/modules/GroupChannel/context/__tests__/useMessageActions.spec.tsx b/src/modules/GroupChannel/context/__tests__/useMessageActions.spec.tsx
new file mode 100644
index 0000000000..5817a0f8fe
--- /dev/null
+++ b/src/modules/GroupChannel/context/__tests__/useMessageActions.spec.tsx
@@ -0,0 +1,379 @@
+import { renderHook } from '@testing-library/react';
+import { UserMessageCreateParams, FileMessageCreateParams } from '@sendbird/chat/message';
+
+import { useMessageActions } from '../hooks/useMessageActions';
+
+const mockEventHandlers = {
+ message: {
+ onSendMessageFailed: jest.fn(),
+ onUpdateMessageFailed: jest.fn(),
+ onFileUploadFailed: jest.fn(),
+ },
+};
+const mockChannel = {
+ url: 'test-channel',
+ members: [{ userId: '1', nickname: 'user1' }],
+};
+const mockGetChannel = jest.fn().mockResolvedValue(mockChannel);
+const mockMessageCollection = {
+ dispose: jest.fn(),
+ setMessageCollectionHandler: jest.fn(),
+ initialize: jest.fn().mockResolvedValue(null),
+ loadPrevious: jest.fn(),
+ loadNext: jest.fn(),
+};
+jest.mock('../../../../lib/Sendbird/context/hooks/useSendbird', () => ({
+ __esModule: true,
+ default: jest.fn(() => ({
+ state: {
+ eventHandlers: mockEventHandlers,
+ stores: {
+ sdkStore: {
+ sdk: {
+ groupChannel: {
+ getChannel: mockGetChannel,
+ addGroupChannelHandler: jest.fn(),
+ removeGroupChannelHandler: jest.fn(),
+ },
+ createMessageCollection: jest.fn().mockReturnValue(mockMessageCollection),
+ },
+ initialized: true,
+ },
+ },
+ config: {
+ markAsReadScheduler: {
+ push: jest.fn(),
+ },
+ groupChannel: {
+ replyType: 'NONE',
+ threadReplySelectType: 'PARENT',
+ },
+ groupChannelSettings: {
+ enableMessageSearch: true,
+ },
+ isOnline: true,
+ pubSub: {
+ subscribe: () => ({ remove: jest.fn() }),
+ publish: jest.fn(),
+ },
+ },
+ },
+ })),
+}));
+
+describe('useMessageActions', () => {
+ // Setup common mocks
+ const mockSendUserMessage = jest.fn();
+ const mockSendFileMessage = jest.fn();
+ const mockSendMultipleFilesMessage = jest.fn();
+ const mockUpdateUserMessage = jest.fn(async () => {});
+ const mockScrollToBottom = jest.fn();
+
+ // Default params for the hook
+ const defaultParams = {
+ sendUserMessage: mockSendUserMessage,
+ sendFileMessage: mockSendFileMessage,
+ sendMultipleFilesMessage: mockSendMultipleFilesMessage,
+ updateUserMessage: mockUpdateUserMessage,
+ scrollToBottom: mockScrollToBottom,
+ quoteMessage: null,
+ replyType: 'NONE',
+ pubSub: {
+ publish: jest.fn(),
+ },
+ channel: {},
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe('sendUserMessage', () => {
+ it('sends basic message without quote', async () => {
+ const { result } = renderHook(() => useMessageActions(defaultParams));
+ const messageParams = { message: 'test message' };
+
+ mockSendUserMessage.mockResolvedValueOnce({ messageId: 1, message: 'test message' });
+
+ await result.current.sendUserMessage(messageParams);
+
+ expect(mockSendUserMessage).toHaveBeenCalledWith(
+ messageParams,
+ expect.any(Function),
+ );
+ });
+
+ it('includes parent message id when quote message exists', async () => {
+ const paramsWithQuote = {
+ ...defaultParams,
+ quoteMessage: { messageId: 123, message: 'quoted message' },
+ replyType: 'QUOTE_REPLY',
+ };
+
+ const { result } = renderHook(() => useMessageActions(paramsWithQuote));
+ const messageParams = { message: 'test reply' };
+
+ await result.current.sendUserMessage(messageParams);
+
+ expect(mockSendUserMessage).toHaveBeenCalledWith(
+ {
+ ...messageParams,
+ isReplyToChannel: true,
+ parentMessageId: 123,
+ },
+ expect.any(Function),
+ );
+ });
+
+ it('applies onBeforeSendUserMessage hook', async () => {
+ const onBeforeSendUserMessage = jest.fn((params) => ({
+ ...params,
+ message: `Modified: ${params.message}`,
+ }));
+
+ const paramsWithHook = {
+ ...defaultParams,
+ onBeforeSendUserMessage,
+ };
+
+ const { result } = renderHook(() => useMessageActions(paramsWithHook));
+ const messageParams = { message: 'test message' };
+
+ await result.current.sendUserMessage(messageParams);
+
+ expect(onBeforeSendUserMessage).toHaveBeenCalledWith(messageParams);
+ expect(mockSendUserMessage).toHaveBeenCalledWith(
+ {
+ message: 'Modified: test message',
+ },
+ expect.any(Function),
+ );
+ });
+ });
+
+ describe('sendFileMessage', () => {
+ it('sends basic file message', async () => {
+ const { result } = renderHook(() => useMessageActions(defaultParams));
+ const file = new File(['test'], 'test.txt', { type: 'text/plain' });
+ const messageParams = { file };
+
+ await result.current.sendFileMessage(messageParams);
+
+ expect(mockSendFileMessage).toHaveBeenCalledWith(
+ messageParams,
+ expect.any(Function),
+ );
+ });
+
+ it('applies onBeforeSendFileMessage hook', async () => {
+ const onBeforeSendFileMessage = jest.fn((params) => ({
+ ...params,
+ fileName: 'modified.txt',
+ }));
+
+ const paramsWithHook = {
+ ...defaultParams,
+ onBeforeSendFileMessage,
+ };
+
+ const { result } = renderHook(() => useMessageActions(paramsWithHook));
+ const messageParams = { file: new File(['test'], 'test.txt') };
+
+ await result.current.sendFileMessage(messageParams);
+
+ expect(onBeforeSendFileMessage).toHaveBeenCalledWith(messageParams);
+ expect(mockSendFileMessage).toHaveBeenCalledWith(
+ expect.objectContaining({ fileName: 'modified.txt' }),
+ expect.any(Function),
+ );
+ });
+ });
+
+ describe('sendMultipleFilesMessage', () => {
+ it('sends multiple files message', async () => {
+ const { result } = renderHook(() => useMessageActions(defaultParams));
+ const files = [
+ new File(['test1'], 'test1.txt'),
+ new File(['test2'], 'test2.txt'),
+ ];
+ const messageParams = { files };
+
+ await result.current.sendMultipleFilesMessage(messageParams);
+
+ expect(mockSendMultipleFilesMessage).toHaveBeenCalledWith(
+ messageParams,
+ expect.any(Function),
+ );
+ });
+ });
+
+ describe('updateUserMessage', () => {
+ it('updates user message', async () => {
+ const { result } = renderHook(() => useMessageActions(defaultParams));
+ const messageId = 1;
+ const updateParams = { message: 'updated message' };
+
+ await result.current.updateUserMessage(messageId, updateParams);
+
+ expect(mockUpdateUserMessage).toHaveBeenCalledWith(
+ messageId,
+ updateParams,
+ );
+ });
+
+ it('applies onBeforeUpdateUserMessage hook', async () => {
+ const onBeforeUpdateUserMessage = jest.fn((params) => ({
+ ...params,
+ message: `Modified: ${params.message}`,
+ }));
+
+ const paramsWithHook = {
+ ...defaultParams,
+ onBeforeUpdateUserMessage,
+ };
+
+ const { result } = renderHook(() => useMessageActions(paramsWithHook));
+ const messageId = 1;
+ const updateParams = { message: 'update test' };
+
+ await result.current.updateUserMessage(messageId, updateParams);
+
+ expect(onBeforeUpdateUserMessage).toHaveBeenCalledWith(updateParams);
+ expect(mockUpdateUserMessage).toHaveBeenCalledWith(
+ messageId,
+ {
+ message: 'Modified: update test',
+ },
+ );
+ });
+ });
+
+ describe('processParams', () => {
+ const mockParams = {
+ sendUserMessage: jest.fn(),
+ sendFileMessage: jest.fn(),
+ sendMultipleFilesMessage: jest.fn(),
+ updateUserMessage: jest.fn(),
+ scrollToBottom: jest.fn(),
+ replyType: 'NONE',
+ };
+ it('should handle successful user message', async () => {
+ const { result } = renderHook(() => useMessageActions(mockParams));
+ const params: UserMessageCreateParams = { message: 'test' };
+
+ await result.current.sendUserMessage(params);
+
+ expect(mockParams.sendUserMessage).toHaveBeenCalledWith(
+ expect.objectContaining({ message: 'test' }),
+ expect.any(Function),
+ );
+ });
+
+ it('should handle void return from onBeforeSendFileMessage', async () => {
+ const onBeforeSendFileMessage = jest.fn();
+ const { result } = renderHook(() => useMessageActions({
+ ...mockParams,
+ onBeforeSendFileMessage,
+ }),
+ );
+
+ const fileParams: FileMessageCreateParams = {
+ file: new File([], 'test.txt'),
+ };
+
+ await result.current.sendFileMessage(fileParams);
+
+ expect(onBeforeSendFileMessage).toHaveBeenCalled();
+ expect(mockParams.sendFileMessage).toHaveBeenCalledWith(
+ expect.objectContaining(fileParams),
+ expect.any(Function),
+ );
+ });
+
+ it('should handle file upload error', async () => {
+ // Arrange
+ const error = new Error('Upload failed');
+ const onBeforeSendFileMessage = jest.fn().mockRejectedValue(error);
+ const fileParams: FileMessageCreateParams = {
+ file: new File([], 'test.txt'),
+ fileName: 'test.txt',
+ };
+
+ const { result } = renderHook(() => useMessageActions({
+ ...mockParams,
+ onBeforeSendFileMessage,
+ }),
+ );
+
+ await expect(async () => {
+ await result.current.sendFileMessage(fileParams);
+ }).rejects.toThrow('Upload failed');
+
+ // Wait for next tick to ensure all promises are resolved
+ await new Promise(process.nextTick);
+
+ expect(onBeforeSendFileMessage).toHaveBeenCalled();
+ expect(mockEventHandlers.message.onFileUploadFailed).toHaveBeenCalledWith(error);
+ expect(mockEventHandlers.message.onSendMessageFailed).toHaveBeenCalledWith(
+ expect.objectContaining({
+ file: fileParams.file,
+ fileName: fileParams.fileName,
+ }),
+ error,
+ );
+ });
+
+ it('should handle message update error', async () => {
+ // Arrange
+ const error = new Error('Update failed');
+ const onBeforeUpdateUserMessage = jest.fn().mockRejectedValue(error);
+ const messageParams = {
+ messageId: 1,
+ message: 'update message',
+ };
+
+ const { result } = renderHook(() => useMessageActions({
+ ...mockParams,
+ onBeforeUpdateUserMessage,
+ }),
+ );
+
+ await expect(async () => {
+ await result.current.updateUserMessage(messageParams.messageId, {
+ message: messageParams.message,
+ });
+ }).rejects.toThrow('Update failed');
+
+ // Wait for next tick to ensure all promises are resolved
+ await new Promise(process.nextTick);
+
+ expect(onBeforeUpdateUserMessage).toHaveBeenCalled();
+ expect(mockEventHandlers.message.onUpdateMessageFailed).toHaveBeenCalledWith(
+ expect.objectContaining({
+ message: messageParams.message,
+ }),
+ error,
+ );
+ });
+
+ it('should preserve modified params from onBefore handlers', async () => {
+ const onBeforeSendUserMessage = jest.fn().mockImplementation((params) => ({
+ ...params,
+ message: 'modified',
+ }));
+
+ const { result } = renderHook(() => useMessageActions({
+ ...mockParams,
+ onBeforeSendUserMessage,
+ }),
+ );
+
+ await result.current.sendUserMessage({ message: 'original' });
+
+ expect(mockParams.sendUserMessage).toHaveBeenCalledWith(
+ expect.objectContaining({ message: 'modified' }),
+ expect.any(Function),
+ );
+ });
+ });
+});
diff --git a/src/modules/GroupChannel/context/__tests__/useMessageListScroll.spec.tsx b/src/modules/GroupChannel/context/__tests__/useMessageListScroll.spec.tsx
new file mode 100644
index 0000000000..5fd37c1d2a
--- /dev/null
+++ b/src/modules/GroupChannel/context/__tests__/useMessageListScroll.spec.tsx
@@ -0,0 +1,299 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useMessageListScroll } from '../hooks/useMessageListScroll';
+import { useGroupChannel } from '../hooks/useGroupChannel';
+
+jest.mock('../hooks/useGroupChannel', () => ({
+ useGroupChannel: jest.fn(),
+}));
+
+describe('useMessageListScroll', () => {
+ const mockSetIsScrollBottomReached = jest.fn();
+
+ beforeEach(() => {
+ (useGroupChannel as jest.Mock).mockImplementation(() => ({
+ state: { isScrollBottomReached: true },
+ actions: { setIsScrollBottomReached: mockSetIsScrollBottomReached },
+ }));
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe('Initialization and Basic Behavior', () => {
+ it('should set the initial state correctly', () => {
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+
+ expect(result.current.scrollRef.current).toBe(null);
+ expect(result.current.scrollDistanceFromBottomRef.current).toBe(0);
+ expect(result.current.scrollPositionRef.current).toBe(0);
+ expect(typeof result.current.scrollPubSub.publish).toBe('function');
+ expect(typeof result.current.scrollPubSub.subscribe).toBe('function');
+ });
+ });
+
+ describe('scrollToBottom', () => {
+ it('should call resolve only if scrollRef is null', async () => {
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+ const resolveMock = jest.fn();
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scrollToBottom', { resolve: resolveMock });
+ await waitFor(() => {
+ expect(resolveMock).toHaveBeenCalled();
+ });
+ });
+ });
+
+ it('should update scroll position refs when scrolling to bottom', async () => {
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+ const mockScrollRef = {
+ current: {
+ scrollHeight: 1000,
+ clientHeight: 500,
+ scrollTop: 0,
+ scroll: jest.fn(),
+ },
+ };
+ // @ts-ignore
+ result.current.scrollRef = mockScrollRef;
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scrollToBottom', {});
+ await waitFor(() => {
+ expect(result.current.scrollDistanceFromBottomRef.current).toBe(0);
+ expect(mockSetIsScrollBottomReached).toHaveBeenCalledWith(true);
+ });
+ });
+ });
+
+ it('should update scroll position refs when scrolling to specific position', async () => {
+ const mockElement = document.createElement('div');
+ Object.defineProperties(mockElement, {
+ scrollHeight: { value: 1000, configurable: true },
+ clientHeight: { value: 500, configurable: true },
+ scrollTop: {
+ value: 300,
+ writable: true,
+ configurable: true,
+ },
+ scroll: {
+ value: jest.fn(),
+ configurable: true,
+ },
+ });
+
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+
+ await act(async () => {
+ // @ts-ignore
+ result.current.scrollRef.current = mockElement;
+ result.current.scrollPubSub.publish('scroll', {
+ top: 300,
+ lazy: false,
+ });
+
+ await waitFor(() => {
+ expect(result.current.scrollDistanceFromBottomRef.current).toBe(200);
+ expect(mockSetIsScrollBottomReached).toHaveBeenCalledWith(true);
+ });
+ });
+ });
+
+ it('should use scrollTop if scroll method is not defined', async () => {
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+
+ const mockScrollElement = {
+ scrollHeight: 1000,
+ scrollTop: 0,
+ };
+
+ // @ts-ignore
+ result.current.scrollRef.current = mockScrollElement;
+
+ await act(async () => {
+ const promise = new Promise((resolve) => {
+ result.current.scrollPubSub.publish('scrollToBottom', { resolve });
+ });
+ await promise;
+ });
+
+ expect(mockScrollElement.scrollTop).toBe(1000);
+ });
+
+ it('should use smooth behavior if behavior parameter is smooth', async () => {
+ const { result } = renderHook(() => useMessageListScroll('smooth'));
+
+ const mockScroll = jest.fn();
+ const mockScrollElement = {
+ scroll: mockScroll,
+ scrollHeight: 1000,
+ };
+
+ // @ts-ignore
+ result.current.scrollRef.current = mockScrollElement;
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scrollToBottom', {});
+ await waitFor(() => {
+ expect(mockScroll).toHaveBeenCalledWith({
+ top: 1000,
+ behavior: 'smooth',
+ });
+ });
+ });
+ });
+ });
+
+ describe('scroll', () => {
+ it('should do nothing if scrollRef is null', async () => {
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+ const resolveMock = jest.fn();
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scroll', { resolve: resolveMock });
+ });
+
+ expect(resolveMock).not.toHaveBeenCalled();
+ });
+
+ it('should use scrollTop if scroll method is not defined', async () => {
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+
+ const mockScrollElement = {
+ scrollHeight: 1000,
+ scrollTop: 0,
+ clientHeight: 500,
+ };
+
+ // @ts-ignore
+ result.current.scrollRef.current = mockScrollElement;
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scroll', { top: 300 });
+ await waitFor(() => {
+ expect(mockScrollElement.scrollTop).toBe(300);
+ });
+ });
+ });
+
+ it('should not change the scroll position if top is not defined', async () => {
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+
+ const mockScroll = jest.fn();
+ const mockScrollElement = {
+ scroll: mockScroll,
+ scrollHeight: 1000,
+ scrollTop: 100,
+ clientHeight: 500,
+ };
+
+ // @ts-ignore
+ result.current.scrollRef.current = mockScrollElement;
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scroll', {});
+ });
+
+ expect(mockScroll).not.toHaveBeenCalled();
+ });
+
+ it('should execute immediately if lazy option is false', async () => {
+ jest.useFakeTimers();
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+
+ const mockScroll = jest.fn();
+ const mockScrollElement = {
+ scroll: mockScroll,
+ scrollHeight: 1000,
+ scrollTop: 0,
+ clientHeight: 500,
+ };
+
+ // @ts-ignore
+ result.current.scrollRef.current = mockScrollElement;
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scroll', { top: 300, lazy: false });
+ });
+
+ expect(mockScroll).toHaveBeenCalledWith({
+ top: 300,
+ behavior: 'auto',
+ });
+ jest.useRealTimers();
+ });
+ });
+
+ describe('deps change', () => {
+ it('should reset all states if deps change', () => {
+ const mockScrollElement = {
+ scrollHeight: 1000,
+ scrollTop: 0,
+ };
+
+ const { rerender } = renderHook(
+ ({ deps }) => useMessageListScroll('auto', deps),
+ { initialProps: { deps: ['initial'] } },
+ );
+
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+ // @ts-ignore
+ result.current.scrollRef.current = mockScrollElement;
+
+ rerender({ deps: ['updated'] });
+
+ expect(mockSetIsScrollBottomReached).toHaveBeenCalledWith(true);
+ expect(result.current.scrollDistanceFromBottomRef.current).toBe(0);
+ expect(result.current.scrollPositionRef.current).toBe(0);
+ });
+ });
+
+ describe('getScrollBehavior utility', () => {
+ it('should return smooth if animated is true', async () => {
+ const { result } = renderHook(() => useMessageListScroll('auto'));
+
+ const mockScroll = jest.fn();
+ const mockScrollElement = {
+ scroll: mockScroll,
+ scrollHeight: 1000,
+ };
+
+ // @ts-ignore
+ result.current.scrollRef.current = mockScrollElement;
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scroll', { top: 300, animated: true });
+ await waitFor(() => {
+ expect(mockScroll).toHaveBeenCalledWith({
+ top: 300,
+ behavior: 'smooth',
+ });
+ });
+ });
+ });
+
+ it('should return auto if animated is false', async () => {
+ const { result } = renderHook(() => useMessageListScroll('smooth'));
+
+ const mockScroll = jest.fn();
+ const mockScrollElement = {
+ scroll: mockScroll,
+ scrollHeight: 1000,
+ };
+
+ // @ts-ignore
+ result.current.scrollRef.current = mockScrollElement;
+
+ await act(async () => {
+ result.current.scrollPubSub.publish('scroll', { top: 300, animated: false });
+ await waitFor(() => {
+ expect(mockScroll).toHaveBeenCalledWith({
+ top: 300,
+ behavior: 'auto',
+ });
+ });
+ });
+ });
+ });
+});
diff --git a/src/modules/GroupChannel/context/__tests__/utils.spec.ts b/src/modules/GroupChannel/context/__tests__/utils.spec.ts
new file mode 100644
index 0000000000..5eec81164e
--- /dev/null
+++ b/src/modules/GroupChannel/context/__tests__/utils.spec.ts
@@ -0,0 +1,160 @@
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import { Role } from '@sendbird/chat';
+import {
+ getComponentKeyFromMessage,
+ isContextMenuClosed,
+ getMessageTopOffset,
+ isDisabledBecauseFrozen,
+ isDisabledBecauseMuted,
+ isDisabledBecauseSuggestedReplies,
+ isFormVersionCompatible,
+ isDisabledBecauseMessageForm,
+} from '../utils';
+import { UIKIT_COMPATIBLE_FORM_VERSION } from '../const';
+
+describe('GroupChannel utils', () => {
+ describe('getComponentKeyFromMessage', () => {
+ it('should return messageId if sendingStatus is succeeded', () => {
+ const message = {
+ messageId: 12345,
+ sendingStatus: 'succeeded',
+ };
+ expect(getComponentKeyFromMessage(message)).toBe('12345');
+ });
+
+ it('should return reqId if sendingStatus is pending', () => {
+ const message = {
+ messageId: 12345,
+ reqId: 'temp-id-123',
+ sendingStatus: 'pending',
+ };
+ expect(getComponentKeyFromMessage(message)).toBe('temp-id-123');
+ });
+ });
+
+ describe('isContextMenuClosed', () => {
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ it('should return true if dropdown and emoji portal are empty', () => {
+ document.body.innerHTML = `
+
+
+ `;
+ expect(isContextMenuClosed()).toBe(true);
+ });
+
+ it('should return false if dropdown or emoji portal has content', () => {
+ document.body.innerHTML = `
+
+
+ `;
+ expect(isContextMenuClosed()).toBe(false);
+ });
+ });
+
+ describe('getMessageTopOffset', () => {
+ const mockCreatedAt = 1234567890;
+
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ it('should return offsetTop if message element exists', () => {
+ document.body.innerHTML = `
+
+ `;
+ const element = document.querySelector('[data-sb-created-at="1234567890"]');
+ Object.defineProperty(element, 'offsetTop', {
+ configurable: true,
+ value: 100,
+ });
+ expect(getMessageTopOffset(mockCreatedAt)).toBe(100);
+ });
+
+ it('should return null if message element does not exist', () => {
+ expect(getMessageTopOffset(mockCreatedAt)).toBe(null);
+ });
+ });
+
+ describe('isDisabledBecauseFrozen', () => {
+ it('should return true if channel is frozen and user is not operator', () => {
+ const channel = {
+ isFrozen: true,
+ myRole: Role.NONE,
+ } as GroupChannel;
+ expect(isDisabledBecauseFrozen(channel)).toBe(true);
+ });
+
+ it('should return false if channel is not frozen or user is operator', () => {
+ expect(isDisabledBecauseFrozen({ isFrozen: false, myRole: Role.NONE } as GroupChannel)).toBe(false);
+ expect(isDisabledBecauseFrozen({ isFrozen: true, myRole: Role.OPERATOR } as GroupChannel)).toBe(false);
+ });
+ });
+
+ describe('isDisabledBecauseMuted', () => {
+ it('should return true if user is muted', () => {
+ const channel = { myMutedState: 'muted' } as GroupChannel;
+ expect(isDisabledBecauseMuted(channel)).toBe(true);
+ });
+
+ it('should return false if user is not muted', () => {
+ const channel = { myMutedState: 'unmuted' } as GroupChannel;
+ expect(isDisabledBecauseMuted(channel)).toBe(false);
+ });
+ });
+
+ describe('isDisabledBecauseSuggestedReplies', () => {
+ it('should return true if suggested replies are enabled and chat input is disabled', () => {
+ const channel = {
+ lastMessage: {
+ extendedMessagePayload: {
+ suggested_replies: ['reply1', 'reply2'],
+ disable_chat_input: true,
+ },
+ },
+ };
+ expect(isDisabledBecauseSuggestedReplies(channel as any, true)).toBe(true);
+ });
+ });
+
+ describe('isFormVersionCompatible', () => {
+ it('should return true if version is compatible', () => {
+ expect(isFormVersionCompatible(UIKIT_COMPATIBLE_FORM_VERSION)).toBe(true);
+ expect(isFormVersionCompatible(UIKIT_COMPATIBLE_FORM_VERSION - 1)).toBe(true);
+ });
+
+ it('should return false if version is not compatible', () => {
+ expect(isFormVersionCompatible(UIKIT_COMPATIBLE_FORM_VERSION + 1)).toBe(false);
+ });
+ });
+
+ describe('isDisabledBecauseMessageForm', () => {
+ it('should return true if there is an unsent form and chat input is disabled', () => {
+ const messages = [{
+ messageForm: {
+ isSubmitted: false,
+ version: UIKIT_COMPATIBLE_FORM_VERSION,
+ },
+ extendedMessagePayload: {
+ disable_chat_input: true,
+ },
+ }];
+ expect(isDisabledBecauseMessageForm(messages as any, true)).toBe(true);
+ });
+
+ it('should return false if there is no form or it is already submitted', () => {
+ const messages = [{
+ messageForm: {
+ isSubmitted: true,
+ version: UIKIT_COMPATIBLE_FORM_VERSION,
+ },
+ extendedMessagePayload: {
+ disable_chat_input: true,
+ },
+ }];
+ expect(isDisabledBecauseMessageForm(messages as any, true)).toBe(false);
+ });
+ });
+});
diff --git a/src/modules/GroupChannel/context/hooks/useGroupChannel.ts b/src/modules/GroupChannel/context/hooks/useGroupChannel.ts
new file mode 100644
index 0000000000..445bcbe2f7
--- /dev/null
+++ b/src/modules/GroupChannel/context/hooks/useGroupChannel.ts
@@ -0,0 +1,210 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useContext, useCallback, useMemo } from 'react';
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import type { SendbirdError } from '@sendbird/chat';
+
+import type {
+ FileMessage,
+ FileMessageCreateParams,
+ MultipleFilesMessage,
+ MultipleFilesMessageCreateParams,
+ UserMessage,
+ UserMessageCreateParams,
+ UserMessageUpdateParams,
+} from '@sendbird/chat/message';
+
+import { SendableMessageType } from '../../../../utils';
+import { getMessageTopOffset } from '../utils';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
+import { GroupChannelContext } from '../GroupChannelProvider';
+import type { GroupChannelState, MessageActions } from '../types';
+import { useMessageActions } from './useMessageActions';
+import { delay } from '../../../../utils/utils';
+
+export interface GroupChannelActions extends MessageActions {
+ // Channel actions
+ setCurrentChannel: (channel: GroupChannel) => void;
+ handleChannelError: (error: SendbirdError) => void;
+
+ // Message actions
+ sendUserMessage: (params: UserMessageCreateParams) => Promise;
+ sendFileMessage: (params: FileMessageCreateParams) => Promise;
+ sendMultipleFilesMessage: (params: MultipleFilesMessageCreateParams) => Promise;
+ updateUserMessage: (messageId: number, params: UserMessageUpdateParams) => Promise;
+
+ // UI actions
+ setQuoteMessage: (message: SendableMessageType | null) => void;
+ setAnimatedMessageId: (messageId: number | null) => void;
+ setIsScrollBottomReached: (isReached: boolean) => void;
+
+ // Scroll actions
+ scrollToBottom: (animated?: boolean) => Promise;
+ scrollToMessage: (
+ createdAt: number,
+ messageId: number,
+ messageFocusAnimated?: boolean,
+ scrollAnimated?: boolean
+ ) => Promise;
+
+ // Reaction action
+ toggleReaction: (message: SendableMessageType, emojiKey: string, isReacted: boolean) => void;
+}
+
+export const useGroupChannel = () => {
+ const store = useContext(GroupChannelContext);
+ if (!store) throw new Error('useGroupChannel must be used within a GroupChannelProvider');
+
+ const { state: { config } } = useSendbird();
+ const { markAsReadScheduler } = config;
+ const state: GroupChannelState = useSyncExternalStore(store.subscribe, store.getState);
+
+ const setAnimatedMessageId = useCallback((messageId: number | null) => {
+ store.setState(state => ({ ...state, animatedMessageId: messageId }));
+ }, []);
+
+ const setIsScrollBottomReached = useCallback((isReached: boolean) => {
+ store.setState(state => ({ ...state, isScrollBottomReached: isReached }));
+ }, []);
+
+ const scrollToBottom = useCallback(async (animated?: boolean) => {
+ if (!state.scrollRef.current) return;
+ setAnimatedMessageId(null);
+ setIsScrollBottomReached(true);
+
+ // wait a bit for scroll ref to be updated
+ await delay();
+ if (config.isOnline && state.hasNext()) {
+ await state.resetWithStartingPoint(Number.MAX_SAFE_INTEGER);
+ }
+ state.scrollPubSub.publish('scrollToBottom', { animated });
+
+ if (state.currentChannel && !state.hasNext()) {
+ state.resetNewMessages();
+ if (!state.disableMarkAsRead) {
+ markAsReadScheduler.push(state.currentChannel);
+ }
+ }
+ }, [state.scrollRef.current, config.isOnline, markAsReadScheduler]);
+
+ const scrollToMessage = useCallback(async (
+ createdAt: number,
+ messageId: number,
+ messageFocusAnimated?: boolean,
+ scrollAnimated?: boolean,
+ ) => {
+ const element = state.scrollRef.current;
+ const parentNode = element?.parentNode as HTMLDivElement;
+ const clickHandler = {
+ activate() {
+ if (!element || !parentNode) return;
+ element.style.pointerEvents = 'auto';
+ parentNode.style.cursor = 'auto';
+ },
+ deactivate() {
+ if (!element || !parentNode) return;
+ element.style.pointerEvents = 'none';
+ parentNode.style.cursor = 'wait';
+ },
+ };
+
+ clickHandler.deactivate();
+
+ setAnimatedMessageId(null);
+ const message = state.messages.find(
+ (it) => it.messageId === messageId || it.createdAt === createdAt,
+ );
+
+ if (message) {
+ const topOffset = getMessageTopOffset(message.createdAt);
+ if (topOffset) state.scrollPubSub.publish('scroll', { top: topOffset, animated: scrollAnimated });
+ if (messageFocusAnimated ?? true) setAnimatedMessageId(messageId);
+ } else {
+ await state.resetWithStartingPoint(createdAt);
+ setTimeout(() => {
+ const topOffset = getMessageTopOffset(createdAt);
+ if (topOffset) {
+ state.scrollPubSub.publish('scroll', {
+ top: topOffset,
+ lazy: false,
+ animated: scrollAnimated,
+ });
+ }
+ if (messageFocusAnimated ?? true) setAnimatedMessageId(messageId);
+ });
+ }
+ clickHandler.activate();
+ }, [setAnimatedMessageId, state.scrollRef.current, state.messages?.map(it => it?.messageId)]);
+
+ const toggleReaction = useCallback((message: SendableMessageType, emojiKey: string, isReacted: boolean) => {
+ if (!state.currentChannel) return;
+ if (isReacted) {
+ state.currentChannel.deleteReaction(message, emojiKey)
+ .catch(error => {
+ config.logger?.warning('Failed to delete reaction:', error);
+ });
+ } else {
+ state.currentChannel.addReaction(message, emojiKey)
+ .catch(error => {
+ config.logger?.warning('Failed to add reaction:', error);
+ });
+ }
+ }, [state.currentChannel?.deleteReaction, state.currentChannel?.addReaction]);
+
+ const messageActions = useMessageActions({
+ ...state,
+ scrollToBottom,
+ });
+
+ const setCurrentChannel = useCallback((channel: GroupChannel) => {
+ store.setState(state => ({
+ ...state,
+ currentChannel: channel,
+ fetchChannelError: null,
+ quoteMessage: null,
+ animatedMessageId: null,
+ nicknamesMap: new Map(
+ channel.members.map(({ userId, nickname }) => [userId, nickname]),
+ ),
+ }), true);
+ }, []);
+
+ const handleChannelError = useCallback((error: SendbirdError) => {
+ store.setState(state => ({
+ ...state,
+ currentChannel: null,
+ fetchChannelError: error,
+ quoteMessage: null,
+ animatedMessageId: null,
+ }));
+ }, []);
+
+ const setQuoteMessage = useCallback((message: SendableMessageType | null) => {
+ store.setState(state => ({ ...state, quoteMessage: message }));
+ }, []);
+
+ const actions: GroupChannelActions = useMemo(() => {
+ return {
+ setCurrentChannel,
+ handleChannelError,
+ setQuoteMessage,
+ scrollToBottom,
+ scrollToMessage,
+ toggleReaction,
+ setAnimatedMessageId,
+ setIsScrollBottomReached,
+ ...messageActions,
+ };
+ }, [
+ setCurrentChannel,
+ handleChannelError,
+ setQuoteMessage,
+ scrollToBottom,
+ scrollToMessage,
+ toggleReaction,
+ setAnimatedMessageId,
+ setIsScrollBottomReached,
+ messageActions,
+ ]);
+
+ return { state, actions };
+};
diff --git a/src/modules/GroupChannel/context/hooks/useMessageActions.ts b/src/modules/GroupChannel/context/hooks/useMessageActions.ts
index e588ff815f..d2d6d8958e 100644
--- a/src/modules/GroupChannel/context/hooks/useMessageActions.ts
+++ b/src/modules/GroupChannel/context/hooks/useMessageActions.ts
@@ -20,11 +20,10 @@ import {
VOICE_MESSAGE_FILE_NAME,
VOICE_MESSAGE_MIME_TYPE,
} from '../../../../utils/consts';
-import type { CoreMessageType, SendableMessageType } from '../../../../utils';
-import type { ReplyType } from '../../../../types';
-import type { GroupChannelProviderProps, OnBeforeHandler } from '../GroupChannelProvider';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-import { PublishingModuleType, PUBSUB_TOPICS, SBUGlobalPubSub } from '../../../../lib/pubSub/topics';
+import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
+import type { GroupChannelState, OnBeforeHandler } from '../types';
+import type { CoreMessageType } from '../../../../utils';
+import { PublishingModuleType, PUBSUB_TOPICS } from '../../../../lib/pubSub/topics';
import { GroupChannel } from '@sendbird/chat/groupChannel';
type MessageListDataSource = ReturnType;
@@ -34,14 +33,11 @@ type MessageActions = {
sendVoiceMessage: (params: FileMessageCreateParams, duration: number) => Promise;
sendMultipleFilesMessage: (params: MultipleFilesMessageCreateParams) => Promise;
updateUserMessage: (messageId: number, params: UserMessageUpdateParams) => Promise;
-};
+} & Partial;
-interface Params extends GroupChannelProviderProps, MessageListDataSource {
+interface Params extends GroupChannelState {
scrollToBottom(animated?: boolean): Promise;
- quoteMessage?: SendableMessageType | null;
- replyType: ReplyType;
- pubSub: SBUGlobalPubSub;
- channel: GroupChannel;
+ currentChannel: GroupChannel;
}
const pass = (value: T) => value;
@@ -68,14 +64,24 @@ export function useMessageActions(params: Params): MessageActions {
sendMultipleFilesMessage,
sendUserMessage,
updateUserMessage,
+ updateFileMessage,
+ resendMessage,
+ deleteMessage,
+ resetNewMessages,
scrollToBottom,
quoteMessage,
replyType,
- channel,
- pubSub,
+ currentChannel,
} = params;
- const { eventHandlers } = useSendbirdStateContext();
+ const {
+ state: {
+ eventHandlers,
+ config: {
+ pubSub,
+ },
+ },
+ } = useSendbird();
const buildInternalMessageParams = useCallback(
(basicParams: T): T => {
const messageParams = { ...basicParams } as T;
@@ -194,7 +200,7 @@ export function useMessageActions(params: Params): MessageActions {
return updateUserMessage(messageId, processedParams)
.then((message) => {
pubSub.publish(PUBSUB_TOPICS.UPDATE_USER_MESSAGE, {
- channel,
+ channel: currentChannel,
message,
publishingModules: [PublishingModuleType.CHANNEL],
});
@@ -202,7 +208,11 @@ export function useMessageActions(params: Params): MessageActions {
return message;
});
},
- [buildInternalMessageParams, updateUserMessage, processParams, channel?.url],
+ [buildInternalMessageParams, updateUserMessage, processParams, currentChannel?.url],
),
+ updateFileMessage,
+ resendMessage,
+ deleteMessage,
+ resetNewMessages,
};
}
diff --git a/src/modules/GroupChannel/context/hooks/useMessageListScroll.tsx b/src/modules/GroupChannel/context/hooks/useMessageListScroll.tsx
index bce7be5528..084b288c7b 100644
--- a/src/modules/GroupChannel/context/hooks/useMessageListScroll.tsx
+++ b/src/modules/GroupChannel/context/hooks/useMessageListScroll.tsx
@@ -1,5 +1,6 @@
import { DependencyList, useLayoutEffect, useRef, useState } from 'react';
import pubSubFactory from '../../../../lib/pubSub';
+import { useGroupChannel } from './useGroupChannel';
/**
* You can pass the resolve function to scrollPubSub, if you want to catch when the scroll is finished.
@@ -30,7 +31,9 @@ export function useMessageListScroll(behavior: 'smooth' | 'auto', deps: Dependen
const scrollDistanceFromBottomRef = useRef(0);
const [scrollPubSub] = useState(() => pubSubFactory({ publishSynchronous: true }));
- const [isScrollBottomReached, setIsScrollBottomReached] = useState(true);
+ const {
+ actions: { setIsScrollBottomReached },
+ } = useGroupChannel();
// SideEffect: Reset scroll state
useLayoutEffect(() => {
@@ -95,8 +98,6 @@ export function useMessageListScroll(behavior: 'smooth' | 'auto', deps: Dependen
return {
scrollRef,
scrollPubSub,
- isScrollBottomReached,
- setIsScrollBottomReached,
scrollDistanceFromBottomRef,
scrollPositionRef,
};
diff --git a/src/modules/GroupChannel/context/hooks/useToggleReactionCallback.ts b/src/modules/GroupChannel/context/hooks/useToggleReactionCallback.ts
deleted file mode 100644
index e9cb60d553..0000000000
--- a/src/modules/GroupChannel/context/hooks/useToggleReactionCallback.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useCallback } from 'react';
-import { GroupChannel } from '@sendbird/chat/groupChannel';
-import { LoggerInterface } from '../../../../lib/Logger';
-import { BaseMessage } from '@sendbird/chat/message';
-
-const LOG_PRESET = 'useToggleReactionCallback:';
-
-export default function useToggleReactionCallback(
- currentChannel: GroupChannel | null,
- logger?: LoggerInterface,
-) {
- return useCallback(
- (message: BaseMessage, key: string, isReacted: boolean) => {
- if (!currentChannel) {
- logger?.warning(`${LOG_PRESET} currentChannel doesn't exist`, currentChannel);
- return;
- }
- if (isReacted) {
- currentChannel
- .deleteReaction(message, key)
- .then((res) => {
- logger?.info(`${LOG_PRESET} Delete reaction success`, res);
- })
- .catch((err) => {
- logger?.warning(`${LOG_PRESET} Delete reaction failed`, err);
- });
- } else {
- currentChannel
- .addReaction(message, key)
- .then((res) => {
- logger?.info(`${LOG_PRESET} Add reaction success`, res);
- })
- .catch((err) => {
- logger?.warning(`${LOG_PRESET} Add reaction failed`, err);
- });
- }
- },
- [currentChannel],
- );
-}
diff --git a/src/modules/GroupChannel/context/index.tsx b/src/modules/GroupChannel/context/index.tsx
new file mode 100644
index 0000000000..2c13c89e0c
--- /dev/null
+++ b/src/modules/GroupChannel/context/index.tsx
@@ -0,0 +1,2 @@
+export * from './GroupChannelProvider';
+export { useGroupChannel } from './hooks/useGroupChannel';
diff --git a/src/modules/GroupChannel/context/types.ts b/src/modules/GroupChannel/context/types.ts
new file mode 100644
index 0000000000..76cff319e3
--- /dev/null
+++ b/src/modules/GroupChannel/context/types.ts
@@ -0,0 +1,118 @@
+import type { EmojiCategory, SendbirdError, User } from '@sendbird/chat';
+import {
+ type FileMessage,
+ FileMessageCreateParams,
+ type MultipleFilesMessage,
+ MultipleFilesMessageCreateParams,
+ UserMessageCreateParams,
+ UserMessageUpdateParams,
+} from '@sendbird/chat/message';
+import type { GroupChannel, MessageCollectionParams, MessageFilterParams } from '@sendbird/chat/groupChannel';
+import type { PubSubTypes } from '../../../lib/pubSub';
+import type { ScrollTopics, ScrollTopicUnion } from './hooks/useMessageListScroll';
+import type { SendableMessageType } from '../../../utils';
+import type { UserProfileProviderProps } from '../../../lib/UserProfileContext';
+import { ReplyType } from '../../../types';
+import { useMessageActions } from './hooks/useMessageActions';
+import { useGroupChannelMessages } from '@sendbird/uikit-tools';
+import { ThreadReplySelectType } from './const';
+import { PropsWithChildren } from 'react';
+
+// Message data source types
+type MessageDataSource = ReturnType;
+export type MessageActions = ReturnType;
+export type MessageListQueryParamsType = Omit & MessageFilterParams;
+
+// Handler types
+export type OnBeforeHandler