fix: storybook user leave channel issue (#1112)

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

### Issue
* Empty channel in the stories of module category, because user left the
current channel
### Fix
* Create a new channel if there's no channel in the my group channel
list

[CLNP-3433]:
https://sendbird.atlassian.net/browse/CLNP-3433?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

src/stories/apps/GroupChannelApp.stories.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react';
 import type { Meta } from '@storybook/react';
 
 import App from '../../modules/App';
+import { STORYBOOK_APP_ID, STORYBOOK_NICKNAME, STORYBOOK_USER_ID } from '../common/const';
 
 const meta: Meta<typeof App> = {
   title: '0.Get Started/Group Channel App',
@@ -151,9 +152,9 @@ export const Default = (args): ReactElement => {
   );
 };
 Default.args = {
-  appId: 'FEA2129A-EA73-4EB9-9E0B-EC738E7EB768',
-  userId: 'hoon20230802',
-  nickname: 'hoon hi',
+  appId: STORYBOOK_APP_ID,
+  userId: STORYBOOK_USER_ID,
+  nickname: STORYBOOK_NICKNAME,
   breakpoint: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
   theme: 'light',
   isReactionEnabled: true,

src/stories/apps/OpenChannelCommunityApp.stories.tsx

@@ -2,6 +2,7 @@ import React, { type ReactElement } from "react";
 import type { Meta } from "@storybook/react";
 
 import Community from "../../modules/OpenChannelApp/Community";
+import { STORYBOOK_APP_ID, STORYBOOK_USER_ID, STORYBOOK_NICKNAME } from '../common/const';
 
 const meta: Meta<typeof Community> = {
   title: '0.Get Started/Open Channel Community App',
@@ -18,8 +19,8 @@ export const Default = (args): ReactElement => {
   );
 };
 Default.args = {
-  appId: 'FEA2129A-EA73-4EB9-9E0B-EC738E7EB768',
-  userId: 'hoon20230802',
-  nickname: 'hoon hi',
+  appId: STORYBOOK_APP_ID,
+  userId: STORYBOOK_USER_ID,
+  nickname: STORYBOOK_NICKNAME,
   theme: 'light',
 };

src/stories/common/const.ts

@@ -0,0 +1,3 @@
+export const STORYBOOK_APP_ID = 'FEA2129A-EA73-4EB9-9E0B-EC738E7EB768';
+export const STORYBOOK_USER_ID = 'public.storybook.tester.1';
+export const STORYBOOK_NICKNAME = 'Tester';

src/stories/common/getSampleChannel.ts

@@ -0,0 +1,34 @@
+import SendbirdChat from "@sendbird/chat";
+import { GroupChannel, GroupChannelListOrder, GroupChannelModule } from "@sendbird/chat/groupChannel";
+import { OpenChannelModule } from "@sendbird/chat/openChannel";
+
+interface GetSampleChannelParams {
+  appId: string;
+  userId: string;
+}
+export const getSampleChannel = async ({
+  appId,
+  userId,
+}: GetSampleChannelParams): Promise<GroupChannel> => {
+  try {
+    const chat = SendbirdChat.init({
+      appId,
+      modules: [new GroupChannelModule, new OpenChannelModule],
+    });
+
+    await chat.connect(userId);
+    const query = chat.groupChannel.createMyGroupChannelListQuery({ limit: 1, order: GroupChannelListOrder.LATEST_LAST_MESSAGE });
+    const channelList = await query.next();
+
+    if (channelList.length > 0) {
+      return channelList[0];
+    } {
+      const query = chat.createApplicationUserListQuery({ limit: 10 });
+      const userList = await query.next();
+      const newChannel = await chat.groupChannel.createChannel({ invitedUserIds: userList.map(user => user.userId) });
+      return newChannel;
+    }
+  } catch (err) {
+    console.warn('Sendbird storybook - getSampleChannel: ', err);
+  }
+};

src/stories/modules/ChannelSettings.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta } from '@storybook/react';
 
 import SendbirdProvider from '../../lib/Sendbird';
 import ChannelSettings from '../../modules/ChannelSettings';
+import { STORYBOOK_APP_ID, STORYBOOK_USER_ID, STORYBOOK_NICKNAME } from '../common/const';
+import { getSampleChannel } from '../common/getSampleChannel';
 
 const meta: Meta<typeof ChannelSettings> = {
   title: '1.Module/ChannelSettings',
@@ -76,8 +78,9 @@ export const Default = (args): React.ReactElement => {
   return (
     <div style={{ height: 500 }}>
       <SendbirdProvider
-        appId="FEA2129A-EA73-4EB9-9E0B-EC738E7EB768"
-        userId="hoon20230802"
+        appId={STORYBOOK_APP_ID}
+        userId={STORYBOOK_USER_ID}
+        nickname={STORYBOOK_NICKNAME}
         breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
       >
         <ChannelSettings
@@ -87,7 +90,8 @@ export const Default = (args): React.ReactElement => {
     </div>
   );
 };
+const channel = await getSampleChannel({ appId: STORYBOOK_APP_ID, userId: STORYBOOK_USER_ID });
 Default.args = {
-  channelUrl: "sendbird_group_channel_316207824_6a62239b0cb650a6feae8466701ffdd9890989f5",
+  channelUrl: channel.url,
   disableUserProfile: false,
 };

src/stories/modules/GroupChannel.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta } from '@storybook/react';
 
 import SendbirdProvider from '../../lib/Sendbird';
 import GroupChannel from '../../modules/GroupChannel';
+import { STORYBOOK_APP_ID, STORYBOOK_USER_ID, STORYBOOK_NICKNAME } from '../common/const';
+import { getSampleChannel } from '../common/getSampleChannel';
 
 const meta: Meta<typeof GroupChannel> = { 
   title: '1.Module/GroupChannel',
@@ -105,9 +107,9 @@ export const Default = (args): React.ReactElement => {
   return (
     <div style={{ height: 500 }}>
       <SendbirdProvider
-        appId="FEA2129A-EA73-4EB9-9E0B-EC738E7EB768"
-        // appId="2D7B4CDB-932F-4082-9B09-A1153792DC8D"
-        userId="hoon20230802"
+        appId={STORYBOOK_APP_ID}
+        userId={STORYBOOK_USER_ID}
+        nickname={STORYBOOK_NICKNAME}
         breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
       >
         <GroupChannel
@@ -117,8 +119,9 @@ export const Default = (args): React.ReactElement => {
     </div>
   );
 };
+const channel = await getSampleChannel({ appId: STORYBOOK_APP_ID, userId: STORYBOOK_USER_ID });
 Default.args = {
-  channelUrl: "sendbird_group_channel_316207824_6a62239b0cb650a6feae8466701ffdd9890989f5",
+  channelUrl: channel.url,
   isReactionEnabled: true,
   isMessageGroupingEnabled: true,
   showSearchIcon: true,

src/stories/modules/GroupChannelList.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta } from '@storybook/react';
 
 import SendbirdProvider from '../../lib/Sendbird';
 import GroupChannelList from '../../modules/GroupChannelList';
+import { STORYBOOK_APP_ID, STORYBOOK_USER_ID } from '../common/const';
 
 const meta: Meta<typeof GroupChannelList> = {
   title: '1.Module/GroupChannelList',
@@ -89,8 +90,8 @@ export const Default = (args): React.ReactElement => {
   return (
     <div style={{ height: 520 }}>
       <SendbirdProvider
-        appId="FEA2129A-EA73-4EB9-9E0B-EC738E7EB768"
-        userId="hoon20230802"
+        appId={STORYBOOK_APP_ID}
+        userId={STORYBOOK_USER_ID}
         breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
       >
         <GroupChannelList {...args} />

src/stories/modules/MessageSearch.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta } from '@storybook/react';
 
 import SendbirdProvider from '../../lib/Sendbird';
 import MessageSearch from '../../modules/MessageSearch';
+import { STORYBOOK_APP_ID, STORYBOOK_USER_ID } from '../common/const';
+import { getSampleChannel } from '../common/getSampleChannel';
 
 const meta: Meta<typeof MessageSearch> = {
   title: '1.Module/MessageSearch',
@@ -63,16 +65,16 @@ export const Default = (args): React.ReactElement => {
   return (
     <div style={{ height: 520 }}>
       <SendbirdProvider
-        appId="FEA2129A-EA73-4EB9-9E0B-EC738E7EB768"
-        userId="hoon20230802"
+        appId={STORYBOOK_APP_ID}
+        userId={STORYBOOK_USER_ID}
         breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
       >
         <MessageSearch {...args} />
       </SendbirdProvider>
     </div>
   );
 };
-
+const channel = await getSampleChannel({ appId: STORYBOOK_APP_ID, userId: STORYBOOK_USER_ID });
 Default.args = {
-  channelUrl: "sendbird_group_channel_316207824_6a62239b0cb650a6feae8466701ffdd9890989f5",
+  channelUrl: channel.url,
 };