update app.js

Author: Jaap

examples/messaging/src/App.js

@@ -6,102 +6,71 @@ import {
   Channel,
   MessageList,
   MessageInput,
+  MessageInputFlat,
   MessageSimple,
+  ChannelHeader,
   ChannelPreviewMessenger,
   InfiniteScrollPaginator,
+  ChannelListMessenger,
   ChannelList,
   Window,
   Thread,
 } from 'stream-chat-react';
-import {
-  MessagingInput,
-  MessagingChannelHeader,
-  MessagingChannelList,
-  MessagingCreateChannel,
-} from './components';
 import 'stream-chat-react/dist/css/index.css';
 import './App.css';
 
 const urlParams = new URLSearchParams(window.location.search);
-const apiKey = urlParams.get('apikey') || 'qk4nn7rpcn75';
-urlParams.get('user') || 'example-user';
-const user = urlParams.get('user') || 'example-user';
-const theme = urlParams.get('theme') || 'dark';
-const userToken =
-  urlParams.get('user_token') ||
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HlC0dMKL43y3K_XbfvQS_Yc3V314HU4Z7LrBLil777g';
-
-const filters = { type: 'messaging', members: { $in: [user] } };
+// const user =
+//   urlParams.get('user') || process.env.REACT_APP_CHAT_API_DEFAULT_USER;
+const theme = urlParams.get('theme') || 'light';
+// const channelName = urlParams.get('channel') || 'demo';
+// const userToken =
+//   urlParams.get('user_token') ||
+//   process.env.REACT_APP_CHAT_API_DEFAULT_USER_TOKEN;
+const filters = { type: 'messaging', example: 1 };
 const sort = {
   last_message_at: -1,
   updated_at: -1,
   cid: 1,
 };
-
-const options = { state: true, watch: true, presence: true, limit: 10 };
+const options = { state: true, watch: true, presence: true };
 const Paginator = (props) => (
   <InfiniteScrollPaginator threshold={300} {...props} />
 );
 
 class App extends Component {
   constructor(props) {
     super(props);
-    this.chatClient = new StreamChat(apiKey);
+    this.chatClient = new StreamChat('qk4nn7rpcn75');
     // if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
     //   this.chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);
     // }
     this.chatClient.setUser(
       {
-        id: user,
+        id: 'example-user',
       },
-      userToken,
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HlC0dMKL43y3K_XbfvQS_Yc3V314HU4Z7LrBLil777g',
     );
-    this.state = {
-      createChannel: false,
-    };
   }
 
-  onClose = () => {
-    this.setState({
-      createChannel: false,
-    });
-  };
-
-  onOpen = () => {
-    this.setState({
-      createChannel: true,
-    });
-  };
-
   render() {
     return (
       <Chat client={this.chatClient} theme={`messaging ${theme}`}>
         <ChannelList
-          List={(props) => (
-            <MessagingChannelList {...props} onCreateChannel={this.onOpen} />
-          )}
+          List={ChannelListMessenger}
           Preview={ChannelPreviewMessenger}
           filters={filters}
           sort={sort}
           options={options}
-          // Paginator={Paginator}
+          Paginator={Paginator}
         />
-        <Channel maxNumberOfFiles={10} multipleUploads={true}>
-          <MessagingCreateChannel
-            onClose={this.onClose}
-            visible={this.state.createChannel}
-          />
+        <Channel>
           <Window>
-            <MessagingChannelHeader />
-            <MessageList TypingIndicator={() => null} />
-            <MessageInput focus />
+            <ChannelHeader />
+            <MessageList />
+            <MessageInput Input={MessageInputFlat} focus />
           </Window>
-          <Thread
-            Message={MessageSimple}
-            additionalMessageInputProps={{
-              Input: MessagingInput,
-            }}
-          />
+          <Thread Message={MessageSimple} />
         </Channel>
       </Chat>
     );