feat: introduce ChatView and ThreadList components (#102)

* Introduce ChatView and Threads * Upgrade stream-chat and stream-chat-react
GetStream · Sep 16, 2024 · 7e74fd9 · 7e74fd9
1 parent 677aa9e
commit 7e74fd9
Show file tree

Hide file tree

Showing 8 changed files with 655 additions and 666 deletions.
diff --git a/social-messenger-ts/package.json b/social-messenger-ts/package.json
@@ -12,8 +12,8 @@
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "stream-chat": "^8.37.0",
-    "stream-chat-react": "12.0.0-rc.6"
+    "stream-chat": "^8.40.7",
+    "stream-chat-react": "^12.0.0-rc.14"
   },
   "devDependencies": {
     "@types/jest": "^27.5.2",

diff --git a/social-messenger-ts/src/App.tsx b/social-messenger-ts/src/App.tsx
@@ -1,6 +1,14 @@
 import React, { useState } from 'react';
 import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
-import { Channel, Chat } from 'stream-chat-react';
+import {
+  Channel,
+  Chat,
+  ChatView,
+  Thread,
+  ThreadList,
+  useCreateChatClient,
+} from 'stream-chat-react';
+import clsx from 'clsx';
 import { EmojiPicker } from 'stream-chat-react/emojis';
 
 import data from '@emoji-mart/data';
@@ -19,7 +27,7 @@ import {
 
 import { GiphyContextProvider, useThemeContext } from './context';
 
-import { useConnectUser, useChecklist, useMobileView, useUpdateAppHeightOnResize } from './hooks';
+import { useChecklist, useMobileView, useUpdateAppHeightOnResize } from './hooks';
 
 import type { StreamChatGenerics } from './types';
 
@@ -37,7 +45,7 @@ type AppProps = {
   };
 };
 
-const WrappedEmojiPicker = () => {
+const EmojiPickerWithTheme = () => {
   const { theme } = useThemeContext();
 
   return <EmojiPicker pickerProps={{ theme }} />;
@@ -47,7 +55,11 @@ const App = (props: AppProps) => {
   const { apiKey, userToConnect, userToken, targetOrigin, channelListOptions } = props;
   const [isCreating, setIsCreating] = useState(false);
 
-  const chatClient = useConnectUser<StreamChatGenerics>(apiKey, userToConnect, userToken);
+  const chatClient = useCreateChatClient<StreamChatGenerics>({
+    apiKey,
+    userData: userToConnect,
+    tokenOrProvider: userToken,
+  });
   const toggleMobile = useMobileView();
   const { themeClassName } = useThemeContext();
 
@@ -59,30 +71,41 @@ const App = (props: AppProps) => {
   }
 
   return (
-    <Chat client={chatClient} theme={`messaging ${themeClassName}`}>
-      <MessagingSidebar
-        channelListOptions={channelListOptions}
-        onClick={toggleMobile}
-        onCreateChannel={() => setIsCreating(!isCreating)}
-        onPreviewSelect={() => setIsCreating(false)}
-      />
-      <Channel
-        maxNumberOfFiles={10}
-        multipleUploads={true}
-        SendButton={SendButton}
-        ThreadHeader={MessagingThreadHeader}
-        TypingIndicator={() => null}
-        EmojiPicker={WrappedEmojiPicker}
-        emojiSearchIndex={SearchIndex}
-        enrichURLForPreview
-      >
-        {isCreating && (
-          <CreateChannel toggleMobile={toggleMobile} onClose={() => setIsCreating(false)} />
-        )}
-        <GiphyContextProvider>
-          <ChannelInner theme={themeClassName} toggleMobile={toggleMobile} />
-        </GiphyContextProvider>
-      </Channel>
+    <Chat client={chatClient} theme={clsx('messaging', themeClassName)}>
+      <ChatView>
+        <ChatView.Selector />
+        <ChatView.Channels>
+          <MessagingSidebar
+            channelListOptions={channelListOptions}
+            onClick={toggleMobile}
+            onCreateChannel={() => setIsCreating(!isCreating)}
+            onPreviewSelect={() => setIsCreating(false)}
+          />
+          <Channel
+            maxNumberOfFiles={10}
+            multipleUploads={true}
+            SendButton={SendButton}
+            ThreadHeader={MessagingThreadHeader}
+            TypingIndicator={() => null}
+            EmojiPicker={EmojiPickerWithTheme}
+            emojiSearchIndex={SearchIndex}
+            enrichURLForPreview
+          >
+            {isCreating && (
+              <CreateChannel toggleMobile={toggleMobile} onClose={() => setIsCreating(false)} />
+            )}
+            <GiphyContextProvider>
+              <ChannelInner theme={themeClassName} toggleMobile={toggleMobile} />
+            </GiphyContextProvider>
+          </Channel>
+        </ChatView.Channels>
+        <ChatView.Threads>
+          <ThreadList />
+          <ChatView.ThreadAdapter>
+            <Thread virtualized />
+          </ChatView.ThreadAdapter>
+        </ChatView.Threads>
+      </ChatView>
     </Chat>
   );
 };

diff --git a/social-messenger-ts/src/components/ChannelInner/ChannelInner.tsx b/social-messenger-ts/src/components/ChannelInner/ChannelInner.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
-import {logChatPromiseExecution} from 'stream-chat';
-import {MessageInput, MessageList, Thread, useChannelActionContext, Window,} from 'stream-chat-react';
-import {encodeToMp3} from 'stream-chat-react/mp3-encoder';
+import { logChatPromiseExecution } from 'stream-chat';
+import {
+  MessageInput,
+  MessageList,
+  Thread,
+  useChannelActionContext,
+  Window,
+} from 'stream-chat-react';
+import { encodeToMp3 } from 'stream-chat-react/mp3-encoder';
 
-import {MessagingChannelHeader} from '../../components';
-import {useGiphyContext} from '../../context';
-import type {StreamChatGenerics} from '../../types';
-import {MessageInputProps} from "stream-chat-react/dist/components/MessageInput/MessageInput";
+import { MessagingChannelHeader } from '../../components';
+import { useGiphyContext } from '../../context';
+import type { StreamChatGenerics } from '../../types';
+import { MessageInputProps } from 'stream-chat-react/dist/components/MessageInput/MessageInput';
 
 export type ChannelInnerProps = {
   toggleMobile: () => void;
@@ -19,7 +25,11 @@ const ChannelInner = (props: ChannelInnerProps) => {
 
   const { sendMessage } = useChannelActionContext<StreamChatGenerics>();
 
-  const overrideSubmitHandler: MessageInputProps<StreamChatGenerics>['overrideSubmitHandler'] = (message, _, ...restSendParams) => {
+  const overrideSubmitHandler: MessageInputProps<StreamChatGenerics>['overrideSubmitHandler'] = (
+    message,
+    _,
+    ...restSendParams
+  ) => {
     let updatedMessage;
 
     if (message.attachments?.length && message.text?.startsWith('/giphy')) {
@@ -38,14 +48,7 @@ const ChannelInner = (props: ChannelInnerProps) => {
 
       const messageToSend = {
         ...newMessage,
-        parent: parentMessage
-          ? {
-              ...parentMessage,
-              created_at: parentMessage.created_at?.toString(),
-              pinned_at: parentMessage.pinned_at?.toString(),
-              updated_at: parentMessage.updated_at?.toString(),
-            }
-          : undefined,
+        parent: parentMessage,
       };
 
       const sendMessagePromise = sendMessage(messageToSend, ...restSendParams);
@@ -63,9 +66,12 @@ const ChannelInner = (props: ChannelInnerProps) => {
         <MessagingChannelHeader theme={theme} toggleMobile={toggleMobile} />
         <MessageList messageActions={actions} />
         <MessageInput
-            focus
-            overrideSubmitHandler={overrideSubmitHandler}
-            audioRecordingConfig={{ transcoderConfig: { encoder: encodeToMp3 } }} audioRecordingEnabled asyncMessagesMultiSendEnabled />
+          focus
+          overrideSubmitHandler={overrideSubmitHandler}
+          audioRecordingConfig={{ transcoderConfig: { encoder: encodeToMp3 } }}
+          audioRecordingEnabled
+          asyncMessagesMultiSendEnabled
+        />
       </Window>
       <Thread />
     </>

diff --git a/social-messenger-ts/src/hooks/index.ts b/social-messenger-ts/src/hooks/index.ts
@@ -1,5 +1,4 @@
 export * from './useChecklist';
-export * from './useConnectUser';
 export * from './useMobileView';
 export * from './useTheme';
 export * from './useUpdateAppHeightOnResize';
diff --git a/social-messenger-ts/src/hooks/useConnectUser.ts b/social-messenger-ts/src/hooks/useConnectUser.ts