fix: sample app ui bugs (#2854)

khushal87 · web-flow · commit 851237c5ba17 · 2024-12-17T15:44:59.000+05:30
* fix: sample app ui bugs

* fix: create new channel bug

* fix: navigation go back bug
diff --git a/examples/SampleApp/App.tsx b/examples/SampleApp/App.tsx
@@ -27,7 +27,7 @@ import { ChannelPinnedMessagesScreen } from './src/screens/ChannelPinnedMessages
 import { ChatScreen } from './src/screens/ChatScreen';
 import { GroupChannelDetailsScreen } from './src/screens/GroupChannelDetailsScreen';
 import { LoadingScreen } from './src/screens/LoadingScreen';
-import { MenuDrawer } from './src/screens/MenuDrawer';
+import { MenuDrawer } from './src/components/MenuDrawer';
 import { NewDirectMessagingScreen } from './src/screens/NewDirectMessagingScreen';
 import { NewGroupChannelAddMemberScreen } from './src/screens/NewGroupChannelAddMemberScreen';
 import { NewGroupChannelAssignNameScreen } from './src/screens/NewGroupChannelAssignNameScreen';
diff --git a/examples/SampleApp/src/components/AddMemberBottomSheet.tsx b/examples/SampleApp/src/components/AddMemberBottomSheet.tsx
@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
-import { ActivityIndicator, StyleSheet, Text, TextInput, View } from 'react-native';
-import { TouchableOpacity } from '@gorhom/bottom-sheet';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { CircleClose, Search, useTheme } from 'stream-chat-react-native';
 
@@ -37,16 +43,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 18,
     borderWidth: 1,
-    flex: 1,
     flexDirection: 'row',
-    marginRight: 16,
     paddingHorizontal: 10,
     paddingVertical: 8,
   },
   inputRow: {
     alignItems: 'center',
     flexDirection: 'row',
     padding: 16,
+    justifyContent: 'center',
   },
   text: {
     marginLeft: 10,
@@ -135,10 +140,10 @@ export const AddMemberBottomSheet: React.FC = () => {
             ]}
             value={searchText}
           />
+          <TouchableOpacity onPress={clearText}>
+            <CircleClose pathFill={grey} />
+          </TouchableOpacity>
         </View>
