moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add emojiReact utils with tests

This commit is contained in:
Alex Gleason 2020-05-20 11:46:49 -05:00
parent 11c9f153e1
commit d562a25c78
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 156 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/gabsocial/features/status/components/status_interaction_bar.js
View File

@ -1,16 +1,7 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import emojify from 'gabsocial/features/emoji/emoji';
// https://emojipedia.org/facebook/
const ALLOWED_EMOJI = [
'👍',
'❤️',
'😂',
'😯',
'😢',
'😡',
];
import { reduceEmoji } from 'gabsocial/utils/emoji_reacts';
export class StatusInteractionBar extends React.Component {
@ -18,35 +9,15 @@ export class StatusInteractionBar extends React.Component {
status: ImmutablePropTypes.map,
}
sortEmoji = emojiReacts => (
emojiReacts // TODO: Sort by count
);
mergeEmoji = emojiReacts => (
emojiReacts // TODO: Merge similar emoji
);
filterEmoji = emojiReacts => (
emojiReacts.filter(emojiReact => (
ALLOWED_EMOJI.includes(emojiReact.get('name'))
)))
render() {
const { status } = this.props;
const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']);
const likeCount = status.get('favourites_count');
const favouritesCount = status.get('favourites_count');
return (
<>
{likeCount > 0 && <span className='emoji-react'>
<span
className='emoji-react--emoji'
dangerouslySetInnerHTML={{ __html: emojify('👍') }}
/>
<span className='emoji-react--count'>{likeCount}</span>
</span>}
{this.filterEmoji(emojiReacts).map(e => (
<span className='emoji-react'>
<div className='emoji-reacts'>
{reduceEmoji(emojiReacts, favouritesCount).map((e, i) => (
<span className='emoji-react' key={i}>
<span
className='emoji-react--emoji'
dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
@ -54,7 +25,7 @@ export class StatusInteractionBar extends React.Component {
<span className='emoji-react--count'>{e.get('count')}</span>
</span>
))}
</>
</div>
);
}

110
app/gabsocial/utils/__tests__/emoji_reacts-test.js Normal file
View File

@ -0,0 +1,110 @@
import {
sortEmoji,
mergeEmojiFavourites,
filterEmoji,
reduceEmoji,
} from '../emoji_reacts';
import { fromJS } from 'immutable';
describe('filterEmoji', () => {
describe('with a mix of allowed and disallowed emoji', () => {
const emojiReacts = fromJS([
{ 'count': 1, 'me': true, 'name': '🌵' },
{ 'count': 1, 'me': true, 'name': '😂' },
{ 'count': 1, 'me': true, 'name': '👀' },
{ 'count': 1, 'me': true, 'name': '🍩' },
{ 'count': 1, 'me': true, 'name': '😡' },
{ 'count': 1, 'me': true, 'name': '🔪' },
{ 'count': 1, 'me': true, 'name': '😠' },
]);
it('filters only allowed emoji', () => {
expect(filterEmoji(emojiReacts)).toEqual(fromJS([
{ 'count': 1, 'me': true, 'name': '😂' },
{ 'count': 1, 'me': true, 'name': '😡' },
]));
});
});
});
describe('sortEmoji', () => {
describe('with an unsorted list of emoji', () => {
const emojiReacts = fromJS([
{ 'count': 7, 'me': true, 'name': '😯' },
{ 'count': 3, 'me': true, 'name': '😢' },
{ 'count': 1, 'me': true, 'name': '😡' },
{ 'count': 20, 'me': true, 'name': '👍' },
{ 'count': 7, 'me': true, 'name': '😂' },
{ 'count': 15, 'me': true, 'name': '❤️' },
]);
it('sorts the emoji by count', () => {
expect(sortEmoji(emojiReacts)).toEqual(fromJS([
{ 'count': 20, 'me': true, 'name': '👍' },
{ 'count': 15, 'me': true, 'name': '❤️' },
{ 'count': 7, 'me': true, 'name': '😯' },
{ 'count': 7, 'me': true, 'name': '😂' },
{ 'count': 3, 'me': true, 'name': '😢' },
{ 'count': 1, 'me': true, 'name': '😡' },
]));
});
});
});
describe('mergeEmojiFavourites', () => {
const favouritesCount = 12;
describe('with existing 👍 reacts', () => {
const emojiReacts = fromJS([
{ 'count': 20, 'me': true, 'name': '👍' },
{ 'count': 15, 'me': true, 'name': '❤️' },
{ 'count': 7, 'me': true, 'name': '😯' },
]);
it('combines 👍 reacts with favourites', () => {
expect(mergeEmojiFavourites(emojiReacts, favouritesCount)).toEqual(fromJS([
{ 'count': 32, 'me': true, 'name': '👍' },
{ 'count': 15, 'me': true, 'name': '❤️' },
{ 'count': 7, 'me': true, 'name': '😯' },
]));
});
});
describe('without existing 👍 reacts', () => {
const emojiReacts = fromJS([
{ 'count': 15, 'me': true, 'name': '❤️' },
{ 'count': 7, 'me': true, 'name': '😯' },
]);
it('adds 👍 reacts to the map equaling favourite count', () => {
expect(mergeEmojiFavourites(emojiReacts, favouritesCount)).toEqual(fromJS([
{ 'count': 15, 'me': true, 'name': '❤️' },
{ 'count': 7, 'me': true, 'name': '😯' },
{ 'count': 12, 'me': false, 'name': '👍' },
]));
});
});
});
describe('reduceEmoji', () => {
describe('with a clusterfuck of emoji', () => {
const emojiReacts = fromJS([
{ 'count': 1, 'me': false, 'name': '😡' },
{ 'count': 1, 'me': true, 'name': '🔪' },
{ 'count': 7, 'me': true, 'name': '😯' },
{ 'count': 3, 'me': false, 'name': '😢' },
{ 'count': 1, 'me': true, 'name': '🌵' },
{ 'count': 20, 'me': true, 'name': '👍' },
{ 'count': 7, 'me': false, 'name': '😂' },
{ 'count': 15, 'me': true, 'name': '❤️' },
{ 'count': 1, 'me': false, 'name': '👀' },
{ 'count': 1, 'me': false, 'name': '🍩' },
]);
it('sorts, filters, and combines emoji and favourites', () => {
expect(reduceEmoji(emojiReacts, 7)).toEqual(fromJS([
{ 'count': 27, 'me': true, 'name': '👍' },
{ 'count': 15, 'me': true, 'name': '❤️' },
{ 'count': 7, 'me': true, 'name': '😯' },
{ 'count': 7, 'me': false, 'name': '😂' },
{ 'count': 3, 'me': false, 'name': '😢' },
{ 'count': 1, 'me': false, 'name': '😡' },
]));
});
});
});

40
app/gabsocial/utils/emoji_reacts.js Normal file
View File

@ -0,0 +1,40 @@
import { Map as ImmutableMap } from 'immutable';
// https://emojipedia.org/facebook/
export const ALLOWED_EMOJI = [
'👍',
'❤️',
'😂',
'😯',
'😢',
'😡',
];
export const sortEmoji = emojiReacts => (
emojiReacts.sortBy(emojiReact => -emojiReact.get('count'))
);
export const mergeEmoji = emojiReacts => (
emojiReacts // TODO: Merge similar emoji
);
export const mergeEmojiFavourites = (emojiReacts, favouritesCount) => {
const likeIndex = emojiReacts.findIndex(emojiReact =>
emojiReact.get('name') === '👍');
if (likeIndex > -1) {
const likeCount = emojiReacts.getIn([likeIndex, 'count']);
return emojiReacts.setIn([likeIndex, 'count'], likeCount + favouritesCount);
} else {
return emojiReacts.push(ImmutableMap({ count: favouritesCount, me: false, name: '👍' }));
}
};
export const filterEmoji = emojiReacts => (
emojiReacts.filter(emojiReact => (
ALLOWED_EMOJI.includes(emojiReact.get('name'))
)));
export const reduceEmoji = (emojiReacts, favouritesCount) => (
sortEmoji(filterEmoji(mergeEmoji(mergeEmojiFavourites(
emojiReacts, favouritesCount
)))));