import SlackFeedback from 'react-slack-feedback';

<SlackFeedback
  // required
  channel="#general"
  // NOTE: The `onSubmit` method is called with the SlackFeedback context which
  // allows you to call `this.sent()` in the sendToSlack function. If you use
  // `payload => sendToSlack(payload)` or `sendToSlack.bind(this)` then you must
  // use a ref to call the sent method. i.e `this.refs.SlackFeedback.sent();`
  onSubmit={sendToSlack}
  onImageUpload={uploadImage}
  disabled={true} // completely disable the component (default = false)
  user="Users Name" // The logged in user (default = "Unknown User")
  emoji=":bug:" // default = :speaking_head_in_silhouette:
/>

/**
 * Send the Slack message to your server
 * @param  {Object} payload
 * @return {null}
 */
function sendToSlack(payload) {
  $.post('/api/slack', {
    data: payload
  }).then(res => {

    // The `onSubmit` prop function is called with the SlackFeedback component
    // context (this.props.onSubmit.call(this, payload)), meaning the component
    // methods are available from this function. You should call the `sent`
    // method if the request was successfully sent to Slack.
    this.sent();
  }, error => {
    this.error(error.statusText);
  });
}

/**
 * Upload image to server
 * @method uploadImage
 * @param  {File} image
 * @return {null}
 */
function uploadImage(image) {
  var form = new FormData();
  form.append('image', image);

  $.post('/api/upload', { data: form })
    .then(
      // It is important that you call the `imageUploaded` method or
      // the component will load indefinitely.
      //
      // If you've called the `uploadImage` function with `image => uploadImage(image)`,
      // you'll have to use a ref on the SlackFeedback component to access the
      // 'imageUploaded' and 'error' methods
      url => this.imageUploaded(url),
      err => this.error(err)
    );
}