convert modal to jsx,

change reportModal to use the Modal component

euth/comments/static/comments/Comment.jsx

@@ -1,4 +1,4 @@
-var ReportModal = require('../../../../euth/reports/static/reports/react_reports')
+var ReportModal = require('../../../reports/static/reports/react_reports')
 var RatingBox = require('../../../../euth/ratings/static/ratings/react_ratings').RatingBox
 var Modal = require('../../../contrib/static/js/Modal')
 var CommentEditForm = require('./CommentEditForm')
@@ -88,8 +88,8 @@ var Comment = React.createClass({
       return (
         <Modal
           name={`comment_delete_${this.props.id}`}
-          question={django.gettext('Do you really want to delete this comment?')}
-          handler={() => this.props.handleCommentDelete(this.props.index, this.props.parentIndex)}
+          partials={{title: django.gettext('Do you really want to delete this comment?')}}
+          submitHandler={() => this.props.handleCommentDelete(this.props.index, this.props.parentIndex)}
           action={django.gettext('Delete')}
           abort={django.gettext('Abort')}
           btnStyle="cta"

euth/contrib/static/js/Modal.jsx

@@ -1,44 +1,45 @@
 var React = require('react')
-var h = require('react-hyperscript')
+var django = require('django')
 
-module.exports = React.createClass({
-  'render': function () {
-    return h('div.modal.fade#' + this.props.name, { tabindex: '-1', role: 'dialog', 'aria-labelledby': 'myModalLabel' }, [
-      h('div.modal-dialog.modal-lg', { role: 'document' }, [
-        h('div.modal-content', [
-          h('div.modal-header', [
-            h('button.close', {
-              type: 'button',
-              'data-dismiss': 'modal',
-              'aria-label': this.props.abort
-            }, [
-              h('i.fa.fa-times', {
-                'aria-hidden': true
-              })
-            ])
-          ]),
-          h('div.modal-body', [
-            h('h3.modal-title', this.props.question)
-          ]),
-          h('div.modal-footer', [
-            h('div.row', [
-              h('button.submit-button',
-                {
-                  type: 'button',
-                  'data-dismiss': 'modal',
-                  onClick: this.props.handler
-                },
-                this.props.action)
-            ]),
-            h('div.row', [
-              h('button.cancel-button', {
-                type: 'button',
-                'data-dismiss': 'modal'
-              }, this.props.abort)
-            ])
-          ])
-        ])
-      ])
-    ])
+var Modal = React.createClass({
+  render: function () {
+    var dismiss = this.props.dismissOnSubmit ? 'modal' : 'false'
+    return (
+      <div className="modal fade" id={this.props.name} tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
+        <div className="modal-dialog modal-lg" role="document">
+          <div className="modal-content">
+            <div className="modal-header">
+              <button className="close" aria-label={this.props.abort}
+                data-dismiss="modal" onClick={this.props.closeHandler}>
+                <i className="fa fa-times" />
+              </button>
+            </div>
+
+            <div className={'modal-body ' + this.props.partials.bodyClass}>
+              <h3 className="modal-title">{this.props.partials.title}</h3>
+              {this.props.partials.body}
+            </div>
+            {!this.props.partials.hideFooter &&
+            <div className="modal-footer">
+              <div className="row">
+                <button className="submit-button" data-dismiss={dismiss} onClick={this.props.submitHandler}>{this.props.action}</button>
+              </div>
+              <div className="row">
+                <button className="cancel-button" data-dismiss="modal" onClick={this.props.closeHandler}>{this.props.abort}</button>
+              </div>
+            </div>
+            }
+          </div>
+        </div>
+      </div>
+    )
   }
 })
+
+Modal.defaultProps = {
+  partials: {},
+  abort: django.gettext('Abort'),
+  dismissOnSubmit: true
+}
+
+module.exports = Modal

euth/reports/static/reports/react_reports.jsx

@@ -0,0 +1,83 @@
+var api = require('../../../contrib/static/js/api')
+var Modal = require('../../../contrib/static/js/Modal')
+
+var $ = require('jquery')
+var React = require('react')
+var django = require('django')
+
+var ReportModal = React.createClass({
+  getInitialState: function () {
+    return {
+      report: '',
+      showSuccessMessage: false,
+      showErrorMessage: false,
+      showReportForm: true
+    }
+  },
+  handleTextChange: function (e) {
+    this.setState({report: e.target.value})
+  },
+  resetModal: function () {
+    if (!$('#' + this.props.name).is(':visible')) {
+      this.setState({
+        report: '',
+        showSuccessMessage: false,
+        showErrorMessage: false,
+        showReportForm: true,
+        errors: null
+      })
+    } else {
+      setTimeout(this.resetModal, 500)
+    }
+  },
+  closeModal: function () {
+    $('#' + this.props.name).modal('hide')
+    this.resetModal()
+  },
+  submitReport: function (e) {
+    api.report.submit({
+      description: this.state.report,
+      content_type: this.props.contentType,
+      object_pk: this.props.objectId
+    })
+      .done(function () {
+        this.setState({
+          report: '',
+          showSuccessMessage: true,
+          showReportForm: false,
+          showErrorMessage: false
+        })
+      }.bind(this))
+  },
+  render: function () {
+    let partials = {}
+    if (this.state.showSuccessMessage) {
+      partials.title = (<span><i className="fa fa-check" /> Thank you! We are taking care of it.</span>)
+      partials.hideFooter = true
+      partials.bodyClass = 'success'
+    } else if (this.state.showReportForm) {
+      partials.title = this.props.title
+      partials.body = (
+        <div className="form-group">
+          <textarea rows="5" className="form-control report-message" value={this.state.report}
+            placeholder={django.gettext('Your message here')} onChange={this.handleTextChange} />
+          {this.state.errors && <span className="help-block">{this.state.errors.description}</span>}
+        </div>
+      )
+    }
+
+    return (
+      <Modal
+        abort={this.props.abort}
+        name={this.props.name}
+        closeHandler={this.closeModal}
+        submitHandler={this.submitReport}
+        action={django.gettext('Send Report')}
+        partials={partials}
+        dismissOnSubmit={false}
+      />
+    )
+  }
+})
+
+module.exports = ReportModal