From 8b10eb130a672606ad2005ce44fa8217edc39f0e Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Tue, 14 Jul 2015 01:20:17 +0900 Subject: [PATCH] refactor Actions & add logout action --- browser/main/Actions/AuthActions.js | 7 ++++ browser/main/Actions/PlanetActions.js | 11 ++++++ browser/main/Actions/fetchPlanet.js | 5 --- browser/main/Actions/fetchSnippets.js | 0 browser/main/Actions/login.js | 5 --- browser/main/Actions/register.js | 5 --- browser/main/Actions/updateSnippet.js | 6 --- browser/main/Components/CodeEditor.jsx | 1 + browser/main/Components/CodeViewer.jsx | 2 + .../main/Containers/BlueprintContainer.jsx | 11 ------ browser/main/Containers/LoginContainer.jsx | 4 +- browser/main/Containers/PlanetContainer.jsx | 5 +-- browser/main/Containers/RegisterContainer.jsx | 4 +- browser/main/Containers/UserContainer.jsx | 15 ++++++++ .../main/Containers/UserSettingContainer.jsx | 12 +++++- browser/main/Services/Snippet.js | 38 ------------------- browser/main/Stores/AuthStore.js | 14 +++++-- browser/main/Stores/PlanetStore.js | 10 +---- browser/styles/shared/modal.styl | 8 ++-- 19 files changed, 69 insertions(+), 94 deletions(-) create mode 100644 browser/main/Actions/AuthActions.js create mode 100644 browser/main/Actions/PlanetActions.js delete mode 100644 browser/main/Actions/fetchPlanet.js delete mode 100644 browser/main/Actions/fetchSnippets.js delete mode 100644 browser/main/Actions/login.js delete mode 100644 browser/main/Actions/register.js delete mode 100644 browser/main/Actions/updateSnippet.js delete mode 100644 browser/main/Containers/BlueprintContainer.jsx delete mode 100644 browser/main/Services/Snippet.js diff --git a/browser/main/Actions/AuthActions.js b/browser/main/Actions/AuthActions.js new file mode 100644 index 00000000..f0b84f05 --- /dev/null +++ b/browser/main/Actions/AuthActions.js @@ -0,0 +1,7 @@ +var Reflux = require('reflux') + +module.exports = Reflux.createActions([ + 'login', + 'register', + 'logout' +]) diff --git a/browser/main/Actions/PlanetActions.js b/browser/main/Actions/PlanetActions.js new file mode 100644 index 00000000..b7b5d0fd --- /dev/null +++ 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' +]) diff --git a/browser/main/Actions/fetchPlanet.js b/browser/main/Actions/fetchPlanet.js deleted file mode 100644 index 19a28ab3..00000000 --- a/browser/main/Actions/fetchPlanet.js +++ /dev/null @@ -1,5 +0,0 @@ -var Reflux = require('reflux') - -var fetchPlanet = Reflux.createAction() - -module.exports = fetchPlanet diff --git a/browser/main/Actions/fetchSnippets.js b/browser/main/Actions/fetchSnippets.js deleted file mode 100644 index e69de29b..00000000 diff --git a/browser/main/Actions/login.js b/browser/main/Actions/login.js deleted file mode 100644 index da9c4b1a..00000000 --- a/browser/main/Actions/login.js +++ /dev/null @@ -1,5 +0,0 @@ -var Reflux = require('reflux') - -var login = Reflux.createAction() - -module.exports = login diff --git a/browser/main/Actions/register.js b/browser/main/Actions/register.js deleted file mode 100644 index aa7b08a1..00000000 --- a/browser/main/Actions/register.js +++ /dev/null @@ -1,5 +0,0 @@ -var Reflux = require('reflux') - -var register = Reflux.createAction() - -module.exports = register diff --git a/browser/main/Actions/updateSnippet.js b/browser/main/Actions/updateSnippet.js deleted file mode 100644 index e3589a4e..00000000 --- a/browser/main/Actions/updateSnippet.js +++ /dev/null @@ -1,6 +0,0 @@ -var Reflux = require('reflux') - -// Creating an Action -var updateSnippet = Reflux.createAction() - -module.exports = updateSnippet diff --git a/browser/main/Components/CodeEditor.jsx b/browser/main/Components/CodeEditor.jsx index ef054e98..ee222fbd 100644 --- 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) { diff --git a/browser/main/Components/CodeViewer.jsx b/browser/main/Components/CodeViewer.jsx index 35864cb9..7f3319bc 100644 --- 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}) }, diff --git a/browser/main/Containers/BlueprintContainer.jsx b/browser/main/Containers/BlueprintContainer.jsx deleted file mode 100644 index bf2c36d2..00000000 --- a/browser/main/Containers/BlueprintContainer.jsx +++ /dev/null @@ -1,11 +0,0 @@ -var React = require('react/addons') - -module.exports = React.createClass({ - render: function () { - return ( -
- Blueprint Container -
- ) - } -}) diff --git a/browser/main/Containers/LoginContainer.jsx b/browser/main/Containers/LoginContainer.jsx index 17341786..9b169650 100644 --- 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 }) diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx index b428ba33..cc141cf0 100644 --- 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() diff --git a/browser/main/Containers/RegisterContainer.jsx b/browser/main/Containers/RegisterContainer.jsx index 17db70f5..298d4caf 100644 --- 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, diff --git a/browser/main/Containers/UserContainer.jsx b/browser/main/Containers/UserContainer.jsx index dfa75d88..731dc1fe 100644 --- 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 (
) + var currentPlanet = null currentUser.Planets.some(function (planet) { if (planet.name === currentPlanetName) { @@ -58,6 +72,7 @@ module.exports = React.createClass({ } return false }) + return (
diff --git a/browser/main/Containers/UserSettingContainer.jsx b/browser/main/Containers/UserSettingContainer.jsx index 9fd08459..5555bad5 100644 --- 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 (
@@ -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 diff --git a/browser/main/Services/Snippet.js b/browser/main/Services/Snippet.js deleted file mode 100644 index 4435d332..00000000 --- a/browser/main/Services/Snippet.js +++ /dev/null @@ -1,38 +0,0 @@ -var Snippet = {} - -var snippets = { - myplanet: [ - { - id: 1, - callSign: 'alert', - description: 'yolo', - content: '
', - 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 diff --git a/browser/main/Stores/AuthStore.js b/browser/main/Stores/AuthStore.js index 6cc12d0c..3c240ad8 100644 --- 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 diff --git a/browser/main/Stores/PlanetStore.js b/browser/main/Stores/PlanetStore.js index d75c85e6..3aab2281 100644 --- 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) diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl index de957c47..7a6004b0 100644 --- 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