chore: add demo of LLC without SCG

GetStream · May 23, 2024 · a2aee8c · a2aee8c
1 parent d64adcc
commit a2aee8c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 46 deletions.
diff --git a/examples/typescript/src/App.tsx b/examples/typescript/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ChannelFilters, ChannelOptions, ChannelSort, StreamChat, UR } from 'stream-chat';
 import {
   Chat,
@@ -9,10 +9,21 @@ import {
   MessageInput,
   Thread,
   Window,
+  useCreateChatClient,
 } from 'stream-chat-react';
 
 import './App.css';
 
+declare module 'stream-chat' {
+  interface UserEx {
+    customUserField: string;
+  }
+
+  interface ReactionEx {
+    customReactionField: string;
+  }
+}
+
 const apiKey = process.env.REACT_APP_STREAM_KEY as string;
 const userId = process.env.REACT_APP_USER_ID as string;
 const userToken = process.env.REACT_APP_USER_TOKEN as string;
@@ -29,38 +40,39 @@ type LocalMessageType = Record<string, unknown>;
 type LocalReactionType = Record<string, unknown>;
 type LocalUserType = Record<string, unknown>;
 
-type StreamChatGenerics = {
-  attachmentType: LocalAttachmentType;
-  channelType: LocalChannelType;
-  commandType: LocalCommandType;
-  eventType: LocalEventType;
-  messageType: LocalMessageType;
-  reactionType: LocalReactionType;
-  userType: LocalUserType;
-  pollType: UR;
-  pollOptionType: UR;
-};
+const App = () => {
+  const chatClient = useCreateChatClient({
+    apiKey,
+    tokenOrProvider: userToken,
+    userData: { id: userId, customUserField: 'field' },
+  });
 
-const chatClient = StreamChat.getInstance<StreamChatGenerics>(apiKey);
+  useEffect(() => {
+    (async () => {
+      if (chatClient) {
+        const { reactions } = await chatClient.queryReactions('dummy', {});
+        console.log(reactions[0].customReactionField);
+      }
+    })();
+  }, [chatClient]);
 
-if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
-  chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);
-}
-
-chatClient.connectUser({ id: userId }, userToken);
+  if (!chatClient) {
+    return null;
+  }
 
-const App = () => (
-  <Chat client={chatClient}>
-    <ChannelList filters={filters} sort={sort} options={options} showChannelSearch />
-    <Channel>
-      <Window>
-        <ChannelHeader />
-        <MessageList />
-        <MessageInput focus />
-      </Window>
-      <Thread />
-    </Channel>
-  </Chat>
-);
+  return (
+    <Chat client={chatClient}>
+      <ChannelList filters={filters} sort={sort} options={options} showChannelSearch />
+      <Channel>
+        <Window>
+          <ChannelHeader />
+          <MessageList />
+          <MessageInput focus />
+        </Window>
+        <Thread />
+      </Channel>
+    </Chat>
+  );
+};
 
 export default App;
diff --git a/src/components/Chat/hooks/useCreateChatClient.ts b/src/components/Chat/hooks/useCreateChatClient.ts
@@ -1,40 +1,35 @@
 import { useEffect, useState } from 'react';
 
-import {
-  DefaultGenerics,
-  ExtendableGenerics,
-  OwnUserResponse,
-  StreamChat,
-  TokenOrProvider,
-  UserResponse,
-} from 'stream-chat';
+import { StreamChat, TokenOrProvider, UserResponse, UserResponseEx } from 'stream-chat';
 
 /**
  * React hook to create, connect and return `StreamChat` client.
  */
-export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGenerics>({
+export const useCreateChatClient = ({
   apiKey,
   tokenOrProvider,
   userData,
 }: {
   apiKey: string;
   tokenOrProvider: TokenOrProvider;
-  userData: OwnUserResponse<SCG> | UserResponse<SCG>;
+  userData: UserResponseEx;
 }) => {
-  const [chatClient, setChatClient] = useState<StreamChat<SCG> | null>(null);
+  const [chatClient, setChatClient] = useState<StreamChat | null>(null);
   const [cachedUserData, setCachedUserData] = useState(userData);
 
   if (userData.id !== cachedUserData.id) {
     setCachedUserData(userData);
   }
 
   useEffect(() => {
-    const client = new StreamChat<SCG>(apiKey);
+    const client = new StreamChat(apiKey);
     let didUserConnectInterrupt = false;
 
-    const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
-      if (!didUserConnectInterrupt) setChatClient(client);
-    });
+    const connectionPromise = client
+      .connectUser(cachedUserData as UserResponse, tokenOrProvider)
+      .then(() => {
+        if (!didUserConnectInterrupt) setChatClient(client);
+      });
 
     return () => {
       didUserConnectInterrupt = true;