feat(lib): add emojis (#130)

lib/src/entities/message.ts

@@ -102,8 +102,8 @@ export class Message {
 
   /** @internal */
   private clone(params: Partial<MessageFields>) {
-    const { timetoken, content, channelId, userId, actions } = this
-    const data = Object.assign({}, { timetoken, content, channelId, userId, actions }, params)
+    const { timetoken, content, channelId, userId, actions, meta } = this
+    const data = Object.assign({}, { timetoken, content, channelId, userId, actions, meta }, params)
     return new Message(this.chat, data)
   }
 

samples/react-native-group-chat/components/actions-menu/ActionsMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from "react"
-import { StyleSheet, View } from "react-native"
+import { StyleSheet, TouchableOpacity, View } from "react-native"
 import { BottomSheetModal, BottomSheetBackdrop } from "@gorhom/bottom-sheet"
 import { Gap, Text, colorPalette as colors, Button } from "../../ui-components"
 import Emoji1 from "../../assets/emojis/emoji1.svg"
@@ -8,22 +8,24 @@ import Emoji3 from "../../assets/emojis/emoji3.svg"
 import Emoji4 from "../../assets/emojis/emoji4.svg"
 import Emoji5 from "../../assets/emojis/emoji5.svg"
 import Emoji6 from "../../assets/emojis/emoji6.svg"
-import Emoji7 from "../../assets/emojis/emoji7.svg"
 import { useNavigation } from "@react-navigation/native"
 import { EnhancedIMessage } from "../../utils"
 import { HomeStackNavigation } from "../../types"
 import { Message, ThreadMessage } from "@pubnub/chat"
+import * as Clipboard from "expo-clipboard"
 
 type UseActionsMenuParams = {
   onQuote: (message: Message) => void
   removeThreadReply?: boolean
   onPinMessage: (message: Message | ThreadMessage) => void
+  onToggleEmoji: (message: Message) => void
 }
 
 export function useActionsMenu({
   onQuote,
   removeThreadReply = false,
   onPinMessage,
+  onToggleEmoji,
 }: UseActionsMenuParams) {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null)
   const navigation = useNavigation<HomeStackNavigation>()
@@ -43,6 +45,17 @@ export function useActionsMenu({
     console.log("handleSheetChanges", index)
   }, [])
 
+  const handleEmoji = useCallback(
+    async (emoji: string) => {
+      if (!currentlyFocusedMessage) {
+        return null
+      }
+
+      onToggleEmoji(await currentlyFocusedMessage.originalPnMessage.toggleReaction(emoji))
+    },
+    [currentlyFocusedMessage, onToggleEmoji]
+  )
+
   const ActionsMenuComponent = () => (
     <BottomSheetModal
       ref={bottomSheetModalRef}
@@ -54,13 +67,24 @@ export function useActionsMenu({
       handleIndicatorStyle={[styles.handleIndicator, { backgroundColor: colors.neutral500 }]}
     >
       <View style={styles.emojisRow}>
-        <Emoji1 width={48} height={48} />
-        <Emoji2 width={48} height={48} />
-        <Emoji3 width={48} height={48} />
-        <Emoji4 width={48} height={48} />
-        <Emoji5 width={48} height={48} />
-        <Emoji6 width={48} height={48} />
-        <Emoji7 width={48} height={48} />
+        <TouchableOpacity onPress={() => handleEmoji("🙂")}>
+          <Emoji1 width={48} height={48} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handleEmoji("☺️")}>
+          <Emoji2 width={48} height={48} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handleEmoji("👍")}>
+          <Emoji3 width={48} height={48} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handleEmoji("🎉")}>
+          <Emoji4 width={48} height={48} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handleEmoji("👋")}>
+          <Emoji5 width={48} height={48} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handleEmoji("😞")}>
+          <Emoji6 width={48} height={48} />
+        </TouchableOpacity>
       </View>
       <Gap value={12} />
       <Text variant="headline" textAlign="center">
