Remove jquery

index.html

@@ -3,6 +3,7 @@
     <script src="https://fb.me/react-0.13.1.js"></script>
     <script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/reqwest/1.1.5/reqwest.min.js"></script>
     <script src="oauth.min.js"></script>
     <script type="text/jsx" src="react/react.js"></script>
     <script src="showdown.full.js"></script>

react/react.js

@@ -11,10 +11,13 @@ var IssueList = React.createClass({
         body={issue.body}
         createdAt={issue.created_at}
         updatedAt={issue.updated_at}
+        closedAt={issue.closed_at}
         url={issue.html_url}
         labels={issue.labels}
         milestone={issue.milestone}
         number={issue.number}
+        comments={issue.comments}
+        pullRequest={issue.pull_request}
         state={issue.state}
         title={issue.title} />);
     });
@@ -28,10 +31,7 @@ var IssueList = React.createClass({
 });
 
 var IssueRow = React.createClass({
-  render: function() {
-    var converter = new Showdown.converter();
-    var dangerousHtml = converter.makeHtml(this.props.body.toString());
-
+  getInitialState: function() {
     var state = this.props.state;
     var classString = 'issue ' + state;
     var tagList = '';
@@ -44,14 +44,39 @@ var IssueRow = React.createClass({
         title={tag.name} />);
     });
 
+    return {
+      classString: classString,
+      state: state,
+      tagList: tagList,
+      tags: tags,
+    };
+  },
+  toggleExpanded: function(ev) {
+    var newClassString = this.state.classString;
+    var expandedClass = ' expanded';
+
+    if (this.state.classString.indexOf(expandedClass) > 0) {
+      newClassString = this.state.classString.replace(expandedClass, '');
+    } else {
+      newClassString += expandedClass;
+    }
+
+    this.setState({
+      classString: newClassString,
+    });
+  },
+  render: function() {
+    var converter = new Showdown.converter();
+    var dangerousHtml = converter.makeHtml(this.props.body.toString());
+
     return (
-      <div className={classString} style={{ display: state }}>
+      <div className={this.state.classString} style={{ display: this.state.state }} onClick={this.toggleExpanded}>
         <div className="issueRowAuthorStatus">
           <img src={this.props.avatarUrl} />
           <h3>{this.props.authorUserLogin}</h3>
-          <div className={"state panelThing " + state}>
+          <div className={"state panelThing " + this.state.state}>
             <h6>state:</h6>
-            <p>{state}</p>
+            <p>{this.state.state}</p>
           </div>
         </div>
         <div className="issueRowBody">
@@ -69,7 +94,14 @@ var IssueRow = React.createClass({
           </div>
           <div className="tagged panelThing">
             <h6>tagged:</h6>
-            <p>{tags}</p>
+            <p>{this.state.tags}</p>
+          </div>
+        </div>
+        <div className="expandableArea" style={{ display: "none" }}>
+          <div className="opened panelThing">
+            <div>
+              <b>comments :</b> <span>{this.props.comments}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -189,28 +221,30 @@ var FilterableIssueList = React.createClass({
   },
   updateIssues: function() {
     var headers = null;
+    var self = this;
 
     if (this.state.authToken !== null && this.state.authToken.length > 0) {
       headers = {
         "Authorization": "token " + this.state.authToken,
       };
     }
 
-    $.ajax({
+    reqwest({
       url: 'https://api.github.com/repos/' + this.state.repo + '/issues',
       headers: headers,
       data: {
         direction: this.state.direction,
         sort: this.state.sort,
         state: this.state.state,
       },
-      success: function(result) {
-        if (this.isMounted()) {
-          this.setState({
-            issues: result,
-          });
+      method: 'get',
+      success: function (result) {
+          if (self.isMounted()) {
+            self.setState({
+              issues: result,
+            });
+          }
         }
-      }.bind(this),
     });
   },
   onUpdateDisplayClosed: function(val) {

style.css

@@ -140,7 +140,7 @@ h6 {
 .header-thing h1 {
   color: rgba(255, 255, 255, 0.83);
   float: right;
-  letter-spacing: 7px; 
+  letter-spacing: 7px;
   text-align: center;
 }
 
@@ -184,3 +184,13 @@ h6 {
   background-color: rgb(203, 216, 203);
   box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 }
+
+.expandableArea {
+  clear: both;
+  display: none;
+}
+
+.expanded > .expandableArea {
+  display: inline !important;
+}
+