[NEW] Add Discussions to RoomActionsView

app/containers/BackgroundContainer/index.tsx

@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
 const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
 	<View style={styles.container}>
 		<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-		{text ? <Text style={[styles.text, { color: themes[theme!].auxiliaryTintColor }]}>{text}</Text> : null}
+		{text && !loading ? <Text style={[styles.text, { color: themes[theme!].auxiliaryTintColor }]}>{text}</Text> : null}
 		{loading ? <ActivityIndicator style={styles.text} color={themes[theme!].auxiliaryTintColor} /> : null}
 	</View>
 );

app/containers/SearchHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { withTheme } from '../theme';
+import { useTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import { themes } from '../constants/colors';
 import TextInput from '../presentation/TextInput';
@@ -19,14 +19,14 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface ISearchHeader {
-	theme?: string;
+interface ISearchHeaderProps {
 	onSearchChangeText?: (text: string) => void;
+	placeholder: string;
+	testID: string;
 }
 
-// TODO: it might be useful to refactor this component for reusage
-const SearchHeader = ({ theme, onSearchChangeText }: ISearchHeader) => {
-	const titleColorStyle = { color: themes[theme!].headerTitleColor };
+const SearchHeader = ({ onSearchChangeText, placeholder, testID }: ISearchHeaderProps) => {
+	const { theme } = useTheme();
 	const isLight = theme === 'light';
 	const { isLandscape } = useOrientation();
 	const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1;
@@ -36,14 +36,14 @@ const SearchHeader = ({ theme, onSearchChangeText }: ISearchHeader) => {
 		<View style={styles.container}>
 			<TextInput
 				autoFocus
-				style={[styles.title, isLight && titleColorStyle, { fontSize: titleFontSize }]}
-				placeholder='Search'
+				style={[styles.title, isLight && { color: themes[theme].headerTitleColor }, { fontSize: titleFontSize }]}
+				placeholder={placeholder}
 				onChangeText={onSearchChangeText}
-				theme={theme!}
-				testID='thread-messages-view-search-header'
+				theme={theme}
+				testID={testID}
 			/>
 		</View>
 	);
 };
 
-export default withTheme(SearchHeader);
+export default SearchHeader;

app/containers/ThreadDetails.tsx

@@ -5,7 +5,7 @@ import Touchable from 'react-native-platform-touchable';
 import { CustomIcon } from '../lib/Icons';
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
-import { withTheme } from '../theme';
+import { useTheme } from '../theme';
 import { TThreadModel } from '../definitions/IThread';
 
 const styles = StyleSheet.create({
@@ -48,10 +48,10 @@ interface IThreadDetails {
 	badgeColor?: string;
 	toggleFollowThread: Function;
 	style: ViewStyle;
-	theme?: string;
 }
 
-const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, theme }: IThreadDetails) => {
+const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IThreadDetails): JSX.Element => {
+	const { theme } = useTheme();
 	let { tcount } = item;
 	if (tcount! >= 1000) {
 		tcount = '+999';
@@ -81,7 +81,6 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, them
 					</Text>
 				</View>
 			</View>
-
 			<View style={styles.badgeContainer}>
 				{badgeColor ? <View style={[styles.badge, { backgroundColor: badgeColor }]} /> : null}
 				<Touchable onPress={() => toggleFollowThread?.(isFollowing, item.id)}>
@@ -96,4 +95,4 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, them
 	);
 };
 
-export default withTheme(ThreadDetails);
+export default ThreadDetails;

app/containers/message/Message.tsx

@@ -102,11 +102,11 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 			</View>
 		);
 	}
-	const { onPress, onLongPress } = useContext(MessageContext);
+	const { onPress, onLongPress, onDiscussionPress } = useContext(MessageContext);
 	return (
 		<Touchable
 			onLongPress={onLongPress}
-			onPress={onPress}
+			onPress={() => (props.type === 'discussion-created' ? onDiscussionPress() : onPress())}
 			disabled={(props.isInfo && !props.isThreadReply) || props.archived || props.isTemp}
 			style={{ backgroundColor: props.highlighted ? themes[props.theme].headerBackground : null }}>
 			<View>

app/containers/message/Thread.tsx

@@ -24,7 +24,6 @@ const Thread = React.memo(
 					item={{
 						tcount,
 						replies,
-						tlm,
 						id
 					}}
 					user={user}

app/containers/message/interfaces.ts

@@ -140,7 +140,7 @@ export interface IMessageInner
 		IMessageThread,
 		IMessageAttachments,
 		IMessageBroadcast {
-	type: string;
+	type: 'discussion-created' | 'jitsi_call_started' | 'c' | 'd' | 'p' | 'l';
 	blocks: [];
 }
 

app/definitions/IThread.ts

@@ -61,10 +61,10 @@ export interface IThread {
 	reactions?: IReaction[];
 	role?: string;
 	drid?: string;
-	dcount?: number;
+	dcount?: number | string;
 	dlm?: number;
 	tmid?: string;
-	tcount: number | string;
+	tcount?: number | string;
 	tlm?: string;
 	replies?: string[];
 	mentions?: IUserMention[];

app/i18n/locales/en.json

@@ -775,6 +775,7 @@
   "creating_discussion": "creating discussion",
   "Canned_Responses": "Canned Responses",
   "No_match_found": "No match found.",
+  "No_discussions": "No discussions",
   "Check_canned_responses": "Check on canned responses.",
   "Searching": "Searching",
   "Use": "Use",

app/lib/rocketchat.js

@@ -811,6 +811,16 @@ const RocketChat = {
 			encrypted
 		});
 	},
+	getDiscussions({ roomId, offset, count, text }) {
+		const params = {
+			roomId,
+			offset,
+			count,
+			...(text && { text })
+		};
+		// RC 2.4.0
+		return this.sdk.get('chat.getDiscussions', params);
+	},
 	createTeam({ name, users, type, readOnly, broadcast, encrypted }) {
 		const params = {
 			name,

app/stacks/InsideStack.tsx

@@ -66,6 +66,7 @@ import QueueListView from '../ee/omnichannel/views/QueueListView';
 import AddChannelTeamView from '../views/AddChannelTeamView';
 import AddExistingChannelView from '../views/AddExistingChannelView';
 import SelectListView from '../views/SelectListView';
+import DiscussionsView from '../views/DiscussionsView';
 import {
 	AdminPanelStackParamList,
 	ChatsStackParamList,
@@ -92,7 +93,8 @@ const ChatsStackNavigator = () => {
 			<ChatsStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} />
 			<ChatsStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
 			<ChatsStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
-			<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} />
+			<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} options={RoomMembersView.navigationOptions} />
+			<ChatsStack.Screen name='DiscussionsView' component={DiscussionsView} />
 			<ChatsStack.Screen
 				name='SearchMessagesView'
 				component={SearchMessagesView}

app/stacks/MasterDetailStack/index.tsx

@@ -58,6 +58,7 @@ import QueueListView from '../../ee/omnichannel/views/QueueListView';
 import AddChannelTeamView from '../../views/AddChannelTeamView';
 import AddExistingChannelView from '../../views/AddExistingChannelView';
 import SelectListView from '../../views/SelectListView';
+import DiscussionsView from '../../views/DiscussionsView';
 import { ModalContainer } from './ModalContainer';
 import {
 	MasterDetailChatsStackParamList,
@@ -167,6 +168,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen name='LivechatEditView' component={LivechatEditView} options={LivechatEditView.navigationOptions} />
 				<ModalStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
 				<ModalStack.Screen name='ThreadMessagesView' component={ThreadMessagesView} />
+				<ModalStack.Screen name='DiscussionsView' component={DiscussionsView} />
 				<ModalStack.Screen name='TeamChannelsView' component={TeamChannelsView} options={TeamChannelsView.navigationOptions} />
 				<ModalStack.Screen name='MarkdownTableView' component={MarkdownTableView} options={MarkdownTableView.navigationOptions} />
 				<ModalStack.Screen

app/stacks/MasterDetailStack/types.ts

@@ -56,6 +56,9 @@ export type ModalStackParamList = {
 		rid: string;
 		room: ISubscription;
 	};
+	DiscussionsView: {
+		rid: string;
+	};
 	SearchMessagesView: {
 		rid: string;
 		t: SubscriptionType;

app/stacks/types.ts

@@ -54,6 +54,9 @@ export type ChatsStackParamList = {
 		rid: string;
 		room: ISubscription;
 	};
+	DiscussionsView: {
+		rid: string;
+	};
 	SearchMessagesView: {
 		rid: string;
 		t: SubscriptionType;

app/views/ChangePasscodeView.tsx

@@ -80,10 +80,10 @@ const ChangePasscodeView = React.memo(() => {
 
 	return (
 		<Modal useNativeDriver isVisible={visible} hideModalContentWhileAnimating style={styles.modal}>
-			<PasscodeChoose theme={theme} finishProcess={onSubmit} force={data?.force} />
+			<PasscodeChoose theme={theme!} finishProcess={onSubmit} force={data?.force} />
 			{!data?.force ? (
 				<Touchable onPress={onCancel} style={styles.close}>
-					<CustomIcon name='close' color={themes[theme].passcodePrimary} size={30} />
+					<CustomIcon name='close' color={themes[theme!].passcodePrimary} size={30} />
 				</Touchable>
 			) : null}
 		</Modal>

app/views/DiscussionsView/DiscussionDetails.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+import { TThreadModel } from '../../definitions/IThread';
+import { CustomIcon } from '../../lib/Icons';
+import { themes } from '../../constants/colors';
+import sharedStyles from '../Styles';
+import { useTheme } from '../../theme';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	detailsContainer: {
+		flex: 1,
+		flexDirection: 'row'
+	},
+	detailContainer: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginRight: 8
+	},
+	detailText: {
+		fontSize: 10,
+		marginLeft: 2,
+		...sharedStyles.textSemibold
+	}
+});
+
+interface IDiscussionDetails {
+	item: TThreadModel;
+	user: {
+		id: string;
+	};
+	time: string;
+	style: ViewStyle;
+}
+
+const DiscussionDetails = ({ item, time, style }: IDiscussionDetails) => {
+	const { theme } = useTheme();
+	let { dcount } = item;
+
+	if (dcount! >= 1000) {
+		dcount = '+999';
+	}
+
+	return (
+		<View style={[styles.container, style]}>
+			<View style={styles.detailsContainer}>
+				<View style={styles.detailContainer}>
+					<CustomIcon name={'discussions'} size={24} color={themes[theme!].auxiliaryText} />
+					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
+						{dcount}
+					</Text>
+				</View>
+
+				<View style={styles.detailContainer}>
+					<CustomIcon name={'clock'} size={24} color={themes[theme!].auxiliaryText} />
+					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
+						{time}
+					</Text>
+				</View>
+			</View>
+		</View>
+	);
+};
+
+export default DiscussionDetails;

app/views/DiscussionsView/Item.stories.js

@@ -0,0 +1,96 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { ScrollView } from 'react-native';
+import { Provider } from 'react-redux';
+
+import * as List from '../../containers/List';
+import { themes } from '../../constants/colors';
+import { ThemeContext } from '../../theme';
+import { store } from '../../../storybook/stories';
+import Item from './Item';
+
+const author = {
+	_id: 'userid',
+	username: 'rocket.cat',
+	name: 'Rocket Cat'
+};
+const baseUrl = 'https://open.rocket.chat';
+const date = new Date(2020, 10, 10, 10);
+const longText =
+	'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+const defaultItem = {
+	msg: 'Message content',
+	tcount: 1,
+	replies: [1],
+	ts: date,
+	tlm: date,
+	u: author,
+	attachments: []
+};
+
+const BaseItem = ({ item, ...props }) => (
+	<Item
+		baseUrl={baseUrl}
+		item={{
+			...defaultItem,
+			...item
+		}}
+		onPress={() => alert('pressed')}
+		{...props}
+	/>
+);
+
+const listDecorator = story => (
+	<ScrollView>
+		<List.Separator />
+		{story()}
+		<List.Separator />
+	</ScrollView>
+);
+
+const stories = storiesOf('Discussions.Item', module)
+	.addDecorator(listDecorator)
+	.addDecorator(story => <Provider store={store}>{story()}</Provider>);
+
+stories.add('content', () => (
+	<>
+		<BaseItem />
+		<List.Separator />
+		<BaseItem
+			item={{
+				msg: longText
+			}}
+		/>
+		<List.Separator />
+		<BaseItem
+			item={{
+				dcount: 1000,
+				replies: [...new Array(1000)]
+			}}
+		/>
+		<List.Separator />
+		<BaseItem
+			item={{
+				msg: '',
+				attachments: [{ title: 'Attachment title' }]
+			}}
+		/>
+		<List.Separator />
+		<BaseItem useRealName />
+	</>
+));
+
+const ThemeStory = ({ theme }) => (
+	<ThemeContext.Provider value={{ theme }}>
+		<BaseItem badgeColor={themes[theme].mentionMeColor} />
+	</ThemeContext.Provider>
+);
+
+stories.add('themes', () => (
+	<>
+		<ThemeStory theme='light' />
+		<ThemeStory theme='dark' />
+		<ThemeStory theme='black' />
+	</>
+));