This repository was archived by the owner on Nov 2, 2022. It is now read-only.
Repository navigation
Expand file tree
/
Copy pathApp.js
More file actions
74 lines (63 loc) · 1.97 KB
/
Copy pathApp.js
File metadata and controls
74 lines (63 loc) · 1.97 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
73
74
import React, { useState, useEffect } from 'react';
import Login from './Login';
import Chat from './Chat';
import client from './feathers';
const messagesService = client.service('messages');
const usersService = client.service('users');
const Application = () => {
const [login, setLogin] = useState(null);
const [messages, setMessages] = useState([]);
const [users, setUsers] = useState([]);
useEffect(() => {
// Try to authenticate with the JWT stored in localStorage
client.authenticate().catch(() => {
setLogin(null);
});
// On successfull login
client.on('authenticated', loginResult => {
// Get all users and messages
Promise.all([
messagesService.find({
query: {
$sort: { createdAt: -1 },
$limit: 25,
},
}),
usersService.find(),
]).then(([messagePage, userPage]) => {
// We want the latest messages but in the reversed order
const messagesResult = messagePage.data.reverse();
const usersResult = userPage.data;
// Once both return, update the state
setLogin(loginResult);
setMessages(messagesResult);
setUsers(usersResult);
});
});
// On logout reset all all local state (which will then show the login screen)
client.on('logout', () => {
setLogin(null);
setMessages([]);
setUsers([]);
});
// Add new messages to the message list
messagesService.on('created', message =>
setMessages(currentMessages => currentMessages.concat(message))
);
// Add new users to the user list
usersService.on('created', user =>
setUsers(currentUsers => currentUsers.concat(user))
);
}, []);
if (login === undefined) {
return (
<main className="container text-center">
<h1>Loading...</h1>
</main>
);
} else if (login) {
return <Chat messages={messages} users={users} />;
}
return <Login />;
};
export default Application;