feat: reply and reaction feature

Signed-off-by: Sakul <sakulbudhathoki977@gmail.com>
berty · Apr 2, 2021 · d41db33 · d41db33
1 parent 2cec504
commit d41db33
Show file tree

Hide file tree

Showing 16 changed files with 849 additions and 225 deletions.
diff --git a/go/pkg/bertymessenger/api.go b/go/pkg/bertymessenger/api.go
@@ -1416,10 +1416,16 @@ func (svc *service) ConversationLoad(ctx context.Context, request *messengertype
 		if medias == nil {
 			medias = []*messengertypes.Media{}
 		}
+				ais := make([]*messengertypes.Interaction, len(interactions))
+				for i, inte := range interactions {
+					if ais[i], err = svc.db.getAugmentedInteraction(inte.CID); err != nil {
+						return nil, errcode.ErrDBRead.Wrap(err)
+					}
+				}
 
 		if err := svc.dispatcher.StreamEvent(messengertypes.StreamEvent_TypeConversationPartialLoad, &messengertypes.StreamEvent_ConversationPartialLoad{
 			ConversationPK: interactions[0].ConversationPublicKey,
-			Interactions:   interactions,
+			Interactions:   ais,
 			Medias:         medias,
 		}, false); err != nil {
 			svc.logger.Error("unable to bulk send conversation events", zap.Error(err))

diff --git a/go/pkg/bertymessenger/db.go b/go/pkg/bertymessenger/db.go
@@ -1425,3 +1425,17 @@ func (d *dbWrapper) setupVirtualTablesAndTriggers() error {
 
 	return nil
 }
+
+func (d *dbWrapper) getAugmentedInteraction(cid string) (*messengertypes.Interaction, error) {
+	inte, err := d.getInteractionByCID(cid)
+	if err != nil {
+		return nil, errcode.ErrDBRead.Wrap(err)
+	}
+
+	inte.Reactions, err = buildReactionsView(d, cid)
+	if err != nil {
+		return nil, errcode.ErrDBRead.Wrap(err)
+	}
+
+	return inte, nil
+}
diff --git a/go/pkg/bertymessenger/service.go b/go/pkg/bertymessenger/service.go
@@ -542,19 +542,14 @@ func (svc *service) sendAccountUserInfo(groupPK string) error {
 
 func (svc *service) streamInteraction(tx *dbWrapper, cid string, isNew bool) error {
 	if svc != nil && svc.dispatcher != nil {
-		eventInte, err := tx.getInteractionByCID(cid)
-		if err != nil {
-			return errcode.ErrDBRead.Wrap(err)
-		}
-
-		eventInte.Reactions, err = buildReactionsView(tx, cid)
+		interaction, err := tx.getAugmentedInteraction(cid)
 		if err != nil {
 			return errcode.ErrDBRead.Wrap(err)
 		}
 
 		if err := svc.dispatcher.StreamEvent(
 			mt.StreamEvent_TypeInteractionUpdated,
-			&mt.StreamEvent_InteractionUpdated{Interaction: eventInte},
+			&mt.StreamEvent_InteractionUpdated{Interaction: interaction},
 			isNew,
 		); err != nil {
 			return errcode.ErrMessengerStreamEvent.Wrap(err)

diff --git a/js/global.d.ts b/js/global.d.ts
@@ -9,6 +9,7 @@ declare module 'react-native-in-app-notification'
 declare module 'react-native-audiowaveform'
 declare module 'linkify-it'
 declare module 'react-native-flags'
+declare module 'react-native-emoji-board'
 
 declare module 'google-palette' {
 	const content: (type: string, count: number) => string[]

diff --git a/js/package.json b/js/package.json
diff --git a/js/packages/components/chat/MessageList.tsx b/js/packages/components/chat/MessageList.tsx
@@ -105,6 +105,12 @@ export const MessageList: React.FC<{
 						members={members || {}}
 						previousMessage={index < messages.length - 1 ? messages[index + 1] : undefined}
 						nextMessage={index > 0 ? messages[index - 1] : undefined}
+						replyOf={messages.find((message) => message.cid === item.targetCid)}
+						scrollToCid={(cid) => {
+							flatListRef?.current?.scrollToIndex({
+								index: messages.findIndex((message) => message.cid === cid),
+							})
+						}}
 					/>
 				</>
 			)

diff --git a/js/packages/components/chat/MultiMember.tsx b/js/packages/components/chat/MultiMember.tsx
@@ -3,6 +3,7 @@ import { TouchableOpacity, View, Platform } from 'react-native'
 import { Text, Icon } from '@ui-kitten/components'
 import { CommonActions } from '@react-navigation/native'
 import { useTranslation } from 'react-i18next'
+import EmojiBoard from 'react-native-emoji-board'
 
 import { KeyboardAvoidingView } from '@berty-tech/components/shared-components/KeyboardAvoidingView'
 import { useStyles } from '@berty-tech/styles'
@@ -12,6 +13,7 @@ import {
 	useLastConvInteraction,
 	useReadEffect,
 	useNotificationsInhibitor,
+	useMsgrContext,
 } from '@berty-tech/store/hooks'
 import beapi from '@berty-tech/api'
 
@@ -22,6 +24,7 @@ import { useLayout } from '../hooks'
 import { MultiMemberAvatar } from '../avatars'
 import { MessageList } from '@berty-tech/components/chat/MessageList'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ReplyReactionProvider } from './ReplyReactionContext'
 
 //
 // MultiMember
@@ -111,13 +114,13 @@ export const MultiMember: React.FC<ScreenProps.Chat.Group> = ({ route: { params
 		}
 		return false
 	})
-
-	const [inputIsFocused, setInputFocus] = useState(false)
 	const [{ background, flex }] = useStyles()
 	const { dispatch } = useNavigation()
 	useReadEffect(params.convId, 1000)
 	const conv = useConversation(params?.convId)
 	const { t } = useTranslation()
+	const ctx = useMsgrContext()
+	const insets = useSafeAreaInsets()
 
 	const lastInte = useLastConvInteraction(params?.convId || '')
 	const lastUpdate = conv?.lastUpdate || lastInte?.sentDate || conv?.createdDate || null
@@ -127,33 +130,69 @@ export const MultiMember: React.FC<ScreenProps.Chat.Group> = ({ route: { params
 	const [isSwipe, setSwipe] = useState(true)
 
 	return (
-		<View style={[flex.tiny, background.white]}>
-			<SwipeNavRecognizer
-				onSwipeLeft={() =>
-					isSwipe &&
-					dispatch(
-						CommonActions.navigate({
-							name: Routes.Chat.MultiMemberSettings,
-							params: { convId: params?.convId },
-						}),
-					)
-				}
-			>
-				<KeyboardAvoidingView
-					style={[flex.tiny]}
-					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-				>
-					<MessageList id={params?.convId} {...{ setStickyDate, setShowStickyDate }} />
-					<ChatFooter
-						convPk={params?.convId}
-						isFocused={inputIsFocused}
-						setFocus={setInputFocus}
-						placeholder={t('chat.multi-member.input-placeholder')}
-						setSwipe={setSwipe}
-					/>
-					<HeaderMultiMember id={params?.convId} {...({ stickyDate, showStickyDate } as any)} />
-				</KeyboardAvoidingView>
-			</SwipeNavRecognizer>
-		</View>
+		<ReplyReactionProvider>
+			{({ activeEmojiKeyboardCid, setActiveEmojiKeyboardCid, setActivePopoverCid }) => (
+				<View style={[flex.tiny, background.white]}>
+					<SwipeNavRecognizer
+						onSwipeLeft={() =>
+							isSwipe &&
+							dispatch(
+								CommonActions.navigate({
+									name: Routes.Chat.MultiMemberSettings,
+									params: { convId: params?.convId },
+								}),
+							)
+						}
+					>
+						<KeyboardAvoidingView
+							style={[flex.tiny]}
+							behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+						>
+							<MessageList id={params?.convId} {...{ setStickyDate, setShowStickyDate }} />
+							<ChatFooter
+								convPk={params?.convId}
+								placeholder={t('chat.multi-member.input-placeholder')}
+								setSwipe={setSwipe}
+							/>
+							<HeaderMultiMember id={params?.convId} {...({ stickyDate, showStickyDate } as any)} />
+						</KeyboardAvoidingView>
+					</SwipeNavRecognizer>
+					{!!activeEmojiKeyboardCid && (
+						<EmojiBoard
+							showBoard={true}
+							onClick={(emoji) => {
+								ctx.client
+									?.interact({
+										conversationPublicKey: conv?.publicKey,
+										type: beapi.messenger.AppMessage.Type.TypeUserReaction,
+										payload: beapi.messenger.AppMessage.UserReaction.encode({
+											emoji: `:${emoji.name}:`,
+											state: true,
+										}).finish(),
+										targetCid: activeEmojiKeyboardCid,
+									})
+									.then(() => {
+										ctx.playSound('messageSent')
+										setActivePopoverCid(null)
+										setActiveEmojiKeyboardCid(null)
+									})
+									.catch((e) => {
+										console.warn('e sending message:', e)
+									})
+							}}
+							onRemove={() => {
+								setActivePopoverCid(activeEmojiKeyboardCid)
+								setActiveEmojiKeyboardCid(null)
+							}}
+							containerStyle={{
+								position: 'absolute',
+								bottom: 0,
+								paddingBottom: insets.bottom,
+							}}
+						/>
+					)}
+				</View>
+			)}
+		</ReplyReactionProvider>
 	)
 }
diff --git a/js/packages/components/chat/OneToOne.tsx b/js/packages/components/chat/OneToOne.tsx
@@ -4,13 +4,15 @@ import { Icon, Text } from '@ui-kitten/components'
 import { CommonActions } from '@react-navigation/native'
 import { useTranslation } from 'react-i18next'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import EmojiBoard from 'react-native-emoji-board'
 
 import { KeyboardAvoidingView } from '@berty-tech/components/shared-components/KeyboardAvoidingView'
 import { useStyles } from '@berty-tech/styles'
 import { Routes, ScreenProps, useNavigation } from '@berty-tech/navigation'
 import beapi from '@berty-tech/api'
 import {
 	useContact,
+	useMsgrContext,
 	useConversation,
 	useReadEffect,
 	useNotificationsInhibitor,
@@ -22,6 +24,7 @@ import { useLayout } from '../hooks'
 import { ChatDate, ChatFooter } from './common'
 import { SwipeNavRecognizer } from '../shared-components/SwipeNavRecognizer'
 import { MessageList } from '@berty-tech/components/chat/MessageList'
+import { ReplyReactionProvider } from './ReplyReactionContext'
 
 //
 // Chat
@@ -131,13 +134,14 @@ export const OneToOne: React.FC<ScreenProps.Chat.OneToOne> = ({ route: { params
 		return false
 	})
 
-	const [inputIsFocused, setInputFocus] = useState(false)
+	const insets = useSafeAreaInsets()
 	const [{ flex, background }] = useStyles()
 	useReadEffect(params?.convId, 1000)
 	const { dispatch } = useNavigation()
 	const { t } = useTranslation()
 	const conv = useConversation(params?.convId)
 	const contact = useContact(conv?.contactPublicKey)
+	const ctx = useMsgrContext()
 
 	const isIncoming = contact?.state === beapi.messenger.Contact.State.IncomingRequest
 	const isFooterDisable = isIncoming
@@ -150,38 +154,76 @@ export const OneToOne: React.FC<ScreenProps.Chat.OneToOne> = ({ route: { params
 	const [isSwipe, setSwipe] = useState(true)
 
 	return (
-		<View style={[StyleSheet.absoluteFill, background.white, { flex: 1 }]}>
-			<SwipeNavRecognizer
-				onSwipeLeft={() =>
-					isSwipe &&
-					dispatch(
-						CommonActions.navigate({
-							name: Routes.Chat.OneToOneSettings,
-							params: { convId: params?.convId },
-						}),
-					)
-				}
-			>
-				<KeyboardAvoidingView
-					style={[flex.tiny, { justifyContent: 'flex-start' }]}
-					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-				>
-					<MessageList
-						id={params?.convId}
-						scrollToMessage={params?.scrollToMessage || '0'}
-						{...{ setStickyDate, setShowStickyDate }}
-					/>
-					<ChatFooter
-						convPk={params?.convId}
-						isFocused={inputIsFocused}
-						setFocus={setInputFocus}
-						disabled={isFooterDisable}
-						placeholder={placeholder}
-						setSwipe={setSwipe}
-					/>
-					<ChatHeader convPk={params?.convId || ''} {...{ stickyDate, showStickyDate }} />
-				</KeyboardAvoidingView>
-			</SwipeNavRecognizer>
-		</View>
+		<ReplyReactionProvider>
+			{({ activeEmojiKeyboardCid, setActiveEmojiKeyboardCid, setActivePopoverCid }) => (
+				<View style={[StyleSheet.absoluteFill, background.white, { flex: 1 }]}>
+					<SwipeNavRecognizer
+						onSwipeLeft={() =>
+							isSwipe &&
+							dispatch(
+								CommonActions.navigate({
+									name: Routes.Chat.OneToOneSettings,
+									params: { convId: params?.convId },
+								}),
+							)
+						}
+					>
+						<KeyboardAvoidingView
+							behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+							style={[flex.tiny, { justifyContent: 'flex-start' }]}
+						>
+							<MessageList
+								id={params?.convId}
+								scrollToMessage={params?.scrollToMessage || '0'}
+								{...{ setStickyDate, setShowStickyDate }}
+							/>
+
+							<ChatFooter
+								convPk={params?.convId}
+								disabled={isFooterDisable}
+								placeholder={placeholder}
+								setSwipe={setSwipe}
+							/>
+
+							<ChatHeader convPk={params?.convId || ''} {...{ stickyDate, showStickyDate }} />
+						</KeyboardAvoidingView>
+					</SwipeNavRecognizer>
+					{!!activeEmojiKeyboardCid && (
+						<EmojiBoard
+							showBoard={true}
+							onClick={(emoji) => {
+								ctx.client
+									?.interact({
+										conversationPublicKey: conv?.publicKey,
+										type: beapi.messenger.AppMessage.Type.TypeUserReaction,
+										payload: beapi.messenger.AppMessage.UserReaction.encode({
+											emoji: `:${emoji.name}:`,
+											state: true,
+										}).finish(),
+										targetCid: activeEmojiKeyboardCid,
+									})
+									.then(() => {
+										ctx.playSound('messageSent')
+										setActivePopoverCid(null)
+										setActiveEmojiKeyboardCid(null)
+									})
+									.catch((e) => {
+										console.warn('e sending message:', e)
+									})
+							}}
+							onRemove={() => {
+								setActivePopoverCid(activeEmojiKeyboardCid)
+								setActiveEmojiKeyboardCid(null)
+							}}
+							containerStyle={{
+								position: 'absolute',
+								bottom: 0,
+								paddingBottom: insets.bottom,
+							}}
+						/>
+					)}
+				</View>
+			)}
+		</ReplyReactionProvider>
 	)
 }