on Refactor... #2

browser/main/Components/CodeEditor.jsx

@@ -20,6 +20,8 @@ module.exports = React.createClass({
     var session = editor.getSession()
     if (this.props.mode != null && this.props.mode.length > 0) {
       session.setMode('ace/mode/' + this.props.mode)
+    } else {
+      session.setMode('ace/mode/text')
     }
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
@@ -40,7 +42,12 @@ module.exports = React.createClass({
       this.state.editor.clearSelection()
     }
     if (prevProps.mode !== this.props.mode) {
-      this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
+      var session = this.state.editor.getSession()
+      if (this.props.mode != null && this.props.mode.length > 0) {
+        session.setMode('ace/mode/' + this.props.mode)
+      } else {
+        session.setMode('ace/mode/text')
+      }
     }
   },
   render: function () {

browser/main/Components/CodeViewer.jsx

@@ -21,6 +21,8 @@ module.exports = React.createClass({
     var session = editor.getSession()
     if (this.props.mode != null && this.props.mode.length > 0) {
       session.setMode('ace/mode/' + this.props.mode)
+    } else {
+      session.setMode('ace/mode/text')
     }
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
@@ -34,7 +36,12 @@ module.exports = React.createClass({
       this.state.editor.clearSelection()
     }
     if (prevProps.mode !== this.props.mode) {
-      this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
+      var session = this.state.editor.getSession()
+      if (this.props.mode != null && this.props.mode.length > 0) {
+        session.setMode('ace/mode/' + this.props.mode)
+      } else {
+        session.setMode('ace/mode/text')
+      }
     }
   },
   render: function () {

browser/main/Components/HomeNavigator.jsx

@@ -13,6 +13,7 @@ var UserStore = require('../Stores/UserStore')
 
 var PreferencesModal = require('./PreferencesModal')
 var PlanetCreateModal = require('./PlanetCreateModal')
+var TeamCreateModal = require('./TeamCreateModal')
 var ProfileImage = require('./ProfileImage')
 
 module.exports = React.createClass({
@@ -32,8 +33,11 @@ module.exports = React.createClass({
         break
     }
   },
+  openTeamCreateModal: function () {
+    this.openModal(TeamCreateModal, {user: this.state.currentUser, transitionTo: this.transitionTo})
+  },
   openPreferencesModal: function () {
-    this.openModal(PreferencesModal)
+    this.openModal(PreferencesModal, {currentUser: this.state.currentUser})
   },
   openPlanetCreateModal: function () {
     this.openModal(PlanetCreateModal, {transitionTo: this.transitionTo})
@@ -75,7 +79,9 @@ module.exports = React.createClass({
       )
     }
 
-    var planets = ((this.state.currentUser == null || this.state.currentUser.Planets == null) ? [] : this.state.currentUser.Planets).map(function (planet, index) {
+    var planets = (this.state.currentUser.Planets.concat(this.state.currentUser.Teams.reduce(function (planets, team) {
+      return planets.concat(team.Planets)
+    }, []))).map(function (planet, index) {
       return (
         <li key={planet.id} className={params.userName === planet.userName && params.planetName === planet.name ? 'active' : ''}>
           <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>
@@ -103,6 +109,15 @@ module.exports = React.createClass({
     )
   },
   renderPopup: function () {
+    var teams = this.state.currentUser.Teams == null ? [] : this.state.currentUser.Teams.map(function (team) {
+      return (
+        <li key={'user-' + team.id}>
+          <Link to='userHome' params={{userName: team.name}} className='userName'>{team.profileName} ({team.name})</Link>
+          <div className='userSetting'><i className='fa fa-gear'/></div>
+        </li>
+      )
+    })
+
     return (
       <div ref='profilePopup' className={'profilePopup' + (this.state.isProfilePopupOpen ? '' : ' close')}>
         <div className='profileGroup'>
@@ -111,7 +126,7 @@ module.exports = React.createClass({
           </div>
           <ul className='profileGroupList'>
             <li>
-              <Link to='userHome' params={{userName: this.state.currentUser.name}} className='userName'>Profile</Link>
+              <Link to='userHome' params={{userName: this.state.currentUser.name}} className='userName'>Profile ({this.state.currentUser.name})</Link>
               <div className='userSetting'><i className='fa fa-gear'/></div>
             </li>
           </ul>
@@ -122,20 +137,9 @@ module.exports = React.createClass({
             <span>Team</span>
           </div>
           <ul className='profileGroupList'>
+            {teams}
             <li>
-              <div className='userName'>A team</div>
-              <div className='userSetting'><i className='fa fa-gear'/></div>
-            </li>
-            <li>
-              <div className='userName'>B team</div>
-              <div className='userSetting'><i className='fa fa-gear'/></div>
-            </li>
-            <li>
-              <div className='userName'>C team</div>
-              <div className='userSetting'><i className='fa fa-gear'/></div>
-            </li>
-            <li>
-              <button className='createNewTeam'><i className='fa fa-plus-square-o'/> create new team</button>
+              <button onClick={this.openTeamCreateModal} className='createNewTeam'><i className='fa fa-plus-square-o'/> create new team</button>
             </li>
           </ul>
         </div>

browser/main/Components/NoteForm.jsx

@@ -29,7 +29,10 @@ var getOptions = function (input, callback) {
     })
 }
 
-var NoteForm = React.createClass({
+var EDIT_MODE = 0
+var PREVIEW_MODE = 1
+
+module.exports = React.createClass({
   mixins: [LinkedState, ReactRouter.State, Markdown],
   propTypes: {
     planet: React.PropTypes.object,
@@ -37,10 +40,6 @@ var NoteForm = React.createClass({
     transitionTo: React.PropTypes.func,
     note: React.PropTypes.object
   },
-  statics: {
-    EDIT_MODE: 0,
-    PREVIEW_MODE: 1
-  },
   getInitialState: function () {
     var note = Object.assign({
       title: '',
@@ -55,7 +54,7 @@ var NoteForm = React.createClass({
     })
     return {
       note: note,
-      mode: NoteForm.EDIT_MODE
+      mode: EDIT_MODE
     }
   },
   componentDidMount: function () {
@@ -72,7 +71,7 @@ var NoteForm = React.createClass({
     this.setState({note: note})
   },
   togglePreview: function () {
-    this.setState({mode: this.state.mode === NoteForm.EDIT_MODE ? NoteForm.PREVIEW_MODE : NoteForm.EDIT_MODE})
+    this.setState({mode: this.state.mode === EDIT_MODE ? PREVIEW_MODE : EDIT_MODE})
   },
   submit: function () {
     var planet = this.props.planet
@@ -102,7 +101,7 @@ var NoteForm = React.createClass({
     }
   },
   render: function () {
-    var content = this.state.mode === NoteForm.EDIT_MODE ? (
+    var content = this.state.mode === EDIT_MODE ? (
       <div className='form-group'>
         <CodeEditor onChange={this.handleContentChange} code={this.state.note.content} mode={'markdown'}/>
       </div>
@@ -134,7 +133,7 @@ var NoteForm = React.createClass({
         </div>
 
         <div className='modal-footer'>
-          <button onClick={this.togglePreview} className={'btn-default' + (this.state.mode === NoteForm.PREVIEW_MODE ? ' active' : '')}>Preview mode</button>
+          <button onClick={this.togglePreview} className={'btn-default' + (this.state.mode === PREVIEW_MODE ? ' active' : '')}>Preview mode</button>
           <div className='modal-control'>
             <button onClick={this.props.close} className='btn-default'>Cancel</button>
             <button onClick={this.submit} className='btn-primary'>Launch</button>
@@ -144,5 +143,3 @@ var NoteForm = React.createClass({
     )
   }
 })
-
-module.exports = NoteForm

browser/main/Components/PlanetCreateModal.jsx

@@ -22,9 +22,9 @@ module.exports = React.createClass({
       user: currentUser,
       planet: {
         name: '',
-        OwnerId: currentUser.id,
         public: true
-      }
+      },
+      ownerName: currentUser.name
     }
   },
   componentDidMount: function () {
@@ -36,23 +36,12 @@ module.exports = React.createClass({
     }
   },
   handleSubmit: function () {
-    Hq.createPlanet(this.state.user.name, this.state.planet)
+    Hq.createPlanet(this.state.ownerName, this.state.planet)
       .then(function (res) {
         var planet = res.body
 
-        var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+        PlanetStore.Actions.update(planet)
 
-        var isNew = !currentUser.Planets.some(function (_planet, index) {
-          if (planet.id === _planet) {
-            currentUser.Planets.splice(index, 1, planet)
-            return true
-          }
-          return false
-        })
-        if (isNew) currentUser.Planets.push(planet)
-
-        localStorage.setItem('currentUser', JSON.stringify(currentUser))
-        UserStore.Actions.update(currentUser)
         this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
         this.props.close()
       }.bind(this))
@@ -61,14 +50,20 @@ module.exports = React.createClass({
       })
   },
   render: function () {
+    var teamOptions = this.state.user.Teams.map(function (team) {
+      return (
+        <option value={team.name}>{team.profileName} ({team.name})</option>
+      )
+    })
     return (
       <div className='PlanetCreateModal modal'>
         <input ref='name' valueLink={this.linkState('planet.name')} className='nameInput stripInput' placeholder='Crate new Planet'/>
 
         <div className='formField'>
           of
-          <select valueLink={this.linkState('planet.OwnerId')}>
-            <option value={this.state.user.id}>Me({this.state.user.name})</option>
+          <select valueLink={this.linkState('ownerName')}>
+            <option value={this.state.user.name}>Me({this.state.user.name})</option>
+            {teamOptions}
           </select>
           as
           <select valueLink={this.linkState('planet.public')}>

browser/main/Components/PlanetSettingModal.jsx

@@ -1,5 +1,4 @@
 var React = require('react/addons')
-var Select = require('react-select')
 
 var Catalyst = require('../Mixins/Catalyst')
 

browser/main/Components/PreferencesModal.jsx

@@ -34,24 +34,6 @@ module.exports = React.createClass({
   componentWillUnmount: function () {
   },
   onListen: function (res) {
-    console.log(res)
-    if (res.status === 'userProfileUpdated') {
-      this.setState({
-        isUpdatingProfile: false,
-        isUpdatingProfileDone: true,
-        isUpdatingProfileFailed: false
-      })
-      return
-    }
-
-    if (res.status === 'userProfileUpdatingFailed') {
-      this.setState({
-        isUpdatingProfile: false,
-        isUpdatingProfileDone: false,
-        isUpdatingProfileFailed: true
-      })
-      return
-    }
   },
   activeProfile: function () {
     this.setState({currentTab: 'profile'})

browser/main/Components/TeamCreateModal.jsx

@@ -0,0 +1,54 @@
+/* global localStorage */
+
+var React = require('react/addons')
+
+var Hq = require('../Services/Hq')
+
+var LinkedState = require('../Mixins/LinkedState')
+
+var UserStore = require('../Stores/UserStore')
+
+module.exports = React.createClass({
+  mixins: [LinkedState],
+  propTypes: {
+    user: React.PropTypes.shape({
+      name: React.PropTypes.string
+    }),
+    transitionTo: React.PropTypes.func,
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      team: {
+        name: ''
+      }
+    }
+  },
+  handleSubmit: function () {
+    Hq.createTeam(this.props.user.name, this.state.team)
+      .then(function (res) {
+        var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+        var team = res.body
+
+        currentUser.Teams.push(team)
+        localStorage.setItem('currentUser', JSON.stringify(currentUser))
+        UserStore.Actions.update(currentUser)
+        this.props.transitionTo('userHome', {userName: team.name})
+        this.props.close()
+      }.bind(this))
+      .catch(function (err) {
+        console.error(err)
+      })
+  },
+  render: function () {
+    return (
+      <div className='TeamCreateModal modal'>
+        <input valueLink={this.linkState('team.name')} className='nameInput stripInput' placeholder='Create new team'/>
+
+        <button onClick={this.handleSubmit} className='submitButton'>
+          <i className='fa fa-check'/>
+        </button>
+      </div>
+    )
+  }
+})