on Refactor... #2

2025-12-23 22:51:42 +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/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>
+    )
  }
 })