mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Make api request on filter change
This fixes #1546 by using an updated api endpoint that accepts filter arguments.
This commit is contained in:
Matthew Taylor
parent
9b3b1a2623
commit
361afaa937
3 changed files with 68 additions and 61 deletions
|
|
@ -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}
|
||||
|
|
@ -194,17 +193,31 @@ 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
|
||||
* @return {null} returns nothing
|
||||
* @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} 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.clearMessageCount(token)); // clear count once messages loaded
|
||||
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
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue