Merge pull request #4162 from tloncorp/po/tlon-3199-fix-create-group-…

…flow desktop: get create group flow working
tloncorp · Nov 8, 2024 · e3500ea · e3500ea
2 parents 8d6ba2a + dce8c67
commit e3500ea
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 8 deletions.
diff --git a/packages/app/features/top/ContactHostedGroupsScreen.tsx b/packages/app/features/top/ContactHostedGroupsScreen.tsx
@@ -38,7 +38,7 @@ export function ContactHostedGroupsScreen({ route, navigation }: Props) {
   );
 
   return (
-    <View flex={1}>
+    <View backgroundColor="$background" flex={1}>
       <ScreenHeader
         title={`Groups hosted by ${contactName}`}
         backAction={goBack}

diff --git a/packages/app/features/top/CreateGroupScreen.tsx b/packages/app/features/top/CreateGroupScreen.tsx
@@ -14,7 +14,7 @@ export function CreateGroupScreen(props: Props) {
         index: 1,
         routes: [
           { name: 'ChatList' },
-          { name: 'Channel', params: { channel } },
+          { name: 'Channel', params: { channelId: channel.id } },
         ],
       });
     },

diff --git a/packages/app/navigation/desktop/HomeNavigator.tsx b/packages/app/navigation/desktop/HomeNavigator.tsx
@@ -12,6 +12,9 @@ import { EditProfileScreen } from '../../features/settings/EditProfileScreen';
 import ChannelScreen from '../../features/top/ChannelScreen';
 import ChannelSearchScreen from '../../features/top/ChannelSearchScreen';
 import { ChatListScreenView } from '../../features/top/ChatListScreen';
+import { ContactHostedGroupsScreen } from '../../features/top/ContactHostedGroupsScreen';
+import { CreateGroupScreen } from '../../features/top/CreateGroupScreen';
+import { FindGroupsScreen } from '../../features/top/FindGroupsScreen';
 import { GroupChannelsScreenContent } from '../../features/top/GroupChannelsScreen';
 import ImageViewerScreen from '../../features/top/ImageViewerScreen';
 import PostScreen from '../../features/top/PostScreen';
