From bd2816b2ac51a9b8c33561de88515cb2e875b714 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 21 Jul 2015 00:18:00 +0900
Subject: [PATCH] fix search bug

---
 browser/main/Components/PlanetCreateModal.jsx | 32 +++++++
 browser/main/Components/PlanetHeader.jsx      | 11 +--
 browser/main/Components/UserNavigator.jsx     | 67 ++++++++++++++
 browser/main/Containers/PlanetContainer.jsx   | 88 ++++++++++---------
 4 files changed, 151 insertions(+), 47 deletions(-)
 create mode 100644 browser/main/Components/PlanetCreateModal.jsx
 create mode 100644 browser/main/Components/UserNavigator.jsx

diff --git a/browser/main/Components/PlanetCreateModal.jsx b/browser/main/Components/PlanetCreateModal.jsx
new file mode 100644
index 00000000..3a4c28d8
--- /dev/null
+++ b/browser/main/Components/PlanetCreateModal.jsx
@@ -0,0 +1,32 @@
+var React = require('react/addons')
+var Catalyst = require('../Mixins/Catalyst')
+
+var PlanetStore = require('../Stores/PlanetStore')
+
+module.exports = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin],
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      planetName: ''
+    }
+  },
+  handleSubmit: function () {
+    console.log(this.state.planetName)
+  },
+  stopPropagation: function (e) {
+    e.stopPropagation()
+  },
+  render: function () {
+    return (
+      <div onClick={this.stopPropagation} className='PlanetCreateModal modal'>
+        <input valueLink={this.linkState('planetName')} className='stripInput'/>
+        <button onClick={this.handleSubmit} className='submitButton'>
+          <i className='fa fa-check'/>
+        </button>
+      </div>
+    )
+  }
+})
diff --git a/browser/main/Components/PlanetHeader.jsx b/browser/main/Components/PlanetHeader.jsx
index fef7c6b5..064fe330 100644
--- a/browser/main/Components/PlanetHeader.jsx
+++ b/browser/main/Components/PlanetHeader.jsx
@@ -4,7 +4,8 @@ var PlanetHeader = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.object,
     currentUser: React.PropTypes.object,
