messages form

src/components/profile/MessageForm/index.tsx

@@ -0,0 +1,69 @@
+import React, { FC, useState, useCallback } from 'react';
+import styles from './styles.scss';
+import { Textarea } from '~/components/input/Textarea';
+import { Filler } from '~/components/containers/Filler';
+import { Button } from '~/components/input/Button';
+import { Group } from '~/components/containers/Group';
+import { selectAuthProfile } from '~/redux/auth/selectors';
+import { connect } from 'react-redux';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+import { ERROR_LITERAL } from '~/constants/errors';
+
+const mapStateToProps = state => ({
+  profile: selectAuthProfile(state),
+});
+
+const mapDispatchToProps = {
+  authSendMessage: AUTH_ACTIONS.authSendMessage,
+};
+
+type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const MessageFormUnconnected: FC<IProps> = ({
+  profile: { is_sending_messages, messages_error },
+  authSendMessage,
+}) => {
+  const [text, setText] = useState('');
+
+  const onSuccess = useCallback(() => {
+    setText('');
+  }, [setText]);
+
+  const onSubmit = useCallback(() => {
+    authSendMessage({ text }, onSuccess);
+  }, [authSendMessage, text, onSuccess]);
+
+  return (
+    <div className={styles.wrap}>
+      {messages_error && <div className={styles.error}>{ERROR_LITERAL[messages_error]}</div>}
+
+      <Group className={styles.content}>
+        <Textarea value={text} handler={setText} minRows={1} maxRows={4} seamless />
+
+        <div className={styles.buttons}>
+          <Filler />
+
+          {is_sending_messages && <LoaderCircle size={20} />}
+
+          <Button
+            size="small"
+            grey
+            iconRight="enter"
+            disabled={is_sending_messages}
+            onClick={onSubmit}
+          >
+            Сказать
+          </Button>
+        </div>
+      </Group>
+    </div>
+  );
+};
+
+const MessageForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MessageFormUnconnected);
+
+export { MessageForm };