Make api request on filter change

This fixes #1546 by using an updated api endpoint that accepts filter arguments.

src/redux/messages.js

@@ -1,3 +1,4 @@
+var defaults = require('lodash.defaults');
 var defaultsDeep = require('lodash.defaultsdeep');
 var keyMirror = require('keymirror');
 
@@ -39,13 +40,11 @@ module.exports.messagesReducer = function (state, action) {
 
     switch (action.type) {
     case 'SET_MESSAGES':
-        return defaultsDeep({
-            messages: {social: action.messages}
-        }, state);
+        state.messages.social = action.messages;
+        return state;
     case 'SET_ADMIN_MESSAGES':
-        return defaultsDeep({
-            messages: {admin: action.messages}
-        }, state);
+        state.messages.admin = action.messages;
+        return state;
     case 'SET_MESSAGES_OFFSET':
         return defaultsDeep({
             messages: {socialOffset: action.offset}
@@ -196,15 +195,29 @@ module.exports.clearAdminMessage = function (messageType, messageId, messageCoun
  * Gets a user's messages to be displayed on the /messages page
  * @param  {string}   username           username of the user for whom the messages should be gotten
  * @param  {string}   token              the user's unique token for auth
- * @param  {object[]} messages an array of existing messages on the page, if there are any
- * @param  {number}   offset   offset of messages to get, based on the number retrieved already
+ * @param  {object}   opts               optional args for the method
+ * @param  {object[]} [opts.messages]    an array of existing messages on the page, if there are any
+ * @param  {number}   [opts.offset]      offset of messages to get, based on the number retrieved already
+ * @param  {string}   [opts.filter]      type of messages to return
  * @return {null}                     returns nothing
  */
-module.exports.getMessages = function (username, token, messages, offset) {
+module.exports.getMessages = function (username, token, opts) {
+    opts = defaults(opts, {
+        messages: [],
+        offset: 0,
+        filter: '',
+        clearCount: true
+    });
+
+    var filterArg = '';
+    if (opts.filter.length > 0) {
+        filterArg = '&filter=' + opts.filter;
+    }
+
     return function (dispatch) {
         dispatch(module.exports.setStatus('MESSAGE_STATUS', module.exports.Status.FETCHING));
         api({
-            uri: '/users/' + username + '/messages?limit=40&offset=' + offset,
+            uri: '/users/' + username + '/messages?limit=40&offset=' + opts.offset + filterArg,
             authentication: token
         }, function (err, body) {
             if (err) {
@@ -218,9 +231,11 @@ module.exports.getMessages = function (username, token, messages, offset) {
                 return;
             }
             dispatch(module.exports.setStatus('MESSAGE_STATUS', module.exports.Status.FETCHED));
-            dispatch(module.exports.setMessages(messages.concat(body)));
-            dispatch(module.exports.setMessagesOffset(offset + 40));
+            dispatch(module.exports.setMessages(opts.messages.concat(body)));
+            dispatch(module.exports.setMessagesOffset(opts.offset + 40));
+            if (opts.clearCount) {
                 dispatch(module.exports.clearMessageCount(token)); // clear count once messages loaded
+            }
         });
     };
 };

src/views/messages/container.jsx

@@ -12,8 +12,7 @@ var Messages = React.createClass({
     type: 'ConnectedMessages',
     getInitialState: function () {
         return {
-            filterValues: [],
-            displayedMessages: []
+            filter: ''
         };
     },
     getDefaultProps: function () {
@@ -26,14 +25,17 @@ var Messages = React.createClass({
         };
     },
     componentDidUpdate: function (prevProps) {
-        if (this.props.user != prevProps.user) {
+        if (this.props.user.username !== prevProps.user.username) {
             if (this.props.user.token) {
                 this.props.dispatch(
                     messageActions.getMessages(
                         this.props.user.username,
                         this.props.user.token,
-                        this.props.messages,
-                        this.props.messageOffset
+                        {
+                            messages: this.props.messages,
+                            offset: this.props.messageOffset,
+                            filter: this.state.filter
+                        }
                     )
                 );
                 this.props.dispatch(
@@ -59,8 +61,11 @@ var Messages = React.createClass({
                 messageActions.getMessages(
                     this.props.user.username,
                     this.props.user.token,
-                    this.props.messages,
-                    this.props.messageOffset
+                    {
+                        messages: this.props.messages,
+                        offset: this.props.messageOffset,
+                        filter: this.state.filter
+                    }
                 )
             );
             this.props.dispatch(
@@ -74,26 +79,19 @@ var Messages = React.createClass({
         }
     },
     handleFilterClick: function (field, choice) {
-        switch (choice) {
-        case 'comments':
-            return this.setState({filterValues: ['addcomment']});
-        case 'projects':
-            return this.setState({filterValues: [
-                'loveproject',
-                'favoriteproject',
-                'remixproject'
-            ]});
-        case 'studios':
-            return this.setState({filterValues: [
-                'curatorinvite',
-                'studioactivity',
-                'becomeownerstudio'
-            ]});
-        case 'forums':
-            return this.setState({filterValues: ['forumpost']});
-        default:
-            return this.setState({filterValues: []});
+        if (this.props.user.token) {
+            this.props.dispatch(
+                messageActions.getMessages(
+                    this.props.user.username,
+                    this.props.user.token,
+                    {
+                        filter: choice,
+                        clearCount: false
                     }
+                )
+            );
+        }
+        this.setState({filter: choice});
     },
     handleMessageDismiss: function (messageType, messageId) {
         var adminMessages = null;
@@ -111,36 +109,26 @@ var Messages = React.createClass({
             messageActions.getMessages(
                 this.props.user.username,
                 this.props.user.token,
-                this.props.messages,
-                this.props.messageOffset
+                {
+                    messages: this.props.messages,
+                    offset: this.props.messageOffset,
+                    filter: this.state.filter,
+                    clearCount: false
+                }
             )
         );
     },
-    filterMessages: function (messages, typesAllowed) {
-        var filteredMessages = [];
-        for (var i in messages) {
-            if (typesAllowed.indexOf(messages[i].type) > -1) {
-                filteredMessages.push(messages[i]);
-            }
-        }
-        return filteredMessages;
-    },
     render: function () {
         var loadMore = true;
         if (this.props.messageOffset > this.props.messages.length && this.props.messageOffset > 0) {
             loadMore = false;
         }
 
-        var messages = this.props.messages;
-        if (this.state.filterValues.length > 0) {
-            messages = this.filterMessages(messages, this.state.filterValues);
-        }
-
         return(
             <MessagesPresentation
                 sessionStatus={this.props.sessionStatus}
                 user={this.props.user}
-                messages={messages}
+                messages={this.props.messages}
                 adminMessages={this.props.adminMessages}
                 scratcherInvite={this.props.invite}
                 numNewMessages={this.props.numNewMessages}
@@ -149,6 +137,7 @@ var Messages = React.createClass({
                 loadMore={loadMore}
                 loadMoreMethod={this.handleLoadMoreMessages}
                 requestStatus={this.props.requestStatus}
+                filter={this.props.filter}
             />
         );
     }

src/views/messages/presentation.jsx

@@ -217,12 +217,14 @@ var MessagesPresentation = injectIntl(React.createClass({
         handleAdminDismiss: React.PropTypes.func.isRequired,
         loadMore: React.PropTypes.bool.isRequired,
         loadMoreMethod: React.PropTypes.func,
-        requestStatus: React.PropTypes.object.isRequired
+        requestStatus: React.PropTypes.object.isRequired,
+        filter: React.PropTypes.string
     },
     getDefaultProps: function () {
         return {
             numNewMessages: 0,
-            filterOpen: false
+            filterOpen: false,
+            filter: ''
         };
     },
     render: function () {
@@ -270,6 +272,7 @@ var MessagesPresentation = injectIntl(React.createClass({
                                             value: 'forums'
                                         }
                                     ]}
+                                    value={this.props.filter}
                                 />
                             </Form>
                         </div>