[FIX] Quote message and reply with image (#4715)

* send msg with attachment

* send quote inside image

* minor tweak

* remove msg from return

* fix the lint and prettier

* fix visual bug for iOS

* fixing the message box input

app/containers/MessageBox/index.tsx

@@ -302,7 +302,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		if (usedCannedResponse !== nextProps.usedCannedResponse) {
 			this.onChangeText(nextProps.usedCannedResponse ?? '');
 		}
-		if (sharing) {
+		if (sharing && !replying) {
 			this.setInput(nextProps.message.msg ?? '');
 			return;
 		}
@@ -857,14 +857,21 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	};
 
 	openShareView = (attachments: any) => {
-		const { message, replyCancel, replyWithMention } = this.props;
+		const { message, replyCancel, replyWithMention, replying } = this.props;
 		// Start a thread with an attachment
 		let value: TThreadModel | IMessage = this.thread;
 		if (replyWithMention) {
 			value = message;
 			replyCancel();
 		}
-		Navigation.navigate('ShareView', { room: this.room, thread: value, attachments });
+		Navigation.navigate('ShareView', {
+			room: this.room,
+			thread: value,
+			attachments,
+			replying,
+			replyingMessage: message,
+			closeReply: replyCancel
+		});
 	};
 
 	createDiscussion = () => {
@@ -1042,16 +1049,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 
 				// Legacy reply or quote (quote is a reply without mention)
 			} else {
-				const { user, roomType } = this.props;
-				const permalink = await this.getPermalink(replyingMessage);
-				let msg = `[ ](${permalink}) `;
-
-				// if original message wasn't sent by current user and neither from a direct room
-				if (user.username !== replyingMessage?.u?.username && roomType !== 'd' && replyWithMention) {
-					msg += `@${replyingMessage?.u?.username} `;
-				}
-
-				msg = `${msg} ${message}`;
+				const msg = await this.formatReplyMessage(replyingMessage, message);
 				onSubmit(msg);
 			}
 			replyCancel();
@@ -1063,6 +1061,19 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		}
 	};
 
