on Refactor... #2

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>
+    )
   }
 })