refactor Actions & add logout action

browser/main/Actions/AuthActions.js

@@ -0,0 +1,7 @@
+var Reflux = require('reflux')
+
+module.exports = Reflux.createActions([
+  'login',
+  'register',
+  'logout'
+])

browser/main/Actions/PlanetActions.js

@@ -0,0 +1,11 @@
+var Reflux = require('reflux')
+
+module.exports = Reflux.createActions([
+  'fetchPlanet',
+  'createSnippet',
+  'createBlueprint',
+  'updateSnippet',
+  'updateBlueprint',
+  'destroySnippet',
+  'destroyBlueprint'
+])

browser/main/Actions/fetchPlanet.js

@@ -1,5 +0,0 @@
-var Reflux = require('reflux')
-
-var fetchPlanet = Reflux.createAction()
-
-module.exports = fetchPlanet

browser/main/Actions/login.js

@@ -1,5 +0,0 @@
-var Reflux = require('reflux')
-
-var login = Reflux.createAction()
-
-module.exports = login

browser/main/Actions/register.js

@@ -1,5 +0,0 @@
-var Reflux = require('reflux')
-
-var register = Reflux.createAction()
-
-module.exports = register

browser/main/Actions/updateSnippet.js

@@ -1,6 +0,0 @@
-var Reflux = require('reflux')
-
-// Creating an Action
-var updateSnippet = Reflux.createAction()
-
-module.exports = updateSnippet

browser/main/Components/CodeEditor.jsx

