refactor: channel details cleanup

examples/ExpoMessaging/app/channel/[cid]/details/index.tsx

@@ -1,15 +1,19 @@
 import React, { useCallback, useContext, useState } from 'react';
 
+import { View } from 'react-native';
+
 import { Stack, useRouter } from 'expo-router';
 
 import {
-  ChannelAddMembersModal,
   ChannelAllMembersModal,
   ChannelDetails,
+  ChannelDetailsActionsSection,
   ChannelDetailsContextProvider,
+  ChannelDetailsMemberSection,
+  ChannelDetailsNavigationSection,
   ChannelDetailsNavigationSectionType,
   GetChannelDetailsNavigationItems,
-  GetChannelMemberActionItems,
+  ChannelDetailsEditButton,
   WithComponents,
 } from 'stream-chat-expo';
 
@@ -23,7 +27,7 @@ const navigationItems: {
   files: 'files',
 };
 
-const Header = () => {
+const EmptyHeader = () => {
   return null;
 };
 
@@ -48,20 +52,35 @@ export default function ChannelDetailsScreen() {
 
   const popToRoot = useCallback(() => router.replace('/'), [router]);
 
-  const [isAddMembersVisible, setAddMembersVisible] = useState(false);
-  const handleAddMembersClose = useCallback(() => setAddMembersVisible(false), []);
-  const handleAddMembersPress = useCallback(() => {
-    setAllMembersVisible(false);
-    setAddMembersVisible(true);
-  }, []);
-
   const [isAllMembersVisible, setAllMembersVisible] = useState(false);
   const handleAllMembersClose = useCallback(() => setAllMembersVisible(false), []);
   const handleAllMembersPress = useCallback(() => setAllMembersVisible(true), []);
 
-  const getChannelMemberActionItems = useCallback<GetChannelMemberActionItems>(
-    ({ defaultItems }) => defaultItems,
-    [],
+  const NavigationSection = useCallback(
+    () => <ChannelDetailsNavigationSection getNavigationItems={getNavigationItems} />,
+    [getNavigationItems],
+  );
+
+  const MemberSection = useCallback(
+    () => <ChannelDetailsMemberSection onViewAllMembersPress={handleAllMembersPress} />,
+    [handleAllMembersPress],
+  );
+
+  const renderHeaderRight = useCallback(
+    () =>
+      channel ? (
+        <View style={{ flexGrow: 0, flexShrink: 0 }}>
+          <ChannelDetailsContextProvider value={{ channel }}>
+            <ChannelDetailsEditButton />
+          </ChannelDetailsContextProvider>
+        </View>
+      ) : null,
+    [channel],
+  );
+
+  const ActionsSection = useCallback(
+    () => <ChannelDetailsActionsSection onChannelDismiss={popToRoot} />,
+    [popToRoot],
   );
 
   if (!channel) {
@@ -73,24 +92,21 @@ export default function ChannelDetailsScreen() {
       <Stack.Screen
         options={{
           title: 'Channel details',
+          headerRight: renderHeaderRight,
         }}
       />
-      <WithComponents overrides={{ ChannelDetailsNavHeader: Header }}>
-        <ChannelDetails
-          channel={channel}
-          getChannelMemberActionItems={getChannelMemberActionItems}
-          getNavigationItems={getNavigationItems}
-          onChannelDismiss={popToRoot}
-          onViewAllMembersPress={handleAllMembersPress}
-        />
-      </WithComponents>
-      <ChannelDetailsContextProvider value={{ channel, getChannelMemberActionItems }}>
-        <ChannelAllMembersModal
-          onClose={handleAllMembersClose}
-          visible={isAllMembersVisible}
-          onAddMembersPress={handleAddMembersPress}
-        />
-        <ChannelAddMembersModal onClose={handleAddMembersClose} visible={isAddMembersVisible} />
+      <ChannelDetailsContextProvider value={{ channel }}>
+        <WithComponents
+          overrides={{
+            ChannelDetailsActionsSection: ActionsSection,
+            ChannelDetailsMemberSection: MemberSection,
+            ChannelDetailsNavHeader: EmptyHeader,
+            ChannelDetailsNavigationSection: NavigationSection,
+          }}
+        >
+          <ChannelDetails />
+          <ChannelAllMembersModal onClose={handleAllMembersClose} visible={isAllMembersVisible} />
+        </WithComponents>
       </ChannelDetailsContextProvider>
     </>
   );

examples/SampleApp/src/screens/ChannelDetailsScreen.tsx

@@ -5,12 +5,18 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import {
   ChannelDetails,
+  ChannelDetailsActionsSection,
+  ChannelDetailsMemberSection,
+  ChannelDetailsNavigationSection,
   GetChannelDetailsNavigationItems,
   GetChannelMemberActionItems,
-  ChannelAddMembersModal,
   ChannelAllMembersModal,
   ChannelDetailsContextProvider,
   ChannelDetailsNavigationSectionType,
+  ChannelMemberActionsSheet,
+  ChannelMemberActionsSheetProps,
+  WithComponents,
+  ChannelDetailsActionsSectionProps,
 } from 'stream-chat-react-native';
 
 import { SendDirectMessage } from '../icons/SendDirectMessage';
@@ -65,16 +71,17 @@ export const ChannelDetailsScreen: React.FC<Props> = ({
       }),
     [navigation],
   );
-  const [isAddMembersVisible, setAddMembersVisible] = useState(false);
-  const handleAddMembersClose = useCallback(() => setAddMembersVisible(false), []);
-  const handleAddMembersPress = useCallback(() => {
-    setAllMembersVisible(false);
-    setAddMembersVisible(true);
-  }, []);
   const [isAllMembersVisible, setAllMembersVisible] = useState(false);
   const handleAllMembersClose = useCallback(() => setAllMembersVisible(false), []);
   const handleAllMembersPress = useCallback(() => setAllMembersVisible(true), []);
 
+  const ActionsSection = useCallback(
+    (props: ChannelDetailsActionsSectionProps) => (
+      <ChannelDetailsActionsSection {...props} onChannelDismiss={popToRoot} />
+    ),
+    [popToRoot],
+  );
+
   const getChannelMemberActionItems = useCallback<GetChannelMemberActionItems>(
     ({ context, defaultItems }) => {
       // Don't offer sending a direct message to yourself.
@@ -100,25 +107,40 @@ export const ChannelDetailsScreen: React.FC<Props> = ({
     [navigation],
   );
 
-  return (
-    <>
-      <ChannelDetails
-        channel={channel}
+  const NavigationSection = useCallback(
+    () => <ChannelDetailsNavigationSection getNavigationItems={getNavigationItems} />,
+    [getNavigationItems],
+  );
+
+  // Handle view all members modal so we can close it after navigation is triggered by our custom action.
+  const MemberSection = useCallback(
+    () => <ChannelDetailsMemberSection onViewAllMembersPress={handleAllMembersPress} />,
+    [handleAllMembersPress],
+  );
+
+  const MemberActionsSheet = useCallback(
+    (props: ChannelMemberActionsSheetProps) => (
+      <ChannelMemberActionsSheet
+        {...props}
         getChannelMemberActionItems={getChannelMemberActionItems}
-        getNavigationItems={getNavigationItems}
-        onBack={onBack}
-        onChannelDismiss={popToRoot}
-        // Handler view all members modal so we can close it after navigation is triggered by our custom action
-        onViewAllMembersPress={handleAllMembersPress}
       />
-      <ChannelDetailsContextProvider value={{ channel, getChannelMemberActionItems }}>
-        <ChannelAllMembersModal
-          onClose={handleAllMembersClose}
-          visible={isAllMembersVisible}
-          onAddMembersPress={handleAddMembersPress}
-        />
-        <ChannelAddMembersModal onClose={handleAddMembersClose} visible={isAddMembersVisible} />
-      </ChannelDetailsContextProvider>
-    </>
+    ),
+    [getChannelMemberActionItems],
+  );
+
+  return (
+    <ChannelDetailsContextProvider value={{ channel }}>
+      <WithComponents
+        overrides={{
+          ChannelDetailsActionsSection: ActionsSection,
+          ChannelDetailsMemberSection: MemberSection,
+          ChannelDetailsNavigationSection: NavigationSection,
+          ChannelMemberActionsSheet: MemberActionsSheet,
+        }}
+      >
+        <ChannelDetails onBack={onBack} />
+        <ChannelAllMembersModal onClose={handleAllMembersClose} visible={isAllMembersVisible} />
+      </WithComponents>
+    </ChannelDetailsContextProvider>
   );
 };