messages form

src/components/input/LoaderCircle/index.tsx

@@ -1,14 +1,14 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
-import { Icon } from '../Icon';
 import { describeArc } from '~/utils/dom';
+import classNames from 'classnames';
 
 interface IProps {
   size?: number;
 }
 
 export const LoaderCircle: FC<IProps> = ({ size = 24 }) => (
-  <div className={styles.wrap}>
+  <div className={classNames(styles.wrap, 'loader-circle')}>
     <svg className={styles.icon} width={size} height={size}>
       <path d={describeArc(size / 2, size / 2, size / 2, 0, 90)} />
       <path d={describeArc(size / 2, size / 2, size / 2, 180, 270)} />

src/components/profile/MessageForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback } from 'react';
+import React, { FC, useState, useCallback, KeyboardEventHandler } from 'react';
 import styles from './styles.scss';
 import { Textarea } from '~/components/input/Textarea';
 import { Filler } from '~/components/containers/Filler';
@@ -21,7 +21,7 @@ const mapDispatchToProps = {
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const MessageFormUnconnected: FC<IProps> = ({
-  profile: { is_sending_messages, messages_error },
+  profile: { is_sending_messages, is_loading_messages, messages_error },
   authSendMessage,
 }) => {
   const [text, setText] = useState('');
@@ -34,14 +34,35 @@ const MessageFormUnconnected: FC<IProps> = ({
     authSendMessage({ text }, onSuccess);
   }, [authSendMessage, text, onSuccess]);
 
+  const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
+    ({ ctrlKey, key }) => {
+      if (!!ctrlKey && key === 'Enter') onSubmit();
+    },
+    [onSubmit]
+  );
+
   return (
     <div className={styles.wrap}>
       {messages_error && <div className={styles.error}>{ERROR_LITERAL[messages_error]}</div>}
-
+      {is_loading_messages && !messages_error && (
+        <Group className={styles.loader} horizontal>
+          <LoaderCircle size={20} />
+          <div>Обновляем</div>
+        </Group>
+      )}
       <Group className={styles.content}>
-        <Textarea value={text} handler={setText} minRows={1} maxRows={4} seamless />
+        <Textarea
+          value={text}
+          handler={setText}
+          minRows={1}
+          maxRows={4}
+          seamless
+          onKeyDown={onKeyDown}
+          disabled={is_sending_messages}
+          autoFocus
+        />
 
-        <div className={styles.buttons}>
+        <Group className={styles.buttons} horizontal>
           <Filler />
 
           {is_sending_messages && <LoaderCircle size={20} />}
@@ -55,7 +76,7 @@ const MessageFormUnconnected: FC<IProps> = ({
           >
             Сказать
           </Button>
-        </div>
+        </Group>
       </Group>
     </div>
   );

src/components/profile/MessageForm/styles.scss

@@ -2,10 +2,11 @@
   @include outer_shadow();
   padding: $gap;
   background: $content_bg;
-  position: relative;
+  // position: relative;
 
   textarea {
     // margin-bottom: 40px;
+    padding-bottom: 0 !important;
   }
 }
 
@@ -21,6 +22,12 @@
   justify-content: center;
   flex-direction: row;
   padding: 0 $gap / 2 $gap / 2 $gap / 2;
+
+  :global(.loader-circle) {
+    svg {
+      fill: $wisegreen;
+    }
+  }
 }
 
 .error {
@@ -35,3 +42,19 @@
   text-align: center;
   border-radius: 0 0 $radius $radius;
 }
+
+.loader {
+  position: absolute;
+  right: 50%;
+  bottom: 0;
+  z-index: 2;
+  padding: $gap;
+  text-transform: uppercase;
+  background: $wisegreen;
+  border-radius: $radius;
+  transform: translate(50%, -10px);
+
+  svg {
+    fill: white;
+  }
+}