Migrate CreateChannelProvider

Author: git-babel

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,10 +16,14 @@ const CreateChannel: React.FC<CreateChannelUIProps> = (props: CreateChannelUIPro
   const { onCancel, renderStepOne } = props;
 
   const {
-    step,
-    setStep,
-    userListQuery,
-  } = useCreateChannelContext();
+    state: {
+      step,
+      userListQuery,
+    },
+    actions: {
+      setStep,
+    },
+  } = useCreateChannel();
 
   return (
     <>

src/modules/CreateChannel/components/InviteUsers/index.tsx

@@ -4,7 +4,6 @@ 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 { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
 import Modal from '../../../../ui/Modal';
@@ -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,14 +28,16 @@ const InviteUsers: React.FC<InviteUsersProps> = ({
   userListQuery,
 }: InviteUsersProps) => {
   const {
-    onCreateChannelClick,
-    onBeforeCreateChannel,
-    onChannelCreated,
-    createChannel,
-    onCreateChannel,
-    overrideInviteUser,
-    type,
-  } = useCreateChannelContext();
+    state: {
+      onCreateChannelClick,
+      onBeforeCreateChannel,
+      onChannelCreated,
+      createChannel,
+      onCreateChannel,
+      overrideInviteUser,
+      type,
+    },
+  } = useCreateChannel();
 
   const globalStore = useSendbirdStateContext();
   const userId = globalStore?.config?.userId;

src/modules/CreateChannel/components/SelectChannelType.tsx

@@ -3,8 +3,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';
 import Icon, { IconTypes, IconColors } from '../../../ui/Icon';
@@ -16,6 +14,7 @@ import {
   isSuperGroupChannelEnabled,
 } from '../utils';
 import { CHANNEL_TYPE } from '../types';
+import { useCreateChannel } from '../context/useCreateChannel';
 
 export interface SelectChannelTypeProps {
   onCancel?(): void;
@@ -27,11 +26,12 @@ const SelectChannelType: React.FC<SelectChannelTypeProps> = (props: SelectChanne
 
   const sdk = sendbirdSelectors.getSdk(store);
 
-  const createChannelProps = useCreateChannelContext();
   const {
-    setStep,
-    setType,
-  } = createChannelProps;
+    actions: {
+      setStep,
+      setType,
+    },
+  } = useCreateChannel();
 
   const { stringSet } = useContext(LocalizationContext);
 

src/modules/CreateChannel/context/CreateChannelProvider.tsx

@@ -1,16 +1,32 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { User } from '@sendbird/chat';
 import type {
   GroupChannel,
   GroupChannelCreateParams,
 } from '@sendbird/chat/groupChannel';
 
-import { getCreateGroupChannel } from '../../../lib/selectors';
 import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
 import { CHANNEL_TYPE } from '../types';
 import { SendbirdChatType } from '../../../lib/types';
-
-const CreateChannelContext = React.createContext<CreateChannelContextInterface | null>(null);
+import { createStore } from '../../../utils/storeManager';
+import { useStore } from '../../../hooks/useStore';
+
+const CreateChannelContext = React.createContext<ReturnType<typeof createStore<CreateChannelState>> | null>(null);
+
+const initialState = {
+  sdk: undefined,
+  createChannel: undefined,
+  userListQuery: undefined,
+  onCreateChannelClick: undefined,
+  onChannelCreated: undefined,
+  onBeforeCreateChannel: undefined,
+  step: 0,
+  setStep: () => {},
+  type: CHANNEL_TYPE.GROUP,
+  setType: () => {},
+  onCreateChannel: undefined,
+  overrideInviteUser: undefined,
+};
 
 export interface UserListQuery {
   hasNext?: boolean;
@@ -56,7 +72,7 @@ export interface CreateChannelProviderProps {
 
 type CreateChannel = (channelParams: GroupChannelCreateParams) => Promise<GroupChannel>;
 
-export interface CreateChannelContextInterface {
+export interface CreateChannelState {
   sdk: SendbirdChatType;
   createChannel: CreateChannel;
   userListQuery?(): UserListQuery;
@@ -76,9 +92,7 @@ export interface CreateChannelContextInterface {
   onBeforeCreateChannel?(users: Array<string>): GroupChannelCreateParams;
 
   step: number,
-  setStep: React.Dispatch<React.SetStateAction<number>>,
   type: CHANNEL_TYPE,
-  setType: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>>,
   /**
    * @deprecated
    * Use the onChannelCreated instead
@@ -91,9 +105,8 @@ export interface CreateChannelContextInterface {
   overrideInviteUser?(params: OverrideInviteUserType): void;
 }
 
-const CreateChannelProvider: React.FC<CreateChannelProviderProps> = (props: CreateChannelProviderProps) => {
+const CreateChannelManager: React.FC<CreateChannelProviderProps> = (props: CreateChannelProviderProps) => {
   const {
-    children,
     onCreateChannelClick,
     onBeforeCreateChannel,
     onChannelCreated,
@@ -102,32 +115,57 @@ const CreateChannelProvider: React.FC<CreateChannelProviderProps> = (props: Crea
     overrideInviteUser,
   } = props;
 
+  const { updateState } = useCreateChannelStore();
   const store = useSendbirdStateContext();
   const _userListQuery = userListQuery ?? store?.config?.userListQuery;
 
-  const [step, setStep] = useState(0);
-  const [type, setType] = useState(CHANNEL_TYPE.GROUP);
-
-  return (
-    <CreateChannelContext.Provider value={{
-      sdk: store.stores.sdkStore.sdk,
-      createChannel: getCreateGroupChannel(store),
+  useEffect(() => {
+    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<CreateChannelProviderProps> = (props: CreateChannelProviderProps) => {
+  const { children } = props;
+
+  return (
+    <InternalCreateChannelProvider>
+      <CreateChannelManager {...props} />
+      {children}
+    </InternalCreateChannelProvider>
+  );
+};
+
+const createCreateChannelStore = () => createStore(initialState);
+const InternalCreateChannelProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+  const storeRef = useRef(createCreateChannelStore());
+
+  return (
+    <CreateChannelContext.Provider value={storeRef.current}>
       {children}
     </CreateChannelContext.Provider>
   );
 };
 
+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.');

src/modules/CreateChannel/context/useCreateChannel.ts

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useMemo } from 'react';
+import { CreateChannelState, useCreateChannelContext } from './CreateChannelProvider';
+import { CHANNEL_TYPE } from '../types';
+
+export const useCreateChannel = () => {
+  const store = useCreateChannelContext();
+  if (!store) throw new Error('useCreateChannel must be used within a CreateChannelProvider');
+
+  const state: CreateChannelState = useSyncExternalStore(store.subscribe, store.getState);
+  const actions = useMemo(() => ({
+    setStep: (step: number) => store.setState(state => ({
+      ...state,
+      step,
+    })),
+    setType: (type: CHANNEL_TYPE) => store.setState(state => ({
+      ...state,
+      type,
+    })),
+  }), [store]);
+
+  return { state, actions };
+};