diff --git a/src/components/input/Textarea/index.tsx b/src/components/input/Textarea/index.tsx index 06539651..d1e42ec5 100644 --- a/src/components/input/Textarea/index.tsx +++ b/src/components/input/Textarea/index.tsx @@ -6,7 +6,6 @@ import React, { useLayoutEffect, useRef, useState, - HTMLAttributes, TextareaHTMLAttributes, } from 'react'; import { getStyle } from '~/utils/dom'; @@ -26,6 +25,7 @@ type IProps = TextareaHTMLAttributes & { required?: boolean; status?: 'error' | 'success' | ''; title?: string; + seamless?: boolean; }; const Textarea = memo( @@ -39,6 +39,7 @@ const Textarea = memo( required = false, title = '', status = '', + seamless, ...props }) => { const [rows, setRows] = useState(minRows || 1); @@ -85,11 +86,12 @@ const Textarea = memo( return (
diff --git a/src/components/profile/Message/index.tsx b/src/components/profile/Message/index.tsx new file mode 100644 index 00000000..62de74a3 --- /dev/null +++ b/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 = ({ message, incoming }) => ( +
+ + +
+ +
{getPrettyDate(message.created_at)}
+
+); + +export { Message }; diff --git a/src/components/profile/Message/styles.scss b/src/components/profile/Message/styles.scss new file mode 100644 index 00000000..2020ea88 --- /dev/null +++ b/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; +} diff --git a/src/components/profile/MessageForm/index.tsx b/src/components/profile/MessageForm/index.tsx new file mode 100644 index 00000000..202c231b --- /dev/null +++ b/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 mapDispatchToProps & {}; + +const MessageFormUnconnected: FC = ({ + 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 ( +
+ {messages_error &&
{ERROR_LITERAL[messages_error]}
} + + +