diff --git a/src/actions/friends-actions.js b/src/actions/friends-actions.js index fad0a8f..6bd1789 100644 --- a/src/actions/friends-actions.js +++ b/src/actions/friends-actions.js @@ -22,6 +22,13 @@ var FriendsActions = { type: Constants.FriendsActions.BLOCK, friend: friend }); + }, + + add: function(id) { + Dispatcher.dispatch({ + type: Constants.FriendsActions.ADD, + id: id + }); } }; diff --git a/src/actions/ui-actions.js b/src/actions/ui-actions.js index a184150..8d23bd8 100644 --- a/src/actions/ui-actions.js +++ b/src/actions/ui-actions.js @@ -15,6 +15,18 @@ var UIActions = { }); }, + addFriendOpenDialog: function() { + Dispatcher.dispatch({ + type: Constants.UIActions.ADD_FRIEND_OPEN_DIALOG + }); + }, + + addFriendCloseDialog: function() { + Dispatcher.dispatch({ + type: Constants.UIActions.ADD_FRIEND_CLOSE_DIALOG + }); + }, + logout: function() { Dispatcher.dispatch({ type: Constants.UIActions.LOGOUT diff --git a/src/components/dialogs/add-friend.jsx b/src/components/dialogs/add-friend.jsx new file mode 100644 index 0000000..94bb991 --- /dev/null +++ b/src/components/dialogs/add-friend.jsx @@ -0,0 +1,81 @@ +var React = require('react'); + +var UIActions = require('../../actions/ui-actions.js'); +var FriendsActions = require('../../actions/friends-actions.js'); +var UIStore = require('../../stores/ui-store.js'); + +var AddFriendDialog = React.createClass({ + _onChange: function() { + var newState = this.state; + newState.uiState = UIStore.get(); + + this.setState(newState); + }, + + _onFriendIdChange: function(event) { + var newState = this.state; + newState.friendId = event.target.value; + + this.setState(newState); + }, + + _onCancel: function() { + UIActions.addFriendCloseDialog(); + }, + + _onSave: function() { + var id = this.state.friendId.trim(); + + if(id !== '') { + FriendsActions.add(id); + UIActions.addFriendCloseDialog(); + } + }, + + getInitialState: function() { + return { + uiState: UIStore.get(), + friendId: '' + }; + }, + + componentDidMount: function() { + UIStore.addChangeListener(this._onChange); + }, + + componentWillUnmount: function() { + UIStore.removeChangeListener(this._onChange); + }, + + render: function() { + if(!this.state.uiState.isAddFriendDialogOpen) { + return
; + } + + return ( + +
+

Add friend

+
+ +
+ +
+ +
+
+ + +
+
+
+ ); + } +}); + +module.exports = AddFriendDialog; diff --git a/src/components/main.jsx b/src/components/main.jsx index 176a329..950a494 100644 --- a/src/components/main.jsx +++ b/src/components/main.jsx @@ -3,13 +3,16 @@ var React = require('react'); var FriendsList = require('./friendslist.js'); var Chat = require('./chat.js'); var Toolbar = require('./toolbar.js'); + var ChangeNameDialog = require('./dialogs/change-name.js'); +var AddFriendDialog = require('./dialogs/add-friend.js'); var Main = React.createClass({ render: function() { return (
+

Punk

diff --git a/src/components/toolbar.jsx b/src/components/toolbar.jsx index 7e425fb..575ced5 100644 --- a/src/components/toolbar.jsx +++ b/src/components/toolbar.jsx @@ -51,6 +51,10 @@ var Toolbar = React.createClass({ UIActions.logout(); }, + _onAddFriend: function() { + UIActions.addFriendOpenDialog(); + }, + getInitialState: function() { return { user: UserStore.get() @@ -71,7 +75,7 @@ var Toolbar = React.createClass({
-