@@ -19,6 +19,7 @@ var CodeEditor = React.createClass({
     session.setMode('ace/mode/' + this.props.mode)
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
+    session.setUseWrapMode(true)
 
     session.on('change', function (e) {
       if (this.props.onChange != null) {

browser/main/Components/CodeViewer.jsx

@@ -15,11 +15,13 @@ var CodeViewer = React.createClass({
     editor.setReadOnly(true)
     editor.setTheme('ace/theme/xcode')
     editor.setHighlightActiveLine(false)
+    editor.clearSelection()
 
     var session = editor.getSession()
     session.setMode('ace/mode/' + this.props.mode)
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
+    session.setUseWrapMode(true)
 
     this.setState({editor: editor})
   },

browser/main/Containers/BlueprintContainer.jsx

@@ -1,11 +0,0 @@
-var React = require('react/addons')
-
-module.exports = React.createClass({
-  render: function () {
-    return (
-      <div>
-        Blueprint Container
-      </div>
-    )
-  }
-})

browser/main/Containers/LoginContainer.jsx

@@ -3,7 +3,7 @@ var ReactRouter = require('react-router')
 var Link = ReactRouter.Link
 
 var AuthStore = require('../Stores/AuthStore')
-var login = require('../Actions/login')
+var AuthActions = require('../Actions/AuthActions')
 
 var OnlyGuest = require('../Mixins/OnlyGuest')
 
@@ -22,7 +22,7 @@ module.exports = React.createClass({
     this.unsubscribe()
   },
   handleSubmit: function (e) {
-    login({
+    AuthActions.login({
       email: this.state.email,
       password: this.state.password
     })

browser/main/Containers/PlanetContainer.jsx

@@ -1,5 +1,4 @@
 var React = require('react/addons')
-var RouteHandler = require('react-router').RouteHandler
 var ReactRouter = require('react-router')
 var ModalBase = require('../Components/ModalBase')
 var LaunchModal = require('../Components/LaunchModal')
@@ -8,7 +7,7 @@ var CodeViewer = require('../Components/CodeViewer')
 var AuthStore = require('../Stores/AuthStore')
 var PlanetStore = require('../Stores/PlanetStore')
 
-var fetchPlanet = require('../Actions/fetchPlanet')
+var PlanetActions = require('../Actions/PlanetActions')
 
 var PlanetHeader = React.createClass({
   propTypes: {
@@ -204,7 +203,7 @@ module.exports = React.createClass({
   componentDidMount: function () {
     this.unsubscribe = PlanetStore.listen(this.onFetched)
 
-    fetchPlanet(this.props.params.userName + '/' + this.props.params.planetName)
+    PlanetActions.fetchPlanet(this.props.params.userName + '/' + this.props.params.planetName)
   },
   componentWillUnmount: function () {
     this.unsubscribe()

browser/main/Containers/RegisterContainer.jsx

@@ -3,7 +3,7 @@ var ReactRouter = require('react-router')
 var Link = ReactRouter.Link
 
 var AuthStore = require('../Stores/AuthStore')
-var register = require('../Actions/register')
+var AuthActions = require('../Actions/AuthActions')
 
 var OnlyGuest = require('../Mixins/OnlyGuest')
 
@@ -24,7 +24,7 @@ module.exports = React.createClass({
     this.unsubscribe()
   },
   handleSubmit: function (e) {
-    register({
+    AuthActions.register({
       email: this.state.email,
       password: this.state.password,
       name: this.state.name,

browser/main/Containers/UserContainer.jsx

@@ -6,10 +6,20 @@ var RouteHandler = ReactRouter.RouteHandler
 var AuthStore = require('../Stores/AuthStore')
 
 var UserNavigator = React.createClass({
+  mixins: [ReactRouter.Navigation],
   propTypes: {
     currentPlanet: React.PropTypes.object,
     currentUser: React.PropTypes.object
   },
+  componentDidMount: function () {
+    this.unsubscribe = AuthStore.listen(this.onLogout)
+  },
+  componentWillUnmount: function () {
+    this.unsubscribe()
+  },
+  onLogout: function () {
+    this.transitionTo('login')
+  },
   render: function () {
     var planets = this.props.currentUser.Planets.map(function (planet, index) {
       return (
@@ -50,6 +60,10 @@ module.exports = React.createClass({
   render: function () {
     var currentPlanetName = this.props.params.planetName
     var currentUser = AuthStore.getUser()
+
+    // user must be logged in
+    if (currentUser == null) return (<div></div>)
+
     var currentPlanet = null
     currentUser.Planets.some(function (planet) {
       if (planet.name === currentPlanetName) {
@@ -58,6 +72,7 @@ module.exports = React.createClass({
       }
       return false
     })
+
     return (
       <div className='UserContainer'>
         <UserNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>

browser/main/Containers/UserSettingContainer.jsx

@@ -2,6 +2,8 @@ var React = require('react/addons')
 var ReactRouter = require('react-router')
 var Link = ReactRouter.Link
 
+var AuthActions = require('../Actions/AuthActions')
+
 var currentUser = {
   name: 'testcat',
   email: 'testcat@example.com',
@@ -12,13 +14,18 @@ var UserSettingNavigation = React.createClass({
   propTypes: {
     currentUser: React.PropTypes.shape({
       name: React.PropTypes.string
-    })
+    }),
+    current: React.PropTypes.string,
+    changeCurrent: React.PropTypes.func
   },
   changeFactory: function (current) {
     return function () {
       this.props.changeCurrent(current)
     }.bind(this)
   },
+  logOut: function () {
+    AuthActions.logout()
+  },
   render: function () {
     return (
       <div className='UserSettingNavigation'>
@@ -39,7 +46,8 @@ var UserSettingMain = React.createClass({
   propTypes: {
     currentUser: React.PropTypes.shape({
       name: React.PropTypes.string
-    })
+    }),
+    current: React.PropTypes.string
   },
   render: function () {
     var view

browser/main/Services/Snippet.js

@@ -1,38 +0,0 @@
-var Snippet = {}
-
-var snippets = {
-  myplanet: [
-    {
-      id: 1,
-      callSign: 'alert',
-      description: 'yolo',
-      content: '<div></div>',
-      mode: 'html',
-      createdAt: '2015-06-26T15:10:59.000Z',
-      updatedAt: '2015-06-26T15:10:59.000Z',
-      UserId: 1,
-      Tags: [{'id': 18, 'name': 'bootstrap', 'color': null}, {'id': 19, 'name': 'alert', 'color': null}]
-    },
-    {
-      id: 2,
-      callSign: 'log',
-      description: 'javascript log',
-      content: 'console.log(\'yolo\')',
-      mode: 'javascript',
-      createdAt: '2015-06-26T15:10:59.000Z',
-      updatedAt: '2015-06-26T15:10:59.000Z',
-      UserId: 1,
-      Tags: [{'id': 20, 'name': 'log', 'color': null}, {'id': 1, 'name': 'js', 'color': null}]
-    }
-  ],
-  group1: [],
-  group2: []
-}
-
-Snippet.getByPlanet = function (planetName) {
-  return new Promise(function (resolve, reject) {
-    resolve(snippets[planetName])
-  })
-}
-
-module.exports = Snippet

browser/main/Stores/AuthStore.js

@@ -2,13 +2,13 @@
 var Reflux = require('reflux')
 var request = require('superagent')
 
-var login = require('../Actions/login')
-var register = require('../Actions/register')
+var AuthActions = require('../Actions/AuthActions')
 
 var AuthStore = Reflux.createStore({
     init: function () {
-      this.listenTo(login, this.login)
-      this.listenTo(register, this.register)
+      this.listenTo(AuthActions.login, this.login)
+      this.listenTo(AuthActions.register, this.register)
+      this.listenTo(AuthActions.logout, this.logout)
     },
     // Reflux Store
     login: function (input) {
@@ -49,6 +49,12 @@ var AuthStore = Reflux.createStore({
           this.trigger(user)
         }.bind(this))
     },
+    logout: function () {
+      localStorage.removeItem('token')
+      localStorage.removeItem('user')
+
+      this.trigger()
+    },
     // Methods
     check: function () {
       if (localStorage.getItem('token')) return true

browser/main/Stores/PlanetStore.js

@@ -1,18 +1,12 @@
 var Reflux = require('reflux')
 var request = require('superagent')
 
-var fetchPlanet = require('../Actions/fetchPlanet')
-
-var updateSnippet = require('../Actions/updateSnippet')
-var fetchSnippets = require('../Actions/fetchSnippets')
+var PlanetActions = require('../Actions/PlanetActions')
 
 var PlanetStore = Reflux.createStore({
   init: function () {
-    // this.listenTo(updateSnippet, this.updateSnippet)
-    // this.listenTo(fetchSnippets, this.fetchSnippets)
-    this.listenTo(fetchPlanet, this.fetchPlanet)
+    this.listenTo(PlanetActions.fetchPlanet, this.fetchPlanet)
   },
-  // planetName = user.name/planet.name
   fetchPlanet: function (planetName) {
     request
       .get('http://localhost:8000/' + planetName)

browser/styles/shared/modal.styl

@@ -29,15 +29,17 @@
       .btn-primary, .btn-default
         margin 0
         border-radius 0
+        border-width 1px
         &:nth-child(1)
           border-top-left-radius 10px
           border-bottom-left-radius 10px
+          border-right solid 1px borderColor
         &:nth-child(2)
-          border-left 0
+          border-left none
           border-top-right-radius 10px
           border-bottom-right-radius 10px
 
     .ace_editor
-      height 300px
-      border-radius 10px
+      height 250px
+      border-radius 5px
       border solid 1px borderColor