Show toast message on messaging error (#4094)

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 && (
+          <ToastMessage
+            message={this.state.messageError}
+            type="danger"
+            onClose={() => this.setState({ messageError: null })}
+          />
+        )}
         {!this.state.open ? null : (
           <Modal
             shouldClose={this.state.shouldClose}
@@ -128,18 +137,33 @@ class SendMessage extends Component {
     return (
       <Mutation
         mutation={mutation}
-        onCompleted={({ sendMessage }) =>
-          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 => (
           <form
-            onSubmit={e => {
+            onSubmit={async e => {
               e.preventDefault()
               const content = this.state.message
               if (content) {
                 sendMessage({ variables: { to, content } })
-                this.setState({ message: '' })
               }
             }}
           >

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 (
+    <div className="toast-message-container">
+      <div className={`alert alert-${type || 'info'}`}>{message}</div>
+    </div>
+  )
+}
+
+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

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
+      }
     }
   }
 `

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,86 +70,115 @@ 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() {
     const { config } = this.props
     const { images } = this.state
 
     return (
-      <Mutation mutation={mutation}>
-        {sendMessage => (
-          <form
-            className="send-message d-flex"
-            onSubmit={e => this.handleSubmit(e, sendMessage)}
-          >
-            {images.length ? (
-              <div className="images-preview">
-                {images.map(image => (
-                  <div key={image.url} className="images-container">
-                    <img className="img" src={image.url} />
-                    <a
-                      className="image-overlay-btn"
-                      aria-label={fbt('Close', 'SendMessage.close')}
-                      onClick={() => {
-                        this.setState({
-                          images: images.filter(img => img !== image)
-                        })
-                      }}
-                    >
-                      <span aria-hidden="true">&times;</span>
-                    </a>
-                  </div>
-                ))}
-              </div>
-            ) : null}
-            {images.length ? null : (
-              <TextareaAutosize
-                className="form-control"
-                placeholder={fbt(
-                  'Type something...',
-                  'SendMessage.placeholder'
-                )}
-                innerRef={this.input}
-                value={this.state.message}
-                onChange={e => this.setState({ message: e.target.value })}
-                onKeyPress={e => this.handleKeyPress(e, sendMessage)}
-              />
-            )}
-            <img
-              src="images/add-photo-icon.svg"
-              className="add-photo"
-              role="presentation"
-              onClick={this.handleClick}
-            />
-            <input
-              type="file"
-              multiple={true}
-              accept="image/jpeg,image/gif,image/png"
-              ref={this.fileInput}
-              className="d-none"
-              onChange={async e => {
-                const newImages = await getImages(config, e.currentTarget.files)
-                this.setState(state => ({
-                  images: [...state.images, ...newImages]
-                }))
-              }}
-            />
-            <button
-              className="btn btn-sm btn-primary btn-rounded"
-              type="submit"
-              children={fbt('Send', 'SendMessage.send')}
-            />
-          </form>
+      <>
+        {this.state.error && (
+          <ToastMessage
+            message={this.state.error}
+            type="danger"
+            onClose={() => this.setState({ error: null })}
+          />
         )}
-      </Mutation>
+        <Mutation mutation={mutation}>
+          {sendMessage => (
+            <form
+              className="send-message d-flex"
+              onSubmit={e => this.handleSubmit(e, sendMessage)}
+            >
+              {images.length ? (
+                <div className="images-preview">
+                  {images.map(image => (
+                    <div key={image.url} className="images-container">
+                      <img className="img" src={image.url} />
+                      <a
+                        className="image-overlay-btn"
+                        aria-label={fbt('Close', 'SendMessage.close')}
+                        onClick={() => {
+                          this.setState({
+                            images: images.filter(img => img !== image)
+                          })
+                        }}
+                      >
+                        <span aria-hidden="true">&times;</span>
+                      </a>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+              {images.length ? null : (
+                <TextareaAutosize
+                  className="form-control"
+                  placeholder={fbt(
+                    'Type something...',
+                    'SendMessage.placeholder'
+                  )}
+                  innerRef={this.input}
+                  value={this.state.message}
+                  onChange={e => this.setState({ message: e.target.value })}
+                  onKeyPress={e => this.handleKeyPress(e, sendMessage)}
+                />
+              )}
+              <img
+                src="images/add-photo-icon.svg"
+                className="add-photo"
+                role="presentation"
+                onClick={this.handleClick}
+              />
+              <input
+                type="file"
+                multiple={true}
+                accept="image/jpeg,image/gif,image/png"
+                ref={this.fileInput}
+                className="d-none"
+                onChange={async e => {
+                  const newImages = await getImages(
+                    config,
+                    e.currentTarget.files
+                  )
+                  this.setState(state => ({
+                    images: [...state.images, ...newImages]
+                  }))
+                }}
+              />
+              <button
+                className="btn btn-sm btn-primary btn-rounded"
+                type="submit"
+                children={fbt('Send', 'SendMessage.send')}
+              />
+            </form>
+          )}
+        </Mutation>
+      </>
     )
   }
 }