on Refactor... #2

2025-12-13 09:46:22 +00:00 · 2015-08-18 03:46:09 +09:00
parent 23b8b49c00
commit d8cb93fb10
16 changed files with 389 additions and 244 deletions
--- a/browser/main/Components/CodeEditor.jsx
+++ b/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 () {
--- a/browser/main/Components/CodeViewer.jsx
+++ b/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 () {
--- a/browser/main/Components/HomeNavigator.jsx
+++ b/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>
--- a/browser/main/Components/NoteForm.jsx
+++ b/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
--- a/browser/main/Components/PlanetCreateModal.jsx
+++ b/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')}>
--- a/browser/main/Components/PlanetSettingModal.jsx
+++ b/browser/main/Components/PlanetSettingModal.jsx
@@ -1,5 +1,4 @@
 var React = require('react/addons')
-var Select = require('react-select')

 var Catalyst = require('../Mixins/Catalyst')

--- a/browser/main/Components/PreferencesModal.jsx
+++ b/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'})
--- a/browser/main/Components/TeamCreateModal.jsx
+++ b/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>
+    )
+  }
+})
--- a/browser/main/Containers/MainContainer.jsx
+++ b/browser/main/Containers/MainContainer.jsx
@@ -40,8 +40,10 @@ module.exports = React.createClass({
    if (this.isActive('root')) {
      if (localStorage.getItem('currentUser') == null) {
        this.transitionTo('login')
+        return
      } else {
        this.transitionTo('home')
+        return
      }
    }

--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -17,6 +17,32 @@ var Hq = require('../Services/Hq')
 var UserStore = require('../Stores/UserStore')
 var PlanetStore = require('../Stores/PlanetStore')

+function deleteItemFromTargetArray (item, targetArray) {
+  targetArray.some(function (_item, index) {
+    if (_item.id === item.id) {
+      targetArray.splice(index, 1)
+      return true
+    }
+    return false
+  })
+
+  return targetArray
+}
+
+function updateItemToTargetArray (item, targetArray) {
+  var isNew = !targetArray.some(function (_item, index) {
+    if (_item.id === item.id) {
+      targetArray.splice(index, 1, item)
+      return true
+    }
+    return false
+  })
+
+  if (isNew) targetArray.push(item)
+
+  return targetArray
+}
+
 module.exports = React.createClass({
  mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter],
  propTypes: {
@@ -36,7 +62,6 @@ module.exports = React.createClass({
  componentDidUpdate: function () {
    if (this.isActive('planetHome') && this.refs.list != null && this.refs.list.props.articles.length > 0) {
      var article = this.refs.list.props.articles[0]
-      console.log(article)
      var planet = this.state.planet
      switch (article.type) {
        case 'code':
@@ -64,24 +89,14 @@ module.exports = React.createClass({
  },
  onPlanetChange: function (res) {
    if (this.state.planet == null) return
+    console.log(res.data)

-    var code, codes, note, notes, isNew, articleIndex, articlesCount
+    var code, note, articleIndex, articlesCount
    switch (res.status) {
      case 'codeUpdated':
        code = res.data
        if (code.PlanetId === this.state.planet.id) {
-          codes = this.state.planet.Codes
-          isNew = !codes.some(function (_code, index) {
-            if (code.localId === _code.localId) {
-              codes.splice(index, 1, code)
-              return true
-            }
-            return false
-          })
-
-          if (isNew) {
-            codes.unshift(code)
-          }
+          this.state.planet.Codes = updateItemToTargetArray(code, this.state.planet.Codes)

          this.setState({planet: this.state.planet})
        }
@@ -89,18 +104,7 @@ module.exports = React.createClass({
      case 'noteUpdated':
        note = res.data
        if (note.PlanetId === this.state.planet.id) {
-          notes = this.state.planet.Notes
-          isNew = !notes.some(function (_note, index) {
-            if (note.localId === _note.localId) {
-              notes.splice(index, 1, note)
-              return true
-            }
-            return false
-          })
-
-          if (isNew) {
-            notes.unshift(note)
-          }
+          this.state.planet.Notes = updateItemToTargetArray(note, this.state.planet.Notes)

          this.setState({planet: this.state.planet})
        }
@@ -108,53 +112,49 @@ module.exports = React.createClass({
      case 'codeDestroyed':
        code = res.data
        if (code.PlanetId === this.state.planet.id) {
-          codes = this.state.planet.Codes
-          codes.some(function (_code, index) {
-            if (code.localId === _code.localId) {
-              codes.splice(index, 1)
-              return true
-            }
-            return false
-          })
+          this.state.planet.Codes = deleteItemFromTargetArray(code, this.state.planet.Codes)

-          articleIndex = this.getFilteredIndexOfCurrentArticle()
-          articlesCount = this.refs.list.props.articles.length
+          if (this.refs.detail.props.article != null && this.refs.detail.props.article.type === code.type && this.refs.detail.props.article.localId === code.localId) {
+            articleIndex = this.getFilteredIndexOfCurrentArticle()
+            articlesCount = this.refs.list.props.articles.length

-          this.setState({planet: this.state.planet}, function () {
-            if (articlesCount > 1) {
-              if (articleIndex > 0) {
-                this.selectArticleByListIndex(articleIndex - 1)
-              } else {
-                this.selectArticleByListIndex(articleIndex)
+            this.setState({planet: this.state.planet}, function () {
+              if (articlesCount > 1) {
+                if (articleIndex > 0) {
+                  this.selectArticleByListIndex(articleIndex - 1)
+                } else {
+                  this.selectArticleByListIndex(articleIndex)
+                }
              }
-            }
-          })
+            })
+            return
+          }
+
+          this.setState({planet: this.state.planet})
        }
        break
      case 'noteDestroyed':
        note = res.data
        if (note.PlanetId === this.state.planet.id) {
-          notes = this.state.planet.Notes
-          notes.some(function (_note, index) {
-            if (note.localId === _note.localId) {
-              notes.splice(index, 1)
-              return true
-            }
-            return false
-          })
+          this.state.planet.Notes = deleteItemFromTargetArray(note, this.state.planet.Notes)

-          articleIndex = this.getFilteredIndexOfCurrentArticle()
-          articlesCount = this.refs.list.props.articles.length
+          if (this.refs.detail.props.article != null && this.refs.detail.props.article.type === note.type && this.refs.detail.props.article.localId === note.localId) {
+            articleIndex = this.getFilteredIndexOfCurrentArticle()
+            articlesCount = this.refs.list.props.articles.length

-          this.setState({planet: this.state.planet}, function () {
-            if (articlesCount > 1) {
-              if (articleIndex > 0) {
-                this.selectArticleByListIndex(articleIndex - 1)
-              } else {
-                this.selectArticleByListIndex(articleIndex)
+            this.setState({planet: this.state.planet}, function () {
+              if (articlesCount > 1) {
+                if (articleIndex > 0) {
+                  this.selectArticleByListIndex(articleIndex - 1)
+                } else {
+                  this.selectArticleByListIndex(articleIndex)
+                }
              }
-            }
-          })
+            })
+            return
+          }
+
+          this.setState({planet: this.state.planet})
        }
        break
    }
@@ -283,7 +283,7 @@ module.exports = React.createClass({
    }

    this.setState({search: keywords.join(' ')}, function () {
-      this.selectArticleByIndex(0)
+      this.selectArticleByListIndex(0)
    })
  },
  toggleNoteFilter: function () {
@@ -311,7 +311,7 @@ module.exports = React.createClass({
    }

    this.setState({search: keywords.join(' ')}, function () {
-      this.selectArticleByIndex(0)
+      this.selectArticleByListIndex(0)
    })
  },
  applyTagFilter: function (tag) {
--- a/browser/main/Containers/SignupContainer.jsx
+++ b/browser/main/Containers/SignupContainer.jsx
@@ -37,8 +37,7 @@ module.exports = React.createClass({
        }.bind(this))
        .catch(function (err) {
          var res = err.response
-          console.log(res)
-          console.log(err.status)
+          console.error(res.body)
          if (err.status === 409) {
            // Confliction
            var emailConflicted = res.body.errors[0].path === 'email'
--- a/browser/main/Containers/UserContainer.jsx
+++ b/browser/main/Containers/UserContainer.jsx
@@ -1,5 +1,3 @@
-/* global localStorage */
-
 var React = require('react/addons')
 var ReactRouter = require('react-router')
 var RouteHandler = ReactRouter.RouteHandler
@@ -15,7 +13,6 @@ var ProfileImage = require('../Components/ProfileImage')
 var EditProfileModal = require('../Components/EditProfileModal')

 var UserStore = require('../Stores/UserStore')
-var PlanetStore = require('../Stores/PlanetStore')

 module.exports = React.createClass({
  mixins: [LinkedState, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange')],
@@ -69,34 +66,6 @@ module.exports = React.createClass({
        console.error(err)
      })
  },
-  onListen: function (res) {
-    console.log('on Listen')
-    if (res == null || res.status == null) return
-
-    var currentUser = this.state.currentUser
-
-    if (res.status === 'planetCreated') {
-      currentUser.Planets.push(res.data)
-
-      localStorage.setItem('currentUser', JSON.stringify(currentUser))
-      this.setState({currentUser: currentUser})
-      return
-    }
-
-    if (res.status === 'planetDeleted') {
-      currentUser.Planets.some(function (_planet, index) {
-        if (res.data.id === _planet.id) {
-          currentUser.Planets.splice(index, 1)
-          return true
-        }
-        return false
-      })
-
-      localStorage.setItem('currentUser', JSON.stringify(currentUser))
-      this.setState({currentUser: currentUser})
-      return
-    }
-  },
  openEditProfileModal: function () {
    this.openModal(EditProfileModal, {targetUser: this.state.user})
  },
@@ -110,50 +79,10 @@ module.exports = React.createClass({
            User Loading...
          </div>
        )
+      } else if (user.userType === 'team') {
+        return this.renderTeamHome()
      } else {
-        var userPlanets = user.Planets.map(function (planet) {
-          return (
-            <li key={'planet-' + planet.id}>
-              <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
-            </li>
-          )
-        })
-
-        var teams = user.Teams == null ? [] : user.Teams.map(function (team) {
-          return (
-            <li>
-              Some team
-            </li>
-          )
-        })
-        return (
-          <div className='UserContainer'>
-            <div className='userProfile'>
-              <ProfileImage className='userPhoto' size='75' email={user.email}/>
-              <div className='userInfo'>
-                <div className='userProfileName'>{user.profileName}</div>
-                <div className='userName'>{user.name}</div>
-              </div>
-
-              <button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>
-            </div>
-            <div className='teamList'>
-              <div className='teamLabel'>{teams.length} {teams.length > 0 ? 'Teams' : 'Team'}</div>
-              <ul className='teams'>
-                {teams}
-              </ul>
-            </div>
-            <div className='planetList'>
-              <div className='planetLabel'>{userPlanets.length} {userPlanets.length > 0 ? 'Planets' : 'Planet'}</div>
-              <div className='planetGroup'>
-                <div className='planetGroupLabel'>{user.profileName}</div>
-                <ul className='planets'>
-                  {userPlanets}
-                </ul>
-              </div>
-            </div>
-          </div>
-        )
+        return this.renderUserHome()
      }
    } else {
      return (
@@ -162,5 +91,120 @@ module.exports = React.createClass({
        </div>
      )
    }
+  },
+  renderTeamHome: function () {
+    var user = this.state.user
+
+    var userPlanets = user.Planets.map(function (planet) {
+      return (
+        <li key={'planet-' + planet.id}>
+          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+        </li>
+      )
+    })
+
+    var members = user.Members == null ? [] : user.Members.map(function (member) {
+      return (
+        <li key={'user-' + member.id}>
+          <Link to='userHome' params={{userName: member.name}}>{member.profileName} ({member.name})</Link>
+        </li>
+      )
+    })
+    return (
+      <div className='UserContainer'>
+        <div className='userProfile'>
+          <ProfileImage className='userPhoto' size='75' email={user.email}/>
+          <div className='userInfo'>
+            <div className='userProfileName'>{user.profileName}</div>
+            <div className='userName'>{user.name}</div>
+          </div>
+
+          <button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>
+        </div>
+        <div className='memberList'>
+          <div className='memberLabel'>{members.length} {members.length > 0 ? 'Members' : 'Member'}</div>
+          <ul className='members'>
+            {members}
+          </ul>
+        </div>
+        <div className='planetList'>
+          <div className='planetLabel'>{userPlanets.length} {userPlanets.length > 0 ? 'Planets' : 'Planet'}</div>
+          <div className='planetGroup'>
+            <ul className='planets'>
+              {userPlanets}
+            </ul>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  renderUserHome: function () {
+    var user = this.state.user
+
+    var userPlanets = user.Planets.map(function (planet) {
+      return (
+        <li key={'planet-' + planet.id}>
+          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+          &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
+        </li>
+      )
+    })
+
+    var teams = user.Teams == null ? [] : user.Teams.map(function (team) {
+      return (
+        <li key={'user-' + team.id}>
+          <Link to='userHome' params={{userName: team.name}}>{team.profileName} ({team.name})</Link>
+        </li>
+      )
+    })
+
+    var teamPlanets = user.Teams == null ? [] : user.Teams.map(function (team) {
+      var planets = team.Planets.map(function (planet) {
+        return (
+          <li key={'planet-' + planet.id}>
+            <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+            &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
+          </li>
+        )
+      })
+      return (
+      <div key={'user-' + team.id} className='planetGroup'>
+        <div className='planetGroupLabel'>{team.name}</div>
+        <ul className='planets'>
+          {planets}
+        </ul>
+      </div>
+      )
+    })
+
+    return (
+      <div className='UserContainer'>
+        <div className='userProfile'>
+          <ProfileImage className='userPhoto' size='75' email={user.email}/>
+          <div className='userInfo'>
+            <div className='userProfileName'>{user.profileName}</div>
+            <div className='userName'>{user.name}</div>
+          </div>
+
+          <button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>
+        </div>
+        <div className='teamList'>
+          <div className='teamLabel'>{teams.length} {teams.length > 0 ? 'Teams' : 'Team'}</div>
+          <ul className='teams'>
+            {teams}
+          </ul>
+        </div>
+        <div className='planetList'>
+          <div className='planetLabel'>{userPlanets.length} {userPlanets.length > 0 ? 'Planets' : 'Planet'}</div>
+          <div className='planetGroup'>
+            <div className='planetGroupLabel'>{user.profileName}</div>
+            <ul className='planets'>
+              {userPlanets}
+            </ul>
+          </div>
+          {teamPlanets}
+        </div>
+      </div>
+    )
  }
 })
--- a/browser/main/Services/Hq.js
+++ b/browser/main/Services/Hq.js
@@ -44,6 +44,14 @@ module.exports = {
      })
      .send(input)
  },
+  createTeam: function (userName, input) {
+    return request
+      .post(apiUrl + 'resources/' + userName + '/teams')
+      .set({
+        Authorization: 'Bearer ' + localStorage.getItem('token')
+      })
+      .send(input)
+  },
  createPlanet: function (userName, input) {
    return request
      .post(apiUrl + 'resources/' + userName + '/planets')
--- a/browser/main/Stores/PlanetStore.js
+++ b/browser/main/Stores/PlanetStore.js
@@ -2,35 +2,94 @@

 var Reflux = require('reflux')

+var UserStore = require('./UserStore')
+
 var actions = Reflux.createActions([
-  'updatePlanet',
-  'destroyPlanet',
+  'update',
+  'destroy',
  'updateCode',
  'destroyCode',
  'updateNote',
  'destroyNote'
 ])

+function deleteItemFromTargetArray (item, targetArray) {
+  targetArray.some(function (_item, index) {
+    if (_item.id === item.id) {
+      targetArray.splice(index, 1)
+      return true
+    }
+    return false
+  })
+
+  return targetArray
+}
+
+function updateItemToTargetArray (item, targetArray) {
+  var isNew = !targetArray.some(function (_item, index) {
+    if (_item.id === item.id) {
+      targetArray.splice(index, 1, item)
+      return true
+    }
+    return false
+  })
+
+  if (isNew) targetArray.push(item)
+
+  return targetArray
+}
+
 module.exports = Reflux.createStore({
  listenables: [actions],
  Actions: actions,
-  onUpdatePlanet: function (planet) {
+  onUpdate: function (planet) {
+    // Copy the planet object
+    var aPlanet = Object.assign({}, planet)
+    delete aPlanet.Codes
+    delete aPlanet.Notes

+    // Check if the planet should be updated to currentUser
+    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+
+    var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
+
+    if (ownedByCurrentUser) {
+      currentUser.Planets = updateItemToTargetArray(aPlanet, currentUser.Planets)
+    }
+
+    if (!ownedByCurrentUser) {
+      var team = null
+      currentUser.Teams.some(function (_team) {
+        if (_team.id === aPlanet.OwnerId) {
+          team = _team
+          return true
+        }
+        return
+      })
+
+      if (team) {
+        team.Planets = updateItemToTargetArray(aPlanet, team.Planets)
+      }
+    }
+
+    // Update currentUser
+    localStorage.setItem('currentUser', JSON.stringify(currentUser))
+    UserStore.Actions.update(currentUser)
+
+    // Update the planet
+    localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
+
+    this.trigger({
+      status: 'updated',
+      data: planet
+    })
  },
  onUpdateCode: function (code) {
    code.type = 'code'

    var planet = JSON.parse(localStorage.getItem('planet-' + code.PlanetId))
    if (planet != null) {
-      var isNew = !planet.Codes.some(function (_code, index) {
-        if (code.id === _code.id) {
-          planet.Codes.splice(index, 1, code)
-          return true
-        }
-        return false
-      })
-
-      if (isNew) planet.Codes.unshift(code)
+      planet.Codes = updateItemToTargetArray(code, planet.Codes)

      localStorage.setItem('planet-' + code.PlanetId, JSON.stringify(planet))
    }
@@ -43,16 +102,11 @@ module.exports = Reflux.createStore({
  onDestroyCode: function (code) {
    var planet = JSON.parse(localStorage.getItem('planet-' + code.PlanetId))
    if (planet != null) {
-      planet.Codes.some(function (_code, index) {
-        if (code.id === _code.id) {
-          planet.Codes.splice(index, 1)
-          return true
-        }
-        return false
-      })
+      planet.Codes = deleteItemFromTargetArray(code, planet.Codes)

      localStorage.setItem('planet-' + code.PlanetId, JSON.stringify(planet))
    }
+    code.type = 'code'

    this.trigger({
      status: 'codeDestroyed',
@@ -64,15 +118,7 @@ module.exports = Reflux.createStore({

    var planet = JSON.parse(localStorage.getItem('planet-' + note.PlanetId))
    if (planet != null) {
-      var isNew = !planet.Notes.some(function (_note, index) {
-        if (note.id === _note.id) {
-          planet.Notes.splice(index, 1, note)
-          return true
-        }
-        return false
-      })
-
-      if (isNew) planet.Codes.unshift(note)
+      planet.Notes = updateItemToTargetArray(note, planet.Notes)

      localStorage.setItem('planet-' + note.PlanetId, JSON.stringify(planet))
    }
@@ -85,16 +131,11 @@ module.exports = Reflux.createStore({
  onDestroyNote: function (note) {
    var planet = JSON.parse(localStorage.getItem('planet-' + note.PlanetId))
    if (planet != null) {
-      planet.Notes.some(function (_note, index) {
-        if (note.id === _note.id) {
-          planet.Notes.splice(index, 1)
-          return true
-        }
-        return false
-      })
+      planet.Notes = deleteItemFromTargetArray(note, planet.Notes)

      localStorage.setItem('planet-' + note.PlanetId, JSON.stringify(planet))
    }
+    note.type = 'note'

    this.trigger({
      status: 'noteDestroyed',
--- a/browser/styles/main/containers/UserContainer.styl
+++ b/browser/styles/main/containers/UserContainer.styl
@@ -194,16 +194,20 @@
        margin-top 25px
        padding 10px 15px
        border-radius 5px
-    .teamList
+    .teamList, .memberList
      absolute left bottom
      top 125px
      width 200px
      padding 15px
      border-right solid 1px borderColor
      overflow-y auto
-      .teamLabel
+      .teamLabel, .memberLabel
        font-size 1.2em
        margin-bottom 15px
+      .teams, .members
+        li
+          margin-bottom 10px
+          font-size 1.1em
    .planetList
      absolute right bottom
      top 125px
@@ -212,7 +216,7 @@
      overflow-y auto
      .planetLabel
        font-size 1.2em
-        margin-bottom 25px
+        margin-bottom 15px
      .planetGroup
        margin-left 15px
        .planetGroupLabel
@@ -220,3 +224,5 @@
          margin-bottom 15px
        .planets
          margin-left 15px
+          li
+            margin-bottom 10px
--- a/browser/styles/shared/modal.styl
+++ b/browser/styles/shared/modal.styl
@@ -171,7 +171,7 @@
    border-radius 5px
    marked()

-  .PlanetCreateModal.modal, .PlanetAddUserModal.modal
+  .PlanetCreateModal.modal, .TeamCreateModal.modal
    padding 60px 0
    .nameInput
      width 80%