-        <TouchableOpacity onPress={clearText}>
-          <CircleClose pathFill={grey} />
-        </TouchableOpacity>
       </View>
       <View style={styles.flex}>
         {addMemberQueryInProgress && (
diff --git a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx
@@ -23,6 +23,7 @@ import Animated, {
 import {
   Avatar,
   CircleClose,
+  Delete,
   User,
   UserMinus,
   useTheme,
@@ -32,7 +33,6 @@ import {
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
 import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayContext';
-import { Delete } from '../icons/Delete';
 
 dayjs.extend(relativeTime);
 
@@ -77,9 +77,10 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderTopWidth: 1,
     flexDirection: 'row',
+    paddingVertical: 16,
   },
-  row: { alignItems: 'center', borderTopWidth: 1, flexDirection: 'row' },
-  rowInner: { paddingLeft: 16, paddingRight: 10, paddingVertical: 20 },
+  row: { alignItems: 'center', borderTopWidth: 1, flexDirection: 'row', paddingVertical: 16 },
+  rowInner: { paddingLeft: 16, paddingRight: 10 },
   rowText: {
     fontSize: 14,
     fontWeight: '700',
@@ -408,7 +409,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
                           ]}
                         >
                           <View style={styles.rowInner}>
-                            <Delete height={32} pathFill={accent_red} width={32} />
+                            <Delete size={24} fill={accent_red} />
                           </View>
                           <Text style={[styles.rowText, { color: accent_red }]}>
                             Delete conversation
diff --git a/examples/SampleApp/src/components/ChannelPreview.tsx b/examples/SampleApp/src/components/ChannelPreview.tsx
@@ -6,6 +6,7 @@ import Swipeable from 'react-native-gesture-handler/Swipeable';
 import {
   ChannelPreviewMessenger,
   ChannelPreviewMessengerProps,
+  Delete,
   MenuPointHorizontal,
   useChatContext,
   useTheme,
@@ -18,7 +19,6 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
 import type { StackNavigationProp } from '@react-navigation/stack';
 
 import type { StackNavigatorParamList, StreamChatGenerics } from '../types';
-import { Delete } from '../icons/Delete';
 
 const styles = StyleSheet.create({
   leftSwipeableButton: {
@@ -99,7 +99,7 @@ export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGen
             }}
             style={[styles.rightSwipeableButton]}
           >
-            <Delete height={32} pathFill={accent_red} width={32} />
+            <Delete size={32} fill={accent_red} />
           </RectButton>
         </View>
       )}
diff --git a/examples/SampleApp/src/components/ConfirmationBottomSheet.tsx b/examples/SampleApp/src/components/ConfirmationBottomSheet.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { TouchableOpacity } from '@gorhom/bottom-sheet';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { UserMinus, useTheme } from 'stream-chat-react-native';
+import { Delete, UserMinus, useTheme } from 'stream-chat-react-native';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import {
   isAddMemberBottomSheetData,
   useBottomSheetOverlayContext,
 } from '../context/BottomSheetOverlayContext';
-import { Delete } from '../icons/Delete';
 
 const styles = StyleSheet.create({
   actionButtonLeft: {
@@ -79,7 +77,7 @@ export const ConfirmationBottomSheet: React.FC = () => {
         {confirmText === 'LEAVE' ? (
           <UserMinus pathFill={grey} />
         ) : (
-          <Delete height={32} pathFill={accent_red} width={32} />
+          <Delete size={32} fill={accent_red} />
         )}
         <Text style={[styles.title, { color: black }]}>{title}</Text>
         <Text style={[styles.subtext, { color: black }]}>{subtext}</Text>
diff --git a/examples/SampleApp/src/components/MenuDrawer.tsx b/examples/SampleApp/src/components/MenuDrawer.tsx
@@ -57,48 +57,68 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
   }
 
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: white }]}>
-      <View style={styles.userRow}>
-        <Image
-          source={{
-            uri: chatClient.user?.image,
-          }}
-          style={styles.avatar}
-        />
-        <Text
-          style={[
-            styles.userName,
-            {
-              color: black,
-            },
-          ]}
-        >
-          {chatClient.user?.name}
-        </Text>
-      </View>
-      <View style={styles.menuContainer}>
-        <View>
-          <TouchableOpacity
-            onPress={() => navigation.navigate('NewDirectMessagingScreen')}
-            style={styles.menuItem}
+    <View style={[styles.container, { backgroundColor: white }]}>
+      <SafeAreaView style={{ flex: 1 }}>
+        <View style={[styles.userRow]}>
+          <Image
+            source={{
+              uri: chatClient.user?.image,
+            }}
+            style={styles.avatar}
+          />
+          <Text
+            style={[
+              styles.userName,
+              {
+                color: black,
+              },
+            ]}
           >
-            <Edit height={24} pathFill={grey} width={24} />
-            <Text
-              style={[
-                styles.menuTitle,
-                {
-                  color: black,
-                },
-              ]}
+            {chatClient.user?.name}
+          </Text>
+        </View>
+        <View style={styles.menuContainer}>
+          <View>
+            <TouchableOpacity
+              onPress={() => navigation.navigate('NewDirectMessagingScreen')}
+              style={styles.menuItem}
             >
-              New Direct Messages
-            </Text>
-          </TouchableOpacity>
+              <Edit height={24} pathFill={grey} width={24} />
+              <Text
+                style={[
+                  styles.menuTitle,
+                  {
+                    color: black,
+                  },
+                ]}
+              >
+                New Direct Messages
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => navigation.navigate('NewGroupChannelAddMemberScreen')}
+              style={styles.menuItem}
+            >
+              <Group height={24} pathFill={grey} width={24} />
+              <Text
+                style={[
+                  styles.menuTitle,
+                  {
+                    color: black,
+                  },
+                ]}
+              >
+                New Group
+              </Text>
+            </TouchableOpacity>
+          </View>
           <TouchableOpacity
-            onPress={() => navigation.navigate('NewGroupChannelAddMemberScreen')}
+            onPress={() => {
+              logout();
+            }}
             style={styles.menuItem}
           >
-            <Group height={24} pathFill={grey} width={24} />
+            <User height={24} pathFill={grey} width={24} />
             <Text
               style={[
                 styles.menuTitle,
@@ -107,29 +127,11 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
                 },
               ]}
             >
-              New Group
+              Sign Out
             </Text>
           </TouchableOpacity>
         </View>
-        <TouchableOpacity
-          onPress={() => {
-            logout();
-          }}
-          style={styles.menuItem}
-        >
-          <User height={24} pathFill={grey} width={24} />
-          <Text
-            style={[
-              styles.menuTitle,
-              {
-                color: black,
-              },
-            ]}
-          >
-            Sign Out
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </SafeAreaView>
+      </SafeAreaView>
+    </View>
   );
 };
