From c21b00c5e5bd85ca7cfaac59b832dabd692ae02c Mon Sep 17 00:00:00 2001
From: prateek93a <prateek93a@gmail.com>
Date: Fri, 14 Feb 2020 22:35:29 +0530
Subject: [PATCH 1/4] implemented-announcements

---
 app/views/RoomView/index.js  | 66 +++++++++++++++++++++++++++++++++---
 app/views/RoomView/styles.js | 23 +++++++++++++
 2 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index df8b5dffe3..ecf5f5a33c 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, View, InteractionManager } from 'react-native';
+import { ScrollView, BorderlessButton } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
 import { SafeAreaView } from 'react-navigation';
+import Modal from 'react-native-modal';
 
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import moment from 'moment';
@@ -62,9 +64,11 @@ const stateAttrsUpdate = [
 	'loading',
 	'editing',
 	'replying',
-	'reacting'
+	'reacting',
+	'showAnnouncementModal',
+	'hasRoomChanged'
 ];
-const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout'];
+const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout', 'announcement'];
 
 class RoomView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => {
@@ -163,6 +167,7 @@ class RoomView extends React.Component {
 				rid: this.rid, t: this.t, name, fname
 			},
 			roomUpdate: {},
+			hasRoomChanged: false,
 			lastOpen: null,
 			reactionsModalVisible: false,
 			selectedMessage: selectedMessage || {},
@@ -173,7 +178,9 @@ class RoomView extends React.Component {
 			editing: false,
 			replying: !!selectedMessage,
 			replyWithMention: false,
-			reacting: false
+			reacting: false,
+			showAnnouncementModal: false,
+			announcement: null
 		};
 
 		if (room && room.observe) {
@@ -183,7 +190,13 @@ class RoomView extends React.Component {
 		}
 
 		this.beginAnimating = false;
-		this.didFocusListener = props.navigation.addListener('didFocus', () => this.beginAnimating = true);
+		this.didFocusListener = props.navigation.addListener('didFocus', () => {
+			this.beginAnimating = true;
+			const { hasRoomChanged } = this.state;
+			if (hasRoomChanged) {
+				this.setState({ hasRoomChanged: false });
+			}
+		});
 		this.messagebox = React.createRef();
 		this.list = React.createRef();
 		this.willBlurListener = props.navigation.addListener('willBlur', () => this.mounted = false);
@@ -406,6 +419,7 @@ class RoomView extends React.Component {
 				} else {
 					this.state.room = changes;
 					this.state.roomUpdate = roomUpdate;
+					this.state.hasRoomChanged = true;
 				}
 			});
 	}
@@ -789,6 +803,48 @@ class RoomView extends React.Component {
 		return message;
 	}
 