+	formatReplyMessage = async (replyingMessage: IMessage, message = '') => {
+		const { user, roomType, replyWithMention } = this.props;
+		const permalink = await this.getPermalink(replyingMessage);
+		let msg = `[ ](${permalink}) `;
+
+		// if original message wasn't sent by current user and neither from a direct room
+		if (user.username !== replyingMessage?.u?.username && roomType !== 'd' && replyWithMention) {
+			msg += `@${replyingMessage?.u?.username} `;
+		}
+
+		return `${msg} ${message}`;
+	};
+
 	updateMentions = (keyword: any, type: string) => {
 		if (type === MENTIONS_TRACKING_TYPE_USERS) {
 			this.getUsers(keyword);

app/definitions/IMessage.ts

@@ -8,7 +8,15 @@ import { TThreadMessageModel } from './IThreadMessage';
 import { TThreadModel } from './IThread';
 import { IUrl, IUrlFromServer } from './IUrl';
 
-export type MessageType = 'jitsi_call_started' | 'discussion-created' | 'e2e' | 'load_more' | 'rm' | 'uj' | MessageTypeLoad | MessageTypesValues;
+export type MessageType =
+	| 'jitsi_call_started'
+	| 'discussion-created'
+	| 'e2e'
+	| 'load_more'
+	| 'rm'
+	| 'uj'
+	| MessageTypeLoad
+	| MessageTypesValues;
 
 export interface IUserMessage {
 	_id: string;

app/definitions/IUpload.ts

@@ -13,6 +13,7 @@ export interface IUpload {
 	progress?: number;
 	error?: boolean;
 	subscription?: { id: string };
+	msg?: string;
 }
 
 export type TUploadModel = IUpload & Model;

app/lib/methods/sendFileMessage.ts

@@ -100,6 +100,13 @@ export function sendFileMessage(
 				});
 			}
 
+			if (fileInfo.msg) {
+				formData.push({
+					name: 'msg',
+					data: fileInfo.msg
+				});
+			}
+
 			if (tmid) {
 				formData.push({
 					name: 'tmid',

app/stacks/types.ts

@@ -272,6 +272,9 @@ export type InsideStackParamList = {
 		text: string;
 		room: TSubscriptionModel;
 		thread: TThreadModel;
+		replying?: boolean;
+		replyingMessage?: IMessage;
+		closeReply?: Function;
 	};
 	ModalBlockView: {
 		data: any; // TODO: Change;

app/views/RoomView/index.tsx

@@ -174,18 +174,18 @@ interface IRoomViewState {
 	[key: string]: any;
 	joined: boolean;
 	room:
-		| TSubscriptionModel
-		| {
-				rid: string;
-				t: string;
-				name?: string;
-				fname?: string;
-				prid?: string;
-				joinCodeRequired?: boolean;
-				status?: string;
-				lastMessage?: ILastMessage;
-				sysMes?: boolean;
-				onHold?: boolean;
+	| TSubscriptionModel
+	| {
+		rid: string;
+		t: string;
+		name?: string;
+		fname?: string;
+		prid?: string;
+		joinCodeRequired?: boolean;
+		status?: string;
+		lastMessage?: ILastMessage;
+		sysMes?: boolean;
+		onHold?: boolean;
 		  };
 	roomUpdate: {
 		[K in TRoomUpdate]?: any;
@@ -1502,7 +1502,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		return (
 			<>
 				<MessageActions
-					ref={ref => (this.messageActions = ref)}
+					ref={ref => this.messageActions = ref}
 					tmid={this.tmid}
 					room={room}
 					user={user}
@@ -1512,7 +1512,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					onReactionPress={this.onReactionPress}
 					isReadOnly={readOnly}
 				/>
-				<MessageErrorActions ref={ref => (this.messageErrorActions = ref)} tmid={this.tmid} />
+				<MessageErrorActions ref={ref => this.messageErrorActions = ref} tmid={this.tmid} />
 			</>
 		);
 	};

app/views/ShareView/index.tsx

@@ -22,7 +22,15 @@ import Thumbs from './Thumbs';
 import Preview from './Preview';
 import Header from './Header';
 import styles from './styles';
-import { IApplicationState, IServer, IShareAttachment, IUser, TSubscriptionModel, TThreadModel } from '../../definitions';
+import {
+	IApplicationState,
+	IMessage,
+	IServer,
+	IShareAttachment,
+	IUser,
+	TSubscriptionModel,
+	TThreadModel
+} from '../../definitions';
 import { sendFileMessage, sendMessage } from '../../lib/methods';
 import { hasPermission, isAndroid, canUploadFile, isReadOnly, isBlocked } from '../../lib/methods/helpers';
 
@@ -50,11 +58,14 @@ interface IShareViewProps {
 	server: string;
 	FileUpload_MediaTypeWhiteList?: string;
 	FileUpload_MaxFileSize?: number;
+	replying?: boolean;
+	replyingMessage?: IMessage;
 }
 
 interface IMessageBoxShareView {
 	text: string;
 	forceUpdate(): void;
+	formatReplyMessage: (replyingMessage: IMessage, message?: any) => Promise<string>;
 }
 
 class ShareView extends Component<IShareViewProps, IShareViewState> {
@@ -62,6 +73,9 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 	private files: any[];
 	private isShareExtension: boolean;
 	private serverInfo: IServer;
+	private replying?: boolean;
+	private replyingMessage?: IMessage;
+	private closeReply?: Function;
 
 	constructor(props: IShareViewProps) {
 		super(props);
@@ -69,6 +83,9 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		this.files = props.route.params?.attachments ?? [];
 		this.isShareExtension = props.route.params?.isShareExtension;
 		this.serverInfo = props.route.params?.serverInfo ?? {};
+		this.replying = props.route.params?.replying;
+		this.replyingMessage = props.route.params?.replyingMessage;
+		this.closeReply = props.route.params?.closeReply;
 
 		this.state = {
 			selected: {} as IShareAttachment,
@@ -92,6 +109,12 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 
 	componentWillUnmount = () => {
 		console.countReset(`${this.constructor.name}.render calls`);
+		// close reply from the RoomView
+		setTimeout(() => {
+			if (this.closeReply) {
+				this.closeReply();
+			}
+		}, 300);
 	};
 
 	setHeader = () => {
@@ -214,6 +237,11 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 			navigation.pop();
 		}
 
+		let msg: string | undefined;
+		if (this.replying && this.replyingMessage) {
+			msg = await this.messagebox.current?.formatReplyMessage(this.replyingMessage);
+		}
+
 		try {
 			// Send attachment
 			if (attachments.length) {
@@ -228,7 +256,8 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 									size,
 									type,
 									path,
-									store: 'Uploads'
+									store: 'Uploads',
+									msg
 								},
 								thread?.id,
 								server,
@@ -313,11 +342,12 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 						roomType={room.t}
 						theme={theme}
 						onSubmit={this.send}
-						message={{ msg: selected?.description ?? '' }}
+						message={this.replyingMessage}
 						navigation={navigation}
 						isFocused={navigation.isFocused}
 						iOSScrollBehavior={NativeModules.KeyboardTrackingViewManager?.KeyboardTrackingScrollBehaviorNone}
 						isActionsEnabled={false}
+						replying={this.replying}
 					>
 						<Thumbs
 							attachments={attachments}