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 ReactionDimension = sdk.getComponent('messages.ReactionDimension');
const options = [
{
key: "agree",
content: "👍",
},
{
key: "disagree",
content: "👎",
},
];
return <ReactionDimension return <ReactionDimension
title={_t("Agree or Disagree")} title={_t("Agree or Disagree")}
options={options} options={["👍", "👎"]}
reactions={this.props.reactions} reactions={this.props.reactions}
/>; />;
} }
@ -125,19 +115,9 @@ export default class MessageActionBar extends React.PureComponent {
} }
const ReactionDimension = sdk.getComponent('messages.ReactionDimension'); const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
const options = [
{
key: "like",
content: "🙂",
},
{
key: "dislike",
content: "😔",
},
];
return <ReactionDimension return <ReactionDimension
title={_t("Like or Dislike")} title={_t("Like or Dislike")}
options={options} options={["🙂", "😔"]}
reactions={this.props.reactions} 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 { export default class ReactionDimension extends React.PureComponent {
static propTypes = { static propTypes = {
// Array of strings containing the emoji for each option
options: PropTypes.array.isRequired, options: PropTypes.array.isRequired,
title: PropTypes.string, title: PropTypes.string,
// The Relations model from the JS SDK for reactions // The Relations model from the JS SDK for reactions
@ -68,12 +69,12 @@ export default class ReactionDimension extends React.PureComponent {
} }
const { options } = this.props; const { options } = this.props;
let selected = null; let selected = null;
for (const { key, content } of options) { for (const option of options) {
const reactionExists = myReactions.some(mxEvent => { const reactionExists = myReactions.some(mxEvent => {
if (mxEvent.isRedacted()) { if (mxEvent.isRedacted()) {
return false; return false;
} }
return mxEvent.getContent()["m.relates_to"].key === content; return mxEvent.getContent()["m.relates_to"].key === option;
}); });
if (reactionExists) { if (reactionExists) {
if (selected) { if (selected) {
@ -81,7 +82,7 @@ export default class ReactionDimension extends React.PureComponent {
// non-Riot clients), then act as if none are selected. // non-Riot clients), then act as if none are selected.
return null; return null;
} }
selected = key; selected = option;
} }
} }
return selected; return selected;
@ -98,12 +99,12 @@ export default class ReactionDimension extends React.PureComponent {
onOptionClick = (ev) => { onOptionClick = (ev) => {
const { key } = ev.target.dataset; const { key } = ev.target.dataset;
this.toggleDimensionValue(key); this.toggleDimension(key);
} }
toggleDimensionValue(value) { toggleDimension(key) {
const state = this.state.selected; const state = this.state.selected;
const newState = state !== value ? value : null; const newState = state !== key ? key : null;
this.setState({ this.setState({
selected: newState, selected: newState,
}); });
@ -115,16 +116,16 @@ export default class ReactionDimension extends React.PureComponent {
const { options } = this.props; const { options } = this.props;
const items = options.map(option => { const items = options.map(option => {
const disabled = selected && selected !== option.key; const disabled = selected && selected !== option;
const classes = classNames({ const classes = classNames({
mx_ReactionDimension_disabled: disabled, mx_ReactionDimension_disabled: disabled,
}); });
return <span key={option.key} return <span key={option}
data-key={option.key} data-key={option}
className={classes} className={classes}
onClick={this.onOptionClick} onClick={this.onOptionClick}
> >
{option.content} {option}
</span>; </span>;
}); });