refactor Actions & add logout action

2025-12-13 09:46:22 +00:00 · 2015-07-14 01:20:17 +09:00
parent b0d9895e5e
commit 8b10eb130a
19 changed files with 69 additions and 94 deletions
--- a/browser/main/Actions/AuthActions.js
+++ b/browser/main/Actions/AuthActions.js
@@ -0,0 +1,7 @@
+var Reflux = require('reflux')
+
+module.exports = Reflux.createActions([
+  'login',
+  'register',
+  'logout'
+])
--- a/browser/main/Actions/PlanetActions.js
+++ b/browser/main/Actions/PlanetActions.js
@@ -0,0 +1,11 @@
+var Reflux = require('reflux')
+
+module.exports = Reflux.createActions([
+  'fetchPlanet',
+  'createSnippet',
+  'createBlueprint',
+  'updateSnippet',
+  'updateBlueprint',
+  'destroySnippet',
+  'destroyBlueprint'
+])
--- a/browser/main/Actions/fetchPlanet.js
+++ b/browser/main/Actions/fetchPlanet.js
@@ -1,5 +0,0 @@
-var Reflux = require('reflux')
-
-var fetchPlanet = Reflux.createAction()
-
-module.exports = fetchPlanet
--- a/browser/main/Actions/fetchSnippets.js
+++ b/browser/main/Actions/fetchSnippets.js
--- a/browser/main/Actions/login.js
+++ b/browser/main/Actions/login.js
@@ -1,5 +0,0 @@
-var Reflux = require('reflux')
-
-var login = Reflux.createAction()
-
-module.exports = login
--- a/browser/main/Actions/register.js
+++ b/browser/main/Actions/register.js
@@ -1,5 +0,0 @@
-var Reflux = require('reflux')
-
-var register = Reflux.createAction()
-
-module.exports = register
--- a/browser/main/Actions/updateSnippet.js
+++ b/browser/main/Actions/updateSnippet.js
@@ -1,6 +0,0 @@
-var Reflux = require('reflux')
-
-// Creating an Action
-var updateSnippet = Reflux.createAction()
-
-module.exports = updateSnippet
--- a/browser/main/Components/CodeEditor.jsx
+++ b/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) {
--- a/browser/main/Components/CodeViewer.jsx
+++ b/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})
  },
--- a/browser/main/Containers/BlueprintContainer.jsx
+++ b/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>
-    )
-  }
-})
--- a/browser/main/Containers/LoginContainer.jsx
+++ b/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
    })
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/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()
--- a/browser/main/Containers/RegisterContainer.jsx
+++ b/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,
--- a/browser/main/Containers/UserContainer.jsx
+++ b/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}/>
--- a/browser/main/Containers/UserSettingContainer.jsx
+++ b/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
--- a/browser/main/Services/Snippet.js
+++ b/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
--- a/browser/main/Stores/AuthStore.js
+++ b/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
--- a/browser/main/Stores/PlanetStore.js
+++ b/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)
--- a/browser/styles/shared/modal.styl
+++ b/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