|
1 | | -import React, { Component } from 'react'; |
| 1 | +import React from 'react'; |
2 | 2 | import { ChannelSort, StreamChat } from 'stream-chat'; |
3 | 3 | import { |
4 | 4 | Chat, |
5 | 5 | Channel, |
| 6 | + ChannelHeader, |
| 7 | + ChannelList, |
| 8 | + ChannelListMessenger, |
| 9 | + ChannelPreviewMessenger, |
6 | 10 | MessageList, |
7 | 11 | MessageInput, |
8 | 12 | MessageInputFlat, |
9 | | - MessageSimple, |
10 | | - ChannelHeader, |
11 | | - ChannelPreviewMessenger, |
12 | | - ChannelListMessenger, |
13 | | - ChannelList, |
14 | | - Window, |
15 | 13 | Thread, |
| 14 | + Window, |
16 | 15 | } from 'stream-chat-react'; |
17 | 16 | import 'stream-chat-react/dist/css/index.css'; |
18 | 17 | import './App.css'; |
19 | 18 |
|
20 | | -const urlParams = new URLSearchParams(window.location.search); |
21 | | -const apiKey = urlParams.get('apiKey') || 'qk4nn7rpcn75'; |
22 | | -const userId = urlParams.get('user') || 'example-user'; |
23 | | -const theme = urlParams.get('theme') || 'light'; |
24 | | -const userToken = |
25 | | - urlParams.get('user_token') || |
26 | | - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HlC0dMKL43y3K_XbfvQS_Yc3V314HU4Z7LrBLil777g'; |
| 19 | +const apiKey = process.env.REACT_APP_STREAM_KEY as string; |
| 20 | +const userId = process.env.REACT_APP_USER_ID as string; |
| 21 | +const userToken = process.env.REACT_APP_USER_TOKEN as string; |
| 22 | +const theme = 'light'; |
27 | 23 |
|
28 | | -const filters = { type: 'messaging', example: 1 }; |
29 | | -const options = { state: true, watch: true, presence: true }; |
| 24 | +const filters = { type: 'messaging' }; |
| 25 | +const options = { state: true, presence: true, limit: 10 }; |
30 | 26 | const sort: ChannelSort = { |
| 27 | + cid: 1, |
31 | 28 | last_message_at: -1, |
32 | 29 | updated_at: -1, |
33 | | - cid: 1, |
34 | 30 | }; |
35 | 31 |
|
36 | | -class App extends Component { |
37 | | - chatClient = new StreamChat(''); |
38 | | - constructor(props: Readonly<{}>) { |
39 | | - super(props); |
40 | | - this.chatClient = StreamChat.getInstance(apiKey); |
| 32 | +const chatClient = StreamChat.getInstance(apiKey); |
41 | 33 |
|
42 | | - if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) { |
43 | | - this.chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT); |
44 | | - } |
| 34 | +if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) { |
| 35 | + chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT); |
| 36 | +} |
45 | 37 |
|
46 | | - this.chatClient.connectUser({ id: userId }, userToken); |
47 | | - } |
| 38 | +chatClient.connectUser({ id: userId }, userToken); |
48 | 39 |
|
49 | | - render() { |
50 | | - return ( |
51 | | - <Chat client={this.chatClient} theme={`messaging ${theme}`}> |
52 | | - <ChannelList |
53 | | - List={ChannelListMessenger} |
54 | | - Preview={ChannelPreviewMessenger} |
55 | | - filters={filters} |
56 | | - sort={sort} |
57 | | - options={options} |
58 | | - /> |
59 | | - <Channel> |
60 | | - <Window> |
61 | | - <ChannelHeader /> |
62 | | - <MessageList /> |
63 | | - <MessageInput Input={MessageInputFlat} focus /> |
64 | | - </Window> |
65 | | - <Thread Message={MessageSimple} /> |
66 | | - </Channel> |
67 | | - </Chat> |
68 | | - ); |
69 | | - } |
70 | | -} |
| 40 | +const App = () => ( |
| 41 | + // @ts-expect-error TODO: find out why v3.1.3 of stream-chat inits this error |
| 42 | + <Chat client={chatClient} theme={`messaging ${theme}`}> |
| 43 | + <ChannelList |
| 44 | + List={ChannelListMessenger} |
| 45 | + Preview={ChannelPreviewMessenger} |
| 46 | + filters={filters} |
| 47 | + sort={sort} |
| 48 | + options={options} |
| 49 | + /> |
| 50 | + <Channel> |
| 51 | + <Window> |
| 52 | + <ChannelHeader /> |
| 53 | + <MessageList /> |
| 54 | + <MessageInput Input={MessageInputFlat} focus /> |
| 55 | + </Window> |
| 56 | + <Thread /> |
| 57 | + </Channel> |
| 58 | + </Chat> |
| 59 | +); |
71 | 60 |
|
72 | 61 | export default App; |
0 commit comments