fix: typescipt issues and added new generics support for example apps

Author: khushal87

examples/SampleApp/App.tsx

@@ -29,17 +29,7 @@ import { UserSelectorScreen } from './src/screens/UserSelectorScreen';
 
 import type { StreamChat } from 'stream-chat';
 
-import type {
-  LocalAttachmentType,
-  LocalChannelType,
-  LocalCommandType,
-  LocalEventType,
-  LocalMessageType,
-  LocalReactionType,
-  LocalUserType,
-  StackNavigatorParamList,
-  UserSelectorParamList,
-} from './src/types';
+import type { StackNavigatorParamList, StreamChatType, UserSelectorParamList } from './src/types';
 
 LogBox.ignoreAllLogs(true);
 LogBox.ignoreLogs(['Non-serializable values were found in the navigation state']);
@@ -97,43 +87,14 @@ const DrawerNavigator: React.FC = () => (
 );
 
 const DrawerNavigatorWrapper: React.FC<{
-  chatClient: StreamChat<
-    LocalAttachmentType,
-    LocalChannelType,
-    LocalCommandType,
-    LocalEventType,
-    LocalMessageType,
-    LocalReactionType,
-    LocalUserType
-  >;
+  chatClient: StreamChat<StreamChatType>;
 }> = ({ chatClient }) => {
   const { bottom } = useSafeAreaInsets();
   const streamChatTheme = useStreamChatTheme();
 
   return (
-    <OverlayProvider<
-      LocalAttachmentType,
-      LocalChannelType,
-      LocalCommandType,
-      LocalEventType,
-      LocalMessageType,
-      LocalReactionType,
-      LocalUserType
-    >
-      bottomInset={bottom}
-      value={{ style: streamChatTheme }}
-    >
-      <Chat<
-        LocalAttachmentType,
-        LocalChannelType,
-        LocalCommandType,
-        LocalEventType,
-        LocalMessageType,
-        LocalReactionType,
-        LocalUserType
-      >
-        client={chatClient}
-      >
+    <OverlayProvider<StreamChatType> bottomInset={bottom} value={{ style: streamChatTheme }}>
+      <Chat<StreamChatType> client={chatClient}>
         <AppOverlayProvider>
           <UserSearchProvider>
             <DrawerNavigator />

examples/SampleApp/src/ChatUsers.ts

@@ -1,5 +1,5 @@
 import { UserResponse } from 'stream-chat';
-import { LocalUserType } from './types';
+import { StreamChatType } from './types';
 
 export const USER_TOKENS: Record<string, string> = {
   e2etest1:
@@ -21,7 +21,7 @@ export const USER_TOKENS: Record<string, string> = {
   vishal:
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoidmlzaGFsIn0.HOlVh-ZyQnjyuL20G-67RTgKufBuAH-I-gbEELFlass',
 };
-export const USERS: Record<string, UserResponse<LocalUserType>> = {
+export const USERS: Record<string, UserResponse<StreamChatType>> = {
   neil: {
     id: 'neil',
     image: 'https://ca.slack-edge.com/T02RM6X6B-U01173D1D5J-0dead6eea6ea-512',

examples/SampleApp/src/components/AddMemberBottomSheet.tsx

@@ -15,7 +15,7 @@ import { usePaginatedUsers } from '../hooks/usePaginatedUsers';
 
 import type { UserResponse } from 'stream-chat';
 
-import { LocalUserType } from '../types';
+import { StreamChatType } from '../types';
 
 const styles = StyleSheet.create({
   container: {
@@ -89,7 +89,7 @@ export const AddMemberBottomSheet: React.FC = () => {
     return null;
   }
 
-  const addMember = async (user: UserResponse<LocalUserType>) => {
+  const addMember = async (user: UserResponse<StreamChatType>) => {
     setAddMemberQueryInProgress(true);
 
     try {

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -18,16 +18,7 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
 
 import type { StackNavigationProp } from '@react-navigation/stack';
 
-import type {
-  LocalAttachmentType,
-  LocalChannelType,
-  LocalCommandType,
-  LocalEventType,
-  LocalMessageType,
-  LocalReactionType,
-  LocalUserType,
-  StackNavigatorParamList,
-} from '../types';
+import type { StackNavigatorParamList, StreamChatType } from '../types';
 
 const styles = StyleSheet.create({
   leftSwipeableButton: {
@@ -51,17 +42,7 @@ type ChannelListScreenNavigationProp = StackNavigationProp<
   'ChannelListScreen'
 >;
 
-export const ChannelPreview: React.FC<
-  ChannelPreviewMessengerProps<
-    LocalAttachmentType,
-    LocalChannelType,
-    LocalCommandType,
-    LocalEventType,
-    LocalMessageType,
-    LocalReactionType,
-    LocalUserType
-  >
-> = (props) => {
+export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatType>> = (props) => {
   const { channel } = props;
 
   const { setOverlay } = useAppOverlayContext();
@@ -70,15 +51,7 @@ export const ChannelPreview: React.FC<
 
   const { data, setData } = useChannelInfoOverlayContext();
 
-  const { client } = useChatContext<
-    LocalAttachmentType,
-    LocalChannelType,
-    LocalCommandType,
-    LocalEventType,
-    LocalMessageType,
-    LocalReactionType,
-    LocalUserType
-  >();
+  const { client } = useChatContext<StreamChatType>();
 
   const navigation = useNavigation<ChannelListScreenNavigationProp>();
 

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

@@ -8,14 +8,7 @@ import { MESSAGE_SEARCH_LIMIT } from '../../hooks/usePaginatedSearchedMessages';
 
 import type { MessageResponse } from 'stream-chat';
 
-import type {
-  LocalAttachmentType,
-  LocalChannelType,
-  LocalCommandType,
-  LocalMessageType,
-  LocalReactionType,
-  LocalUserType,
-} from '../../types';
+import type { StreamChatType } from '../../types';
 
 const styles = StyleSheet.create({
   contentContainer: { flexGrow: 1 },
@@ -59,34 +52,13 @@ export type MessageSearchListProps = {
   EmptySearchIndicator: React.ComponentType;
   loading: boolean;
   loadMore: () => void;
-  messages:
-    | MessageResponse<
-        LocalAttachmentType,
-        LocalChannelType,
-        LocalCommandType,
-        LocalMessageType,
-        LocalReactionType,
-        LocalUserType
-      >[]
-    | undefined;
+  messages: MessageResponse<StreamChatType>[] | undefined;
   refreshing?: boolean;
   refreshList?: () => void;
   showResultCount?: boolean;
 };
 export const MessageSearchList: React.FC<MessageSearchListProps> = React.forwardRef(
-  (
-    props,
-    scrollRef: React.Ref<FlatList<
-      MessageResponse<
-        LocalAttachmentType,
-        LocalChannelType,
-        LocalCommandType,
-        LocalMessageType,
-        LocalReactionType,
-        LocalUserType
-      >
-    > | null>,
-  ) => {
+  (props, scrollRef: React.Ref<FlatList<MessageResponse<StreamChatType>> | null>) => {
     const {
       EmptySearchIndicator,
       loading,

examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx

@@ -23,15 +23,7 @@ import {
 
 import { NewDirectMessagingScreenNavigationProp } from '../screens/NewDirectMessagingScreen';
 
-import {
-  LocalAttachmentType,
-  LocalChannelType,
-  LocalCommandType,
-  LocalEventType,
-  LocalMessageType,
-  LocalReactionType,
-  LocalUserType,
-} from '../types';
+import { StreamChatType } from '../types';
 
 type NewDirectMessagingSendButtonPropsWithContext<
   At extends UnknownType = DefaultAttachmentType,
@@ -131,37 +123,11 @@ export type SendButtonProps<
 /**
  * UI Component for send button in MessageInput component.
  */
-export const NewDirectMessagingSendButton = (
-  props: SendButtonProps<
-    LocalAttachmentType,
-    LocalChannelType,
-    LocalCommandType,
-    LocalEventType,
-    LocalMessageType,
-    LocalReactionType,
-    LocalUserType
-  >,
-) => {
+export const NewDirectMessagingSendButton = (props: SendButtonProps<StreamChatType>) => {
   const navigation = useNavigation<NewDirectMessagingScreenNavigationProp>();
-  const { channel } = useChannelContext<
-    LocalAttachmentType,
-    LocalChannelType,
-    LocalCommandType,
-    LocalEventType,
-    LocalMessageType,
-    LocalReactionType,
-    LocalUserType
-  >();
-
-  const { giphyActive, text } = useMessageInputContext<
-    LocalAttachmentType,
-    LocalChannelType,
-    LocalCommandType,
-    LocalEventType,
-    LocalMessageType,
-    LocalReactionType,
-    LocalUserType
-  >();
+  const { channel } = useChannelContext<StreamChatType>();
+
+  const { giphyActive, text } = useMessageInputContext<StreamChatType>();
 
   const sendMessage = async () => {
     if (!channel) return;
@@ -178,15 +144,7 @@ export const NewDirectMessagingSendButton = (
   };
 
   return (
-    <MemoizedNewDirectMessagingSendButton<
-      LocalAttachmentType,
-      LocalChannelType,
-      LocalCommandType,
-      LocalEventType,
-      LocalMessageType,
-      LocalReactionType,
-      LocalUserType
-    >
+    <MemoizedNewDirectMessagingSendButton<StreamChatType>
       {...{ giphyActive, sendMessage }}
       {...props}
       {...{ disabled: props.disabled || false }}

examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx

@@ -4,7 +4,7 @@ import { useTheme } from 'stream-chat-react-native';
 
 import type { UserResponse } from 'stream-chat';
 
-import type { LocalUserType } from '../../types';
+import type { StreamChatType } from '../../types';
 
 const styles = StyleSheet.create({
   tagContainer: {
@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
 type SelectedUserTagProps = {
   index: number;
   onPress: () => void;
-  tag: UserResponse<LocalUserType>;
+  tag: UserResponse<StreamChatType>;
   disabled?: boolean;
 };
 

examples/SampleApp/src/components/UserSearch/UserGridItem.tsx

@@ -5,7 +5,7 @@ import { Avatar, Close, useTheme } from 'stream-chat-react-native';
 
 import type { UserResponse } from 'stream-chat';
 
-import type { LocalUserType } from '../../types';
+import type { StreamChatType } from '../../types';
 
 const presenceIndicator = { cx: 7, cy: 7, r: 5 };
 
@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
 
 export type UserGridItemProps = {
   onPress: () => void;
-  user: UserResponse<LocalUserType>;
+  user: UserResponse<StreamChatType>;
   removeButton?: boolean;
 };
 

examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx

@@ -15,7 +15,7 @@ import { useUserSearchContext } from '../../context/UserSearchContext';
 
 import type { UserResponse } from 'stream-chat';
 
-import type { LocalUserType } from '../../types';
+import type { StreamChatType } from '../../types';
 import { Search } from '../../icons/Search';
 
 const styles = StyleSheet.create({
@@ -62,9 +62,9 @@ const styles = StyleSheet.create({
 type UserSearchResultsProps = {
   groupedAlphabetically?: boolean;
   removeOnPressOnly?: boolean;
-  results?: UserResponse<LocalUserType>[];
+  results?: UserResponse<StreamChatType>[];
   showOnlineStatus?: boolean;
-  toggleSelectedUser?: (user: UserResponse<LocalUserType>) => void;
+  toggleSelectedUser?: (user: UserResponse<StreamChatType>) => void;
 };
 
 export const UserSearchResults: React.FC<UserSearchResultsProps> = ({
@@ -84,7 +84,7 @@ export const UserSearchResults: React.FC<UserSearchResultsProps> = ({
   } = useUserSearchContext();
   const [sections, setSections] = useState<
     Array<{
-      data: UserResponse<LocalUserType>[];
+      data: UserResponse<StreamChatType>[];
       title: string;
     }>
   >([]);
@@ -109,7 +109,7 @@ export const UserSearchResults: React.FC<UserSearchResultsProps> = ({
   useEffect(() => {
     const newSections: {
       [key: string]: {
-        data: UserResponse<LocalUserType>[];
+        data: UserResponse<StreamChatType>[];
         title: string;
       };
     } = {};

examples/SampleApp/src/components/UserSearch/UserSearchResultsGrid.tsx

@@ -8,7 +8,7 @@ import { EmptySearchState } from '../../icons/EmptySearchState';
 
 import type { UserResponse } from 'stream-chat';
 
-import type { LocalUserType } from '../../types';
+import type { StreamChatType } from '../../types';
 
 const totalUserSpace = vw(100) - 56; // 36 = outside margin 8 * 2 + inner padding 20 * 2;
 
@@ -31,8 +31,8 @@ const styles = StyleSheet.create({
 });
 
 type UserSearchResultsGridProps = {
-  onPress: (user: UserResponse<LocalUserType>) => void;
-  results: UserResponse<LocalUserType>[];
+  onPress: (user: UserResponse<StreamChatType>) => void;
+  results: UserResponse<StreamChatType>[];
   gridSize?: number;
   loading?: boolean;
   loadMore?: () => void;