LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

debounce comment reacts on backend, not button, feedback immediate

Browse source
This commit is contained in:
jessop 2020-10-01 20:25:30 -04:00 • committed by Sean Yesmunt
parent ec3a763f5d
commit aa127e45aa
3 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/component/commentReactions/index.js
View file

@ -1,16 +1,11 @@
import { connect } from 'react-redux';
import Comment from './view';
import {
makeSelectMyReactionsForComment,
makeSelectOthersReactionsForComment,
selectPendingCommentReacts,
} from 'redux/selectors/comments';
import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
import { doCommentReact } from 'redux/actions/comments';
const select = (state, props) => ({
myReacts: makeSelectMyReactionsForComment(props.commentId)(state),
othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
pendingCommentReacts: selectPendingCommentReacts(state),
});
const perform = dispatch => ({

6
ui/component/commentReactions/view.jsx
View file

@ -15,7 +15,7 @@ type Props = {
};
export default function CommentReactions(props: Props) {
const { myReacts, othersReacts, commentId, react, pendingCommentReacts } = props;
const { myReacts, othersReacts, commentId, react } = props;
const [activeChannel] = usePersistedState('comment-channel');
const getCountForReact = type => {
@ -38,7 +38,7 @@ export default function CommentReactions(props: Props) {
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
})}
disabled={!activeChannel || pendingCommentReacts.includes(commentId + REACTION_TYPES.LIKE)}
disabled={!activeChannel}
onClick={() => react(commentId, REACTION_TYPES.LIKE)}
label={getCountForReact(REACTION_TYPES.LIKE)}
/>
@ -49,7 +49,7 @@ export default function CommentReactions(props: Props) {
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
})}
disabled={!activeChannel || pendingCommentReacts.includes(commentId + REACTION_TYPES.DISLIKE)}
disabled={!activeChannel}
onClick={() => react(commentId, REACTION_TYPES.DISLIKE)}
label={getCountForReact(REACTION_TYPES.DISLIKE)}
/>

33
ui/redux/actions/comments.js
View file

@ -103,7 +103,7 @@ export function doCommentReact(commentId: string, type: string) {
});
return;
}
if (pendingReacts.includes(commentId + exclusiveTypes[type])) {
if (pendingReacts.includes(commentId + exclusiveTypes[type]) || pendingReacts.includes(commentId + type)) {
// ignore dislikes during likes, for example
return;
}
@ -134,31 +134,48 @@ export function doCommentReact(commentId: string, type: string) {
type: ACTIONS.COMMENT_REACT_STARTED,
data: commentId + type,
});
// simulate api return shape: ['like'] -> { 'like': 1 }
const myReactsObj = myReacts.reduce((acc, el) => {
acc[el] = 1;
return acc;
}, {});
dispatch({
type: ACTIONS.COMMENT_REACTION_LIST_COMPLETED,
data: {
myReactions: { [commentId]: myReactsObj },
othersReactions: { [commentId]: othersReacts },
},
});
Lbry.comment_react(params)
.then((result: CommentReactListResponse) => {
dispatch({
type: ACTIONS.COMMENT_REACT_COMPLETED,
data: commentId + type,
});
dispatch({
type: ACTIONS.COMMENT_REACTION_LIST_COMPLETED,
data: {
myReactions: { [commentId]: myReactsObj },
othersReactions: { [commentId]: othersReacts },
},
});
})
.catch(error => {
dispatch({
type: ACTIONS.COMMENT_REACT_FAILED,
data: commentId + type,
});
const myRevertedReactsObj = myReacts
.filter(el => el !== type)
.reduce((acc, el) => {
acc[el] = 1;
return acc;
}, {});
dispatch({
type: ACTIONS.COMMENT_REACTION_LIST_COMPLETED,
data: {
myReactions: { [commentId]: myRevertedReactsObj },
othersReactions: { [commentId]: othersReacts },
},
});
});
};
}