simle-chat

1
import React, { useRef, useEffect } from 'react';
2
import { Form, InputGroup, Button } from 'react-bootstrap';
3
import { ChevronRight } from 'react-bootstrap-icons';
4
import { useSelector } from 'react-redux';
5
import { useTranslation } from 'react-i18next';
6
import { useFormik } from 'formik';
7
import leoProfanity from 'leo-profanity';
8
import * as yup from 'yup';
9
import axios from 'axios';
10

11
import { getActiveChannelId } from '../../selectors/chatSelectors';
12
import useAuth from '../../hooks/index';
13
import routes from '../../routes';
14

15
const getValidationSchema = (t) => yup.object().shape({
16
  message: yup
17
    .string()
18
    .trim()
19
    .required(t('validationError.requiredField')),
20
});
21

22
const MessageForm = () => {
23
  const { t } = useTranslation();
24
  const messageRef = useRef();
25
  const { user, getAuthHeader } = useAuth();
26

27
  const activeChannelId = useSelector(getActiveChannelId);
28

29
  const formik = useFormik({
30
    initialValues: { message: '' },
31
    validationSchema: getValidationSchema(t),
32
    onSubmit: async (values, actions) => {
33
      const newMessage = {
34
        body: leoProfanity.clean(values.message),
35
        channelId: activeChannelId,
36
        username: user.username,
37
      };
38
      const headers = await getAuthHeader();
39
      try {
40
        await axios.post(routes.dataRequestPath('messages'), newMessage, { headers });
41
      } catch (error) {
42
        console.error(error);
43
      }
44
      actions.resetForm({ values: { message: '' } });
45
      messageRef.current.focus();
46
    },
47
  });
48
  useEffect(() => {
49
    setTimeout(() => messageRef.current.focus());
50
  }, [messageRef]);
51

52
  const isValidInput = !formik.dirty || !formik.isValid;
53

54
  return (
55
    <div className="mt-auto px-5 py-3">
56
      <Form className="py-1 border rounded-2" onSubmit={formik.handleSubmit}>
57
        <InputGroup>
58
          <Form.Control
59
            ref={messageRef}
60
            autoFocus
61
            id="message"
62
            name="message"
63
            className="border-0 p-0 ps-2"
64
            onChange={formik.handleChange}
65
            onBlur={formik.handleBlur}
66
            value={formik.values.message}
67
            aria-label={t('chatPage.chatField.messageInput.lable')}
68
            placeholder={t('chatPage.chatField.messageInput.placeholder')}
69
          />
70
          <Button
71
            type="submit"
72
            variant="group-vertical"
73
            className="border-0"
74
            disabled={isValidInput}
75
          >
76
            <ChevronRight size={20} />
77
            <span className="visually-hidden">{t('chatPage.chatField.sendButton')}</span>
78
          </Button>
79
        </InputGroup>
80
      </Form>
81
    </div>
82
  );
83
};
84

85
export default MessageForm;
86