From 537cd0032e2bf326d1d44e6f09a12480baae9072 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 25 Nov 2022 14:52:03 -0300
Subject: [PATCH] Fix message update

---
 app/containers/message/Attachments.tsx        |  6 +-
 .../Components/CollapsibleQuote/index.tsx     |  4 +-
 app/containers/message/Emoji.tsx              |  2 +-
 app/containers/message/Reactions.tsx          |  5 +-
 app/containers/message/Reply.tsx              |  4 +-
 app/containers/message/Urls.tsx               |  2 +-
 app/containers/message/index.tsx              | 34 ++++---
 app/views/RoomView/List/index.tsx             | 90 +++++++++++++------
 8 files changed, 94 insertions(+), 53 deletions(-)

diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx
index 8731d1505..de92b0c5e 100644
--- a/app/containers/message/Attachments.tsx
+++ b/app/containers/message/Attachments.tsx
@@ -68,7 +68,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
 			if (file && file.image_url) {
 				return (
 					<Image
-						key={file.image_url}
+						key={index}
 						file={file}
 						showAttachment={showAttachment}
 						getCustomEmoji={getCustomEmoji}
@@ -81,7 +81,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
 			if (file && file.audio_url) {
 				return (
 					<Audio
-						key={file.audio_url}
+						key={index}
 						file={file}
 						getCustomEmoji={getCustomEmoji}
 						isReply={isReply}
@@ -95,7 +95,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
 			if (file.video_url) {
 				return (
 					<Video
-						key={file.video_url}
+						key={index}
 						file={file}
 						showAttachment={showAttachment}
 						getCustomEmoji={getCustomEmoji}
diff --git a/app/containers/message/Components/CollapsibleQuote/index.tsx b/app/containers/message/Components/CollapsibleQuote/index.tsx
index c2e4103d3..d0502bf01 100644
--- a/app/containers/message/Components/CollapsibleQuote/index.tsx
+++ b/app/containers/message/Components/CollapsibleQuote/index.tsx
@@ -90,8 +90,8 @@ const Fields = React.memo(
 
 		return (
 			<>
-				{attachment.fields.map(field => (
-					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
+				{attachment.fields.map((field, index) => (
+					<View key={index} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
 						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>
 							{field.title}
 						</Text>
diff --git a/app/containers/message/Emoji.tsx b/app/containers/message/Emoji.tsx
index c5e1c8637..ceceb6d54 100644
--- a/app/containers/message/Emoji.tsx
+++ b/app/containers/message/Emoji.tsx
@@ -10,7 +10,7 @@ const Emoji = React.memo(
 		const parsedContent = content.replace(/^:|:$/g, '');
 		const emoji = getCustomEmoji(parsedContent);
 		if (emoji) {
-			return <CustomEmoji key={content} style={customEmojiStyle} emoji={emoji} />;
+			return <CustomEmoji style={customEmojiStyle} emoji={emoji} />;
 		}
 		return <Text style={standardEmojiStyle}>{shortnameToUnicode(content)}</Text>;
 	},
diff --git a/app/containers/message/Reactions.tsx b/app/containers/message/Reactions.tsx
index f817836b6..312e47e5b 100644
--- a/app/containers/message/Reactions.tsx
+++ b/app/containers/message/Reactions.tsx
@@ -53,7 +53,6 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 		<Touchable
 			onPress={() => onReactionPress(reaction.emoji)}
 			onLongPress={onReactionLongPress}
-			key={reaction.emoji}
 			testID={`message-reaction-${reaction.emoji}`}
 			style={[
 				styles.reactionButton,
@@ -83,8 +82,8 @@ const Reactions = React.memo(({ reactions, getCustomEmoji }: IMessageReactions)
 	}
 	return (
 		<View style={styles.reactionsContainer}>
-			{reactions.map(reaction => (
-				<Reaction key={reaction.emoji} reaction={reaction} getCustomEmoji={getCustomEmoji} theme={theme} />
+			{reactions.map((reaction, index) => (
+				<Reaction key={index} reaction={reaction} getCustomEmoji={getCustomEmoji} theme={theme} />
 			))}
 			<AddReaction theme={theme} />
 		</View>
diff --git a/app/containers/message/Reply.tsx b/app/containers/message/Reply.tsx
index f944f3cda..3de36fbdc 100644
--- a/app/containers/message/Reply.tsx
+++ b/app/containers/message/Reply.tsx
@@ -184,8 +184,8 @@ const Fields = React.memo(
 
 		return (
 			<View style={styles.fieldsContainer}>
-				{attachment.fields.map(field => (
-					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
+				{attachment.fields.map((field, index) => (
+					<View key={index} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
 						<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
 						<Markdown msg={field?.value || ''} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />
 					</View>
diff --git a/app/containers/message/Urls.tsx b/app/containers/message/Urls.tsx
index a8863cb85..5514427bb 100644
--- a/app/containers/message/Urls.tsx
+++ b/app/containers/message/Urls.tsx
@@ -141,7 +141,7 @@ const Urls = React.memo(
 			return null;
 		}
 
-		return urls.map((url: IUrl, index: number) => <Url url={url} key={url.url} index={index} theme={theme} />);
+		return urls.map((url: IUrl, index: number) => <Url url={url} key={index} index={index} theme={theme} />);
 	},
 	(oldProps, newProps) => dequal(oldProps.urls, newProps.urls)
 );
diff --git a/app/containers/message/index.tsx b/app/containers/message/index.tsx
index 9e441d3d3..708d8efd2 100644
--- a/app/containers/message/index.tsx
+++ b/app/containers/message/index.tsx
@@ -81,15 +81,21 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 
 	private subscription?: Subscription;
 
-	componentDidMount() {
-		const { item } = this.props;
-		if (item && item.observe) {
-			const observable = item.observe();
-			this.subscription = observable.subscribe(() => {
-				this.forceUpdate();
-			});
-		}
-	}
+	// componentDidMount() {
+	// 	const { item } = this.props;
+	// 	console.log(`did mount ${item.id}`);
+	// 	let isFirstRender = true;
+	// 	if (item && item.observe) {
+	// 		const observable = item.observe();
+	// 		this.subscription = observable.subscribe(msg => {
+	// 			// console.log('🚀 ~ file: index.tsx ~ line 90 ~ MessageContainer ~ componentDidMount ~ msg', msg);
+	// 			if (!isFirstRender) {
+	// 				this.forceUpdate();
+	// 			}
+	// 			isFirstRender = false;
+	// 		});
+	// 	}
+	// }
 
 	// shouldComponentUpdate(nextProps: IMessageContainerProps, nextState: IMessageContainerState) {
 	// 	const { isManualUnignored } = this.state;
@@ -112,11 +118,11 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 	// 	return false;
 	// }
 
-	componentWillUnmount() {
-		if (this.subscription && this.subscription.unsubscribe) {
-			this.subscription.unsubscribe();
-		}
-	}
+	// componentWillUnmount() {
+	// 	if (this.subscription && this.subscription.unsubscribe) {
+	// 		this.subscription.unsubscribe();
+	// 	}
+	// }
 
 	onPressAction = () => {
 		const { closeEmojiAndAction } = this.props;
diff --git a/app/views/RoomView/List/index.tsx b/app/views/RoomView/List/index.tsx
index 78183449b..259339cca 100644
--- a/app/views/RoomView/List/index.tsx
+++ b/app/views/RoomView/List/index.tsx
@@ -97,29 +97,29 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 		console.timeEnd(`${this.constructor.name} mount`);
 	}
 
-	shouldComponentUpdate(nextProps: IListContainerProps, nextState: IListContainerState) {
-		const { refreshing, highlightedMessage } = this.state;
-		const { hideSystemMessages, tunread, ignored, loading } = this.props;
-		if (loading !== nextProps.loading) {
-			return true;
-		}
-		if (highlightedMessage !== nextState.highlightedMessage) {
-			return true;
-		}
-		if (refreshing !== nextState.refreshing) {
-			return true;
-		}
-		if (!dequal(hideSystemMessages, nextProps.hideSystemMessages)) {
-			return true;
-		}
-		if (!dequal(tunread, nextProps.tunread)) {
-			return true;
-		}
-		if (!dequal(ignored, nextProps.ignored)) {
-			return true;
-		}
-		return false;
-	}
+	// shouldComponentUpdate(nextProps: IListContainerProps, nextState: IListContainerState) {
+	// 	const { refreshing, highlightedMessage } = this.state;
+	// 	const { hideSystemMessages, tunread, ignored, loading } = this.props;
+	// 	if (loading !== nextProps.loading) {
+	// 		return true;
+	// 	}
+	// 	if (highlightedMessage !== nextState.highlightedMessage) {
+	// 		return true;
+	// 	}
+	// 	if (refreshing !== nextState.refreshing) {
+	// 		return true;
+	// 	}
+	// 	if (!dequal(hideSystemMessages, nextProps.hideSystemMessages)) {
+	// 		return true;
+	// 	}
+	// 	if (!dequal(tunread, nextProps.tunread)) {
+	// 		return true;
+	// 	}
+	// 	if (!dequal(ignored, nextProps.ignored)) {
+	// 		return true;
+	// 	}
+	// 	return false;
+	// }
 
 	componentDidUpdate(prevProps: IListContainerProps) {
 		const { hideSystemMessages } = this.props;
@@ -165,7 +165,7 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 			this.messagesObservable = db
 				.get('thread_messages')
 				.query(Q.where('rid', tmid), Q.experimentalSortBy('ts', Q.desc), Q.experimentalSkip(0), Q.experimentalTake(this.count))
-				.observe();
+				.observeWithColumns(['_updated_at']);
 		} else if (rid) {
 			const whereClause = [
 				Q.where('rid', rid),
@@ -179,12 +179,44 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 			this.messagesObservable = db
 				.get('messages')
 				.query(...whereClause)
-				.observe();
+				.observeWithColumns(['_updated_at', 'status']);
 		}
 
 		if (rid) {
 			this.unsubscribeMessages();
 			this.messagesSubscription = this.messagesObservable?.subscribe(messages => {
+				// @ts-ignore is this enough cols?
+				messages = messages.map(m => ({
+					id: m.id,
+					msg: m.msg,
+					ts: m.ts,
+					status: m.status,
+					attachments: m.attachments,
+					urls: m.urls,
+					reactions: m.reactions,
+					t: m.t,
+					avatar: m.avatar,
+					emoji: m.emoji,
+					u: m.u,
+					alias: m.alias,
+					editedBy: m.editedBy,
+					role: m.role,
+					drid: m.drid,
+					dcount: m.dcount,
+					dlm: m.dlm,
+					tmid: m.tmid,
+					tcount: m.tcount,
+					tlm: m.tlm,
+					tmsg: m.tmsg,
+					mentions: m.mentions,
+					channels: m.channels,
+					unread: m.unread,
+					blocks: m.blocks,
+					autoTranslate: m.autoTranslate,
+					replies: m.replies,
+					md: m.md,
+					comment: m.comment
+				}));
 				if (tmid && this.thread) {
 					messages = [...messages, this.thread];
 				}
@@ -198,7 +230,11 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 				}
 
 				if (this.mounted) {
-					this.setState({ messages }, () => this.update());
+					// if (this.animated) {
+					// 	animateNextTransition();
+					// }
+					// this.setState({ messages }, () => this.update());
+					this.setState({ messages });
 				} else {
 					// @ts-ignore
 					this.state.messages = messages;
@@ -252,7 +288,7 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
 		if (this.animated) {
 			animateNextTransition();
 		}
-		this.forceUpdate();
+		// this.forceUpdate();
 	};
 
 	unsubscribeMessages = () => {