@@ -25,13 +28,13 @@ export const HomeNavigator = () => {
   return (
     <HomeDrawer.Navigator
       drawerContent={DrawerContent}
-      initialRouteName="MainContent"
+      initialRouteName="ChatList"
       screenOptions={{
         drawerType: 'permanent',
         headerShown: false,
       }}
     >
-      <HomeDrawer.Screen name="ChatList" component={Empty} />
+      <HomeDrawer.Screen name="ChatList" component={MainStack} />
       <HomeDrawer.Screen name="GroupChannels" component={Empty} />
       <HomeDrawer.Screen name="Channel" component={ChannelStack} />
     </HomeDrawer.Navigator>
@@ -52,6 +55,33 @@ function DrawerContent(props: DrawerContentComponentProps) {
   }
 }
 
+const MainStackNavigator = createNativeStackNavigator();
+
+function MainStack() {
+  return (
+    <MainStackNavigator.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+      initialRouteName='ChatList'
+    >
+      <MainStackNavigator.Screen name="ChatList" component={Empty} />
+      <MainStackNavigator.Screen
+        name="CreateGroup"
+        component={CreateGroupScreen}
+      />
+      <MainStackNavigator.Screen
+        name="FindGroups"
+        component={FindGroupsScreen}
+      />
+      <MainStackNavigator.Screen
+        name="ContactHostedGroups"
+        component={ContactHostedGroupsScreen}
+      />
+    </MainStackNavigator.Navigator>
+  );
+}
+
 const ChannelStackNavigator = createNativeStackNavigator();
 
 function ChannelStack(

diff --git a/packages/app/navigation/types.ts b/packages/app/navigation/types.ts
@@ -56,7 +56,9 @@ export type RootDrawerParamList = {
 export type HomeDrawerParamList = Pick<
   RootStackParamList,
   'ChatList' | 'GroupChannels' | 'Channel'
->;
+> & {
+  MainContent: undefined;
+};
 
 export type DesktopChannelStackParamList = Pick<
   RootStackParamList,

diff --git a/packages/ui/src/components/AddGroupSheet.tsx b/packages/ui/src/components/AddGroupSheet.tsx
@@ -62,6 +62,7 @@ export function AddGroupSheet({
           searchPlaceholder="Username or ID"
           onSelect={onSelect}
           onScrollChange={setScreenScrolling}
+          height={400}
           key={screenKey}
           quickActions={
             <View paddingBottom="$l">

diff --git a/packages/ui/src/components/ContactBook.tsx b/packages/ui/src/components/ContactBook.tsx
@@ -17,6 +17,7 @@ import {
   useAlphabeticallySegmentedContacts,
   useSortedContacts,
 } from '../hooks/contactSorters';
+import useIsWindowNarrow from '../hooks/useIsWindowNarrow';
 import { ContactRow } from './ContactRow';
 import { SearchBar } from './SearchBar';
 import { BlockSectionList } from './SectionList';
@@ -30,6 +31,8 @@ export function ContactBook({
   onScrollChange,
   explanationComponent,
   quickActions,
+  height,
+  width,
 }: {
   searchPlaceholder?: string;
   searchable?: boolean;
@@ -39,6 +42,8 @@ export function ContactBook({
   onScrollChange?: (scrolling: boolean) => void;
   explanationComponent?: React.ReactElement;
   quickActions?: React.ReactElement;
+  height?: number;
+  width?: number;
 }) {
   const contacts = useContacts();
   const contactsIndex = useContactIndex();
@@ -131,14 +136,33 @@ export function ContactBook({
     top: '$xl',
   }) as Insets;
 
+  const isWindowNarrow = useIsWindowNarrow();
+
+  const listStyle = useMemo(() => {
+    if (!isWindowNarrow) {
+      return {
+        flex: 1,
+        overflow: 'scroll' as const,
+      };
+    }
+    return undefined;
+  }, [isWindowNarrow]);
+
   return (
-    <View flex={1}>
+    <View
+      flex={1}
+      height={isWindowNarrow ? undefined : height || '100%'}
+      width={isWindowNarrow ? undefined : width || '100%'}
+      display={isWindowNarrow ? undefined : 'flex'}
+      flexDirection={isWindowNarrow ? undefined : 'column'}
+    >
       {searchable && (
         <XStack
           alignItems="center"
           justifyContent="space-between"
           gap="$m"
           paddingBottom="$s"
+          width="100%"
         >
           <SearchBar
             height="$4xl"
@@ -163,6 +187,7 @@ export function ContactBook({
             contentContainerStyle={contentContainerStyle}
             automaticallyAdjustsScrollIndicatorInsets={false}
             scrollIndicatorInsets={scrollIndicatorInsets}
+            style={listStyle}
           />
         </View>
       )}

diff --git a/packages/ui/src/components/CreateGroupView.tsx b/packages/ui/src/components/CreateGroupView.tsx
@@ -30,7 +30,7 @@ export function CreateGroupView({
   );
 
   return (
-    <View flex={1}>
+    <View backgroundColor="$background" flex={1}>
       <ScreenHeader
         title={'Create Group'}
         backAction={() =>

diff --git a/packages/ui/src/components/FindGroupsView.tsx b/packages/ui/src/components/FindGroupsView.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { Text, View, YStack } from 'tamagui';
 
+import useIsWindowNarrow from '../hooks/useIsWindowNarrow';
 import { ContactBook } from './ContactBook';
 import { ScreenHeader } from './ScreenHeader';
 
@@ -19,8 +20,14 @@ export function FindGroupsView({
     [goToContactHostedGroups]
   );
 
+  const isWindowNarrow = useIsWindowNarrow();
+
   return (
-    <View flex={1}>
+    <View
+      backgroundColor="$background"
+      flex={1}
+      paddingHorizontal={isWindowNarrow ? undefined : '$l'}
+    >
       <ScreenHeader title="Find groups" backAction={goBack} />
       <ContactBook
         searchable