From f7d4f0d0bea9fd7bf25b753aff002a3aae5e7b3e Mon Sep 17 00:00:00 2001
From: GleidsonDaniel <gleidson10daniel@hotmail.com>
Date: Wed, 28 Feb 2024 17:13:36 -0300
Subject: [PATCH] feat: add message pinned icon

---
 .../message/Components/RightIcons/Pinned.tsx      | 15 +++++++++++++++
 .../message/Components/RightIcons/index.tsx       | 13 ++++++++-----
 app/containers/message/Message.tsx                |  1 +
 app/containers/message/index.tsx                  |  4 +++-
 app/containers/message/interfaces.ts              |  1 +
 5 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 app/containers/message/Components/RightIcons/Pinned.tsx

diff --git a/app/containers/message/Components/RightIcons/Pinned.tsx b/app/containers/message/Components/RightIcons/Pinned.tsx
new file mode 100644
index 000000000..b41fdf847
--- /dev/null
+++ b/app/containers/message/Components/RightIcons/Pinned.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { CustomIcon } from '../../../CustomIcon';
+import styles from '../../styles';
+import { useTheme } from '../../../../theme';
+
+const Pinned = React.memo(({ pinned }: { pinned?: boolean }) => {
+	const { colors } = useTheme();
+	if (pinned) {
+		return <CustomIcon name='pin' color={colors.auxiliaryTintColor} size={16} style={styles.rightIcons} />;
+	}
+	return null;
+});
+
+export default Pinned;
diff --git a/app/containers/message/Components/RightIcons/index.tsx b/app/containers/message/Components/RightIcons/index.tsx
index fb96aaaf5..d23506036 100644
--- a/app/containers/message/Components/RightIcons/index.tsx
+++ b/app/containers/message/Components/RightIcons/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import Encrypted from './Encrypted';
-import Edited from './Edited';
-import MessageError from './MessageError';
-import ReadReceipt from './ReadReceipt';
 import { MessageType } from '../../../../definitions';
+import Edited from './Edited';
+import Encrypted from './Encrypted';
+import MessageError from './MessageError';
+import Pinned from './Pinned';
+import ReadReceipt from './ReadReceipt';
 
 const styles = StyleSheet.create({
 	actionIcons: {
@@ -20,10 +21,12 @@ interface IRightIcons {
 	isReadReceiptEnabled?: boolean;
 	unread?: boolean;
 	hasError: boolean;
+	pinned?: boolean;
 }
 
-const RightIcons = ({ type, msg, isEdited, hasError, isReadReceiptEnabled, unread }: IRightIcons) => (
+const RightIcons = ({ type, msg, isEdited, hasError, isReadReceiptEnabled, unread, pinned }: IRightIcons): React.ReactElement => (
 	<View style={styles.actionIcons}>
+		<Pinned pinned={pinned} />
 		<Encrypted type={type} />
 		<Edited testID={`${msg}-edited`} isEdited={isEdited} />
 		<MessageError hasError={hasError} />
diff --git a/app/containers/message/Message.tsx b/app/containers/message/Message.tsx
index 74d264f7a..6cfe0f26d 100644
--- a/app/containers/message/Message.tsx
+++ b/app/containers/message/Message.tsx
@@ -117,6 +117,7 @@ const Message = React.memo((props: IMessage) => {
 						hasError={props.hasError}
 						isReadReceiptEnabled={props.isReadReceiptEnabled}
 						unread={props.unread}
+						pinned={props.pinned}
 					/>
 				) : null}
 			</View>
diff --git a/app/containers/message/index.tsx b/app/containers/message/index.tsx
index a0572d8d8..0024abebc 100644
--- a/app/containers/message/index.tsx
+++ b/app/containers/message/index.tsx
@@ -390,7 +390,8 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 			autoTranslate: autoTranslateMessage,
 			replies,
 			md,
-			comment
+			comment,
+			pinned
 		} = item;
 
 		let message = msg;
@@ -485,6 +486,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 					isTranslated={isTranslated}
 					isBeingEdited={isBeingEdited}
 					isPreview={isPreview}
+					pinned={pinned}
 				/>
 			</MessageContext.Provider>
 		);
diff --git a/app/containers/message/interfaces.ts b/app/containers/message/interfaces.ts
index c357b2eab..d536ef00d 100644
--- a/app/containers/message/interfaces.ts
+++ b/app/containers/message/interfaces.ts
@@ -64,6 +64,7 @@ export interface IMessageContent {
 	hasError: boolean;
 	isHeader: boolean;
 	isTranslated: boolean;
+	pinned?: boolean;
 }
 
 export interface IMessageEmoji {