-    onSearchChange: React.PropTypes.func
+    onSearchChange: React.PropTypes.func,
+    search: React.PropTypes.string
   },
   getInitialState: function () {
     return {
@@ -17,10 +18,6 @@ var PlanetHeader = React.createClass({
   interceptClick: function (e) {
     e.stopPropagation()
   },
-  handleChange: function (e) {
-    this.setState({search: e.target.value})
-    this.props.onSearchChange(e.target.value)
-  },
   handleKeyDown: function (e) {
     if (e.keyCode === 27) {
       React.findDOMNode(this.refs.search).blur()
@@ -33,8 +30,8 @@ var PlanetHeader = React.createClass({
     return (
       <div onClick={this.interceptClick} className='PlanetHeader'>
         <div className='headerLabel'>
-          <span className='planetName'>{currentPlanetName}</span>
           <span className='userName'>{currentUserName}</span><br/>
+          <span className='planetName'>{currentPlanetName}</span>
           <button className={'menuBtn'}>
             <i className='fa fa-gears'></i>
           </button>
@@ -42,7 +39,7 @@ var PlanetHeader = React.createClass({
         <div className='headerControl'>
           <span className='searchInput'>
             <i className='fa fa-search'/>
-            <input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
+            <input onKeyDown={this.handleKeyDown} onChange={this.props.onSearchChange} value={this.props.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
           </span>
           <a className='downloadButtton btn-primary'>Download Mac app</a>
         </div>
diff --git a/browser/main/Components/UserNavigator.jsx b/browser/main/Components/UserNavigator.jsx
new file mode 100644
index 00000000..3af04f8c
--- /dev/null
+++ b/browser/main/Components/UserNavigator.jsx
@@ -0,0 +1,67 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+
+var ModalBase = require('./ModalBase')
+var PlanetCreateModal = require('./PlanetCreateModal')
+
+var AuthStore = require('../Stores/AuthStore')
+
+module.exports = React.createClass({
+  mixins: [ReactRouter.Navigation],
+  propTypes: {
+    currentPlanet: React.PropTypes.object,
+    currentUser: React.PropTypes.object
+  },
+  getInitialState: function () {
+    return {
+      isPlanetCreateModalOpen: false
+    }
+  },
+  componentDidMount: function () {
+    this.unsubscribe = AuthStore.listen(this.onLogout)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onLogout: function () {
+    this.transitionTo('login')
+  },
+  openPlanetCreateModal: function () {
+    this.setState({isPlanetCreateModalOpen: true})
+  },
+  closePlanetCreateModal: function () {
+    this.setState({isPlanetCreateModalOpen: false})
+  },
+  render: function () {
+    var planets = this.props.currentUser.Planets.map(function (planet, index) {
+      return (
+        <li key={planet.id} className={this.props.currentPlanet != null && this.props.currentPlanet.name === planet.name ? 'active' : ''}>
+          <Link to='planet' params={{userName: this.props.currentUser.name, planetName: planet.name}} href>{planet.name[0]}</Link>
+          <div className='shortCut'>⌘{index + 1}</div>
+        </li>
+      )
+    }.bind(this))
+    if (this.props.currentUser == null) {
+      return (
+        <div className='UserNavigator'>
+        </div>
+      )
+    }
+
+    return (
+      <div tabIndex='2' className='UserNavigator'>
+        <Link to='userHome' params={{userName: this.props.currentUser.name}} className='userConfig'>
+          <img width='50' height='50' src='../vendor/dummy.jpg'/>
+        </Link>
+        <ul>
+          {planets}
+        </ul>
+        <button onClick={this.openPlanetCreateModal} className='newPlanet'><i className='fa fa-plus'/></button>
+        <ModalBase isOpen={this.state.isPlanetCreateModalOpen} close={this.closePlanetCreateModal}>
+          <PlanetCreateModal close={this.closePlanetCreateModal}/>
+        </ModalBase>
+      </div>
+    )
+  }
+})
diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx
index 41517f29..898fb2e8 100644
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -17,6 +17,35 @@ var PlanetActions = require('../Actions/PlanetActions')
 var AuthStore = require('../Stores/AuthStore')
 var PlanetStore = require('../Stores/PlanetStore')
 
+var searchArticle = function (search, articles) {
+  if (search === '' || search == null) return articles
+  var firstFiltered = articles.filter(function (article) {
+
+    var first = article.type === 'snippet' ? article.callSign : article.title
+    if (first.match(new RegExp(search, 'i'))) return true
+
+    return false
+  })
+
+  var secondFiltered = articles.filter(function (article) {
+    var second = article.type === 'snippet' ? article.description : article.content
+    if (second.match(new RegExp(search, 'i'))) return true
+
+    return false
+  })
+
+  var thirdFiltered = articles.filter(function (article) {
+    if (article.type === 'snippet') {
+      if (article.content.match(new RegExp(search, 'i'))) return true
+    }
+    return false
+  })
+
+  return firstFiltered.concat(secondFiltered, thirdFiltered).filter(function (value, index, self) {
+    return self.indexOf(value) === index
+  })
+}
+
 module.exports = React.createClass({
   mixins: [ReactRouter.Navigation, ReactRouter.State],
   propTypes: {
@@ -26,7 +55,9 @@ module.exports = React.createClass({
   getInitialState: function () {
     return {
       currentPlanet: null,
-      filteredArticles: []
+      filteredArticles: [],
+      search: '',
+      isFetched: false
     }
   },
   componentDidMount: function () {
@@ -44,13 +75,13 @@ module.exports = React.createClass({
     var index = 0
 
     if (this.isActive('snippets')) {
-      this.state.filteredArticles.some(function (_article, _index) {
+      this.refs.list.props.articles.some(function (_article, _index) {
         if (_article.type === 'snippet' && _article.localId === parseInt(params.localId, 10)) {
           index = _index
         }
       })
     } else if (this.isActive('blueprints')) {
-      this.state.filteredArticles.some(function (_article, _index) {
+      this.refs.list.props.articles.some(function (_article, _index) {
         if (_article.type === 'blueprint' && _article.localId === parseInt(params.localId, 10)) {
           index = _index
           return true
@@ -84,7 +115,7 @@ module.exports = React.createClass({
     return index
   },
   selectArticleByIndex: function (index) {
-    var article = this.state.filteredArticles[index]
+    var article = this.refs.list.props.articles[index]
     var params = this.props.params
 
     if (article == null) {
@@ -127,11 +158,10 @@ module.exports = React.createClass({
   },
   onFetched: function (res) {
     var articles = this.state.currentPlanet == null ? null : this.state.currentPlanet.Articles
-    var filteredArticles = this.state.filteredArticles
 
     if (res.status === 'planetFetched') {
       var planet = res.data
-      this.setState({currentPlanet: planet, filteredArticles: planet.Articles}, function () {
+      this.setState({isFetched: true, currentPlanet: planet, filteredArticles: planet.Articles}, function () {
         if (this.state.filteredArticles.length > 0) {
           if (this.props.params.localId == null) {
             var article = this.state.filteredArticles[0]
@@ -170,7 +200,7 @@ module.exports = React.createClass({
         case 'articleCreated':
           articles.unshift(article)
 
-          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles}, function () {
+          this.setState({planet: this.state.currentPlanet, search: ''}, function () {
             this.selectArticleByIndex(0)
           })
           break
@@ -178,12 +208,12 @@ module.exports = React.createClass({
           articles.splice(index, 1)
           articles.unshift(article)
 
-          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles})
+          this.setState({planet: this.state.currentPlanet})
           break
         case 'articleDeleted':
           articles.splice(index, 1)
 
-          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles}, function () {
+          this.setState({planet: this.state.currentPlanet}, function () {
             this.closeDeleteModal()
             if (index > 0) {
               this.selectArticleByIndex(filteredIndex - 1)
@@ -194,34 +224,8 @@ module.exports = React.createClass({
       }
     }
   },
-  handleSearchChange: function (search) {
-    var firstFiltered = this.state.currentPlanet.Articles.filter(function (article) {
-      if (search === '' || search == null) return true
-
-      var first = article.type === 'snippet' ? article.callSign : article.title
-      if (first.match(new RegExp(search, 'i'))) return true
-
-      return false
-    })
-
-    var secondFiltered = this.state.currentPlanet.Articles.filter(function (article) {
-      var second = article.type === 'snippet' ? article.description : article.content
-      if (second.match(new RegExp(search, 'i'))) return true
-
-      return false
-    })
-
-    var thirdFiltered = this.state.currentPlanet.Articles.filter(function (article) {
-      if (article.type === 'snippet') {
-        if (article.content.match(new RegExp(search, 'i'))) return true
-      }
-      return false
-    })
-
-    var filteredArticles = firstFiltered.concat(secondFiltered, thirdFiltered).filter(function (value, index, self) {
-      return self.indexOf(value) === index
-    })
-    this.setState({filteredArticles: filteredArticles}, function () {
+  handleSearchChange: function (e) {
+    this.setState({search: e.target.value}, function () {
       this.selectArticleByIndex(0)
     })
   },
@@ -349,10 +353,12 @@ module.exports = React.createClass({
       })
     }
 
+    var filteredArticles = this.state.isFetched ? searchArticle(this.state.search, this.state.currentPlanet.Articles) : []
+
     var content = article != null ? (
       <PlanetArticleDetail article={article} onOpenEditModal={this.openEditModal} onOpenDeleteModal={this.openDeleteModal}/>
     ) : (
-      <div>Nothing selected</div>
+      <div className='PlanetArticleDetail'>Nothing selected</div>
     )
 
     var editModal = article != null ? (article.type === 'snippet' ? (
@@ -381,9 +387,11 @@ module.exports = React.createClass({
           {deleteModal}
         </ModalBase>
 
-        <PlanetHeader onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet} currentUser={user}/>
+        <PlanetHeader search={this.state.search} onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet} currentUser={user}/>
+
         <PlanetNavigator onOpenLaunchModal={this.openLaunchModal} currentPlanet={this.state.currentPlanet} currentUser={user}/>
-        <PlanetArticleList articles={this.state.filteredArticles}/>
+
+        <PlanetArticleList ref='list' articles={filteredArticles}/>
         {content}
       </div>
     )