Apply esformatter-jsx

gulpfile.js

@@ -4,6 +4,7 @@ var gulp = require('gulp');
 var prettify = require('gulp-jsbeautifier');
 var babel = require('gulp-babel');
 var changed = require('gulp-changed');
+var esformatter = require('gulp-esformatter');
 var del = require('del');
 var electron = require('electron-connect').server.create({
   path: './build'
@@ -13,7 +14,9 @@ var packager = require('electron-packager');
 var sources = ['**/*.js', '**/*.css', '**/*.html', '!**/node_modules/**', '!**/build/**', '!release/**'];
 var app_root = 'src';
 
-gulp.task('prettify', ['sync-meta'], function() {
+gulp.task('prettify', ['prettify:sources', 'prettify:jsx']);
+
+gulp.task('prettify:sources', ['sync-meta'], function() {
   gulp.src(sources)
     .pipe(prettify({
       html: {
@@ -30,6 +33,17 @@ gulp.task('prettify', ['sync-meta'], function() {
     .pipe(gulp.dest('.'));
 });
 
+gulp.task('prettify:jsx', function() {
+  return gulp.src(app_root + '/**/*.jsx')
+    .pipe(esformatter({
+      indent: {
+        value: '  '
+      },
+      plugins: ['esformatter-jsx']
+    }))
+    .pipe(gulp.dest(app_root));
+})
+
 gulp.task('build', ['build:jsx']);
 
 gulp.task('build:jsx', function() {

package.json

@@ -17,9 +17,12 @@
     "electron-connect": "^0.3.3",
     "electron-packager": "^5.1.0",
     "electron-prebuilt": "^0.35.1",
+    "esformatter": "^0.8.1",
+    "esformatter-jsx": "^4.0.6",
     "gulp": "^3.9.0",
     "gulp-babel": "^6.1.1",
     "gulp-changed": "^1.3.0",
+    "gulp-esformatter": "^5.0.0",
     "gulp-jsbeautifier": "^1.0.1",
     "mocha": "^2.3.4",
     "should": "^8.0.1",

src/settings.jsx

@@ -11,10 +11,14 @@ var SettingsPage = React.createClass({
   },
   componentDidMount: function() {
     var config = settings.readFileSync(this.props.configFile);
-    this.setState({teams: config.teams})
+    this.setState({
+      teams: config.teams
+    })
   },
   handleTeamsChange: function(teams) {
-    this.setState({teams: teams});
+    this.setState({
+      teams: teams
+    });
   },
   handleOK: function() {
     var config = {
@@ -30,40 +34,44 @@ var SettingsPage = React.createClass({
   render: function() {
     return (
       <div className="settingsPage">
-        <TeamList teams={this.state.teams} onTeamsChange={this.handleTeamsChange} />
+        <TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } />
-        <input type="button" value="OK" onClick={this.handleOK} />
+        <input type="button" value="OK" onClick={ this.handleOK } />
-        <input type="button" value="Cancel" onClick={this.handleCancel} />
+        <input type="button" value="Cancel" onClick={ this.handleCancel } />
       </div>
       );
   }
 });
 
 var TeamList = React.createClass({
-  handleTeamChange: function(index, team){
+  handleTeamChange: function(index, team) {
     var teams = this.props.teams;
     teams[index] = team;
     this.props.onTeamsChange(teams);
   },
-  handleNewTeamAdd: function(team){
+  handleNewTeamAdd: function(team) {
     var teams = this.props.teams;
     teams.push(team);
     this.props.onTeamsChange(teams);
   },
   render: function() {
     var thisObj = this;
-    var teamNodes = this.props.teams.map(function(team, i){
+    var teamNodes = this.props.teams.map(function(team, i) {
-      var handleTeamChange = function(team){
+      var handleTeamChange = function(team) {
         thisObj.handleTeamChange(i, team);
       };
       return (
-        <li><TeamItem index={i} name={team.name} url={team.url} onTeamChange={handleTeamChange} onName /></li>
+        <li>
+          <TeamItem index={ i } name={ team.name } url={ team.url } onTeamChange={ handleTeamChange } onName />
+        </li>
         );
     });
     return (
       <div className="teamList">
         <ol>
-          {teamNodes}
+          { teamNodes }
-          <li><NewTeamItem onNewTeamAdd={this.handleNewTeamAdd} /></li>
+          <li>
+            <NewTeamItem onNewTeamAdd={ this.handleNewTeamAdd } />
+          </li>
         </ol>
       </div>
       );
@@ -71,42 +79,58 @@ var TeamList = React.createClass({
 });
 
 var TeamItem = React.createClass({
-  handleNameChange: function(e){
+  handleNameChange: function(e) {
-    this.props.onTeamChange({name: e.target.value, url: this.props.url});
+    this.props.onTeamChange({
+      name: e.target.value,
+      url: this.props.url
+    });
   },
-  handleURLChange: function(e){
+  handleURLChange: function(e) {
-    this.props.onTeamChange({name: this.props.name, url: e.target.value});
+    this.props.onTeamChange({
+      name: this.props.name,
+      url: e.target.value
+    });
   },
   render: function() {
     return (
       <div className="teamItem">
-        <input type="text" placeholder="Team name" value={this.props.name} onChange={this.handleNameChange} ></input>
+        <input type="text" placeholder="Team name" value={ this.props.name } onChange={ this.handleNameChange }></input>
-        <input type="text" placeholder="Team URL (http://example.com/team)" value={this.props.url} onChange={this.handleURLChange} ></input>
+        <input type="text" placeholder="Team URL (http://example.com/team)" value={ this.props.url } onChange={ this.handleURLChange }></input>
       </div>
       );
   }
 });
 
 var NewTeamItem = React.createClass({
-  getInitialState: function(){
+  getInitialState: function() {
-    return {name: '', url: ''};
+    return {
+      name: '',
+      url: ''
+    };
   },
-  handleNewTeamAdd: function(){
+  handleNewTeamAdd: function() {
-    this.props.onNewTeamAdd({name: this.state.name, url: this.state.url});
+    this.props.onNewTeamAdd({
+      name: this.state.name,
+      url: this.state.url
+    });
     this.setState(this.getInitialState());
   },
-  handleNameChange: function(e){
+  handleNameChange: function(e) {
-    this.setState({name: e.target.value});
+    this.setState({
+      name: e.target.value
+    });
   },
-  handleURLChange: function(e){
+  handleURLChange: function(e) {
-    this.setState({url: e.target.value});
+    this.setState({
+      url: e.target.value
+    });
   },
   render: function() {
     return (
       <div className="newTeamItem">
-        <input type="text" placeholder="Team name" value={this.state.name} onChange={this.handleNameChange} />
+        <input type="text" placeholder="Team name" value={ this.state.name } onChange={ this.handleNameChange } />
-        <input type="text" placeholder="Team URL (http://example.com/team)" value={this.state.url} onChange={this.handleURLChange} />
+        <input type="text" placeholder="Team URL (http://example.com/team)" value={ this.state.url } onChange={ this.handleURLChange } />
-        <input type="button" value="Add" onClick={this.handleNewTeamAdd} />
+        <input type="button" value="Add" onClick={ this.handleNewTeamAdd } />
       </div>
       );
   }
@@ -115,6 +139,6 @@ var NewTeamItem = React.createClass({
 var configFile = remote.getGlobal('config-file');
 
 ReactDOM.render(
-  <SettingsPage configFile={configFile} />,
+  <SettingsPage configFile={ configFile } />,
   document.getElementById('content')
 );