[WIP] Add discussions support

app/actions/actionsTypes.js

@@ -26,17 +26,7 @@ export const ROOMS = createRequestTypes('ROOMS', [
 	'OPEN_SEARCH_HEADER',
 	'CLOSE_SEARCH_HEADER'
 ]);
-export const ROOM = createRequestTypes('ROOM', [
-	'ADD_USER_TYPING',
-	'REMOVE_USER_TYPING',
-	'SOMEONE_TYPING',
-	'OPEN',
-	'CLOSE',
-	'LEAVE',
-	'ERASE',
-	'USER_TYPING',
-	'MESSAGE_RECEIVED'
-]);
+export const ROOM = createRequestTypes('ROOM', ['LEAVE', 'ERASE', 'USER_TYPING']);
 export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT']);
 export const MESSAGES = createRequestTypes('MESSAGES', [
 	...defaultTypes,

app/actions/room.js

@@ -1,40 +1,5 @@
 import * as types from './actionsTypes';
 
-
-export function removeUserTyping(username) {
-	return {
-		type: types.ROOM.REMOVE_USER_TYPING,
-		username
-	};
-}
-
-export function someoneTyping(data) {
-	return {
-		type: types.ROOM.SOMEONE_TYPING,
-		...data
-	};
-}
-
-export function addUserTyping(username) {
-	return {
-		type: types.ROOM.ADD_USER_TYPING,
-		username
-	};
-}
-
-export function openRoom(room) {
-	return {
-		type: types.ROOM.OPEN,
-		room
-	};
-}
-
-export function closeRoom() {
-	return {
-		type: types.ROOM.CLOSE
-	};
-}
-
 export function leaveRoom(rid, t) {
 	return {
 		type: types.ROOM.LEAVE,
@@ -51,16 +16,10 @@ export function eraseRoom(rid, t) {
 	};
 }
 
-export function userTyping(status = true) {
+export function userTyping(rid, status = true) {
 	return {
 		type: types.ROOM.USER_TYPING,
+		rid,
 		status
 	};
 }
-
-export function roomMessageReceived(message) {
-	return {
-		type: types.ROOM.MESSAGE_RECEIVED,
-		message
-	};
-}

app/containers/ConnectionBadge.js

@@ -9,7 +9,7 @@ import I18n from '../i18n';
 import debounce from '../utils/debounce';
 import sharedStyles from '../views/Styles';
 import {
-	COLOR_BACKGROUND_CONTAINER, COLOR_DANGER, COLOR_SUCCESS, COLOR_WHITE
+	COLOR_BACKGROUND_CONTAINER, COLOR_DANGER, COLOR_SUCCESS, COLOR_WHITE, COLOR_TEXT_DESCRIPTION
 } from '../constants/colors';
 
 const styles = StyleSheet.create({
@@ -117,7 +117,7 @@ class ConnectionBadge extends Component {
 		if (connecting) {
 			return (
 				<Animated.View style={[styles.container, { transform: [{ translateY }] }]}>
-					<ActivityIndicator color='#9EA2A8' style={styles.activityIndicator} />
+					<ActivityIndicator color={COLOR_TEXT_DESCRIPTION} style={styles.activityIndicator} />
 					<Text style={[styles.text, styles.textConnecting]}>{I18n.t('Connecting')}</Text>
 				</Animated.View>
 			);

app/containers/MessageBox/index.js

@@ -48,25 +48,7 @@ const imagePickerConfig = {
 	cropperCancelText: I18n.t('Cancel')
 };
 
-@connect(state => ({
-	roomType: state.room.t,
-	message: state.messages.message,
-	replyMessage: state.messages.replyMessage,
-	replying: state.messages.replyMessage && !!state.messages.replyMessage.msg,
-	editing: state.messages.editing,
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	user: {
-		id: state.login.user && state.login.user.id,
-		username: state.login.user && state.login.user.username,
-		token: state.login.user && state.login.user.token
-	}
-}), dispatch => ({
-	editCancel: () => dispatch(editCancelAction()),
-	editRequest: message => dispatch(editRequestAction(message)),
-	typing: status => dispatch(userTypingAction(status)),
-	closeReply: () => dispatch(replyCancelAction())
-}))
-export default class MessageBox extends Component {
+class MessageBox extends Component {
 	static propTypes = {
 		rid: PropTypes.string.isRequired,
 		baseUrl: PropTypes.string.isRequired,
@@ -113,13 +95,17 @@ export default class MessageBox extends Component {
 		const [room] = database.objects('subscriptions').filtered('rid = $0', rid);
 		if (room.draftMessage && room.draftMessage !== '') {
 			this.setInput(room.draftMessage);
+			this.setShowSend(true);
 		}
 	}
 
 	componentWillReceiveProps(nextProps) {
 		const { message, replyMessage } = this.props;
 		if (message !== nextProps.message && nextProps.message.msg) {
 			this.setInput(nextProps.message.msg);
+			if (this.text) {
+				this.setShowSend(true);
+			}
 			this.focus();
 		} else if (replyMessage !== nextProps.replyMessage && nextProps.replyMessage.msg) {
 			this.focus();
@@ -165,14 +151,6 @@ export default class MessageBox extends Component {
 		return false;
 	}
 
-	componentWillUnmount() {
-		const { rid } = this.props;
-		const [room] = database.objects('subscriptions').filtered('rid = $0', rid);
-		database.write(() => {
-			room.draftMessage = this.text;
-		});
-	}
-
 	onChangeText = (text) => {
 		const isTextEmpty = text.length === 0;
 		this.setShowSend(!isTextEmpty);
@@ -461,13 +439,13 @@ export default class MessageBox extends Component {
 	}
 
 	handleTyping = (isTyping) => {
-		const { typing } = this.props;
+		const { typing, rid } = this.props;
 		if (!isTyping) {
 			if (this.typingTimeout) {
 				clearTimeout(this.typingTimeout);
 				this.typingTimeout = false;
 			}
-			typing(false);
+			typing(rid, false);
 			return;
 		}
 
@@ -476,7 +454,7 @@ export default class MessageBox extends Component {
 		}
 
 		this.typingTimeout = setTimeout(() => {
-			typing(true);
+			typing(rid, true);
 			this.typingTimeout = false;
 		}, 1000);
 	}
@@ -835,3 +813,25 @@ export default class MessageBox extends Component {
 		);
 	}
 }
+
+const mapStateToProps = state => ({
+	message: state.messages.message,
+	replyMessage: state.messages.replyMessage,
+	replying: state.messages.replyMessage && !!state.messages.replyMessage.msg,
+	editing: state.messages.editing,
+	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
+	user: {
+		id: state.login.user && state.login.user.id,
+		username: state.login.user && state.login.user.username,
+		token: state.login.user && state.login.user.token
+	}
+});
+
+const dispatchToProps = ({
+	editCancel: () => editCancelAction(),
+	editRequest: message => editRequestAction(message),
+	typing: (rid, status) => userTypingAction(rid, status),
+	closeReply: () => replyCancelAction()
+});
+
+export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(MessageBox);

app/containers/RoomTypeIcon.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
+import { CustomIcon } from '../lib/Icons';
+import { COLOR_TEXT_DESCRIPTION } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	style: {
 		marginRight: 7,
 		marginTop: 3,
-		tintColor: '#9EA2A8'
+		tintColor: COLOR_TEXT_DESCRIPTION,
+		color: COLOR_TEXT_DESCRIPTION
+	},
+	discussion: {
+		marginRight: 6
 	}
 });
 
@@ -15,6 +21,11 @@ const RoomTypeIcon = React.memo(({ type, size, style }) => {
 		return null;
 	}
 
+	if (type === 'discussion') {
+		// FIXME: These are temporary only. We should have all room icons on <Customicon />, but our design team is still working on this.
+		return <CustomIcon name='chat' size={13} style={[styles.style, styles.discussion]} />;
+	}
+
 	if (type === 'c') {
 		return <Image source={{ uri: 'hashtag' }} style={[styles.style, style, { width: size, height: size }]} />;
 	}

app/containers/message/Image.js

@@ -1,13 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import FastImage from 'react-native-fast-image';
-import { RectButton } from 'react-native-gesture-handler';
 import equal from 'deep-equal';
+import Touchable from 'react-native-platform-touchable';
 
 import PhotoModal from './PhotoModal';
 import Markdown from './Markdown';
 import styles from './styles';
-import { COLOR_WHITE } from '../../constants/colors';
 
 export default class extends Component {
 	static propTypes = {
@@ -37,7 +36,7 @@ export default class extends Component {
 		return false;
 	}
 
-	onPressButton() {
+	onPressButton = () => {
 		this.setState({
 			modalVisible: true
 		});
@@ -67,20 +66,21 @@ export default class extends Component {
 
 		return (
 			[
-				<RectButton
+				<Touchable
 					key='image'
-					onPress={() => this.onPressButton()}
-					onActiveStateChange={this.isPressed}
+					onPress={this.onPressButton}
 					style={styles.imageContainer}
-					underlayColor={COLOR_WHITE}
+					background={Touchable.Ripple('#fff')}
 				>
-					<FastImage
-						style={[styles.image, isPressed && { opacity: 0.5 }]}
-						source={{ uri: encodeURI(img) }}
-						resizeMode={FastImage.resizeMode.cover}
-					/>
-					{this.getDescription()}
-				</RectButton>,
+					<React.Fragment>
+						<FastImage
+							style={[styles.image, isPressed && { opacity: 0.5 }]}
+							source={{ uri: encodeURI(img) }}
+							resizeMode={FastImage.resizeMode.cover}
+						/>
+						{this.getDescription()}
+					</React.Fragment>
+				</Touchable>,
 				<PhotoModal
 					key='modal'
 					title={file.title}

app/containers/message/Markdown.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Image, Platform } from 'react-native';
+import { Text, Image } from 'react-native';
 import PropTypes from 'prop-types';
 import { emojify } from 'react-emojione';
 import MarkdownRenderer, { PluginContainer } from 'react-native-markdown-renderer';
@@ -8,20 +8,12 @@ import styles from './styles';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import MarkdownEmojiPlugin from './MarkdownEmojiPlugin';
 
-import sharedStyles from '../../views/Styles';
-import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY } from '../../constants/colors';
-
 // Support <http://link|Text>
 const formatText = text => text.replace(
 	new RegExp('(?:<|<)((?:https|http):\\/\\/[^\\|]+)\\|(.+?)(?=>|>)(?:>|>)', 'gm'),
 	(match, url, title) => `[${ title }](${ url })`
 );
 
-const codeFontFamily = Platform.select({
-	ios: { fontFamily: 'Courier New' },
-	android: { fontFamily: 'monospace' }
-});
-
 export default class Markdown extends React.Component {
 	shouldComponentUpdate(nextProps) {
 		const { msg } = this.props;
@@ -94,31 +86,10 @@ export default class Markdown extends React.Component {
 				}}
 				style={{
 					paragraph: styles.paragraph,
-					text: {
-						fontSize: 16,
-						...sharedStyles.textColorNormal,
-						...sharedStyles.textRegular
-					},
-					codeInline: {
-						...sharedStyles.textRegular,
-						...codeFontFamily,
-						borderWidth: 1,
-						backgroundColor: COLOR_BACKGROUND_CONTAINER,
-						borderRadius: 4
-					},
-					codeBlock: {
-						...sharedStyles.textRegular,
-						...codeFontFamily,
-						backgroundColor: COLOR_BACKGROUND_CONTAINER,
-						borderColor: COLOR_BORDER,
-						borderWidth: 1,
-						borderRadius: 4,
-						padding: 4
-					},
-					link: {
-						color: COLOR_PRIMARY,
-						...sharedStyles.textRegular
-					},
+					text: styles.text,
+					codeInline: styles.codeInline,
+					codeBlock: styles.codeBlock,
+					link: styles.link,
 					...style
 				}}
 				plugins={[