removed messages reducer

src/components/profile/Message/index.tsx

@@ -1,78 +1,26 @@
-import React, { FC, useCallback } from "react";
+import React, { FC } from "react";
 import { IMessage } from "~/redux/types";
 import styles from "./styles.module.scss";
 import { formatText, getPrettyDate, getURL } from "~/utils/dom";
 import { PRESETS } from "~/constants/urls";
 import classNames from "classnames";
 import { Group } from "~/components/containers/Group";
-import { CommentMenu } from "~/components/comment/CommentMenu";
-import { MessageForm } from "~/components/profile/MessageForm";
-import { Filler } from "~/components/containers/Filler";
-import { Button } from "~/components/input/Button";
 import markdown from "~/styles/common/markdown.module.scss";
 
 interface IProps {
   message: IMessage;
   incoming: boolean;
-  onEdit: (id: number) => void;
-  onDelete: (id: number) => void;
-  onRestore: (id: number) => void;
-  onCancelEdit: () => void;
-  isEditing: boolean;
 }
 
-const Message: FC<IProps> = ({
-  message,
-  incoming,
-  onEdit,
-  onDelete,
-  isEditing,
-  onCancelEdit,
-  onRestore,
-}) => {
-  const onEditClicked = useCallback(() => onEdit(message.id), [onEdit, message.id]);
-  const onDeleteClicked = useCallback(() => onDelete(message.id), [onDelete, message.id]);
-  const onRestoreClicked = useCallback(() => onRestore(message.id), [onRestore, message.id]);
-
-  if (message.deleted_at) {
-    return (
-      <div className={classNames(styles.message)}>
-        <Group className={styles.deleted} horizontal>
-          <Filler>Сообщение удалено</Filler>
-          <Button
-            size="mini"
-            onClick={onRestoreClicked}
-            color="link"
-            iconLeft="restore"
-            className={styles.restore}
-          >
-            Восстановить
-          </Button>
-        </Group>
-
-        <div
-          className={styles.avatar}
-          style={{ backgroundImage: `url("${getURL(message.from.photo, PRESETS.avatar)}")` }}
-        />
-      </div>
-    );
-  }
-
+const Message: FC<IProps> = ({ message, incoming }) => {
   return (
     <div className={classNames(styles.message, { [styles.incoming]: incoming })}>
-      {isEditing ? (
-        <div className={styles.form}>
-          <MessageForm id={message.id} text={message.text} onCancel={onCancelEdit} />
-        </div>
-      ) : (
-        <div className={styles.text}>
-          {!incoming && <CommentMenu onEdit={onEditClicked} onDelete={onDeleteClicked} />}
-          <Group
-            dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
-            className={markdown.wrapper}
-          />
-        </div>
-      )}
+      <div className={styles.text}>
+        <Group
+          dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
+          className={markdown.wrapper}
+        />
+      </div>
 
       <div
         className={styles.avatar}

src/components/profile/Message/styles.module.scss

@@ -11,10 +11,6 @@ $outgoing_color: $comment_bg;
   position: relative;
   word-break: break-word;
 
-  .avatar {
-    // margin: 0 0 0 10px;
-  }
-
   &::before {
     position: absolute;
     content: '';

src/components/profile/MessageForm/index.tsx

@@ -1,106 +0,0 @@
-import React, { FC, KeyboardEventHandler, useCallback, useMemo, useState } from 'react';
-import styles from './styles.module.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 { connect } from 'react-redux';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
-import * as MESSAGES_ACTIONS from '~/redux/messages/actions';
-import { ERROR_LITERAL } from '~/constants/errors';
-import { selectMessages } from '~/redux/messages/selectors';
-
-const mapStateToProps = state => ({
-  messages: selectMessages(state),
-});
-
-const mapDispatchToProps = {
-  messagesSendMessage: MESSAGES_ACTIONS.messagesSendMessage,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {
-    id?: number;
-    text?: string;
-    onCancel?: () => void;
-  };
-
-const MessageFormUnconnected: FC<IProps> = ({
-  messages: { is_sending_messages, is_loading_messages, error },
-  messagesSendMessage,
-
-  id = 0,
-  text: initialText = '',
-  onCancel,
-}) => {
-  const isEditing = useMemo(() => id > 0, [id]);
-  const [text, setText] = useState(initialText);
-
-  const onSuccess = useCallback(() => {
-    setText('');
-
-    if (isEditing && onCancel) {
-      onCancel();
-    }
-  }, [setText, isEditing, onCancel]);
-
-  const onSubmit = useCallback(() => {
-    messagesSendMessage({ text, id }, onSuccess);
-  }, [messagesSendMessage, text, id, onSuccess]);
-
-  const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
-    ({ ctrlKey, key }) => {
-      if (ctrlKey && key === 'Enter') onSubmit();
-    },
-    [onSubmit]
-  );
-
-  return (
-    <div className={styles.wrap}>
-      {error && <div className={styles.error}>{ERROR_LITERAL[error]}</div>}
-      {is_loading_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={isEditing ? 15 : 5}
-          onKeyDown={onKeyDown}
-          disabled={is_sending_messages}
-          autoFocus
-        />
-
-        <Group className={styles.buttons} horizontal>
-          <Filler />
-
-          {is_sending_messages && <LoaderCircle size={20} />}
-
-          {isEditing && (
-            <Button size="small" color="link" onClick={onCancel}>
-              Отмена
-            </Button>
-          )}
-
-          <Button
-            size="small"
-            color="gray"
-            iconRight="enter"
-            disabled={is_sending_messages}
-            onClick={onSubmit}
-          >
-            {isEditing ? 'Схоронить' : 'Сказать'}
-          </Button>
-        </Group>
-      </Group>
-    </div>
-  );
-};
-
-const MessageForm = connect(mapStateToProps, mapDispatchToProps)(MessageFormUnconnected);
-
-export { MessageForm };

src/components/profile/MessageForm/styles.module.scss

@@ -1,61 +0,0 @@
-@import "src/styles/variables";
-
-.wrap {
-  @include outer_shadow();
-  padding: $gap;
-  background: $content_bg;
-
-  textarea {
-    padding-bottom: 0 !important;
-  }
-}
-
-.content {
-  @include inner_shadow();
-  background: $input_bg_color;
-  border-radius: $radius;
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  padding: 0 $gap / 2 $gap / 2 $gap / 2;
-  border-radius: 0 0 $radius $radius;
-
-  :global(.loader-circle) {
-    svg {
-      fill: $wisegreen;
-    }
-  }
-}
-
-.error {
-  position: absolute;
-  top: 100%;
-  padding: 10px;
-  left: 5%;
-  width: 90%;
-  background: linear-gradient($red, transparentize($red, 0.1));
-  z-index: 1;
-  box-sizing: border-box;
-  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;
-  }
-}