diff --git a/dapps/marketplace/src/components/SendMessage.js b/dapps/marketplace/src/components/SendMessage.js index a12948e3785f..85858605be55 100644 --- a/dapps/marketplace/src/components/SendMessage.js +++ b/dapps/marketplace/src/components/SendMessage.js @@ -14,6 +14,8 @@ import Modal from 'components/Modal' import QueryError from 'components/QueryError' import Redirect from 'components/Redirect' +import ToastMessage from 'components/ToastMessage' + class SendMessage extends Component { state = { message: '' } componentDidMount() { @@ -54,6 +56,13 @@ class SendMessage extends Component { }} children={this.props.children} /> + {this.state.messageError && ( + this.setState({ messageError: null })} + /> + )} {!this.state.open ? null : ( - this.setState({ sent: true, room: sendMessage.id }) - } + onCompleted={({ sendMessage }) => { + if (!sendMessage.success) { + return this.setState({ + messageError: sendMessage.error + }) + } + + this.setState({ + sent: true, + room: sendMessage.conversation.id, + message: '' + }) + }} + onError={err => { + console.error(err) + return this.setState({ + messageError: 'Something went wrong. Please try again' + }) + }} > {sendMessage => (
{ + onSubmit={async e => { e.preventDefault() const content = this.state.message if (content) { sendMessage({ variables: { to, content } }) - this.setState({ message: '' }) } }} > diff --git a/dapps/marketplace/src/components/ToastMessage.js b/dapps/marketplace/src/components/ToastMessage.js new file mode 100644 index 000000000000..7b3c6c16e6f6 --- /dev/null +++ b/dapps/marketplace/src/components/ToastMessage.js @@ -0,0 +1,34 @@ +import React, { useEffect } from 'react' + +const ToastMessage = ({ message, type, onClose, timeout }) => { + useEffect(() => { + const _timeout = setTimeout(() => onClose(), timeout || 4000) + + return () => clearTimeout(_timeout) + }) + + return ( +
+
{message}
+
+ ) +} + +require('react-styl')(` + .toast-message-container + position: fixed + top: 0 + left: 0 + right: 0 + padding: 1rem + width: 100% + z-index: 100000 + .alert + padding-left: 2rem + padding-right: 2rem + margin: 0 auto + max-width: 400px + text-align: center +`) + +export default ToastMessage diff --git a/dapps/marketplace/src/mutations/SendMessage.js b/dapps/marketplace/src/mutations/SendMessage.js index 36f095cd7ab4..4e85ad355a25 100644 --- a/dapps/marketplace/src/mutations/SendMessage.js +++ b/dapps/marketplace/src/mutations/SendMessage.js @@ -3,7 +3,11 @@ import gql from 'graphql-tag' export default gql` mutation SendMessage($to: String!, $content: String, $media: [MediaInput]) { sendMessage(to: $to, content: $content, media: $media) { - id + success + error + conversation { + id + } } } ` diff --git a/dapps/marketplace/src/pages/messaging/SendMessage.js b/dapps/marketplace/src/pages/messaging/SendMessage.js index 3d780f62066b..04ba601d9a31 100644 --- a/dapps/marketplace/src/pages/messaging/SendMessage.js +++ b/dapps/marketplace/src/pages/messaging/SendMessage.js @@ -10,6 +10,8 @@ import withConfig from 'hoc/withConfig' import { postFile } from 'utils/fileUtils' import pasteIntoInput from 'utils/pasteIntoInput' +import ToastMessage from 'components/ToastMessage' + const acceptedFileTypes = ['image/jpeg', 'image/pjpeg', 'image/png'] async function getImages(config, files) { @@ -68,13 +70,30 @@ class SendMessage extends Component { async sendContent(sendMessage, to) { const { message, images } = this.state + const variables = { to } + if (message.length) { - sendMessage({ variables: { to, content: message } }) + variables.content = message } else { - sendMessage({ variables: { to, media: images } }) + variables.media = images } - this.setState({ message: '', images: [] }) + try { + const { data } = await sendMessage({ variables }) + + if (!data.sendMessage.success) { + throw new Error( + data.sendMessage.error || 'Something went wrong. Please try again.' + ) + } + + this.setState({ message: '', images: [] }) + } catch (err) { + console.error(err) + this.setState({ + error: err.message + }) + } } render() { @@ -82,72 +101,84 @@ class SendMessage extends Component { const { images } = this.state return ( - - {sendMessage => ( - this.handleSubmit(e, sendMessage)} - > - {images.length ? ( -
- {images.map(image => ( - - ))} -
- ) : null} - {images.length ? null : ( - this.setState({ message: e.target.value })} - onKeyPress={e => this.handleKeyPress(e, sendMessage)} - /> - )} - - { - const newImages = await getImages(config, e.currentTarget.files) - this.setState(state => ({ - images: [...state.images, ...newImages] - })) - }} - /> -