add ability to add people to friends list by their SteamID64

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
+    });
   }
 
 };

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

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 <div/>;
+    }
+
+    return (
+      <dialog open>
+        <header className="toolbar toolbar-header">
+            <h1 className="title">Add friend</h1>
+        </header>
+
+        <div className="content">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="SteamID64"
+              value={this.state.friendId}
+              onChange={this._onFriendIdChange} />
+        </div>
+
+        <footer className="toolbar toolbar-footer">
+            <div className="toolbar-actions">
+                <button className="btn btn-default" onClick={this._onCancel}>Cancel</button>
+                <button className="btn btn-primary pull-right" onClick={this._onSave}>Save</button>
+            </div>
+        </footer>
+      </dialog>
+    );
+  }
+});
+
+module.exports = AddFriendDialog;

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 (
       <div className="window">
         <ChangeNameDialog />
+        <AddFriendDialog />
 
         <header className="toolbar toolbar-header">
           <h1 className="title">Punk</h1>

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({
         <CurrentUser user={this.state.user}/>
 
         <div className="btn-group">
-          <button className="btn btn-default">
+          <button className="btn btn-default" onClick={this._onAddFriend}>
             <i className="fa fa-user-plus"></i>
           </button>
           <button className="btn btn-default">

src/constants/index.js

@@ -2,7 +2,8 @@ module.exports = {
   FriendsActions: {
     FRIENDS_INSERT_OR_UPDATE: 'FRIENDS_INSERT_OR_UPDATE',
     REMOVE: 'REMOVE',
-    BLOCK: 'BLOCK'
+    BLOCK: 'BLOCK',
+    ADD: 'ADD'
   },
 
   ChatActions: {
@@ -23,7 +24,9 @@ module.exports = {
   UIActions: {
     LOGOUT: 'LOGOUT',
     CHANGE_NAME_OPEN_DIALOG: 'CHANGE_NAME_OPEN_DIALOG',
-    CHANGE_NAME_CLOSE_DIALOG: 'CHANGE_NAME_CLOSE_DIALOG'
+    CHANGE_NAME_CLOSE_DIALOG: 'CHANGE_NAME_CLOSE_DIALOG',
+    ADD_FRIEND_OPEN_DIALOG: 'ADD_FRIEND_OPEN_DIALOG',
+    ADD_FRIEND_CLOSE_DIALOG: 'ADD_FRIEND_CLOSE_DIALOG'
   },
 
   MessageTypes: {

src/plugins/friends/index.js

@@ -10,6 +10,11 @@ exports.plugin = function(API) {
 
   var token = Dispatcher.register(function(action) {
     switch(action.type) {
+      case Constants.FriendsActions.ADD:
+        steamFriends.addFriend(action.id);
+        log.info('User %s has been sent a friend request.', action.id);
+        break;
+
       case Constants.FriendsActions.REMOVE:
         steamFriends.removeFriend(action.friend.id);
         log.info('User %s has been removed from friends.', action.friend.id);

src/stores/chat-store.js

@@ -113,6 +113,10 @@ function newOutgoingMessage(message) {
 }
 
 function remove(id) {
+  if(!_chats[id]) {
+    return;
+  }
+
   if(_chats[id].visible) {
     _chats[id].visible = false;
 

src/stores/ui-store.js

@@ -6,7 +6,8 @@ var assign = require('object-assign');
 var CHANGE_EVENT = 'change';
 
 var _state = {
-  isChangeNameDialogOpen: false
+  isChangeNameDialogOpen: false,
+  isAddFriendDialogOpen: false
 };
 
 function set(key, value) {
@@ -45,6 +46,16 @@ UIStore.dispatchToken = Dispatcher.register(function(action) {
       UIStore.emitChange();
       break;
 
+    case Constants.UIActions.ADD_FRIEND_OPEN_DIALOG:
+      set('isAddFriendDialogOpen', true);
+      UIStore.emitChange();
+      break;
+
+    case Constants.UIActions.ADD_FRIEND_CLOSE_DIALOG:
+      set('isAddFriendDialogOpen', false);
+      UIStore.emitChange();
+      break;
+
     default:
       // ignore
   }