From 2f754bbb87ce3fe0bc6f9e1047ca350f99a42c12 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Thu, 23 Jul 2015 07:55:56 +0900 Subject: [PATCH] add name change for planet & fix minor bugs --- browser/main/Actions/PlanetActions.js | 1 + .../main/Components/BlueprintDeleteModal.jsx | 16 +----- .../main/Components/BlueprintEditModal.jsx | 15 +----- browser/main/Components/LaunchModal.jsx | 14 ----- .../main/Components/PlanetSettingModal.jsx | 9 +++- .../main/Components/SnippetDeleteModal.jsx | 16 +----- browser/main/Components/SnippetEditModal.jsx | 14 ----- browser/main/Components/UserNavigator.jsx | 2 +- browser/main/Containers/PlanetContainer.jsx | 51 ++++++++++++++----- browser/main/Containers/UserContainer.jsx | 6 +++ browser/main/Stores/PlanetStore.js | 33 ++++++++++++ 11 files changed, 91 insertions(+), 86 deletions(-) diff --git a/browser/main/Actions/PlanetActions.js b/browser/main/Actions/PlanetActions.js index dfa96df7..1b7d1c7e 100644 --- a/browser/main/Actions/PlanetActions.js +++ b/browser/main/Actions/PlanetActions.js @@ -4,6 +4,7 @@ module.exports = Reflux.createActions([ 'createPlanet', 'fetchPlanet', + 'changeName', 'addUser', 'createSnippet', diff --git a/browser/main/Components/BlueprintDeleteModal.jsx b/browser/main/Components/BlueprintDeleteModal.jsx index 5c4509f8..1b524d7b 100644 --- a/browser/main/Components/BlueprintDeleteModal.jsx +++ b/browser/main/Components/BlueprintDeleteModal.jsx @@ -1,5 +1,5 @@ var React = require('react') -var PlanetStore = require('../Stores/PlanetStore') + var PlanetActions = require('../Actions/PlanetActions') var BlueprintDeleteModal = React.createClass({ @@ -7,20 +7,6 @@ var BlueprintDeleteModal = React.createClass({ close: React.PropTypes.func, blueprint: React.PropTypes.object }, - componentDidMount: function () { - this.unsubscribe = PlanetStore.listen(this.onListen) - React.findDOMNode(this.refs.submit).focus() - }, - componentWillUnmount: function () { - this.unsubscribe() - }, - onListen: function (res) { - switch (res.status) { - case 'articleDeleted': - this.props.close() - break - } - }, stopPropagation: function (e) { e.stopPropagation() }, diff --git a/browser/main/Components/BlueprintEditModal.jsx b/browser/main/Components/BlueprintEditModal.jsx index f528c6a7..f8aee2b6 100644 --- a/browser/main/Components/BlueprintEditModal.jsx +++ b/browser/main/Components/BlueprintEditModal.jsx @@ -1,25 +1,12 @@ var React = require('react') + var BlueprintForm = require('./BlueprintForm') -var PlanetStore = require('../Stores/PlanetStore') var BlueprintEditModal = React.createClass({ propTypes: { close: React.PropTypes.func, blueprint: React.PropTypes.object }, - componentDidMount: function () { - this.unsubscribe = PlanetStore.listen(this.onListen) - }, - componentWillUnmount: function () { - this.unsubscribe() - }, - onListen: function (res) { - switch (res.status) { - case 'articleUpdated': - this.props.close() - break - } - }, stopPropagation: function (e) { e.stopPropagation() }, diff --git a/browser/main/Components/LaunchModal.jsx b/browser/main/Components/LaunchModal.jsx index 7d7ff9d4..e69ef2f4 100644 --- a/browser/main/Components/LaunchModal.jsx +++ b/browser/main/Components/LaunchModal.jsx @@ -1,7 +1,6 @@ var React = require('react/addons') var ReactRouter = require('react-router') var Catalyst = require('../Mixins/Catalyst') -var PlanetStore = require('../Stores/PlanetStore') var SnippetForm = require('./SnippetForm') var BlueprintForm = require('./BlueprintForm') @@ -16,19 +15,6 @@ var LaunchModal = React.createClass({ currentTab: 'snippet' } }, - componentDidMount: function () { - this.unsubscribe = PlanetStore.listen(this.onListen) - }, - componentWillUnmount: function () { - this.unsubscribe() - }, - onListen: function (res) { - switch (res.status) { - case 'articleCreated': - this.props.close() - break - } - }, stopPropagation: function (e) { e.stopPropagation() }, diff --git a/browser/main/Components/PlanetSettingModal.jsx b/browser/main/Components/PlanetSettingModal.jsx index 20e77b26..40d7d2a0 100644 --- a/browser/main/Components/PlanetSettingModal.jsx +++ b/browser/main/Components/PlanetSettingModal.jsx @@ -1,7 +1,10 @@ var React = require('react/addons') var Select = require('react-select') + var Catalyst = require('../Mixins/Catalyst') +var PlanetActions = require('../Actions/PlanetActions') + module.exports = React.createClass({ mixins: [Catalyst.LinkedStateMixin], propTypes: { @@ -22,6 +25,10 @@ module.exports = React.createClass({ activeManageMember: function () { this.setState({currentTab: 'manageMember'}) }, + saveProfile: function () { + var currentPlanet = this.props.currentPlanet + PlanetActions.changeName(currentPlanet.userName, currentPlanet.name, this.state.planetName) + }, doubleCheckDeletePlanet: function () { if (this.state.isDeletePlanetChecked) { console.log('delete it') @@ -44,7 +51,7 @@ module.exports = React.createClass({
- +
diff --git a/browser/main/Components/SnippetDeleteModal.jsx b/browser/main/Components/SnippetDeleteModal.jsx index 46573945..041b75c6 100644 --- a/browser/main/Components/SnippetDeleteModal.jsx +++ b/browser/main/Components/SnippetDeleteModal.jsx @@ -1,5 +1,5 @@ var React = require('react') -var PlanetStore = require('../Stores/PlanetStore') + var PlanetActions = require('../Actions/PlanetActions') var SnippetDeleteModal = React.createClass({ @@ -7,20 +7,6 @@ var SnippetDeleteModal = React.createClass({ close: React.PropTypes.func, snippet: React.PropTypes.object }, - componentDidMount: function () { - this.unsubscribe = PlanetStore.listen(this.onListen) - React.findDOMNode(this.refs.submit).focus() - }, - componentWillUnmount: function () { - this.unsubscribe() - }, - onListen: function (res) { - switch (res.status) { - case 'articleDeleted': - this.props.close() - break - } - }, stopPropagation: function (e) { e.stopPropagation() }, diff --git a/browser/main/Components/SnippetEditModal.jsx b/browser/main/Components/SnippetEditModal.jsx index 55f5edf0..0e497e52 100644 --- a/browser/main/Components/SnippetEditModal.jsx +++ b/browser/main/Components/SnippetEditModal.jsx @@ -1,25 +1,11 @@ var React = require('react') var SnippetForm = require('./SnippetForm') -var PlanetStore = require('../Stores/PlanetStore') var SnippetEditModal = React.createClass({ propTypes: { close: React.PropTypes.func, snippet: React.PropTypes.object }, - componentDidMount: function () { - this.unsubscribe = PlanetStore.listen(this.onListen) - }, - componentWillUnmount: function () { - this.unsubscribe() - }, - onListen: function (res) { - switch (res.status) { - case 'articleUpdated': - this.props.close() - break - } - }, stopPropagation: function (e) { e.stopPropagation() }, diff --git a/browser/main/Components/UserNavigator.jsx b/browser/main/Components/UserNavigator.jsx index 3af04f8c..c3c715a2 100644 --- a/browser/main/Components/UserNavigator.jsx +++ b/browser/main/Components/UserNavigator.jsx @@ -37,7 +37,7 @@ module.exports = React.createClass({ var planets = this.props.currentUser.Planets.map(function (planet, index) { return (
  • - {planet.name[0]} + {planet.name[0]}
    ⌘{index + 1}
    • ) diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx index 0f8f87d7..5b1f647a 100644 --- a/browser/main/Containers/PlanetContainer.jsx +++ b/browser/main/Containers/PlanetContainer.jsx @@ -70,7 +70,7 @@ module.exports = React.createClass({ this.unsubscribe() }, componentDidUpdate: function () { - if (this.state.currentPlanet.name !== this.props.params.planetName || this.state.currentPlanet.userName !== this.props.params.userName) { + if (this.state.currentPlanet == null || this.state.currentPlanet.name !== this.props.params.planetName || this.state.currentPlanet.userName !== this.props.params.userName) { PlanetActions.fetchPlanet(this.props.params.userName, this.props.params.planetName) this.focus() } @@ -162,6 +162,10 @@ module.exports = React.createClass({ } }, onFetched: function (res) { + if (res == null) { + return + } + var articles = this.state.currentPlanet == null ? null : this.state.currentPlanet.Articles if (res.status === 'planetFetched') { @@ -195,8 +199,16 @@ module.exports = React.createClass({ } this.state.currentPlanet.Users.push(user) this.setState({currentPlanet: this.state.currentPlanet}, function () { - this.closeAddUserModal() + if (this.state.isAddUserModalOpen) {this.closeAddUserModal()} }) + return + } + + if (res.status === 'nameChanged') { + var params = Object.assign({}, this.props.params) + params.planetName = res.data.name + this.transitionTo('planet', params) + return } var article = res.data @@ -209,6 +221,7 @@ module.exports = React.createClass({ articles.unshift(article) this.setState({planet: this.state.currentPlanet, search: ''}, function () { + this.closeLaunchModal() this.selectArticleByIndex(0) }) break @@ -216,7 +229,9 @@ module.exports = React.createClass({ articles.splice(index, 1) articles.unshift(article) - this.setState({planet: this.state.currentPlanet}) + this.setState({planet: this.state.currentPlanet}, function () { + this.closeEditModal() + }) break case 'articleDeleted': articles.splice(index, 1) @@ -241,20 +256,26 @@ module.exports = React.createClass({ this.setState({isLaunchModalOpen: true}) }, closeLaunchModal: function () { - this.setState({isLaunchModalOpen: false}) + this.setState({isLaunchModalOpen: false}, function () { + this.focus() + }) }, openAddUserModal: function () { this.setState({isAddUserModalOpen: true}) }, closeAddUserModal: function () { - this.setState({isAddUserModalOpen: false}) + this.setState({isAddUserModalOpen: false}, function () { + this.focus() + }) }, openEditModal: function () { if (this.refs.detail.props.article == null) {return} this.setState({isEditModalOpen: true}) }, closeEditModal: function () { - this.setState({isEditModalOpen: false}) + this.setState({isEditModalOpen: false}, function () { + this.focus() + }) }, submitEditModal: function () { this.setState({isEditModalOpen: false}) @@ -264,7 +285,9 @@ module.exports = React.createClass({ this.setState({isDeleteModalOpen: true}) }, closeDeleteModal: function () { - this.setState({isDeleteModalOpen: false}) + this.setState({isDeleteModalOpen: false}, function () { + this.focus() + }) }, submitDeleteModal: function () { this.setState({isDeleteModalOpen: false}) @@ -273,7 +296,9 @@ module.exports = React.createClass({ this.setState({isSettingModalOpen: true}) }, closeSettingModal: function () { - this.setState({isSettingModalOpen: false}) + this.setState({isSettingModalOpen: false}, function () { + this.focus() + }) }, focus: function () { React.findDOMNode(this).focus() @@ -283,28 +308,30 @@ module.exports = React.createClass({ if (this.state.isLaunchModalOpen) { if (e.keyCode === 27) { this.closeLaunchModal() - this.focus() } return } if (this.state.isEditModalOpen) { if (e.keyCode === 27) { this.closeEditModal() - this.focus() } return } if (this.state.isDeleteModalOpen) { if (e.keyCode === 27) { this.closeDeleteModal() - this.focus() } return } if (this.state.isAddUserModalOpen) { if (e.keyCode === 27) { this.closeAddUserModal() - this.focus() + } + return + } + if (this.state.isSettingModalOpen) { + if (e.keyCode === 27) { + this.closeSettingModal() } return } diff --git a/browser/main/Containers/UserContainer.jsx b/browser/main/Containers/UserContainer.jsx index c4a4c1c7..aac9a1c3 100644 --- a/browser/main/Containers/UserContainer.jsx +++ b/browser/main/Containers/UserContainer.jsx @@ -27,6 +27,8 @@ module.exports = React.createClass({ this.unsubscribe() }, onListen: function (res) { + if (res.status == null) return + if (res.status === 'planetCreated') { var currentUser = this.state.currentUser currentUser.Planets.push(res.data) @@ -34,6 +36,10 @@ module.exports = React.createClass({ localStorage.setItem('user', JSON.stringify(currentUser)) this.setState({currentUser: currentUser}) } + + if (res.status === 'nameChanged') { + this.setState({currentUser: AuthStore.getUser()}) + } }, render: function () { var currentPlanetName = this.props.params.planetName diff --git a/browser/main/Stores/PlanetStore.js b/browser/main/Stores/PlanetStore.js index 2649ccc6..df07cefa 100644 --- a/browser/main/Stores/PlanetStore.js +++ b/browser/main/Stores/PlanetStore.js @@ -10,6 +10,7 @@ var PlanetStore = Reflux.createStore({ init: function () { this.listenTo(PlanetActions.createPlanet, this.createPlanet) this.listenTo(PlanetActions.fetchPlanet, this.fetchPlanet) + this.listenTo(PlanetActions.changeName, this.changeName) this.listenTo(PlanetActions.addUser, this.addUser) this.listenTo(PlanetActions.createSnippet, this.createSnippet) this.listenTo(PlanetActions.updateSnippet, this.updateSnippet) @@ -79,6 +80,38 @@ var PlanetStore = Reflux.createStore({ }) }.bind(this)) }, + changeName: function (userName, planetName, name) { + request + .put(apiUrl + userName + '/' + planetName) + .set({ + Authorization: 'Bearer ' + localStorage.getItem('token') + }) + .send({name: name}) + .end(function (err, res) { + if (err) { + console.error(err) + this.trigger(null) + return + } + + var planet = res.body + + var user = JSON.parse(localStorage.getItem('user')) + user.Planets.some(function (_planet, index) { + if (planet.id === _planet.id) { + user.Planets[index].name = planet.name + return true + } + return false + }) + localStorage.setItem('user', JSON.stringify(user)) + + this.trigger({ + status: 'nameChanged', + data: planet + }) + }.bind(this)) + }, addUser: function (planetName, userName) { request .post(apiUrl + planetName + '/users')