Skip to content

Commit eede033

Browse files
EugeniyKiyashkoEugeniyKiyashko
authored
Chat: add missed ReactJS P2P demo (#28409)
1 parent e9863f6 commit eede033

File tree

5 files changed

+161
-0
lines changed

5 files changed

+161
-0
lines changed

‎apps/demos/Demos/Chat/Overview/ReactJs/App.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useState } from 'react';
2+
import Chat from 'devextreme-react/chat';
3+
import { currentUser, supportAgent, initialMessages } from './data.js';
4+
5+
export default function App() {
6+
const [userChatTypingUsers, setUserChatTypingUsers] = useState([]);
7+
const [supportChatTypingUsers, setSupportChatTypingUsers] = useState([]);
8+
const [messages, setMessages] = useState(initialMessages);
9+
function onMessageEntered({ message }) {
10+
setMessages((prevMessages) => [...prevMessages, message]);
11+
}
12+
function typingStart({ user }) {
13+
if (user.id === currentUser.id) {
14+
setSupportChatTypingUsers([supportAgent]);
15+
} else {
16+
setUserChatTypingUsers([currentUser]);
17+
}
18+
}
19+
function typingEnd({ user }) {
20+
if (user.id === currentUser.id) {
21+
setSupportChatTypingUsers([]);
22+
} else {
23+
setUserChatTypingUsers([]);
24+
}
25+
}
26+
return (
27+
<React.Fragment>
28+
<Chat
29+
user={currentUser}
30+
items={messages}
31+
onMessageEntered={onMessageEntered}
32+
onTypingStart={typingStart}
33+
onTypingEnd={typingEnd}
34+
typingUsers={userChatTypingUsers}
35+
/>
36+
<Chat
37+
user={supportAgent}
38+
items={messages}
39+
onMessageEntered={onMessageEntered}
40+
onTypingStart={typingStart}
41+
onTypingEnd={typingEnd}
42+
typingUsers={supportChatTypingUsers}
43+
/>
44+
</React.Fragment>
45+
);
46+
}

‎apps/demos/Demos/Chat/Overview/ReactJs/data.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const date = new Date();
2+
date.setHours(0, 0, 0, 0);
3+
function getTimestamp(date, offsetMinutes = 0) {
4+
return date.getTime() + offsetMinutes * 60000;
5+
}
6+
export const currentUser = {
7+
id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3',
8+
name: 'John Doe',
9+
};
10+
export const supportAgent = {
11+
id: 'd16d1a4c-5c67-4e20-b7v0e-2991c22747c3',
12+
name: 'Support Agent',
13+
avatarUrl: '../../../../images/petersmith.png',
14+
};
15+
export const initialMessages = [
16+
{
17+
timestamp: getTimestamp(date, -9),
18+
author: supportAgent,
19+
text: 'Hello, John!\nHow can I assist you today?',
20+
},
21+
{
22+
timestamp: getTimestamp(date, -7),
23+
author: currentUser,
24+
text: "Hi, I'm having trouble accessing my account.",
25+
},
26+
{
27+
timestamp: getTimestamp(date, -7),
28+
author: currentUser,
29+
text: 'It says my password is incorrect.',
30+
},
31+
{
32+
timestamp: getTimestamp(date, -7),
33+
author: supportAgent,
34+
text: 'I can help with that. Can you please confirm your UserID for security purposes?',
35+
},
36+
{
37+
timestamp: getTimestamp(date, 1),
38+
author: currentUser,
39+
text: 'john.doe1357',
40+
},
41+
{
42+
timestamp: getTimestamp(date, 1),
43+
author: supportAgent,
44+
text: '✅ Instructions to restore access have been sent to the email address registered to your account.',
45+
},
46+
];

‎apps/demos/Demos/Chat/Overview/ReactJs/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta
6+
http-equiv="X-UA-Compatible"
7+
content="IE=edge"
8+
/>
9+
<meta
10+
http-equiv="Content-Type"
11+
content="text/html; charset=utf-8"
12+
/>
13+
<meta
14+
name="viewport"
15+
content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
16+
/>
17+
<link
18+
rel="stylesheet"
19+
type="text/css"
20+
href="../../../../node_modules/devextreme-dist/css/dx.light.css"
21+
/>
22+
<link
23+
rel="stylesheet"
24+
type="text/css"
25+
href="styles.css"
26+
/>
27+
28+
<script src="../../../../node_modules/core-js/client/shim.min.js"></script>
29+
<script src="../../../../node_modules/systemjs/dist/system.js"></script>
30+
<script
31+
type="text/javascript"
32+
src="config.js"
33+
></script>
34+
<script type="text/javascript">
35+
System.import("./index.js");
36+
</script>
37+
</head>
38+
39+
<body class="dx-viewport">
40+
<div class="demo-container">
41+
<div id="app"></div>
42+
</div>
43+
</body>
44+
</html>

‎apps/demos/Demos/Chat/Overview/ReactJs/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App.js';
4+
5+
ReactDOM.render(<App />, document.getElementById('app'));

‎apps/demos/Demos/Chat/Overview/ReactJs/styles.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#app {
2+
display: flex;
3+
gap: 20px;
4+
}
5+
6+
.dx-chat {
7+
height: 810px;
8+
}
9+
10+
.dx-avatar {
11+
border: 1px solid var(--dx-color-border);
12+
}
13+
14+
.dx-chat-messagegroup.dx-chat-messagegroup-alignment-end {
15+
padding-left: 44px;
16+
}
17+
18+
.dx-chat-messagegroup .dx-chat-messagegroup-content {
19+
max-width: 82.5%;
20+
}

0 commit comments

Comments
 (0)