simle-chat

1
import { useSelector } from 'react-redux';
2
import { useTranslation } from 'react-i18next';
3

4
import MessageForm from './MessageForm';
5
import { getActiveChannel, getActiveChat } from '../../selectors/chatSelectors';
6

7
const ChatField = () => {
8
  const { t } = useTranslation();
9

10
  const activeChannel = useSelector(getActiveChannel);
11
  const activeChat = useSelector(getActiveChat);
12

13
  return (
14
    <div className="col p-0 h-100">
15
      <div className="d-flex flex-column h-100">
16
        <div className="bg-light mb-4 p-3 shadow-sm small">
17
          <p className="m-0">
18
            <strong>
19
              {t('chatPage.chatField.prefix')}
20
              {activeChannel}
21
            </strong>
22
          </p>
23
          <span className="text-muted">
24
            {t('chatPage.chatField.messageCount.counter.count', { count: activeChat.length })}
25
          </span>
26
        </div>
27
        <div id="messages-box" className="chat-messages overflow-auto px-5">
28
          {activeChat.map((message) => (
29
            <div className="text-break mb-2" key={message.id}>
30
              <strong>{message.username}</strong>
31
              {':  '}
32
              {message.body}
33
            </div>
34
          ))}
35
        </div>
36
        <MessageForm />
37
      </div>
38
    </div>
39
  );
40
};
41

42
export default ChatField;
43