31 |
40 | );
41 | });
42 | };
43 |
44 | if (!chat) return ;
45 |
46 | return (
47 |
32 | {isMyMessage
33 | ?
36 |
37 | {renderReadReceipts(message, isMyMessage)}
38 |
39 |
48 |
60 | );
61 | };
62 |
63 | export default ChatFeed;
64 |
65 |
--------------------------------------------------------------------------------
/src/components/LoginForm.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import axios from 'axios';
3 |
4 | const projectID = '1b7801d6-8a66-4be4-a442-89219d833dfc';
5 |
6 | const Modal = () => {
7 | const [username, setUsername] = useState('');
8 | const [password, setPassword] = useState('');
9 | const [error, setError] = useState('');
10 |
11 | const handleSubmit = async (e) => {
12 | e.preventDefault();
13 |
14 | const authObject = { 'Project-ID': projectID, 'User-Name': username, 'User-Secret': password };
15 |
16 | try {
17 | await axios.get('https://api.chatengine.io/chats', { headers: authObject });
18 |
19 | localStorage.setItem('username', username);
20 | localStorage.setItem('password', password);
21 |
22 | window.location.reload();
23 | setError('');
24 | } catch (err) {
25 | setError('Oops, incorrect credentials.');
26 | }
27 | };
28 |
29 | return (
30 |
49 |
54 | {renderMessages()}
55 |
56 | {chat?.title}
50 |
51 | {chat.people.map((person) => ` ${person.person.username}`)}
52 |
53 |
57 |
59 |
31 |
45 |
46 | );
47 | };
48 |
49 | export default Modal;
50 |
--------------------------------------------------------------------------------
/src/components/MessageForm.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { SendOutlined, PictureOutlined } from '@ant-design/icons';
3 | import { sendMessage, isTyping } from 'react-chat-engine';
4 |
5 | const MessageForm = (props) => {
6 | const [value, setValue] = useState('');
7 | const { chatId, creds } = props;
8 |
9 | const handleChange = (event) => {
10 | setValue(event.target.value);
11 |
12 | isTyping(props, chatId);
13 | };
14 |
15 | const handleSubmit = (event) => {
16 | event.preventDefault();
17 |
18 | const text = value.trim();
19 |
20 | if (text.length > 0) {
21 | sendMessage(creds, chatId, { text });
22 | }
23 |
24 | setValue('');
25 | };
26 |
27 | const handleUpload = (event) => {
28 | sendMessage(creds, chatId, { files: event.target.files, text: '' });
29 | };
30 |
31 | return (
32 |
56 | );
57 | };
58 |
59 | export default MessageForm;
60 |
--------------------------------------------------------------------------------
/src/components/MyMessage.jsx:
--------------------------------------------------------------------------------
1 | const MyMessage = ({ message }) => {
2 | if (message.attachments && message.attachments.length > 0) {
3 | return (
4 |
32 |
44 | Chat Application
33 | 42 |{error}
43 |
15 | {message.text}
16 |
17 | );
18 | };
19 |
20 | export default MyMessage;
21 |
--------------------------------------------------------------------------------
/src/components/TheirMessage.jsx:
--------------------------------------------------------------------------------
1 | const TheirMessage = ({ lastMessage, message }) => {
2 | const isFirstMessageByUser = !lastMessage || lastMessage.sender.username !== message.sender.username;
3 |
4 | return (
5 |
6 | {isFirstMessageByUser && (
7 |
11 | )}
12 | {message.attachments && message.attachments.length > 0
13 | ? (
14 | 
20 | )
21 | : (
22 |
27 | );
28 | };
29 |
30 | export default TheirMessage;
31 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import App from './App';
5 |
6 | ReactDOM.render(
23 | {message.text}
24 |
25 | )}
26 |