From 4f1188e2130584f05e9559edb59dd1d194166371 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Thu, 9 Sep 2021 15:53:26 -0500
Subject: [PATCH] Save skin tone changes in reaction picker

---
 ts/components/CustomizingPreferredReactionsModal.tsx  | 1 +
 ts/components/conversation/ReactionPicker.stories.tsx | 6 +++++-
 ts/components/conversation/ReactionPicker.tsx         | 8 +++++++-
 ts/components/emoji/EmojiPicker.tsx                   | 2 +-
 ts/state/smart/ReactionPicker.tsx                     | 4 ++++
 ts/state/smart/renderEmojiPicker.tsx                  | 2 ++
 6 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/ts/components/CustomizingPreferredReactionsModal.tsx b/ts/components/CustomizingPreferredReactionsModal.tsx
index b2298330a..36e3b3759 100644
--- a/ts/components/CustomizingPreferredReactionsModal.tsx
+++ b/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}
diff --git a/ts/components/conversation/ReactionPicker.stories.tsx b/ts/components/conversation/ReactionPicker.stories.tsx
index 482ad1f65..659e3906f 100644
--- a/ts/components/conversation/ReactionPicker.stories.tsx
+++ b/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'
           )}
diff --git a/ts/components/conversation/ReactionPicker.tsx b/ts/components/conversation/ReactionPicker.tsx
index fe5007359..f5b4a40ad 100644
--- a/ts/components/conversation/ReactionPicker.tsx
+++ b/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,
       });
diff --git a/ts/components/emoji/EmojiPicker.tsx b/ts/components/emoji/EmojiPicker.tsx
index d96c3b7ba..f5013d7eb 100644
--- a/ts/components/emoji/EmojiPicker.tsx
+++ b/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;
diff --git a/ts/state/smart/ReactionPicker.tsx b/ts/state/smart/ReactionPicker.tsx
index 273baabe9..af2ff7454 100644
--- a/ts/state/smart/ReactionPicker.tsx
+++ b/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
       }
diff --git a/ts/state/smart/renderEmojiPicker.tsx b/ts/state/smart/renderEmojiPicker.tsx
index 6397f9629..c07e9fb5b 100644
--- a/ts/state/smart/renderEmojiPicker.tsx
+++ b/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}
     />