diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js index 58a2417c7..ee203dbb1 100644 --- a/app/soapbox/actions/soapbox.js +++ b/app/soapbox/actions/soapbox.js @@ -18,10 +18,18 @@ export const defaultConfig = ImmutableMap({ navlinks: ImmutableMap({ homeFooter: ImmutableList(), }), + allowedEmoji: ImmutableList([ + '👍', + '❤️', + '😆', + '😮', + '😢', + '😩', + ]), }); export function getSoapboxConfig(state) { - return defaultConfig.mergeDeep(state.get('soapbox')); + return defaultConfig.merge(state.get('soapbox')); } export function fetchSoapboxConfig() { diff --git a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap index 6b6307012..80bd49f8e 100644 --- a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap +++ b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap @@ -16,7 +16,7 @@ exports[` renders correctly 1`] = ` className="emoji-react-selector__emoji" dangerouslySetInnerHTML={ Object { - "__html": "\\"❤\\"", + "__html": "\\"❤️\\"", } } /> diff --git a/app/soapbox/components/__tests__/emoji_selector-test.js b/app/soapbox/components/__tests__/emoji_selector-test.js index c475aae4b..c8083c3aa 100644 --- a/app/soapbox/components/__tests__/emoji_selector-test.js +++ b/app/soapbox/components/__tests__/emoji_selector-test.js @@ -1,10 +1,10 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import { createComponent } from 'soapbox/test_helpers'; import EmojiSelector from '../emoji_selector'; describe('', () => { it('renders correctly', () => { - const component = renderer.create(); + const component = createComponent(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/app/soapbox/components/emoji_selector.js b/app/soapbox/components/emoji_selector.js index 7ef0e2b0a..4cd0395e3 100644 --- a/app/soapbox/components/emoji_selector.js +++ b/app/soapbox/components/emoji_selector.js @@ -1,10 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ALLOWED_EMOJI } from 'soapbox/utils/emoji_reacts'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { connect } from 'react-redux'; import emojify from 'soapbox/features/emoji/emoji'; +import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import classNames from 'classnames'; -export default class EmojiSelector extends React.Component { +const mapStateToProps = state => ({ + allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'), +}); + +export default @connect(mapStateToProps) +class EmojiSelector extends ImmutablePureComponent { static propTypes = { onReact: PropTypes.func.isRequired, @@ -17,11 +24,11 @@ export default class EmojiSelector extends React.Component { } render() { - const { onReact, visible } = this.props; + const { onReact, visible, allowedEmoji } = this.props; return (
- {ALLOWED_EMOJI.map((emoji, i) => ( + {allowedEmoji.map((emoji, i) => (
diff --git a/app/soapbox/utils/__tests__/emoji_reacts-test.js b/app/soapbox/utils/__tests__/emoji_reacts-test.js index 4663304b2..e21dda5e1 100644 --- a/app/soapbox/utils/__tests__/emoji_reacts-test.js +++ b/app/soapbox/utils/__tests__/emoji_reacts-test.js @@ -158,7 +158,7 @@ describe('getReactForStatus', () => { ], }, }); - expect(getReactForStatus(status)).toEqual('❤'); + expect(getReactForStatus(status, ALLOWED_EMOJI)).toEqual('❤'); }); it('returns a thumbs-up for a favourite', () => { diff --git a/app/soapbox/utils/emoji_reacts.js b/app/soapbox/utils/emoji_reacts.js index 03b80a39a..774fdba39 100644 --- a/app/soapbox/utils/emoji_reacts.js +++ b/app/soapbox/utils/emoji_reacts.js @@ -7,7 +7,7 @@ import { // I've customized them. export const ALLOWED_EMOJI = [ '👍', - '❤', + '❤️', '😆', '😮', '😢', @@ -75,11 +75,12 @@ export const reduceEmoji = (emojiReacts, favouritesCount, favourited, allowedEmo emojiReacts, favouritesCount, favourited, ))), allowedEmoji)); -export const getReactForStatus = status => { +export const getReactForStatus = (status, allowedEmoji=ALLOWED_EMOJI) => { return reduceEmoji( status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()), - status.get('favourites_count'), + status.get('favourites_count', 0), status.get('favourited'), + allowedEmoji, ).filter(e => e.get('me') === true) .getIn([0, 'name']); };