Removing likes and flags on second click.

This commit is contained in:
David Jay
2016-11-11 19:07:15 -05:00
parent 4bea5e5914
commit b629cf359f
6 changed files with 88 additions and 13 deletions
@@ -16,7 +16,7 @@ import Pym from 'pym.js';
import FlagButton from '../../coral-plugin-flags/FlagButton';
import LikeButton from '../../coral-plugin-likes/LikeButton';
const {addItem, updateItem, postItem, getStream, postAction, appendItemArray} = itemActions;
const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions;
const {addNotification, clearNotification} = notificationActions;
const {setLoggedInUser} = authActions;
@@ -55,6 +55,9 @@ const mapDispatchToProps = (dispatch) => {
postAction: (item, action, user, itemType) => {
return dispatch(postAction(item, action, user, itemType));
},
deleteAction: (item, action, user, itemType) => {
return dispatch(deleteAction(item, action, user, itemType));
},
appendItemArray: (item, property, value, addToFront, itemType) => {
return dispatch(appendItemArray(item, property, value, addToFront, itemType));
}
@@ -129,6 +132,7 @@ class CommentStream extends Component {
id={commentId}
like={this.props.items.actions[comment.like]}
postAction={this.props.postAction}
deleteAction={this.props.deleteAction}
addItem={this.props.addItem}
updateItem={this.props.updateItem}
currentUser={this.props.auth.user}/>
@@ -139,6 +143,7 @@ class CommentStream extends Component {
id={commentId}
flag={this.props.items.actions[comment.flag]}
postAction={this.props.postAction}
deleteAction={this.props.deleteAction}
addItem={this.props.addItem}
updateItem={this.props.updateItem}
currentUser={this.props.auth.user}/>
@@ -170,6 +175,7 @@ class CommentStream extends Component {
id={replyId}
like={this.props.items.actions[reply.like]}
postAction={this.props.postAction}
deleteAction={this.props.deleteAction}
addItem={this.props.addItem}
updateItem={this.props.updateItem}
currentUser={this.props.auth.user}/>
@@ -180,6 +186,7 @@ class CommentStream extends Component {
id={replyId}
flag={this.props.items.actions[reply.flag]}
postAction={this.props.postAction}
deleteAction={this.props.deleteAction}
addItem={this.props.addItem}
updateItem={this.props.updateItem}
currentUser={this.props.auth.user}/>
+40 -4
View File
@@ -241,9 +241,45 @@ export function postAction (item_id, action_type, user_id, item_type) {
return response.ok ? response.json()
: Promise.reject(`${response.status} ${response.statusText}`);
}
)
.then((json)=>{
return json;
});
);
};
}
/*
* DeleteAction
* Deletes an action to an item
*
* @params
* id - the id of the item on which the action is taking place
* action - the name of the action
* user - the user performing the action
* host - the coral host
*
* @returns
* A promise resolving to null or an error
*
*/
export function deleteAction (item_id, action_type, user_id, item_type) {
return () => {
const action = {
action_type,
user_id
};
const options = {
method: 'DELETE',
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify(action)
};
return fetch(`/api/v1/${item_type}/${item_id}/actions`, options)
.then(
response => {
return response.ok ? response.text()
: Promise.reject(`${response.status} ${response.statusText}`);
}
);
};
}
+10 -4
View File
@@ -4,7 +4,7 @@ import translations from './translations.json';
const name = 'coral-plugin-flags';
const FlagButton = ({flag, id, postAction, addItem, updateItem, addNotification}) => {
const FlagButton = ({flag, id, postAction, deleteAction, addItem, updateItem, addNotification}) => {
const flagged = flag && flag.current_user;
const onFlagClick = () => {
if (!flagged) {
@@ -14,17 +14,23 @@ const FlagButton = ({flag, id, postAction, addItem, updateItem, addNotification}
updateItem(action.item_id, action.action_type, action.id, 'comments');
});
addNotification('success', lang.t('flag-notif'));
} else {
deleteAction(id, 'flag', '123', 'comments')
.then(() => {
updateItem(id, 'flag', '', 'comments');
});
addNotification('success', lang.t('flag-notif-remove'));
}
};
return <div className={`${name }-container`}>
<button onClick={onFlagClick} className={`${name }-button`}>
return <div className={`${name}-container`}>
<button onClick={onFlagClick} className={`${name}-button`}>
{
flagged
? <span className={`${name}-button-text`}>{lang.t('flagged')}</span>
: <span className={`${name}-button-text`}>{lang.t('flag')}</span>
}
<i className={`${name }-icon material-icons ${flagged && 'flaggedIcon'}`}
<i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
style={flagged && styles.flaggedIcon}
aria-hidden={true}>flag</i>
</button>
+4 -2
View File
@@ -2,11 +2,13 @@
"en": {
"flag": "Flag",
"flagged": "Flagged",
"flag-notif": "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly."
"flag-notif": "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly.",
"flag-notif-remove": "Your flag has been removed."
},
"es": {
"flag": "Marcar",
"flagged": "Marcado",
"flag-notif": "Gracias por marcar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar."
"flag-notif": "Gracias por marcar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar.",
"flag-notif-remove": "¡traduceme!"
}
}
+8 -2
View File
@@ -4,7 +4,7 @@ import translations from './translations.json';
const name = 'coral-plugin-flags';
const LikeButton = ({like, id, postAction, addItem, updateItem}) => {
const LikeButton = ({like, id, postAction, deleteAction, addItem, updateItem}) => {
const liked = like && like.current_user;
const onLikeClick = () => {
if (!liked) {
@@ -13,6 +13,12 @@ const LikeButton = ({like, id, postAction, addItem, updateItem}) => {
addItem({id: action.id, current_user:true, count: like ? like.count + 1 : 1}, 'actions');
updateItem(action.item_id, action.action_type, action.id, 'comments');
});
} else {
deleteAction(id, 'like', '123', 'comments')
.then(() => {
updateItem(like.id, 'count', like.count - 1, 'actions');
updateItem(like.id, 'current_user', false, 'actions');
});
}
};
@@ -25,7 +31,7 @@ const LikeButton = ({like, id, postAction, addItem, updateItem}) => {
}
<i className={`${name}-icon material-icons`}
aria-hidden={true}>thumb_up</i>
<span className={`${name}-like-count`}>{like && like.count}</span>
<span className={`${name}-like-count`}>{like && like.count > 0 && like.count}</span>
</button>
</div>;
};
@@ -162,6 +162,24 @@ describe('itemActions', () => {
expect(err).to.be.truthy;
});
});
});
describe('deleteAction', () => {
it ('should remove an action', () => {
fetchMock.delete('*', 'Action removed.');
return actions.deleteAction('abc', 'flag', '123', 'comments')(store.dispatch)
.then(response => {
expect(fetchMock.calls().matched[0][0]).to.equal('/api/v1/comments/abc/actions');
expect(response).to.equal('Action removed.');
});
});
it('should handle an error', () => {
fetchMock.post('*', 404);
return actions.postAction('abc', 'flag', '123')(store.dispatch)
.catch((err) => {
expect(err).to.be.truthy;
});
});
});
});