Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 05:55:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove redundant key vs. content in ReactionDimension

Browse Source 
This simplifies `ReactionDimension` by using the emoji string everywhere instead
of keeping a separate text string as well. It should improve readability as
well, as the reaction events also have a field `key` which was the emoji
content, which was easy to confuse.
This commit is contained in:
J. Ryan Stinnett 2019-05-09 15:39:00 +01:00
parent 6a59143ffb
commit ce35741030
2 changed files with 13 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/views/messages/MessageActionBar.js
View File

@ -102,19 +102,9 @@ export default class MessageActionBar extends React.PureComponent {
}
const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
const options = [
{
key: "agree",
content: "👍",
},
{
key: "disagree",
content: "👎",
},
];
return <ReactionDimension
title={_t("Agree or Disagree")}
options={options}
options={["👍", "👎"]}
reactions={this.props.reactions}
/>;
}
@ -125,19 +115,9 @@ export default class MessageActionBar extends React.PureComponent {
}
const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
const options = [
{
key: "like",
content: "🙂",
},
{
key: "dislike",
content: "😔",
},
];
return <ReactionDimension
title={_t("Like or Dislike")}
options={options}
options={["🙂", "😔"]}
reactions={this.props.reactions}
/>;
}

21
src/components/views/messages/ReactionDimension.js
View File

@ -22,6 +22,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
export default class ReactionDimension extends React.PureComponent {
static propTypes = {
// Array of strings containing the emoji for each option
options: PropTypes.array.isRequired,
title: PropTypes.string,
// The Relations model from the JS SDK for reactions
@ -68,12 +69,12 @@ export default class ReactionDimension extends React.PureComponent {
}
const { options } = this.props;
let selected = null;
for (const { key, content } of options) {
for (const option of options) {
const reactionExists = myReactions.some(mxEvent => {
if (mxEvent.isRedacted()) {
return false;
}
return mxEvent.getContent()["m.relates_to"].key === content;
return mxEvent.getContent()["m.relates_to"].key === option;
});
if (reactionExists) {
if (selected) {
@ -81,7 +82,7 @@ export default class ReactionDimension extends React.PureComponent {
// non-Riot clients), then act as if none are selected.
return null;
}
selected = key;
selected = option;
}
}
return selected;
@ -98,12 +99,12 @@ export default class ReactionDimension extends React.PureComponent {
onOptionClick = (ev) => {
const { key } = ev.target.dataset;
this.toggleDimensionValue(key);
this.toggleDimension(key);
}
toggleDimensionValue(value) {
toggleDimension(key) {
const state = this.state.selected;
const newState = state !== value ? value : null;
const newState = state !== key ? key : null;
this.setState({
selected: newState,
});
@ -115,16 +116,16 @@ export default class ReactionDimension extends React.PureComponent {
const { options } = this.props;
const items = options.map(option => {
const disabled = selected && selected !== option.key;
const disabled = selected && selected !== option;
const classes = classNames({
mx_ReactionDimension_disabled: disabled,
});
return <span key={option.key}
data-key={option.key}
return <span key={option}
data-key={option}
className={classes}
onClick={this.onOptionClick}
>
{option.content}
{option}
</span>;
});