fix: remove component in the view layer (#958)

- Remove AddChannel component from the view layer

Author: bang9

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

@@ -9,6 +9,7 @@ import * as channelListActions from '../../dux/actionTypes';
 
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { GroupChannelListUIView } from '../../../GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView';
+import AddChannel from '../AddChannel';
 
 interface RenderChannelPreviewProps {
   channel: GroupChannel;
@@ -127,6 +128,7 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (
       channels={allChannels}
       onLoadMore={fetchChannelList}
       initialized={initialized}
+      renderAddChannel={() => <AddChannel />}
     />
   );
 };

src/modules/GroupChannelList/components/GroupChannelListUI/GroupChannelListUIView.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
 import GroupChannelListHeader from '../GroupChannelListHeader';
-import AddChannel from '../AddGroupChannel';
 
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import EditUserProfile from '../../../EditUserProfile';
@@ -17,16 +16,15 @@ export interface Props {
   renderPlaceHolderEmptyList?: (props: void) => React.ReactElement;
 
   onChangeTheme: (theme: string) => void;
-  onUserProfileUpdated: (user:User)=>void;
+  onUserProfileUpdated: (user: User) => void;
   allowProfileEdit: boolean;
 
   channels: GroupChannel[];
   onLoadMore: () => void;
   initialized: boolean;
-  renderChannel: (props: {
-    item: GroupChannel;
-    index: number;
-  }) => React.ReactElement;
+  renderChannel: (props: { item: GroupChannel; index: number }) => React.ReactElement;
+
+  renderAddChannel(): React.ReactElement;
 }
 
 export const GroupChannelListUIView = ({
@@ -43,11 +41,14 @@ export const GroupChannelListUIView = ({
   onLoadMore,
   initialized,
   renderChannel,
+
+  renderAddChannel,
 }: Props) => {
   const [showProfileEdit, setShowProfileEdit] = useState(false);
   const { stores } = useSendbirdStateContext();
 
   const renderer = {
+    addChannel: renderAddChannel,
     channel: renderChannel,
     placeholder: {
       loading() {
@@ -78,7 +79,7 @@ export const GroupChannelListUIView = ({
           <GroupChannelListHeader
             onEdit={() => allowProfileEdit && setShowProfileEdit(true)}
             allowProfileEdit={allowProfileEdit}
-            renderIconButton={() => <AddChannel />}
+            renderIconButton={() => renderer.addChannel()}
           />
         )}
       </div>
@@ -120,14 +121,7 @@ const ChannelListComponent = <T, >(props: {
   placeholderEmpty?: React.ReactNode;
   placeholderError?: React.ReactNode;
 }) => {
-  const {
-    data,
-    renderItem,
-    onLoadMore,
-    placeholderLoading,
-    placeholderError,
-    placeholderEmpty,
-  } = props;
+  const { data, renderItem, onLoadMore, placeholderLoading, placeholderError, placeholderEmpty } = props;
 
   const onScroll = useOnScrollPositionChangeDetector({
     onReachedBottom: () => onLoadMore(),

src/modules/GroupChannelList/components/GroupChannelListUI/index.tsx

@@ -7,6 +7,7 @@ import { GroupChannelListUIView } from './GroupChannelListUIView';
 import GroupChannelPreviewAction from '../GroupChannelPreviewAction';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { GroupChannelListItem } from '../GroupChannelListItem';
+import AddGroupChannel from '../AddGroupChannel';
 
 interface RenderChannelPreviewProps {
   channel: GroupChannel;
@@ -111,6 +112,7 @@ export const GroupChannelListUI = (props: GroupChannelListUIProps) => {
       channels={groupChannels}
       onLoadMore={loadMore}
       initialized={initialized}
+      renderAddChannel={() => <AddGroupChannel />}
     />
   );
 };