Merge pull request #4444 from clegirar/chore/remove-reactions-front-f…

…eatures

js/e2e-tests/lib.js

@@ -37,9 +37,9 @@ const getCapabilitiesFromEnv = () => {
 				deviceName: process.env.IOS_DEVICE || 'iPhone 11',
 				app,
 				automationName: 'XCUITest', // UiAutomator2, Espresso, or UiAutomator1 for Android,
-				simulatorStartupTimeout: 10 * 60 * 1000,
-				wdaLaunchTimeout: 10 * 60 * 1000,
-				wdaConnectionTimeout: 10 * 60 * 1000,
+				simulatorStartupTimeout: 20 * 60 * 1000,
+				wdaLaunchTimeout: 20 * 60 * 1000,
+				wdaConnectionTimeout: 20 * 60 * 1000,
 			}
 		case 'Android':
 			return {

js/packages/components/chat/message/user-message/UserMessage.tsx

@@ -1,22 +1,16 @@
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
 import { View } from 'react-native'
 
 import beapi from '@berty/api'
-import { BottomModal } from '@berty/components/modals'
 import {
 	useAppSelector,
 	useInteractionAuthor,
 	useLastConvInteraction,
-	useMessengerClient,
-	usePlaySound,
 	useThemeColor,
 } from '@berty/hooks'
 import { selectInteraction } from '@berty/redux/reducers/messenger.reducer'
 import { InteractionUserMessage, ParsedInteraction } from '@berty/utils/api'
 
-import { EmojiKeyboard } from '../../modals/EmojiKeyboard.modal'
-import { MessageMenu } from '../../modals/MessageMenu.modal'
-import { Reactions } from '../reactions/Reactions'
 import { GestureHandler } from './GestureHandler'
 import { getUserMessageState } from './getUserMessageState'
 import { RepliedTo } from './RepliedTo'
@@ -53,13 +47,8 @@ export const UserMessage: React.FC<UserMessageProps> = ({
 		selectInteraction(state, inte.conversationPublicKey || '', inte.targetCid || ''),
 	)
 	const repliedTo = useInteractionAuthor(replyOf?.conversationPublicKey || '', replyOf?.cid || '')
-	const playSound = usePlaySound()
-	const client = useMessengerClient()
 	const colors = useThemeColor()
-	const [messageLayoutWidth, setMessageLayoutWidth] = useState(0)
 	const [highlightCid, setHighlightCid] = useState<string | undefined | null>()
-	const [isMenuVisible, setIsMenuVisible] = useState(false)
-	const [isEmojiVisible, setIsEmojiVisible] = useState(false)
 
 	const {
 		name,
@@ -73,28 +62,6 @@ export const UserMessage: React.FC<UserMessageProps> = ({
 		cmd,
 	} = getUserMessageState(inte, members, convKind, previousMessage, nextMessage, colors)
 
-	const handleSelectEmoji = useCallback(
-		(emoji: string, remove: boolean = false) => {
-			client
-				?.interact({
-					conversationPublicKey: convPK,
-					type: beapi.messenger.AppMessage.Type.TypeUserReaction,
-					payload: beapi.messenger.AppMessage.UserReaction.encode({
-						emoji,
-						state: !remove,
-					}).finish(),
-					targetCid: inte?.cid,
-				})
-				.then(() => {
-					playSound('messageSent')
-				})
-				.catch((e: unknown) => {
-					console.warn('e sending message:', e)
-				})
-		},
-		[client, convPK, playSound, inte?.cid],
-	)
-
 	return (
 		<UserMessageWrapper
 			inte={inte}
@@ -134,8 +101,6 @@ export const UserMessage: React.FC<UserMessageProps> = ({
 					<GestureHandler
 						convPK={convPK}
 						inte={inte}
-						setIsMenuVisible={setIsMenuVisible}
-						setMessageLayoutWidth={setMessageLayoutWidth}
 						highlightCid={highlightCid}
 						isFollowedMessage={isFollowedMessage}
 						previousMessage={previousMessage}
@@ -144,14 +109,6 @@ export const UserMessage: React.FC<UserMessageProps> = ({
 						msgTextColor={msgTextColor}
 						msgBorderColor={msgBorderColor || undefined}
 					/>
-					{!!messageLayoutWidth && (
-						<Reactions
-							convPk={convPK}
-							cid={inte.cid!}
-							onEmojiKeyboard={() => setIsEmojiVisible(true)}
-							onPressEmoji={handleSelectEmoji}
-						/>
-					)}
 				</View>
 				{!isWithinCollapseDuration && (
 					<TimestampStatus
@@ -162,27 +119,6 @@ export const UserMessage: React.FC<UserMessageProps> = ({
 					/>
 				)}
 			</View>
-			<BottomModal isVisible={isMenuVisible} setIsVisible={setIsMenuVisible}>
-				<MessageMenu
-					convPk={convPK}
-					cid={inte.cid!}
-					onSelectEmoji={handleSelectEmoji}
-					replyInteraction={{
-						...inte,
-						backgroundColor: msgBackgroundColor,
-						textColor: msgTextColor,
-					}}
-					hide={() => setIsMenuVisible(false)}
-				/>
-			</BottomModal>
-			<BottomModal isVisible={isEmojiVisible} setIsVisible={setIsEmojiVisible}>
-				<EmojiKeyboard
-					conversationPublicKey={convPK}
-					targetCid={inte.cid!}
-					hide={() => setIsEmojiVisible(false)}
-					showBoard={isEmojiVisible}
-				/>
-			</BottomModal>
 		</UserMessageWrapper>
 	)
 }

js/packages/components/chat/message/user-message/interfaces.ts

@@ -2,8 +2,6 @@ import { InteractionUserMessage, ParsedInteraction } from '@berty/utils/api'
 
 export interface UserMessageBoxProps {
 	inte: InteractionUserMessage
-	setMessageLayoutWidth: (value: number) => void
-	setIsMenuVisible: (value: boolean) => void
 	highlightCid: string | null | undefined
 	isFollowedMessage: boolean | undefined
 	previousMessage?: ParsedInteraction

js/packages/components/chat/message/user-message/user-message-box/UserMessageBox.tsx

@@ -1,13 +1,11 @@
-import React, { useCallback } from 'react'
-import { TouchableOpacity } from 'react-native'
+import React from 'react'
+import { View } from 'react-native'
 
 import { UserMessageBoxProps } from '../interfaces'
 import { HyperlinkUserMessage } from './HyperlinkUserMessage'
 
 export const UserMessageBox: React.FC<UserMessageBoxProps> = ({
 	inte,
-	setMessageLayoutWidth,
-	setIsMenuVisible,
 	highlightCid,
 	isFollowedMessage,
 	msgBorderColor,
@@ -16,21 +14,8 @@ export const UserMessageBox: React.FC<UserMessageBoxProps> = ({
 }) => {
 	const isHighlight = highlightCid === inte.cid
 
-	const togglePopover = useCallback(() => {
-		if (inte.isMine) {
-			return
-		}
-		setIsMenuVisible(true)
-	}, [setIsMenuVisible, inte.isMine])
-
 	return (
-		<TouchableOpacity
-			onLayout={event => setMessageLayoutWidth(event.nativeEvent.layout.width)}
-			disabled={inte.isMine}
-			activeOpacity={0.9}
-			onLongPress={togglePopover}
-			style={{ marginBottom: inte?.reactions?.length ? 10 : 0 }}
-		>
+		<View style={{ marginBottom: inte?.reactions?.length ? 10 : 0 }}>
 			<HyperlinkUserMessage
 				inte={inte}
 				msgBorderColor={msgBorderColor}
@@ -39,6 +24,6 @@ export const UserMessageBox: React.FC<UserMessageBoxProps> = ({
 				msgTextColor={msgTextColor}
 				isHighlight={isHighlight}
 			/>
-		</TouchableOpacity>
+		</View>
 	)
 }