fix: apply onProfileEditSuccess props (#855)

[UIKIT-4542](https://sendbird.atlassian.net/browse/UIKIT-4542)
Also, internal troubleshooting

### Issue
* The props, `onProfileEditSuccess` has been not applied..

### Fix
* Apply the `onProfileEditSuccess` props to the App and ChannelList
components
* Apply the profile edition in the Integrated App storybook sample

### ChangeLog
* Apply the `onProfileEditSuccess` props to the App and ChannelList
components

[UIKIT-4542]:
https://sendbird.atlassian.net/browse/UIKIT-4542?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

src/modules/App/stories/integrated.stories.js

@@ -13,6 +13,27 @@ import { MediaQueryProvider } from '../../../lib/MediaQueryContext';
 
 const STORAGE_KEY = 'sendbird-integrated-app-v1-groupchannel';
 
+function storeCurrentSampleOptions({
+  store,
+  sampleOptions,
+  globalEnvironments,
+}) {
+  store.current.setItem(STORAGE_KEY, JSON.stringify({
+    login: false,
+    currentAppId: sampleOptions.appId,
+    apps: {
+      ...globalEnvironments?.apps,
+      [sampleOptions.appId]: {
+        currentUserId: sampleOptions.userId,
+        users: {
+          ...globalEnvironments?.apps?.[sampleOptions.appId]?.users,
+          [sampleOptions.userId]: sampleOptions,
+        },
+      },
+    },
+  }));
+}
+
 /**
  * Polyfill for localStorage
  * localStorage wont work in some browsers, in incognito
@@ -304,20 +325,7 @@ export const GroupChannel = () => {
       <div className={`sendbird-integrated-sample-app sendbird-theme--${sampleOptions.theme}`}>
         <input value="Logout" type="button" onClick={() => {
           setIsLoggedin(false);
-          store.current.setItem(STORAGE_KEY, JSON.stringify({
-            login: false,
-            currentAppId: sampleOptions.appId,
-            apps: {
-              ...globalEnvironments?.apps,
-              [sampleOptions.appId]: {
-                currentUserId: sampleOptions.userId,
-                users: {
-                  ...globalEnvironments?.apps?.[sampleOptions.appId]?.users,
-                  [sampleOptions.userId]: sampleOptions,
-                },
-              },
-            },
-          }));
+          storeCurrentSampleOptions({ store, sampleOptions, globalEnvironments });
         }} />
         <div style={{ height: 'calc(100% - 12px)' }}>
           {
@@ -341,6 +349,14 @@ export const GroupChannel = () => {
                 replyType={sampleOptions.replyType}
                 config={{ logLevel: 'all' }}
                 breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)}
+                onProfileEditSuccess={(user) => {
+                  const nextOptions = {
+                    ...sampleOptions,
+                    nickname: user.nickname,
+                  };
+                  setSampleOptions(nextOptions);
+                  storeCurrentSampleOptions({ store, sampleOptions: nextOptions, globalEnvironments });
+                }}
                 stringSet={{
                   // CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR: '오퍼레이터 등록',
                   // CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR: '오퍼레이터 해제',

src/modules/ChannelList/components/ChannelListUI/index.tsx

@@ -60,6 +60,7 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
     typingChannels,
     initialized,
     fetchChannelList,
+    onProfileEditSuccess,
   } = useChannelListContext();
 
   const state = useSendbirdStateContext();
@@ -95,8 +96,9 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
           <EditUserProfile
             onThemeChange={onThemeChange}
             onCancel={() => { setShowProfileEdit(false); }}
-            onEditProfile={() => {
+            onEditProfile={(user: User) => {
               setShowProfileEdit(false);
+              onProfileEditSuccess(user);
             }}
           />
         )

src/modules/EditUserProfile/components/EditUserProfileUI/index.tsx

@@ -21,7 +21,7 @@ import TextButton from '../../../../ui/TextButton';
 import { noop } from '../../../../utils/utils';
 import { USER_ACTIONS } from '../../../../lib/dux/user/actionTypes';
 
-export default function EditUserProfile(): ReactElement {
+export default function EditUserProfileUI(): ReactElement {
   const editProfileProps = useEditUserProfileContext();
   const store = useSendbirdStateContext();
   const hiddenInputRef = useRef(null);

src/modules/EditUserProfile/index.tsx

@@ -5,9 +5,9 @@ import {
   EditUserProfileProps,
 } from './context/EditUserProfileProvider';
 
-import EditUserProfile from './components/EditUserProfileUI';
+import EditUserProfileUI from './components/EditUserProfileUI';
 
-const EditProfile: React.FC<EditUserProfileProps> = (props: EditUserProfileProps) => {
+const EditUserProfile: React.FC<EditUserProfileProps> = (props: EditUserProfileProps) => {
   const {
     onEditProfile,
     onCancel,
@@ -19,9 +19,9 @@ const EditProfile: React.FC<EditUserProfileProps> = (props: EditUserProfileProps
       onCancel={onCancel}
       onThemeChange={onThemeChange}
     >
-      <EditUserProfile />
+      <EditUserProfileUI />
     </EditUserProfileProvider>
   );
 };
 
-export default EditProfile;
+export default EditUserProfile;