messages form

src/components/profile/Message/index.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { IMessage } from '~/redux/types';
+import styles from './styles.scss';
+import { formatText, getURL, getPrettyDate } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import classNames from 'classnames';
+import { Group } from '~/components/containers/Group';
+
+interface IProps {
+  message: IMessage;
+  incoming: boolean;
+}
+
+const Message: FC<IProps> = ({ message, incoming }) => (
+  <div className={classNames(styles.message, { [styles.incoming]: incoming })}>
+    <Group className={styles.text} dangerouslySetInnerHTML={{ __html: formatText(message.text) }} />
+
+    <div
+      className={styles.avatar}
+      style={{ backgroundImage: `url("${getURL(message.from.photo, PRESETS.avatar)}")` }}
+    />
+
+    <div className={styles.stamp}>{getPrettyDate(message.created_at)}</div>
+  </div>
+);
+
+export { Message };

src/components/profile/Message/styles.scss

@@ -0,0 +1,80 @@
+$incoming_color: transparentize($wisegreen, 0.7);
+$outgoing_color: $comment_bg;
+
+.message {
+  align-items: flex-end !important;
+  display: flex;
+  flex-direction: row;
+  padding: 0 0 0 42px;
+  position: relative;
+
+  .avatar {
+    // margin: 0 0 0 10px;
+  }
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 20px 0 0 20px;
+    border-color: transparent transparent transparent $comment_bg;
+    bottom: 0;
+    right: 24px;
+  }
+
+  &.incoming {
+    flex-direction: row-reverse;
+    padding: 0 40px 0 0;
+
+    .text {
+      background: $incoming_color;
+      border-radius: $radius $radius $radius 0;
+    }
+
+    .stamp {
+      left: auto;
+      right: 42px;
+    }
+
+    &::before {
+      content: '';
+      border-width: 0 0 16px 16px;
+      border-color: transparent transparent $incoming_color transparent;
+      left: 24px;
+      right: auto;
+      z-index: 1;
+    }
+  }
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 40px;
+  border-radius: $radius;
+
+  background: 50% 50% no-repeat/cover;
+  // display: none;
+}
+
+.text {
+  padding: $gap $gap $gap * 2 $gap;
+  background: $outgoing_color;
+  word-wrap: break-word;
+  word-break: break-word;
+  width: 90%;
+  border-radius: $radius $radius 0 $radius;
+}
+
+.stamp {
+  position: absolute;
+  opacity: 0.5;
+  // background: transparentize($color: #000000, $amount: 0.9);
+  font: $font_10_regular;
+  bottom: 0;
+  left: 42px;
+  padding: 2px $gap;
+  border-radius: $radius;
+}

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 };

src/components/profile/MessageForm/styles.scss

@@ -0,0 +1,37 @@
+.wrap {
+  @include outer_shadow();
+  padding: $gap;
+  background: $content_bg;
+  position: relative;
+
+  textarea {
+    // margin-bottom: 40px;
+  }
+}
+
+.content {
+  @include inner_shadow();
+  background: $input_bg_color;
+  border-radius: $input_radius;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  padding: 0 $gap / 2 $gap / 2 $gap / 2;
+}
+
+.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;
+}