Merge pull request #661 from GetStream/update-example-apps

update messaging app

Author: DanC5

examples/messaging/src/App.js

@@ -1,80 +1,70 @@
-/* eslint-disable */
-import React, { Component } from 'react';
+import React from 'react';
 import { StreamChat } from 'stream-chat';
 import {
   Chat,
   Channel,
-  MessageList,
-  MessageInput,
-  MessageInputFlat,
-  MessageSimple,
   ChannelHeader,
+  ChannelList,
+  ChannelListMessenger,
   ChannelPreviewMessenger,
   InfiniteScrollPaginator,
-  ChannelListMessenger,
-  ChannelList,
-  Window,
+  MessageInput,
+  MessageInputFlat,
+  MessageList,
   Thread,
+  Window,
 } from 'stream-chat-react';
 import 'stream-chat-react/dist/css/index.css';
+
 import './App.css';
 
 const urlParams = new URLSearchParams(window.location.search);
-// const user =
-//   urlParams.get('user') || process.env.REACT_APP_CHAT_API_DEFAULT_USER;
+const apiKey = urlParams.get('apiKey') || 'qk4nn7rpcn75';
+const userId = urlParams.get('user') || 'example-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 userToken =
+  urlParams.get('user_token') ||
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HlC0dMKL43y3K_XbfvQS_Yc3V314HU4Z7LrBLil777g';
+
 const filters = { type: 'messaging', example: 1 };
+const options = { state: true, watch: true, presence: true };
 const sort = {
+  cid: 1,
   last_message_at: -1,
   updated_at: -1,
-  cid: 1,
 };
-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('qk4nn7rpcn75');
-    if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
-      this.chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);
-    }
-    this.chatClient.setUser(
-      {
-        id: 'example-user',
-      },
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HlC0dMKL43y3K_XbfvQS_Yc3V314HU4Z7LrBLil777g',
-    );
-  }
+const chatClient = new StreamChat(apiKey);
 
-  render() {
-    return (
-      <Chat client={this.chatClient} theme={`messaging ${theme}`}>
-        <ChannelList
-          List={ChannelListMessenger}
-          Preview={ChannelPreviewMessenger}
-          filters={filters}
-          sort={sort}
-          options={options}
-          Paginator={Paginator}
-        />
-        <Channel>
-          <Window>
-            <ChannelHeader />
-            <MessageList />
-            <MessageInput Input={MessageInputFlat} focus />
-          </Window>
-          <Thread Message={MessageSimple} />
-        </Channel>
-      </Chat>
-    );
-  }
+if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
+  chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);
 }
 
+chatClient.setUser({ id: userId }, userToken);
+
+const App = () => (
+  <Chat client={chatClient} theme={`messaging ${theme}`}>
+    <ChannelList
+      List={ChannelListMessenger}
+      Preview={ChannelPreviewMessenger}
+      filters={filters}
+      sort={sort}
+      options={options}
+      Paginator={Paginator}
+    />
+    <Channel>
+      <Window>
+        <ChannelHeader />
+        <MessageList />
+        <MessageInput Input={MessageInputFlat} focus />
+      </Window>
+      <Thread />
+    </Channel>
+  </Chat>
+);
+
 export default App;