55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
|
import { connect } from 'react-redux';
|
||
|
|
import { createSelector } from 'reselect';
|
||
|
|
import { get } from 'lodash';
|
||
|
|
import { mapDispatchToProps } from '../actions';
|
||
|
|
import { EmojiButton, Props } from '../../components/emoji/EmojiButton';
|
||
|
|
import { StateType } from '../reducer';
|
||
|
|
|
||
|
|
import { getIntl } from '../selectors/user';
|
||
|
|
|
||
|
|
const mapStateToProps = (state: StateType) => {
|
||
|
|
const { recents } = state.emojis;
|
||
|
|
|
||
|
|
return {
|
||
|
|
i18n: getIntl(state),
|
||
|
|
recentEmojis: recents,
|
||
|
|
skinTone: get(state, ['items', 'skinTone', 'value'], 0),
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
const dispatchPropsMap = {
|
||
|
|
...mapDispatchToProps,
|
||
|
|
onSetSkinTone: (tone: number) => mapDispatchToProps.putItem('skinTone', tone),
|
||
|
|
};
|
||
|
|
|
||
|
|
type OnPickEmojiType = Props['onPickEmoji'];
|
||
|
|
type UseEmojiType = typeof mapDispatchToProps.useEmoji;
|
||
|
|
|
||
|
|
export type OwnProps = {
|
||
|
|
onPickEmoji: OnPickEmojiType;
|
||
|
|
};
|
||
|
|
|
||
|
|
const selectOnPickEmoji = createSelector(
|
||
|
|
(onPickEmoji: OnPickEmojiType) => onPickEmoji,
|
||
|
|
(_onPickEmoji: OnPickEmojiType, useEmoji: UseEmojiType) => useEmoji,
|
||
|
|
(onPickEmoji, useEmoji): OnPickEmojiType => e => {
|
||
|
|
onPickEmoji(e);
|
||
|
|
useEmoji(e.shortName);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
const mergeProps = (
|
||
|
|
stateProps: ReturnType<typeof mapStateToProps>,
|
||
|
|
dispatchProps: typeof dispatchPropsMap,
|
||
|
|
ownProps: OwnProps
|
||
|
|
) => ({
|
||
|
|
...ownProps,
|
||
|
|
...stateProps,
|
||
|
|
...dispatchProps,
|
||
|
|
onPickEmoji: selectOnPickEmoji(ownProps.onPickEmoji, dispatchProps.useEmoji),
|
||
|
|
});
|
||
|
|
|
||
|
|
const smart = connect(mapStateToProps, dispatchPropsMap, mergeProps);
|
||
|
|
|
||
|
|
export const SmartEmojiButton = smart(EmojiButton);
|