+	toggleAnnouncementModal = (showModal) => {
+		this.setState({ showAnnouncementModal: showModal });
+	}
+
+	renderAnnouncement = () => {
+		const { theme } = this.props;
+		const { room } = this.state;
+		if (room.announcement) {
+			return (
+				<View style={[styles.announcementTextContainer, { backgroundColor: themes[theme].bannerBackground }]} key='room-user-status' testID='room-user-status'>
+					<BorderlessButton onPress={() => this.toggleAnnouncementModal(true)}>
+						<Text style={[styles.announcementText, { color: themes[theme].actionTintColor }]} ellipsizeMode='tail' numberOfLines={1}>{room.announcement}</Text>
+					</BorderlessButton>
+				</View>
+			);
+		} else {
+			return null;
+		}
+	}
+
+	renderAnnouncementModal = () => {
+		const { room, showAnnouncementModal } = this.state;
+		const { theme } = this.props;
+		return (
+			<Modal
+				onBackdropPress={() => this.toggleAnnouncementModal(false)}
+				onBackButtonPress={() => this.toggleAnnouncementModal(false)}
+				useNativeDriver
+				isVisible={showAnnouncementModal}
+				animationIn='fadeIn'
+				animationOut='fadeOut'
+			>
+				<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
+					<Text style={[styles.announcementTitle, { color: themes[theme].auxiliaryText }]}>{I18n.t('Announcement')}</Text>
+					<ScrollView style={styles.modalScrollView}>
+						<Text style={[styles.announcementText, { color: themes[theme].bodyText }]}>{room.announcement}</Text>
+					</ScrollView>
+				</View>
+			</Modal>
+		);
+	}
+
 	renderFooter = () => {
 		const {
 			joined, room, selectedMessage, editing, replying, replyWithMention
@@ -906,6 +962,7 @@ class RoomView extends React.Component {
 				forceInset={{ vertical: 'never' }}
 			>
 				<StatusBar theme={theme} />
+				{this.renderAnnouncement()}
 				<List
 					ref={this.list}
 					listRef={this.setListRef}
@@ -918,6 +975,7 @@ class RoomView extends React.Component {
 					loading={loading}
 					animated={this.beginAnimating}
 				/>
+				{this.renderAnnouncementModal()}
 				{this.renderFooter()}
 				{this.renderActions()}
 				<ReactionPicker
diff --git a/app/views/RoomView/styles.js b/app/views/RoomView/styles.js
index 9f011413eb..837758de26 100644
--- a/app/views/RoomView/styles.js
+++ b/app/views/RoomView/styles.js
@@ -25,6 +25,29 @@ export default StyleSheet.create({
 		flexDirection: 'column',
 		overflow: 'hidden'
 	},
+	announcementTextContainer: {
+		padding: 18,
+		alignItems: 'center'
+	},
+	announcementTitle: {
+		fontSize: 16,
+		...sharedStyles.textMedium
+	},
+	announcementText: {
+		fontSize: 16,
+		...sharedStyles.textRegular
+	},
+	modalView: {
+		padding: 20,
+		justifyContent: 'center'
+	},
+	modalScrollView: {
+		maxHeight: 100,
+		marginVertical: 20
+	},
+	modalCloseButton: {
+		alignSelf: 'flex-end'
+	},
 	joinRoomContainer: {
 		justifyContent: 'flex-end',
 		alignItems: 'center',

From 389dfcc3bd0e51db1e14b7b035a49899ccb30090 Mon Sep 17 00:00:00 2001
From: prateek93a <prateek93a@gmail.com>
Date: Sat, 15 Feb 2020 10:13:00 +0530
Subject: [PATCH 2/4] make-links-clickable

---
 app/views/RoomView/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index ecf5f5a33c..03cd5cfcfc 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -53,6 +53,7 @@ import { Review } from '../../utils/review';
 import RoomClass from '../../lib/methods/subscriptions/room';
 import { getUserSelector } from '../../selectors/login';
 import { CONTAINER_TYPES } from '../../lib/methods/actions';
+import Markdown from '../../containers/markdown';
 
 const stateAttrsUpdate = [
 	'joined',
@@ -838,7 +839,11 @@ class RoomView extends React.Component {
 				<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
 					<Text style={[styles.announcementTitle, { color: themes[theme].auxiliaryText }]}>{I18n.t('Announcement')}</Text>
 					<ScrollView style={styles.modalScrollView}>
-						<Text style={[styles.announcementText, { color: themes[theme].bodyText }]}>{room.announcement}</Text>
+						<Markdown
+							useMarkdown
+							msg={room.announcement}
+							theme={theme}
+						/>
 					</ScrollView>
 				</View>
 			</Modal>

From 27c26ef5916f530347dad9fd47058a3a85945ded Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 20 Feb 2020 16:05:41 -0300
Subject: [PATCH 3/4] Fix announcement render

---
 app/views/RoomView/index.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index 10c28c5f28..a52712e240 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -66,8 +66,7 @@ const stateAttrsUpdate = [
 	'editing',
 	'replying',
 	'reacting',
-	'showAnnouncementModal',
-	'hasRoomChanged'
+	'showAnnouncementModal'
 ];
 const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout', 'announcement'];
 
@@ -168,7 +167,6 @@ class RoomView extends React.Component {
 				rid: this.rid, t: this.t, name, fname
 			},
 			roomUpdate: {},
-			hasRoomChanged: false,
 			lastOpen: null,
 			reactionsModalVisible: false,
 			selectedMessage: selectedMessage || {},
@@ -190,15 +188,8 @@ class RoomView extends React.Component {
 			this.findAndObserveRoom(this.rid);
 		}
 
-		this.didFocusListener = props.navigation.addListener('didFocus', () => {
-			const { hasRoomChanged } = this.state;
-			if (hasRoomChanged) {
-				this.setState({ hasRoomChanged: false });
-			}
-		});
 		this.messagebox = React.createRef();
 		this.list = React.createRef();
-		this.willBlurListener = props.navigation.addListener('willBlur', () => this.mounted = false);
 		this.mounted = false;
 		this.sub = new RoomClass(this.rid);
 		console.timeEnd(`${ this.constructor.name } init`);
@@ -414,7 +405,6 @@ class RoomView extends React.Component {
 				} else {
 					this.state.room = changes;
 					this.state.roomUpdate = roomUpdate;
-					this.state.hasRoomChanged = true;
 				}
 			});
 	}

From db1734f001f53ffcfb33c932a53b71d4549770ae Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 20 Feb 2020 16:13:54 -0300
Subject: [PATCH 4/4] Layout improvements

---
 app/views/RoomView/index.js  | 14 +++++++++-----
 app/views/RoomView/styles.js |  7 ++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index a52712e240..dacdbd39fe 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -797,11 +797,15 @@ class RoomView extends React.Component {
 		const { room } = this.state;
 		if (room.announcement) {
 			return (
-				<View style={[styles.announcementTextContainer, { backgroundColor: themes[theme].bannerBackground }]} key='room-user-status' testID='room-user-status'>
-					<BorderlessButton onPress={() => this.toggleAnnouncementModal(true)}>
-						<Text style={[styles.announcementText, { color: themes[theme].actionTintColor }]} ellipsizeMode='tail' numberOfLines={1}>{room.announcement}</Text>
-					</BorderlessButton>
-				</View>
+				<BorderlessButton style={[styles.announcementTextContainer, { backgroundColor: themes[theme].bannerBackground }]} key='room-user-status' testID='room-user-status' onPress={() => this.toggleAnnouncementModal(true)}>
+					<Markdown
+						useMarkdown
+						msg={room.announcement}
+						theme={theme}
+						numberOfLines={1}
+						preview
+					/>
+				</BorderlessButton>
 			);
 		} else {
 			return null;
diff --git a/app/views/RoomView/styles.js b/app/views/RoomView/styles.js
index 837758de26..a7bbf973dd 100644
--- a/app/views/RoomView/styles.js
+++ b/app/views/RoomView/styles.js
@@ -26,17 +26,14 @@ export default StyleSheet.create({
 		overflow: 'hidden'
 	},
 	announcementTextContainer: {
-		padding: 18,
+		paddingVertical: 12,
+		paddingHorizontal: 15,
 		alignItems: 'center'
 	},
 	announcementTitle: {
 		fontSize: 16,
 		...sharedStyles.textMedium
 	},
-	announcementText: {
-		fontSize: 16,
-		...sharedStyles.textRegular
-	},
 	modalView: {
 		padding: 20,
 		justifyContent: 'center'