message editing form works properly

src/components/profile/Message/index.tsx

@@ -13,10 +13,11 @@ interface IProps {
   incoming: boolean;
   onEdit: (id: number) => void;
   onDelete: (id: number) => void;
+  onCancelEdit: () => void;
   isEditing: boolean;
 }
 
-const Message: FC<IProps> = ({ message, incoming, onEdit, onDelete, isEditing }) => {
+const Message: FC<IProps> = ({ message, incoming, onEdit, onDelete, isEditing, onCancelEdit }) => {
   const onEditClicked = useCallback(() => onEdit(message.id), [message.id]);
   const onDeleteClicked = useCallback(() => onDelete(message.id), [message.id]);
 
@@ -24,7 +25,7 @@ const Message: FC<IProps> = ({ message, incoming, onEdit, onDelete, isEditing })
     <div className={classNames(styles.message, { [styles.incoming]: incoming })}>
       {isEditing ? (
         <div className={styles.form}>
-          <MessageForm id={message.id} text={message.text} />
+          <MessageForm id={message.id} text={message.text} onCancel={onCancelEdit} />
         </div>
       ) : (
         <div className={styles.text}>

src/components/profile/MessageForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback, KeyboardEventHandler } from 'react';
+import React, { FC, useState, useCallback, KeyboardEventHandler, useMemo } from 'react';
 import styles from './styles.scss';
 import { Textarea } from '~/components/input/Textarea';
 import { Filler } from '~/components/containers/Filler';
@@ -22,19 +22,27 @@ type IProps = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
     id?: number;
     text?: string;
+    onCancel?: () => void;
   };
 
 const MessageFormUnconnected: FC<IProps> = ({
-  id = 0,
-  text: initialText = '',
   profile: { is_sending_messages, is_loading_messages, messages_error },
   authSendMessage,
+
+  id = 0,
+  text: initialText = '',
+  onCancel,
 }) => {
+  const isEditing = useMemo(() => id > 0, [id]);
   const [text, setText] = useState(initialText);
 
   const onSuccess = useCallback(() => {
     setText('');
-  }, [setText]);
+
+    if (isEditing) {
+      onCancel();
+    }
+  }, [setText, isEditing, onCancel]);
 
   const onSubmit = useCallback(() => {
     authSendMessage({ text, id }, onSuccess);
@@ -61,7 +69,7 @@ const MessageFormUnconnected: FC<IProps> = ({
           value={text}
           handler={setText}
           minRows={1}
-          maxRows={4}
+          maxRows={isEditing ? 15 : 5}
           seamless
           onKeyDown={onKeyDown}
           disabled={is_sending_messages}
@@ -73,6 +81,12 @@ const MessageFormUnconnected: FC<IProps> = ({
 
           {is_sending_messages && <LoaderCircle size={20} />}
 
+          {isEditing && (
+            <Button size="small" color="link" onClick={onCancel}>
+              Отмена
+            </Button>
+          )}
+
           <Button
             size="small"
             color="gray"
@@ -80,7 +94,7 @@ const MessageFormUnconnected: FC<IProps> = ({
             disabled={is_sending_messages}
             onClick={onSubmit}
           >
-            Сказать
+            {isEditing ? 'Схоронить' : 'Сказать'}
           </Button>
         </Group>
       </Group>

src/components/profile/MessageForm/styles.scss

@@ -20,6 +20,7 @@
   justify-content: center;
   flex-direction: row;
   padding: 0 $gap / 2 $gap / 2 $gap / 2;
+  border-radius: 0 0 $radius $radius;
 
   :global(.loader-circle) {
     svg {