forked from feathersjs-ecosystem/feathers-chat-react
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapplication.js
More file actions
72 lines (60 loc) · 1.87 KB
/
Copy pathapplication.js
File metadata and controls
72 lines (60 loc) · 1.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React, { Component } from 'react';
import Login from './login';
import Chat from './chat';
import client from './feathers';
class Application extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
const messages = client.service('messages');
const users = client.service('users');
// Try to authenticate with the JWT stored in localStorage
client.authenticate().catch(() => this.setState({ login: null }));
// On successfull login
client.on('authenticated', login => {
// Get all users and messages
Promise.all([
messages.find({
query: {
$sort: { createdAt: -1 },
$limit: 25
}
}),
users.find()
]).then( ([ messagePage, userPage ]) => {
// We want the latest messages but in the reversed order
const messages = messagePage.data.reverse();
const users = userPage.data;
// Once both return, update the state
this.setState({ login, messages, users });
});
});
// On logout reset all all local state (which will then show the login screen)
client.on('logout', () => this.setState({
login: null,
messages: null,
users: null
}));
// Add new messages to the message list
messages.on('created', message => this.setState({
messages: this.state.messages.concat(message)
}));
// Add new users to the user list
users.on('created', user => this.setState({
users: this.state.users.concat(user)
}));
}
render() {
if(this.state.login === undefined) {
return <main className="container text-center">
<h1>Loading...</h1>
</main>;
} else if(this.state.login) {
return <Chat messages={this.state.messages} users={this.state.users} />
}
return <Login />;
}
}
export default Application;