add comment count

src/components/issue.jsx

@@ -95,6 +95,9 @@ let Issue = React.createClass({
   render() {
     const {card, primaryRepoName, columnRegExp} = this.props;
     const {issue, repoOwner, repoName} = card;
+    if (!issue) {
+      return (<span>Maybe moving Issue...</span>);
+    }
     // TODO: Maybe the following 2 should be methods on the card
     const {taskFinishedCount, taskTotalCount} = getTaskCounts(issue.body);
     const issueDueAt = getIssueDueAt(issue.body);
@@ -105,9 +108,8 @@ let Issue = React.createClass({
     // PR updatedAt is updated when commits are pushed
     const updatedAt = card.getUpdatedAt();
 
-    if (!issue) {
-      return (<span>Maybe moving Issue...</span>);
-    }
+    const {comments: commentsCount} = issue; // count of comments
+
     const user = issue.assignee ? issue.assignee : issue.user;
     const assignedAvatar = (
       <Link to={getFilters().toggleUserName(user.login).url()}>
@@ -245,6 +247,16 @@ let Issue = React.createClass({
       );
     });
 
+    let comments;
+    if (commentsCount) {
+      comments = (
+        <span className='comments-count'>
+          <span className='comments-count-number'>{commentsCount}</span>
+          <i className='octicon octicon-comment'/>
+        </span>
+      );
+    }
+
     const header = [
       <IssueOrPullRequestBlurb key='issue-blurb'
         card={card}
@@ -339,6 +351,7 @@ let Issue = React.createClass({
             {dueAt}
             <span key='right-footer' className='issue-time-and-user'>
               <Time key='time' className='updated-at' dateTime={updatedAt}/>
+              {comments}
               {assignedAvatar}
             </span>
           </span>

style/app.less

@@ -461,14 +461,19 @@ body { background-color: #ddd; }
           display: block;
           float: right;
 
-          time.updated-at {
+          time.updated-at,
+          .comments-count {
             font-size: 1.2rem;
             color: #999;
             padding-right: 1rem;
-
             display: inline-block;
             white-space: nowrap;
             vertical-align: middle;
+          }
+
+          .comments-count-number { padding-right: .5rem; }
+
+          time.updated-at {
             max-width: 9rem;
             overflow-x: hidden;
             text-overflow: ellipsis;

webpack.config.js

@@ -26,10 +26,10 @@ var config = {
     ],
     module: {
         preLoaders: [
-          { test: /\.jsx?$/, loader: 'eslint-loader', exclude: /node_modules|gantt-chart.*/ },
+          { test: /\.jsx?$/, loader: 'eslint-loader', exclude: [/node_modules|gantt-chart.*/, /octokat\.js/] },
         ],
         loaders: [
-            { test: /\.jsx?$/, loader: 'babel', exclude: [/node_modules/, /puzzle-script/], query: { presets: ['react', 'es2015']} },
+            { test: /\.jsx?$/, loader: 'babel', exclude: [/node_modules/, /puzzle-script/, /octokat\.js/], query: { presets: ['react', 'es2015']} },
             { test: /\.json$/, loader: 'json-loader'},
             { test: /\.less$/,  loader: ExtractTextPlugin.extract('css!less') },
             { test: /\.(png|jpg|svg)/, loader: 'file-loader?name=[name].[ext]'},