refactor: rename StreamChatType to StreamChatGenerics in sample apps and docs

Author: vishalnarkhede

docusaurus/docs/reactnative/basics/upgrade_helper.mdx

@@ -291,13 +291,13 @@ user won't be able to see a cropped image on UI. In this version, we render imag
 The Typescript generics can be simplified using a single Generic which can be passed to the component.
 
 ```tsx
-const client = StreamChat.getInstance<StreamChatType>('YOUR_API_KEY');
+const client = StreamChat.getInstance<StreamChatGenerics>('YOUR_API_KEY');
 ```
 
-where `StreamChatType` can be defined as;
+where `StreamChatGenerics` can be defined as;
 
 ```tsx
-type StreamChatType = {
+type StreamChatGenerics = {
   attachmentType: LocalAttachmentType;
   channelType: LocalChannelType;
   commandType: LocalCommandType;

docusaurus/docs/reactnative/customization/typescript.mdx

@@ -24,13 +24,13 @@ The [documentation on `stream-chat-js` TypeScript](https://github.com/GetStream/
 The client a generic type that defines seven customizable fields that currently exist in [`stream-chat-js`](https://github.com/GetStream/stream-chat-js#typescript-v2xx).
 
 ```tsx
-const client = StreamChat.getInstance<StreamChatType>('YOUR_API_KEY');
+const client = StreamChat.getInstance<StreamChatGenerics>('YOUR_API_KEY');
 ```
 
-where `StreamChatType` can be defined as a type with the seven generics that correspond to the seven customizable fields as follows:
+where `StreamChatGenerics` can be defined as a type with the seven generics that correspond to the seven customizable fields as follows:
 
 ```tsx
