diff --git a/lib/src/entities/message.ts b/lib/src/entities/message.ts index c9ea8c6..e97c64c 100644 --- a/lib/src/entities/message.ts +++ b/lib/src/entities/message.ts @@ -102,8 +102,8 @@ export class Message { /** @internal */ private clone(params: Partial) { - 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) } diff --git a/samples/react-native-group-chat/components/actions-menu/ActionsMenu.tsx b/samples/react-native-group-chat/components/actions-menu/ActionsMenu.tsx index 51f5a8c..e5fb8ac 100644 --- a/samples/react-native-group-chat/components/actions-menu/ActionsMenu.tsx +++ b/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(null) const navigation = useNavigation() @@ -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 = () => ( - - - - - - - + handleEmoji("πŸ™‚")}> + + + handleEmoji("☺️")}> + + + handleEmoji("πŸ‘")}> + + + handleEmoji("πŸŽ‰")}> + + + handleEmoji("πŸ‘‹")}> + + + handleEmoji("😞")}> + + @@ -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 diff --git a/samples/react-native-group-chat/components/message-text/MessageText.tsx b/samples/react-native-group-chat/components/message-text/MessageText.tsx index c179442..5195a65 100644 --- a/samples/react-native-group-chat/components/message-text/MessageText.tsx +++ b/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 ( + + {Object.keys(messageProps.currentMessage?.originalPnMessage.reactions).map((key, index) => ( + {key} + ))} + + ) + }, [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 ? ( { - // scrollToMessage(props.currentMessage?.originalPnMessage.quotedMessage) - // }} onGoToMessage={() => onGoToMessage(messageProps.currentMessage?.originalPnMessage.quotedMessage) } @@ -123,6 +134,7 @@ export function MessageText({ onGoToMessage, messageProps }: MessageTextProps) { ) )} + {renderEmojis()} ) } diff --git a/samples/react-native-group-chat/package.json b/samples/react-native-group-chat/package.json index ef502a0..e881d3d 100644 --- a/samples/react-native-group-chat/package.json +++ b/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", diff --git a/samples/react-native-group-chat/screens/ordinary/chat/Chat.tsx b/samples/react-native-group-chat/screens/ordinary/chat/Chat.tsx index 4df4100..0533627 100644 --- a/samples/react-native-group-chat/screens/ordinary/chat/Chat.tsx +++ b/samples/react-native-group-chat/screens/ordinary/chat/Chat.tsx @@ -69,9 +69,30 @@ export function ChatScreen({}: StackScreenProps) { [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(() => { diff --git a/yarn.lock b/yarn.lock index 4d3e1ac..0e07200 100644 --- a/yarn.lock +++ b/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"