@@ -72,7 +96,11 @@ export function useActionsMenu({
         align="left"
         icon="content-copy"
         variant="outlined"
-        onPress={() => console.log("Pressed")}
+        onPress={() => {
+          Clipboard.setStringAsync(currentlyFocusedMessage?.originalPnMessage.text || "")
+          setCurrentlyFocusedMessage(null)
+          bottomSheetModalRef.current?.dismiss()
+        }}
       >
         Copy message
       </Button>

samples/react-native-group-chat/components/message-text/MessageText.tsx

@@ -33,6 +33,20 @@ export function MessageText({ onGoToMessage, messageProps }: MessageTextProps) {
     navigation.navigate("Chat")
   }
 
+  const renderEmojis = useCallback(() => {
+    if (!messageProps.currentMessage?.originalPnMessage.reactions) {
+      return null
+    }
+
+    return (
+      <View style={{ flexDirection: "row", position: "absolute", right: 0, bottom: -20 }}>
+        {Object.keys(messageProps.currentMessage?.originalPnMessage.reactions).map((key, index) => (
+          <Text key={String(index)}>{key}</Text>
+        ))}
+      </View>
+    )
+  }, [messageProps.currentMessage?.originalPnMessage.reactions])
+
   const renderMessagePart = useCallback(
     (messagePart: MixedTextTypedElement, index: number, userId: string | number) => {
       // TODO make it look nice
@@ -103,9 +117,6 @@ export function MessageText({ onGoToMessage, messageProps }: MessageTextProps) {
         {messageProps.currentMessage?.originalPnMessage.quotedMessage ? (
           <Quote
             message={messageProps.currentMessage?.originalPnMessage.quotedMessage}
-            // onGoToMessage={() => {
-            //   scrollToMessage(props.currentMessage?.originalPnMessage.quotedMessage)
-            // }}
             onGoToMessage={() =>
               onGoToMessage(messageProps.currentMessage?.originalPnMessage.quotedMessage)
             }
@@ -123,6 +134,7 @@ export function MessageText({ onGoToMessage, messageProps }: MessageTextProps) {
               )
             )}
         </Text>
+        {renderEmojis()}
       </View>
     )
   }

samples/react-native-group-chat/package.json

@@ -18,6 +18,7 @@
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",
     "expo": "~49.0.8",
+    "expo-clipboard": "~4.3.1",
     "expo-font": "~11.4.0",
     "expo-status-bar": "~1.6.0",
     "nanoid": "4.0.2",

samples/react-native-group-chat/screens/ordinary/chat/Chat.tsx

@@ -69,9 +69,30 @@ export function ChatScreen({}: StackScreenProps<HomeStackParamList, "Chat">) {
     [chat, currentChannel, setCurrentChannel]
   )
 
+  const handleEmoji = useCallback(
+    (message: Message) => {
+      console.log("message", message)
+      const copiedMessages = [...giftedChatMappedMessages]
+
+      const index = copiedMessages.findIndex(
+        (msg) => msg.originalPnMessage.timetoken === message.timetoken
+      )
+
+      if (index === -1) {
+        return
+      }
+
+      copiedMessages[index].originalPnMessage = message
+
+      setGiftedChatMappedMessages(copiedMessages)
+    },
+    [giftedChatMappedMessages]
+  )
+
   const { ActionsMenuComponent, handlePresentModalPress } = useActionsMenu({
     onQuote: handleQuote,
     onPinMessage: handlePin,
+    onToggleEmoji: handleEmoji,
   })
 
   useEffect(() => {

yarn.lock

@@ -5924,6 +5924,11 @@ expo-asset@~8.10.1:
     path-browserify "^1.0.0"
     url-parse "^1.5.9"
 
+expo-clipboard@~4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/expo-clipboard/-/expo-clipboard-4.3.1.tgz#ce6ed35ae31c7fc1aeadb005b8eb9b39a8bb9b40"
+  integrity sha512-WIsjvAsr2+/NZRa84mKxjui1EdPpdKbQIC2LN/KMBNuT7g4GQYL3oo9WO9G/C7doKQ7f7pnfdvO3N6fUnoRoJw==
+
 expo-constants@~14.4.2:
   version "14.4.2"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.4.2.tgz#cac5e8b524069545739b8d8595ce96cc5be6578c"