[NEW] Create discussions

README.md

@@ -80,7 +80,7 @@ Readme will guide you on how to config.
 |---------------------------------------------------------------	|--------	|
 | Jitsi Integration                                             	| ✅    	|
 | Federation (Directory)                                        	| ✅    	|
-| Discussions                                                     | ❌    	|
+| Discussions                                                     | ✅    	|
 | Omnichannel                                                     | ❌    	|
 | Threads                                                       	| ✅    	|
 | Record Audio                                                  	| ✅    	|

app/actions/actionsTypes.js

@@ -35,6 +35,7 @@ export const ROOM = createRequestTypes('ROOM', ['LEAVE', 'DELETE', 'REMOVED', 'U
 export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT', 'INIT_LOCAL_SETTINGS']);
 export const MESSAGES = createRequestTypes('MESSAGES', ['REPLY_BROADCAST']);
 export const CREATE_CHANNEL = createRequestTypes('CREATE_CHANNEL', [...defaultTypes]);
+export const CREATE_DISCUSSION = createRequestTypes('CREATE_DISCUSSION', [...defaultTypes]);
 export const SELECTED_USERS = createRequestTypes('SELECTED_USERS', ['ADD_USER', 'REMOVE_USER', 'RESET', 'SET_LOADING']);
 export const SERVER = createRequestTypes('SERVER', [
 	...defaultTypes,

app/actions/createDiscussion.js

@@ -0,0 +1,22 @@
+import * as types from './actionsTypes';
+
+export function createDiscussionRequest(data) {
+	return {
+		type: types.CREATE_DISCUSSION.REQUEST,
+		data
+	};
+}
+
+export function createDiscussionSuccess(data) {
+	return {
+		type: types.CREATE_DISCUSSION.SUCCESS,
+		data
+	};
+}
+
+export function createDiscussionFailure(err) {
+	return {
+		type: types.CREATE_DISCUSSION.FAILURE,
+		err
+	};
+}

app/containers/Avatar.js

@@ -4,10 +4,7 @@ import { View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 import Touch from '../utils/touch';
-
-const formatUrl = (url, baseUrl, uriSize, avatarAuthURLFragment) => (
-	`${ baseUrl }${ url }?format=png&size=${ uriSize }&${ avatarAuthURLFragment }`
-);
+import { avatarURL } from '../utils/avatar';
 
 const Avatar = React.memo(({
 	text, size, baseUrl, borderRadius, style, avatar, type, children, userId, token, onPress, theme
@@ -22,24 +19,9 @@ const Avatar = React.memo(({
 		return null;
 	}
 
-	const room = type === 'd' ? text : `@${ text }`;
-
-	// Avoid requesting several sizes by having only two sizes on cache
-	const uriSize = size === 100 ? 100 : 50;
-
-	let avatarAuthURLFragment = '';
-	if (userId && token) {
-		avatarAuthURLFragment = `&rc_token=${ token }&rc_uid=${ userId }`;
-	}
-
-
-	let uri;
-	if (avatar) {
-		uri = avatar.includes('http') ? avatar : formatUrl(avatar, baseUrl, uriSize, avatarAuthURLFragment);
-	} else {
-		uri = formatUrl(`/avatar/${ room }`, baseUrl, uriSize, avatarAuthURLFragment);
-	}
-
+	const uri = avatarURL({
+		type, text, size, userId, token, avatar, baseUrl
+	});
 
 	let image = (
 		<FastImage

app/containers/MessageActions.js

@@ -63,6 +63,10 @@ class MessageActions extends React.Component {
 			this.EDIT_INDEX = this.options.length - 1;
 		}
 
+		// Create Discussion
+		this.options.push(I18n.t('Create_Discussion'));
+		this.CREATE_DISCUSSION_INDEX = this.options.length - 1;
+
 		// Mark as unread
 		if (message.u && message.u._id !== user.id) {
 			this.options.push(I18n.t('Mark_unread'));
@@ -371,6 +375,11 @@ class MessageActions extends React.Component {
 		}
 	}
 
+	handleCreateDiscussion = () => {
+		const { message, room: channel } = this.props;
+		Navigation.navigate('CreateDiscussionView', { message, channel });
+	}
+
 	handleActionPress = (actionIndex) => {
 		if (actionIndex) {
 			switch (actionIndex) {
@@ -413,6 +422,9 @@ class MessageActions extends React.Component {
 				case this.READ_RECEIPT_INDEX:
 					this.handleReadReceipt();
 					break;
+				case this.CREATE_DISCUSSION_INDEX:
+					this.handleCreateDiscussion();
+					break;
 				case this.TOGGLE_TRANSLATION_INDEX:
 					this.handleToggleTranslation();
 					break;

app/containers/MessageBox/LeftButtons.ios.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { CancelEditingButton, FileButton } from './buttons';
+import { CancelEditingButton, ActionsButton } from './buttons';
 
 const LeftButtons = React.memo(({
-	theme, showFileActions, editing, editCancel
+	theme, showMessageBoxActions, editing, editCancel
 }) => {
 	if (editing) {
 		return <CancelEditingButton onPress={editCancel} theme={theme} />;
 	}
-	return <FileButton onPress={showFileActions} theme={theme} />;
+	return <ActionsButton onPress={showMessageBoxActions} theme={theme} />;
 });
 
 LeftButtons.propTypes = {
 	theme: PropTypes.string,
-	showFileActions: PropTypes.func.isRequired,
+	showMessageBoxActions: PropTypes.func.isRequired,
 	editing: PropTypes.bool,
 	editCancel: PropTypes.func.isRequired
 };

app/containers/MessageBox/RightButtons.android.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { SendButton, AudioButton, FileButton } from './buttons';
+import { SendButton, AudioButton, ActionsButton } from './buttons';
 
 const RightButtons = React.memo(({
-	theme, showSend, submit, recordAudioMessage, recordAudioMessageEnabled, showFileActions
+	theme, showSend, submit, recordAudioMessage, recordAudioMessageEnabled, showMessageBoxActions
 }) => {
 	if (showSend) {
 		return <SendButton onPress={submit} theme={theme} />;
@@ -13,11 +13,11 @@ const RightButtons = React.memo(({
 		return (
 			<>
 				<AudioButton onPress={recordAudioMessage} theme={theme} />
-				<FileButton onPress={showFileActions} theme={theme} />
+				<ActionsButton onPress={showMessageBoxActions} theme={theme} />
 			</>
 		);
 	}
-	return <FileButton onPress={showFileActions} theme={theme} />;
+	return <ActionsButton onPress={showMessageBoxActions} theme={theme} />;
 });
 
 RightButtons.propTypes = {
@@ -26,7 +26,7 @@ RightButtons.propTypes = {
 	submit: PropTypes.func.isRequired,
 	recordAudioMessage: PropTypes.func.isRequired,
 	recordAudioMessageEnabled: PropTypes.bool,
-	showFileActions: PropTypes.func.isRequired
+	showMessageBoxActions: PropTypes.func.isRequired
 };
 
 export default RightButtons;

app/containers/MessageBox/buttons/FileButton.js → app/containers/MessageBox/buttons/ActionsButton.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import BaseButton from './BaseButton';
 
-const FileButton = React.memo(({ theme, onPress }) => (
+const ActionsButton = React.memo(({ theme, onPress }) => (
 	<BaseButton
 		onPress={onPress}
 		testID='messagebox-actions'
@@ -13,9 +13,9 @@ const FileButton = React.memo(({ theme, onPress }) => (
 	/>
 ));
 
-FileButton.propTypes = {
+ActionsButton.propTypes = {
 	theme: PropTypes.string,
 	onPress: PropTypes.func.isRequired
 };
 
-export default FileButton;
+export default ActionsButton;

app/containers/MessageBox/buttons/index.js

@@ -2,12 +2,12 @@ import CancelEditingButton from './CancelEditingButton';
 import ToggleEmojiButton from './ToggleEmojiButton';
 import SendButton from './SendButton';
 import AudioButton from './AudioButton';
-import FileButton from './FileButton';
+import ActionsButton from './ActionsButton';
 
 export {
 	CancelEditingButton,
 	ToggleEmojiButton,
 	SendButton,
 	AudioButton,
-	FileButton
+	ActionsButton
 };

app/containers/MessageBox/index.js

@@ -45,6 +45,7 @@ import {
 import CommandsPreview from './CommandsPreview';
 import { Review } from '../../utils/review';
 import { getUserSelector } from '../../selectors/login';
+import Navigation from '../../lib/Navigation';
 
 const imagePickerConfig = {
 	cropping: true,
@@ -65,6 +66,7 @@ const FILE_PHOTO_INDEX = 1;
 const FILE_VIDEO_INDEX = 2;
 const FILE_LIBRARY_INDEX = 3;
 const FILE_DOCUMENT_INDEX = 4;
+const CREATE_DISCUSSION_INDEX = 5;
 
 class MessageBox extends Component {
 	static propTypes = {
@@ -113,12 +115,13 @@ class MessageBox extends Component {
 		};
 		this.text = '';
 		this.focused = false;
-		this.fileOptions = [
+		this.messageBoxActions = [
 			I18n.t('Cancel'),
 			I18n.t('Take_a_photo'),
 			I18n.t('Take_a_video'),
 			I18n.t('Choose_from_library'),
-			I18n.t('Choose_file')
+			I18n.t('Choose_file'),
+			I18n.t('Create_Discussion')
 		];
 		const libPickerLabels = {
 			cropperChooseText: I18n.t('Choose'),
@@ -157,8 +160,8 @@ class MessageBox extends Component {
 				}
 			} else {
 				try {
-					const room = await subsCollection.find(rid);
-					msg = room.draftMessage;
+					this.room = await subsCollection.find(rid);
+					msg = this.room.draftMessage;
 				} catch (error) {
 					console.log('Messagebox.didMount: Room not found');
 				}
@@ -588,20 +591,24 @@ class MessageBox extends Component {
 		}
 	}
 
+	createDiscussion = () => {
+		Navigation.navigate('CreateDiscussionView', { channel: this.room });
+	}
+
 	showUploadModal = (file) => {
 		this.setState({ file: { ...file, isVisible: true } });
 	}
 
-	showFileActions = () => {
+	showMessageBoxActions = () => {
 		ActionSheet.showActionSheetWithOptions({
-			options: this.fileOptions,
+			options: this.messageBoxActions,
 			cancelButtonIndex: FILE_CANCEL_INDEX
 		}, (actionIndex) => {
-			this.handleFileActionPress(actionIndex);
+			this.handleMessageBoxActions(actionIndex);
 		});
 	}
 
-	handleFileActionPress = (actionIndex) => {
+	handleMessageBoxActions = (actionIndex) => {
 		switch (actionIndex) {
 			case FILE_PHOTO_INDEX:
 				this.takePhoto();
@@ -615,6 +622,9 @@ class MessageBox extends Component {
 			case FILE_DOCUMENT_INDEX:
 				this.chooseFile();
 				break;
+			case CREATE_DISCUSSION_INDEX:
+				this.createDiscussion();
+				break;
 			default:
 				break;
 		}
@@ -783,7 +793,7 @@ class MessageBox extends Component {
 		} else if (handleCommandSubmit(event)) {
 			this.submit();
 		} else if (handleCommandShowUpload(event)) {
-			this.showFileActions();
+			this.showMessageBoxActions();
 		}
 	}
 
@@ -828,7 +838,7 @@ class MessageBox extends Component {
 							theme={theme}
 							showEmojiKeyboard={showEmojiKeyboard}
 							editing={editing}
-							showFileActions={this.showFileActions}
+							showMessageBoxActions={this.showMessageBoxActions}
 							editCancel={this.editCancel}
 							openEmoji={this.openEmoji}
 							closeEmoji={this.closeEmoji}
@@ -854,7 +864,7 @@ class MessageBox extends Component {
 							submit={this.submit}
 							recordAudioMessage={this.recordAudioMessage}
 							recordAudioMessageEnabled={Message_AudioRecorderEnabled}
-							showFileActions={this.showFileActions}
+							showMessageBoxActions={this.showMessageBoxActions}
 						/>
 					</View>
 				</View>

app/containers/UIKit/MultiSelect/Chips.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Text, View, Image } from 'react-native';
+import { Text, View } from 'react-native';
 import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
+import FastImage from 'react-native-fast-image';
 
 import { themes } from '../../../constants/colors';
 import { textParser } from '../utils';
@@ -19,7 +20,7 @@ const Chip = ({ item, onSelect, theme }) => (
 		background={Touchable.Ripple(themes[theme].bannerBackground)}
 	>
 		<>
-			{item.imageUrl ? <Image style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
+			{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
 			<Text numberOfLines={1} style={[styles.chipText, { color: themes[theme].titleText }]}>{textParser([item.text])}</Text>
 			<CustomIcon name='cross' size={16} color={themes[theme].auxiliaryText} />
 		</>

app/containers/UIKit/MultiSelect/Input.js

@@ -9,12 +9,13 @@ import ActivityIndicator from '../../ActivityIndicator';
 import styles from './styles';
 
 const Input = ({
-	children, open, theme, loading
+	children, open, theme, loading, inputStyle, disabled
 }) => (
 	<Touchable
 		onPress={() => open(true)}
-		style={{ backgroundColor: themes[theme].backgroundColor }}
+		style={[{ backgroundColor: themes[theme].backgroundColor }, inputStyle]}
 		background={Touchable.Ripple(themes[theme].bannerBackground)}
+		disabled={disabled}
 	>
 		<View style={[styles.input, { borderColor: themes[theme].separatorColor }]}>
 			{children}
@@ -30,6 +31,8 @@ Input.propTypes = {
 	children: PropTypes.node,
 	open: PropTypes.func,
 	theme: PropTypes.string,
+	inputStyle: PropTypes.object,
+	disabled: PropTypes.bool,
 	loading: PropTypes.bool
 };
 

app/containers/UIKit/MultiSelect/Items.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text, FlatList } from 'react-native';
 import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
+import FastImage from 'react-native-fast-image';
 
 import Separator from '../../Separator';
 import Check from '../../Check';
@@ -26,6 +27,7 @@ const Item = ({
 		]}
 	>
 		<>
+			{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
 			<Text style={{ color: themes[theme].titleText }}>{textParser([item.text])}</Text>
 			{selected ? <Check theme={theme} /> : null}
 		</>