From 366a16b933b70bcdf8ac0aedf823bcf620fb9f5a Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Sat, 23 Apr 2016 08:20:54 -0400
Subject: [PATCH] Add "Report a Bug" page to replace Jack's temporary one

---
 dist/index.html   |  1 +
 js/app.js         |  4 +++-
 js/page/help.js   |  3 +--
 js/page/report.js | 39 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 js/page/report.js

diff --git a/dist/index.html b/dist/index.html
index 4832a297f..4bfac2bd2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -28,6 +28,7 @@
       <script src="./js/page/settings.js"></script>
       <script src="./js/page/help.js"></script>
       <script src="./js/page/watch.js"></script>
+      <script src="./js/page/report.js"></script>
       <script src="./js/page/start.js"></script>
       <script src="./js/app.js"></script>
       <script src="./js/main.js"></script>
diff --git a/js/app.js b/js/app.js
index 0d05fb9c7..ac6d67509 100644
--- a/js/app.js
+++ b/js/app.js
@@ -9,7 +9,7 @@ var App = React.createClass({
     var match, param, val;
     [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/);
 
-    if (['settings', 'help', 'start', 'watch'].indexOf(param) != -1) {
+    if (['settings', 'help', 'start', 'watch', 'report'].indexOf(param) != -1) {
       var viewingPage = param;
     } else {
       var viewingPage = 'home';
@@ -60,6 +60,8 @@ var App = React.createClass({
       var content = <HelpPage />;
     } else if (this.state.viewingPage == 'watch') {
       var content = <WatchPage name={this.state.pageArgs}/>;
+    } else if (this.state.viewingPage == 'report') {
+      var content = <ReportPage />;
     } else if (this.state.viewingPage == 'start') {
       var content = <StartPage />;
     }
diff --git a/js/page/help.js b/js/page/help.js
index 9088b6180..80df7ec41 100644
--- a/js/page/help.js
+++ b/js/page/help.js
@@ -30,9 +30,8 @@ var HelpPage = React.createClass({
           <br></br>
           <h3>None of this applies to me, or it didn't work</h3>
           <p>
-              <Link href="/report" label="<< Click here to send us a bug report"/>
+              Please <Link href="/?report" label="send us a bug report"/>. Thanks!
               <br></br>
-              <Link href="https://github.com/lbryio/lbry/issues" label="<< Report an issue on github"/>
           </p>
           <br></br>
           <br></br>
diff --git a/js/page/report.js b/js/page/report.js
new file mode 100644
index 000000000..ddfb999c4
--- /dev/null
+++ b/js/page/report.js
@@ -0,0 +1,39 @@
+var ReportPage = React.createClass({
+  submitMessage: function() {
+    if (this._messageArea.value) {
+      this.setState({
+        submitting: true
+      });
+      lbry.reportBug(this._messageArea.value, () => {
+        this.setState({
+          submitting: false
+        });
+        alert("Your bug report has been submitted! Thank you for your feedback.");
+      });
+      this._messageArea.value = '';
+    }
+  },
+  getInitialState: function() {
+    return {
+      submitting: false,
+    }
+  },
+  render: function() {
+    return (
+      <main>
+        <h1>Report a bug</h1>
+        <section>
+        <p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>
+        <textarea ref={(t) => this._messageArea = t} cols="50" rows="10" name="message" type="text"/>
+        <div><button onClick={this.submitMessage} className={this.state.submitting ? 'disabled' : ''}>{this.state.submitting ? 'Submitting...' : 'Submit bug report'}</button></div>
+        </section>
+        <section>
+        Developers, feel free to instead <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
+        </section>
+        <section>
+          <Link href="/?help" label="<< Return to Help"/>
+        </section>
+      </main>
+    );
+  }
+});
\ No newline at end of file