-type StreamChatType = {
+type StreamChatGenerics = {
   attachmentType: LocalAttachmentType;
   channelType: LocalChannelType;
   commandType: LocalCommandType;
@@ -93,7 +93,7 @@ Additional fields on the defaults, i.e. `image`, are custom fields used by `stre
 When wanting to set a subset of generics, the preceding and interceding generics must also be set for the TypeScript compiler to understand intent correctly.
 
 ```tsx
-type StreamChatType = {
+type StreamChatGenerics = {
   attachmentType: DefaultAttachmentType;
   channelType: DefaultChannelType;
   commandType: DefaultCommandType;
@@ -105,7 +105,7 @@ type StreamChatType = {
 ```
 
 ```tsx
-const client = StreamChat.getInstance<StreamChatType>('YOUR_API_KEY');
+const client = StreamChat.getInstance<StreamChatGenerics>('YOUR_API_KEY');
 ```
 
 :::note
@@ -121,7 +121,7 @@ The [TypeScript Example App](https://github.com/GetStream/stream-chat-react-nati
 Core to understanding this usage is [how generics can be applied to JSX elements](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements).
 
 In many cases the use of a single prop such as `client` or `channel` allows TypeScript to infer the generics on an element.
-In this case `channelType` within `StreamChatType` is inferred from `channel` and passed to the props type for a custom Attachment component.
+In this case `channelType` within `StreamChatGenerics` is inferred from `channel` and passed to the props type for a custom Attachment component.
 
 <img src={inference} alt='TypeScript Inference' />
 
@@ -130,7 +130,7 @@ In these cases the generics must be applied to the component directly.
 `MessageList` for instance could have the previous generics used on `client` applied to it in a similar manner.
 
 ```tsx
-<MessageList<StreamChatType>
+<MessageList<StreamChatGenerics>
   onThreadSelect={thread => {
     /** Set thread and navigate to thread screen */
   }}
@@ -147,7 +147,7 @@ Hooks, including those to access contexts, also require generics to be applied t
 `useChannelContext` for instance would have the previous generics applied to it to get a correctly typed return for `channel`.
 
 ```tsx
-const { channel } = useChannelContext<StreamChatType>();
+const { channel } = useChannelContext<StreamChatGenerics>();
 ```
 
 ## Partial inference
@@ -161,5 +161,5 @@ The lack of partial inference is particularly relevant if Higher Order Component
 The `withChannelContext` HOC accepts the generics similarly to the `useChannelContext` hook, but because partial inference is not supported the props for the wrapped component must also be explicitly provided.
 
 ```tsx {2}
-withChannelContext<MyComponentProps, StreamChatType>(MyComponent);
+withChannelContext<MyComponentProps, StreamChatGenerics>(MyComponent);
 ```

examples/SampleApp/App.tsx

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

examples/SampleApp/src/ChatUsers.ts

@@ -1,5 +1,5 @@
 import { UserResponse } from 'stream-chat';
-import { StreamChatType } from './types';
+import { StreamChatGenerics } 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<StreamChatType>> = {
+export const USERS: Record<string, UserResponse<StreamChatGenerics>> = {
   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 { StreamChatType } from '../types';
+import { StreamChatGenerics } from '../types';
 
 const styles = StyleSheet.create({
   container: {
@@ -89,7 +89,7 @@ export const AddMemberBottomSheet: React.FC = () => {
     return null;
   }
 
-  const addMember = async (user: UserResponse<StreamChatType>) => {
+  const addMember = async (user: UserResponse<StreamChatGenerics>) => {
     setAddMemberQueryInProgress(true);
 
     try {

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -18,7 +18,7 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
 
 import type { StackNavigationProp } from '@react-navigation/stack';
 
-import type { StackNavigatorParamList, StreamChatType } from '../types';
+import type { StackNavigatorParamList, StreamChatGenerics } from '../types';
 
 const styles = StyleSheet.create({
   leftSwipeableButton: {
@@ -42,7 +42,9 @@ type ChannelListScreenNavigationProp = StackNavigationProp<
   'ChannelListScreen'
 >;
 
-export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatType>> = (props) => {
+export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGenerics>> = (
+  props,
+) => {
   const { channel } = props;
 
   const { setOverlay } = useAppOverlayContext();
@@ -51,7 +53,7 @@ export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatTyp
 
   const { data, setData } = useChannelInfoOverlayContext();
 
-  const { client } = useChatContext<StreamChatType>();
+  const { client } = useChatContext<StreamChatGenerics>();
 
   const navigation = useNavigation<ChannelListScreenNavigationProp>();
 

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

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

examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx

@@ -23,7 +23,7 @@ import {
 
 import { NewDirectMessagingScreenNavigationProp } from '../screens/NewDirectMessagingScreen';
 
-import { StreamChatType } from '../types';
+import { StreamChatGenerics } from '../types';
 
 type NewDirectMessagingSendButtonPropsWithContext<
   At extends UnknownType = DefaultAttachmentType,
@@ -123,11 +123,11 @@ export type SendButtonProps<
 /**
  * UI Component for send button in MessageInput component.
  */
-export const NewDirectMessagingSendButton = (props: SendButtonProps<StreamChatType>) => {
+export const NewDirectMessagingSendButton = (props: SendButtonProps<StreamChatGenerics>) => {
   const navigation = useNavigation<NewDirectMessagingScreenNavigationProp>();
-  const { channel } = useChannelContext<StreamChatType>();
+  const { channel } = useChannelContext<StreamChatGenerics>();
 
-  const { giphyActive, text } = useMessageInputContext<StreamChatType>();
+  const { giphyActive, text } = useMessageInputContext<StreamChatGenerics>();
 
   const sendMessage = async () => {
     if (!channel) return;
@@ -144,7 +144,7 @@ export const NewDirectMessagingSendButton = (props: SendButtonProps<StreamChatTy
   };
 
   return (
-    <MemoizedNewDirectMessagingSendButton<StreamChatType>
+    <MemoizedNewDirectMessagingSendButton<StreamChatGenerics>
       {...{ 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 { StreamChatType } from '../../types';
+import type { StreamChatGenerics } from '../../types';
 
 const styles = StyleSheet.create({
   tagContainer: {
@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
 type SelectedUserTagProps = {
   index: number;
   onPress: () => void;
-  tag: UserResponse<StreamChatType>;
+  tag: UserResponse<StreamChatGenerics>;
   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 { StreamChatType } from '../../types';
+import type { StreamChatGenerics } 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<StreamChatType>;
+  user: UserResponse<StreamChatGenerics>;
   removeButton?: boolean;
 };