wip: add reaction when using quick reactions

Expensify · Feb 15, 2023 · f96b73b · f96b73b
1 parent a984a0b
commit f96b73b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'underscore';
 import {Pressable, View} from 'react-native';
 import PropTypes from 'prop-types';
 import Tooltip from '../Tooltip';
@@ -9,6 +10,7 @@ import * as Expensicons from '../Icon/Expensicons';
 import Text from '../Text';
 import getButtonState from '../../libs/getButtonState';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
+import emojis from '../../../assets/emojis';
 
 const propTypes = {
     sizeScale: PropTypes.number,
@@ -25,7 +27,12 @@ const AddReactionBubble = (props) => {
     const ref = React.createRef();
 
     const onPress = () => {
-        EmojiPickerAction.showEmojiPicker(() => {}, props.onSelectEmoji, ref.current);
+        EmojiPickerAction.showEmojiPicker(() => {}, (emojiCode) => {
+            const emoji = _.find(emojis, e => e.code === emojiCode);
+            if (emoji != null) {
+                props.onSelectEmoji(emoji);
+            }
+        }, ref.current);
     };
 
     return (

diff --git a/src/components/Reactions/QuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions.js
@@ -1,31 +1,41 @@
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import PropTypes from 'prop-types';
 import EmojiReactionBubble from './EmojiReactionBubble';
 import AddReactionBubble from './AddReactionBubble';
 
 const QUICK_REACTIONS = [
     {
         name: '+1',
-        codes: ['👍'],
+        code: '👍',
     },
     {
         name: 'heart',
-        codes: ['❤️'],
+        code: '❤️',
     },
     {
         name: 'joy',
-        codes: ['😂'],
+        code: '😂',
     },
     {
         name: 'fire',
-        codes: ['🔥'],
+        code: '🔥',
     },
 ];
 
 const EMOJI_BUBBLE_SCALE = 1.5;
 
-const QuickEmojiReactions = () => (
+const propTypes = {
+    onEmojiSelected: PropTypes.func.isRequired,
+    emojiIconRef: PropTypes.func,
+};
+
+const defaultProps = {
+    emojiIconRef: () => {},
+};
+
+const QuickEmojiReactions = props => (
     <View style={{
         gap: 12,
         flexDirection: 'row',
@@ -37,19 +47,23 @@ const QuickEmojiReactions = () => (
         {_.map(QUICK_REACTIONS, reaction => (
             <EmojiReactionBubble
                 key={reaction.name}
-                onPress={console.log}
                 emojiName={reaction.name}
-                emojiCodes={reaction.codes}
+                emojiCodes={[reaction.code]}
                 sizeScale={EMOJI_BUBBLE_SCALE}
+                onPress={() => {
+                    props.onEmojiSelected(reaction);
+                }}
             />
         ))}
         <AddReactionBubble
             iconSizeScale={1.2}
-            onSelectEmoji={console.log}
             sizeScale={EMOJI_BUBBLE_SCALE}
+            onSelectEmoji={props.onEmojiSelected}
         />
     </View>
 );
 
 QuickEmojiReactions.displayName = 'QuickEmojiReactions';
+QuickEmojiReactions.propTypes = propTypes;
+QuickEmojiReactions.defaultProps = defaultProps;
 export default QuickEmojiReactions;
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -39,8 +39,14 @@ const CONTEXT_MENU_TYPES = {
 export default [
     {
         shouldShow: () => true,
-        renderContent: (closePopup, {reportAction}) => (
-            <QuickEmojiReactions key="QuickEmojiReactions" />
+        renderContent: (closePopup, {reportID, reportAction}) => (
+            <QuickEmojiReactions
+                key="QuickEmojiReactions"
+                onEmojiSelected={(emoji) => {
+                    console.log('emoji selected', emoji);
+                    Report.addReaction(reportID, reportAction, emoji);
+                }}
+            />
         ),
     },
     {