[IMPROVEMENT] Close announcement banner (#2064)

* [NEW] Created new field in subscription table

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>

* [NEW] New field added to obeserver in room view

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>

* [NEW] Added icon and new design to banner

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>

* [NEW] Close banner function works

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>

* [IMPROVEMENT] closed banner status now update correctly

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>

* improve banner style

Co-authored-by: Djorkaeff Alexandre <djorkaeff.unb@gmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/lib/database/model/Subscription.js

@@ -50,6 +50,8 @@ export default class Subscription extends Model {
 
 	@field('announcement') announcement;
 
+	@field('banner_closed') bannerClosed;
+
 	@field('topic') topic;
 
 	@field('blocked') blocked;

app/lib/database/model/migrations.js

@@ -74,6 +74,17 @@ export default schemaMigrations({
 					]
 				})
 			]
+		},
+		{
+			toVersion: 8,
+			steps: [
+				addColumns({
+					table: 'subscriptions',
+					columns: [
+						{ name: 'banner_closed', type: 'boolean', isOptional: true }
+					]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/app.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 7,
+	version: 8,
 	tables: [
 		tableSchema({
 			name: 'subscriptions',
@@ -25,6 +25,7 @@ export default appSchema({
 				{ name: 'last_message', type: 'string', isOptional: true },
 				{ name: 'description', type: 'string', isOptional: true },
 				{ name: 'announcement', type: 'string', isOptional: true },
+				{ name: 'banner_closed', type: 'boolean', isOptional: true },
 				{ name: 'topic', type: 'string', isOptional: true },
 				{ name: 'blocked', type: 'boolean', isOptional: true },
 				{ name: 'blocker', type: 'boolean', isOptional: true },

app/lib/methods/helpers/findSubscriptionsRooms.js

@@ -27,6 +27,7 @@ export default async(subscriptions = [], rooms = []) => {
 			lastOpen: s.lastOpen,
 			description: s.description,
 			announcement: s.announcement,
+			bannerClosed: s.bannerClosed,
 			topic: s.topic,
 			blocked: s.blocked,
 			blocker: s.blocker,

app/lib/methods/subscriptions/rooms.js

@@ -57,6 +57,7 @@ const createOrUpdateSubscription = async(subscription, room) => {
 					lastOpen: s.lastOpen,
 					description: s.description,
 					announcement: s.announcement,
+					bannerClosed: s.bannerClosed,
 					topic: s.topic,
 					blocked: s.blocked,
 					blocker: s.blocker,
@@ -121,6 +122,11 @@ const createOrUpdateSubscription = async(subscription, room) => {
 				try {
 					const update = sub.prepareUpdate((s) => {
 						Object.assign(s, tmp);
+						if (subscription.announcement) {
+							if (subscription.announcement !== sub.announcement) {
+								s.bannerClosed = false;
+							}
+						}
 					});
 					batch.push(update);
 				} catch (e) {

app/sagas/rooms.js

@@ -70,6 +70,11 @@ const handleRoomsRequest = function* handleRoomsRequest({ params }) {
 				...subsToUpdate.map((subscription) => {
 					const newSub = subscriptions.find(s => s._id === subscription._id);
 					return subscription.prepareUpdate(() => {
+						if (newSub.announcement) {
+							if (newSub.announcement !== subscription.announcement) {
+								subscription.bannerClosed = false;
+							}
+						}
 						Object.assign(subscription, newSub);
 					});
 				}),

app/views/RoomView/Banner.js

@@ -6,17 +6,18 @@ import Modal from 'react-native-modal';
 
 import Markdown from '../../containers/markdown';
 
+import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
 import styles from './styles';
 
 const Banner = React.memo(({
-	text, title, theme
+	text, title, theme, bannerClosed, closeBanner
 }) => {
 	const [showModal, openModal] = useState(false);
 
 	const toggleModal = () => openModal(prevState => !prevState);
 
-	if (text) {
+	if (text && !bannerClosed) {
 		return (
 			<>
 				<BorderlessButton
@@ -28,8 +29,16 @@ const Banner = React.memo(({
 						msg={text}
 						theme={theme}
 						numberOfLines={1}
+						style={[styles.bannerText]}
 						preview
 					/>
+					<BorderlessButton onPress={closeBanner}>
+						<CustomIcon
+							color={themes[theme].auxiliaryText}
+							name='cross'
+							size={20}
+						/>
+					</BorderlessButton>
 				</BorderlessButton>
 				<Modal
 					onBackdropPress={toggleModal}
@@ -54,12 +63,14 @@ const Banner = React.memo(({
 	}
 
 	return null;
-}, (prevProps, nextProps) => prevProps.text === nextProps.text && prevProps.theme === nextProps.theme);
+}, (prevProps, nextProps) => prevProps.text === nextProps.text && prevProps.theme === nextProps.theme && prevProps.bannerClosed === nextProps.bannerClosed);
 
 Banner.propTypes = {
 	text: PropTypes.string,
 	title: PropTypes.string,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	bannerClosed: PropTypes.bool,
+	closeBanner: PropTypes.func
 };
 
 export default Banner;

app/views/RoomView/index.js

@@ -69,7 +69,7 @@ const stateAttrsUpdate = [
 	'readOnly',
 	'member'
 ];
-const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout', 'announcement', 'sysMes', 'topic', 'name', 'fname', 'roles'];
+const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout', 'announcement', 'sysMes', 'topic', 'name', 'fname', 'roles', 'bannerClosed'];
 
 class RoomView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => {
@@ -810,6 +810,20 @@ class RoomView extends React.Component {
 		}
 	});
 
+	closeBanner = async() => {
+		const { room } = this.state;
+		try {
+			const db = database.active;
+			await db.action(async() => {
+				await room.update((r) => {
+					r.bannerClosed = true;
+				});
+			});
+		} catch {
+			// do nothing
+		}
+	};
+
 	renderItem = (item, previousItem) => {
 		const { room, lastOpen, canAutoTranslate } = this.state;
 		const {
@@ -988,7 +1002,9 @@ class RoomView extends React.Component {
 		const {
 			user, baseUrl, theme, navigation, Hide_System_Messages
 		} = this.props;
-		const { rid, t, sysMes } = room;
+		const {
+			rid, t, sysMes, bannerClosed, announcement
+		} = room;
 
 		return (
 			<SafeAreaView
@@ -1003,7 +1019,9 @@ class RoomView extends React.Component {
 				<Banner
 					rid={rid}
 					title={I18n.t('Announcement')}
-					text={room.announcement}
+					text={announcement}
+					bannerClosed={bannerClosed}
+					closeBanner={this.closeBanner}
 					theme={theme}
 				/>
 				<List

app/views/RoomView/styles.js

@@ -28,8 +28,12 @@ export default StyleSheet.create({
 	bannerContainer: {
 		paddingVertical: 12,
 		paddingHorizontal: 15,
+		flexDirection: 'row',
 		alignItems: 'center'
 	},
+	bannerText: {
+		flex: 1
+	},
 	bannerModalTitle: {
 		fontSize: 16,
 		...sharedStyles.textMedium