scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 02:56:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Make api request on filter change

Browse source 
This fixes #1546 by using an updated api endpoint that accepts filter arguments.
This commit is contained in:
Matthew Taylor 2017-10-24 13:10:32 -04:00
parent 9b3b1a2623
commit 361afaa937
3 changed files with 68 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/redux/messages.js
View file

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

75
src/views/messages/container.jsx
View file

@ -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}
/>
);
}

7
src/views/messages/presentation.jsx
View file

@ -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>