diff --git a/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx b/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx
@@ -17,6 +17,8 @@ import {
 import { NewDirectMessagingScreenNavigationProp } from '../screens/NewDirectMessagingScreen';
 
 import { StreamChatGenerics as LocalStreamChatGenerics } from '../types';
+import { useUserSearchContext } from '../context/UserSearchContext';
+import { useAppContext } from '../context/AppContext';
 
 type NewDirectMessagingSendButtonPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -97,24 +99,36 @@ export type SendButtonProps<
  * UI Component for send button in MessageInput component.
  */
 export const NewDirectMessagingSendButton = (props: SendButtonProps<LocalStreamChatGenerics>) => {
+  const { chatClient } = useAppContext();
   const navigation = useNavigation<NewDirectMessagingScreenNavigationProp>();
   const { channel } = useChannelContext<LocalStreamChatGenerics>();
+  const { selectedUserIds, reset } = useUserSearchContext();
 
   const { giphyActive, text } = useMessageInputContext<LocalStreamChatGenerics>();
 
   const sendMessage = async () => {
     if (!channel) {
       return;
     }
+    if (!chatClient || !chatClient.user) {
+      return;
+    }
+    const members = [chatClient.user.id, ...selectedUserIds];
     channel.initialized = false;
-    await channel.query({});
+    const newChannel = chatClient.channel('messaging', {
+      members,
+    });
     try {
-      await channel.sendMessage({ text });
+      await newChannel.watch();
+      await newChannel.sendMessage({ text });
       navigation.replace('ChannelScreen', {
-        channelId: channel.id,
+        channelId: newChannel.id,
       });
+      reset();
     } catch (e) {
-      Alert.alert('Error sending a message');
+      if (e instanceof Error) {
+        Alert.alert('Error sending a message', e.message);
+      }
     }
   };
 
diff --git a/examples/SampleApp/src/components/ScreenHeader.tsx b/examples/SampleApp/src/components/ScreenHeader.tsx
@@ -64,7 +64,13 @@ export const BackButton: React.FC<{
   return (
     <TouchableOpacity
       onPress={() => {
-        navigation.goBack();
+        if (!navigation.canGoBack()) {
+          // if no previous screen was present in history, go to the list screen
+          // this can happen when opened through push notification
+          navigation.reset({ index: 0, routes: [{ name: 'HomeScreen' }] });
+        } else {
+          navigation.goBack();
+        }
         if (onBack) {
           onBack();
         }
@@ -165,6 +171,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
                       color: black,
                     },
                   ]}
+                  numberOfLines={1}
                 >
                   {titleText}
                 </Text>
@@ -182,6 +189,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
                     color: grey,
                   },
                 ]}
+                numberOfLines={1}
               >
                 {subtitleText}
               </Text>
diff --git a/examples/SampleApp/src/components/UserInfoOverlay.tsx b/examples/SampleApp/src/components/UserInfoOverlay.tsx
diff --git a/examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx b/examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx
diff --git a/examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx b/examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx
diff --git a/examples/SampleApp/src/screens/SharedGroupsScreen.tsx b/examples/SampleApp/src/screens/SharedGroupsScreen.tsx
