[FIX] Small fixes on UIKit (#1709)

app/actions/notification.js

@@ -4,6 +4,8 @@ export function notificationReceived(params) {
 	return {
 		type: NOTIFICATION.RECEIVED,
 		payload: {
+			title: params.title,
+			avatar: params.avatar,
 			message: params.text,
 			payload: params.payload
 		}

app/containers/UIKit/MultiSelect/Items.js

@@ -44,7 +44,7 @@ const Items = ({
 	<FlatList
 		data={items}
 		style={[styles.items, { backgroundColor: themes[theme].backgroundColor }]}
-		contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
+		contentContainerStyle={[styles.itemContent, { backgroundColor: themes[theme].backgroundColor }]}
 		keyboardShouldPersistTaps='always'
 		ItemSeparatorComponent={() => <Separator theme={theme} />}
 		keyExtractor={keyExtractor}

app/containers/UIKit/MultiSelect/styles.js

@@ -50,8 +50,11 @@ export default StyleSheet.create({
 		position: 'absolute',
 		right: 16
 	},
+	itemContent: {
+		paddingBottom: 36
+	},
 	items: {
-		height: 200
+		height: 226
 	},
 	chips: {
 		flexDirection: 'row',

app/containers/UIKit/Overflow.js

@@ -82,7 +82,7 @@ export const Overflow = ({
 				hitSlop={BUTTON_HIT_SLOP}
 				style={styles.menu}
 			>
-				{!loading ? <CustomIcon size={18} name='menu' /> : <ActivityIndicator style={styles.loading} />}
+				{!loading ? <CustomIcon size={18} name='menu' color={themes[theme].bodyText} /> : <ActivityIndicator style={styles.loading} theme={theme} />}
 			</Touchable>
 			<Popover
 				isVisible={show}

app/containers/markdown/Table.js

@@ -38,7 +38,7 @@ const Table = React.memo(({
 		);
 	};
 
-	const onPress = () => Navigation.navigate('TableView', { renderRows, tableWidth: getTableWidth() });
+	const onPress = () => Navigation.navigate('MarkdownTableView', { renderRows, tableWidth: getTableWidth() });
 
 	return (
 		<TouchableOpacity onPress={onPress}>

app/lib/methods/actions.js

@@ -133,7 +133,11 @@ export function triggerAction({
 
 			try {
 				const { type: interactionType, ...data } = await result.json();
-				return resolve(handlePayloadUserInteraction(interactionType, data));
+				handlePayloadUserInteraction(interactionType, data);
+
+				if (data.success) {
+					return resolve();
+				}
 			} catch (e) {
 				// modal.close has no body, so result.json will fail
 				// but it returns ok status

app/lib/methods/subscriptions/rooms.js

@@ -11,6 +11,7 @@ import { roomsRequest } from '../../../actions/rooms';
 import { notificationReceived } from '../../../actions/notification';
 import { handlePayloadUserInteraction } from '../actions';
 import buildMessage from '../helpers/buildMessage';
+import RocketChat from '../../rocketchat';
 
 const removeListener = listener => listener.stop();
 
@@ -275,6 +276,15 @@ export default function subscribeRooms() {
 		}
 		if (/notification/.test(ev)) {
 			const [notification] = ddpMessage.fields.args;
+			try {
+				const { payload: { rid } } = notification;
+				const subCollection = db.collections.get('subscriptions');
+				const sub = await subCollection.find(rid);
+				notification.title = RocketChat.getRoomTitle(sub);
+				notification.avatar = RocketChat.getRoomAvatar(sub);
+			} catch (e) {
+				// do nothing
+			}
 			store.dispatch(notificationReceived(notification));
 		}
 		if (/uiInteraction/.test(ev)) {

app/lib/rocketchat.js

@@ -1131,6 +1131,9 @@ const RocketChat = {
 		const { UI_Use_Real_Name: useRealName } = reduxStore.getState().settings;
 		return ((room.prid || useRealName) && room.fname) || room.name;
 	},
+	getRoomAvatar(room) {
+		return room.prid ? room.fname : room.name;
+	},
 
 	findOrCreateInvite({ rid, days, maxUses }) {
 		// RC 2.4.0

app/notifications/inApp/index.js

@@ -158,15 +158,18 @@ class NotificationBadge extends React.Component {
 	}
 
 	goToRoom = async() => {
-		const { notification: { payload }, navigation, baseUrl } = this.props;
+		const { notification, navigation, baseUrl } = this.props;
+		const { payload } = notification;
 		const { rid, type, prid } = payload;
 		if (!rid) {
 			return;
 		}
 		const name = type === 'd' ? payload.sender.username : payload.name;
+		// if sub is not on local database, title will be null, so we use payload from notification
+		const { title = name } = notification;
 		await navigation.navigate('RoomsListView');
 		navigation.navigate('RoomView', {
-			rid, name, t: type, prid, baseUrl
+			rid, name: title, t: type, prid, baseUrl
 		});
 		this.hide();
 	}
@@ -178,6 +181,8 @@ class NotificationBadge extends React.Component {
 		const { message, payload } = notification;
 		const { type } = payload;
 		const name = type === 'd' ? payload.sender.username : payload.name;
+		// if sub is not on local database, title and avatar will be null, so we use payload from notification
+		const { title = name, avatar = name } = notification;
 
 		let top = 0;
 		if (isIOS) {
@@ -211,9 +216,9 @@ class NotificationBadge extends React.Component {
 					background={Touchable.SelectableBackgroundBorderless()}
 				>
 					<>
-						<Avatar text={name} size={AVATAR_SIZE} type={type} baseUrl={baseUrl} style={styles.avatar} userId={userId} token={token} />
+						<Avatar text={avatar} size={AVATAR_SIZE} type={type} baseUrl={baseUrl} style={styles.avatar} userId={userId} token={token} />
 						<View style={styles.inner}>
-							<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}>{name}</Text>
+							<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}>{title}</Text>
 							<Text style={[styles.message, { color: themes[theme].titleText }]} numberOfLines={1}>{message}</Text>
 						</View>
 					</>

app/views/ModalBlockView.js

 import React from 'react';
-import { StyleSheet, ScrollView, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import { connect } from 'react-redux';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 import { withTheme } from '../theme';
 import { themedHeader } from '../utils/navigation';
@@ -224,7 +225,7 @@ class ModalBlockView extends React.Component {
 		const { blocks } = view;
 
 		return (
-			<ScrollView
+			<KeyboardAwareScrollView
 				style={[
 					styles.container,
 					{ backgroundColor: themes[theme].auxiliaryBackground }
@@ -249,7 +250,7 @@ class ModalBlockView extends React.Component {
 					}
 				</View>
 				{loading ? <ActivityIndicator absolute size='large' theme={theme} /> : null}
-			</ScrollView>
+			</KeyboardAwareScrollView>
 		);
 	}
 }

app/views/RoomsListView/index.js

@@ -491,6 +491,8 @@ class RoomsListView extends React.Component {
 
 	getRoomTitle = item => RocketChat.getRoomTitle(item)
 
+	getRoomAvatar = item => RocketChat.getRoomAvatar(item)
+
 	goRoom = (item) => {
 		this.cancelSearchingAndroid();
 		const { navigation } = this.props;
@@ -731,7 +733,7 @@ class RoomsListView extends React.Component {
 				userMentions={item.userMentions}
 				isRead={this.getIsRead(item)}
 				favorite={item.f}
-				avatar={item.name}
+				avatar={this.getRoomAvatar(item)}
 				lastMessage={item.lastMessage}
 				name={this.getRoomTitle(item)}
 				_updatedAt={item.roomUpdatedAt}