Save skin tone changes in reaction picker

ts/components/CustomizingPreferredReactionsModal.tsx

@@ -134,6 +134,7 @@ export function CustomizingPreferredReactionsModal({
           hasMoreButton={false}
           i18n={i18n}
           onPick={onPick}
+          onSetSkinTone={shouldNotBeCalled}
           ref={setReferenceElement}
           preferredReactionEmoji={draftPreferredReactions}
           selected={selected}

ts/components/conversation/ReactionPicker.stories.tsx

@@ -30,15 +30,16 @@ const preferredReactionEmoji = [
 const renderEmojiPicker: ReactionPickerProps['renderEmojiPicker'] = ({
   onClose,
   onPickEmoji,
+  onSetSkinTone,
   ref,
 }) => (
   <EmojiPicker
     i18n={i18n}
     skinTone={0}
-    onSetSkinTone={action('EmojiPicker::onSetSkinTone')}
     ref={ref}
     onClose={onClose}
     onPickEmoji={onPickEmoji}
+    onSetSkinTone={onSetSkinTone}
   />
 );
 
@@ -48,6 +49,7 @@ storiesOf('Components/Conversation/ReactionPicker', module)
       <ReactionPicker
         i18n={i18n}
         onPick={action('onPick')}
+        onSetSkinTone={action('onSetSkinTone')}
         openCustomizePreferredReactionsModal={action(
           'openCustomizePreferredReactionsModal'
         )}
@@ -65,6 +67,7 @@ storiesOf('Components/Conversation/ReactionPicker', module)
           i18n={i18n}
           selected={e}
           onPick={action('onPick')}
+          onSetSkinTone={action('onSetSkinTone')}
           openCustomizePreferredReactionsModal={action(
             'openCustomizePreferredReactionsModal'
           )}
@@ -83,6 +86,7 @@ storiesOf('Components/Conversation/ReactionPicker', module)
           i18n={i18n}
           selected={e}
           onPick={action('onPick')}
+          onSetSkinTone={action('onSetSkinTone')}
           openCustomizePreferredReactionsModal={action(
             'openCustomizePreferredReactionsModal'
           )}

ts/components/conversation/ReactionPicker.tsx

@@ -17,7 +17,10 @@ export enum ReactionPickerSelectionStyle {
 }
 
 export type RenderEmojiPickerProps = Pick<Props, 'onClose' | 'style'> &
-  Pick<EmojiPickerProps, 'onClickSettings' | 'onPickEmoji'> & {
+  Pick<
+    EmojiPickerProps,
+    'onClickSettings' | 'onPickEmoji' | 'onSetSkinTone'
+  > & {
     ref: React.Ref<HTMLDivElement>;
   };
 
@@ -28,6 +31,7 @@ export type OwnProps = {
   selectionStyle: ReactionPickerSelectionStyle;
   onClose?: () => unknown;
   onPick: (emoji: string) => unknown;
+  onSetSkinTone: (tone: number) => unknown;
   openCustomizePreferredReactionsModal?: () => unknown;
   preferredReactionEmoji: Array<string>;
   renderEmojiPicker: (props: RenderEmojiPickerProps) => React.ReactElement;
@@ -71,6 +75,7 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
       i18n,
       onClose,
       onPick,
+      onSetSkinTone,
       openCustomizePreferredReactionsModal,
       preferredReactionEmoji,
       renderEmojiPicker,
@@ -114,6 +119,7 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
         onClickSettings: openCustomizePreferredReactionsModal,
         onClose,
         onPickEmoji,
+        onSetSkinTone,
         ref,
         style,
       });

ts/components/emoji/EmojiPicker.tsx

@@ -32,7 +32,7 @@ export type OwnProps = {
   readonly onPickEmoji: (o: EmojiPickDataType) => unknown;
   readonly doSend?: () => unknown;
   readonly skinTone?: number;
-  readonly onSetSkinTone?: (tone: number) => unknown;
+  readonly onSetSkinTone: (tone: number) => unknown;
   readonly recentEmojis?: Array<string>;
   readonly onClickSettings?: () => unknown;
   readonly onClose?: () => unknown;

ts/state/smart/ReactionPicker.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { StateType } from '../reducer';
 import { useActions as usePreferredReactionsActions } from '../ducks/preferredReactions';
+import { useActions as useItemsActions } from '../ducks/items';
 
 import { getIntl } from '../selectors/user';
 import {
@@ -22,6 +23,7 @@ import {
 type ExternalProps = Omit<
   Props,
   | 'i18n'
+  | 'onSetSkinTone'
   | 'openCustomizePreferredReactionsModal'
   | 'preferredReactionEmoji'
   | 'selectionStyle'
@@ -35,6 +37,7 @@ export const SmartReactionPicker = React.forwardRef<
   const {
     openCustomizePreferredReactionsModal,
   } = usePreferredReactionsActions();
+  const { onSetSkinTone } = useItemsActions();
 
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
 
@@ -49,6 +52,7 @@ export const SmartReactionPicker = React.forwardRef<
   return (
     <ReactionPicker
       i18n={i18n}
+      onSetSkinTone={onSetSkinTone}
       openCustomizePreferredReactionsModal={
         openCustomizePreferredReactionsModal
       }

ts/state/smart/renderEmojiPicker.tsx

@@ -10,6 +10,7 @@ export function renderEmojiPicker({
   ref,
   onClickSettings,
   onPickEmoji,
+  onSetSkinTone,
   onClose,
   style,
 }: RenderEmojiPickerProps): JSX.Element {
@@ -18,6 +19,7 @@ export function renderEmojiPicker({
       ref={ref}
       onClickSettings={onClickSettings}
       onPickEmoji={onPickEmoji}
+      onSetSkinTone={onSetSkinTone}
       onClose={onClose}
       style={style}
     />