chore: remove SCG from sample app

Author: isekovanic

examples/SampleApp/App.tsx

@@ -47,7 +47,6 @@ if (__DEV__) {
 
 import type {
   StackNavigatorParamList,
-  StreamChatGenerics,
   UserSelectorParamList,
 } from './src/types';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
@@ -171,21 +170,23 @@ const DrawerNavigator: React.FC = () => (
   </Drawer.Navigator>
 );
 
+const isMessageAIGenerated = (message: MessageType) => !!message.ai_generated;
+
 const DrawerNavigatorWrapper: React.FC<{
-  chatClient: StreamChat<StreamChatGenerics>;
+  chatClient: StreamChat;
 }> = ({ chatClient }) => {
   const { bottom } = useSafeAreaInsets();
   const streamChatTheme = useStreamChatTheme();
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <OverlayProvider<StreamChatGenerics> bottomInset={bottom} value={{ style: streamChatTheme }}>
-        <Chat<StreamChatGenerics>
+      <OverlayProvider bottomInset={bottom} value={{ style: streamChatTheme }}>
+        <Chat
           client={chatClient}
           enableOfflineSupport
           // @ts-expect-error - the `ImageComponent` prop is generic, meaning we can expect an error
           ImageComponent={FastImage}
-          isMessageAIGenerated={(message: MessageType) => !!message.ai_generated}
+          isMessageAIGenerated={isMessageAIGenerated}
         >
           <AppOverlayProvider>
             <UserSearchProvider>

examples/SampleApp/package.json

@@ -2,6 +2,7 @@
   "name": "sampleapp",
   "version": "2.5.0",
   "private": true,
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/GetStream/stream-chat-react-native.git"

examples/SampleApp/src/ChatUsers.ts

@@ -1,5 +1,4 @@
 import { UserResponse } from 'stream-chat';
-import { StreamChatGenerics } from './types';
 
 export const USER_TOKENS: Record<string, string> = {
   e2etest1:
@@ -27,7 +26,7 @@ export const USER_TOKENS: Record<string, string> = {
   rodolphe:
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9kb2xwaGUifQ.tLl-I8ADBhTKB-x5FB9jK4-am0dELLXgydM6VN9rTL8',
 };
-export const USERS: Record<string, UserResponse<StreamChatGenerics>> = {
+export const USERS: Record<string, UserResponse> = {
   neil: {
     id: 'neil',
     image: 'https://ca.slack-edge.com/T02RM6X6B-U01173D1D5J-0dead6eea6ea-512',

examples/SampleApp/src/components/AddMemberBottomSheet.tsx

@@ -21,8 +21,6 @@ import { usePaginatedUsers } from '../hooks/usePaginatedUsers';
 
 import type { UserResponse } from 'stream-chat';
 
-import { StreamChatGenerics } from '../types';
-
 const styles = StyleSheet.create({
   container: {
     height: 300,
@@ -94,7 +92,7 @@ export const AddMemberBottomSheet: React.FC = () => {
     return null;
   }
 
-  const addMember = async (user: UserResponse<StreamChatGenerics>) => {
+  const addMember = async (user: UserResponse) => {
     setAddMemberQueryInProgress(true);
 
     try {

examples/SampleApp/src/components/ChannelInfoOverlay.tsx

@@ -29,6 +29,7 @@ import {
   useTheme,
   useViewport,
 } from 'stream-chat-react-native';
+import { ChannelMemberResponse } from 'stream-chat';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
@@ -224,9 +225,9 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
     : 0;
   const channelName = channel
     ? channel.data?.name ||
-      Object.values(channel.state.members)
+      Object.values<ChannelMemberResponse>(channel.state.members)
         .slice(0)
-        .reduce((returnString, currentMember, index, originalArray) => {
+        .reduce<string>((returnString, currentMember, index, originalArray) => {
           const returnStringLength = returnString.length;
           const currentMemberName =
             currentMember.user?.name || currentMember.user?.id || 'Unknown User';
@@ -246,7 +247,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
         }, '')
     : '';
   const otherMembers = channel
-    ? Object.values(channel.state.members).filter((member) => member.user?.id !== clientId)
+    ? Object.values<ChannelMemberResponse>(channel.state.members).filter((member) => member.user?.id !== clientId)
     : [];
 
   return (
@@ -292,14 +293,14 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
                               ? 'Online'
                               : `Last Seen ${dayjs(otherMembers[0].user?.last_active).fromNow()}`
                             : `${Object.keys(channel.state.members).length} Members, ${
-                                Object.values(channel.state.members).filter(
+                                Object.values<ChannelMemberResponse>(channel.state.members).filter(
                                   (member) => !!member.user?.online,
                                 ).length
                               } Online`}
                         </Text>
                         <FlatList
                           contentContainerStyle={styles.flatListContent}
-                          data={Object.values(channel.state.members)
+                          data={Object.values<ChannelMemberResponse>(channel.state.members)
                             .map((member) => member.user)
                             .sort((a, b) =>
                               !!a?.online && !b?.online

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -22,7 +22,7 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
 
 import type { StackNavigationProp } from '@react-navigation/stack';
 
-import type { StackNavigatorParamList, StreamChatGenerics } from '../types';
+import type { StackNavigatorParamList } from '../types';
 import { ChannelState } from 'stream-chat';
 
 const styles = StyleSheet.create({
@@ -71,7 +71,7 @@ const CustomChannelPreviewStatus = (
   );
 };
 
-export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGenerics>> = (
+export const ChannelPreview: React.FC<ChannelPreviewMessengerProps> = (
   props,
 ) => {
   const { channel } = props;
@@ -82,7 +82,7 @@ export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGen
 
   const { data, setData } = useChannelInfoOverlayContext();
 
-  const { client } = useChatContext<StreamChatGenerics>();
+  const { client } = useChatContext();
 
   const navigation = useNavigation<ChannelListScreenNavigationProp>();
 

examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx

@@ -8,7 +8,7 @@ import { DEFAULT_PAGINATION_LIMIT } from '../../utils/constants';
 
 import type { MessageResponse } from 'stream-chat';
 
-import type { StackNavigatorParamList, StreamChatGenerics } from '../../types';
+import type { StackNavigatorParamList } from '../../types';
 
 dayjs.extend(calendar);
 
@@ -52,13 +52,13 @@ export type MessageSearchListProps = {
   EmptySearchIndicator: React.ComponentType;
   loading: boolean;
   loadMore: () => void;
-  messages: MessageResponse<StreamChatGenerics>[] | undefined;
+  messages: MessageResponse[] | undefined;
   refreshing?: boolean;
   refreshList?: () => void;
   showResultCount?: boolean;
 };
 export const MessageSearchList: React.FC<MessageSearchListProps> = React.forwardRef(
-  (props, scrollRef: React.Ref<FlatList<MessageResponse<StreamChatGenerics>> | null>) => {
+  (props, scrollRef: React.Ref<FlatList<MessageResponse> | null>) => {
     const {
       EmptySearchIndicator,
       loading,

examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx

@@ -4,7 +4,6 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/core';
 
 import {
-  DefaultStreamChatGenerics,
   MessageInputContextValue,
   Search,
   SendRight,
@@ -16,20 +15,15 @@ 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,
-> = Pick<MessageInputContextValue<StreamChatGenerics>, 'giphyActive' | 'sendMessage'> & {
+type NewDirectMessagingSendButtonPropsWithContext = Pick<MessageInputContextValue, 'giphyActive' | 'sendMessage'> & {
   /** Disables the button */ disabled: boolean;
 };
 
-const SendButtonWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: NewDirectMessagingSendButtonPropsWithContext<StreamChatGenerics>,
+const SendButtonWithContext = (
+  props: NewDirectMessagingSendButtonPropsWithContext,
 ) => {
   const { disabled = false, giphyActive, sendMessage } = props;
   const {
@@ -53,9 +47,9 @@ const SendButtonWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: NewDirectMessagingSendButtonPropsWithContext<StreamChatGenerics>,
-  nextProps: NewDirectMessagingSendButtonPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: NewDirectMessagingSendButtonPropsWithContext,
+  nextProps: NewDirectMessagingSendButtonPropsWithContext,
 ) => {
   const {
     disabled: prevDisabled,
@@ -91,20 +85,18 @@ const MemoizedNewDirectMessagingSendButton = React.memo(
   areEqual,
 ) as typeof SendButtonWithContext;
 
-export type SendButtonProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<NewDirectMessagingSendButtonPropsWithContext<StreamChatGenerics>>;
+export type SendButtonProps = Partial<NewDirectMessagingSendButtonPropsWithContext>;
 
 /**
  * UI Component for send button in MessageInput component.
  */
-export const NewDirectMessagingSendButton = (props: SendButtonProps<LocalStreamChatGenerics>) => {
+export const NewDirectMessagingSendButton = (props: SendButtonProps) => {
   const { chatClient } = useAppContext();
   const navigation = useNavigation<NewDirectMessagingScreenNavigationProp>();
-  const { channel } = useChannelContext<LocalStreamChatGenerics>();
+  const { channel } = useChannelContext();
   const { selectedUserIds, reset } = useUserSearchContext();
 
-  const { giphyActive, text } = useMessageInputContext<LocalStreamChatGenerics>();
+  const { giphyActive, text } = useMessageInputContext();
 
   const sendMessage = async () => {
     if (!channel) {
@@ -133,7 +125,7 @@ export const NewDirectMessagingSendButton = (props: SendButtonProps<LocalStreamC
   };
 
   return (
-    <MemoizedNewDirectMessagingSendButton<LocalStreamChatGenerics>
+    <MemoizedNewDirectMessagingSendButton
       {...{ giphyActive, sendMessage }}
       {...props}
       {...{ disabled: props.disabled || false }}

examples/SampleApp/src/components/UnreadCountBadge.tsx

@@ -25,7 +25,7 @@ const selector = (nextValue: ThreadManagerState) =>
 
 export const ThreadsUnreadCountBadge: React.FC = () => {
   const { chatClient } = useAppContext();
-  const { unreadCount } = useStateStore(chatClient?.threads?.state, selector);
+  const { unreadCount } = useStateStore(chatClient?.threads?.state, selector) ?? { unreadCount: 0 };
 
   return <UnreadCountBadge unreadCount={unreadCount} />;
 };

examples/SampleApp/src/components/UserInfoOverlay.tsx

@@ -35,7 +35,6 @@ import { useAppOverlayContext } from '../context/AppOverlayContext';
 import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
 import { useUserInfoOverlayContext } from '../context/UserInfoOverlayContext';
 
-import type { StreamChatGenerics } from '../types';
 import { useAppContext } from '../context/AppContext';
 import { UserResponse } from 'stream-chat';
 
@@ -105,7 +104,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
   const { overlayOpacity, visible } = props;
   const { chatClient } = useAppContext();
   const { overlay, setOverlay } = useAppOverlayContext();
-  const { client } = useChatContext<StreamChatGenerics>();
+  const { client } = useChatContext();
   const { setData } = useBottomSheetOverlayContext();
   const { data, reset } = useUserInfoOverlayContext();
   const { vh } = useViewport();
@@ -298,7 +297,6 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
 
                             // Check if the channel already exists.
                             const channels = await client.queryChannels({
-                              distinct: true,
                               members,
                             });
 
@@ -351,7 +349,6 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
 
                             // Check if the channel already exists.
                             const channels = await client.queryChannels({
-                              distinct: true,
                               members,
                             });