add storybooks, update snapshots and DiscussionsView

app/stacks/types.ts

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

app/views/DiscussionsView/Item.stories.js

@@ -0,0 +1,97 @@
+/* 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 { combineReducers, createStore } from 'redux';
+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' />
+	</>
+));

app/views/DiscussionsView/Item.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
+import moment from 'moment';
 
 import { useTheme } from '../../theme';
 import Avatar from '../../containers/Avatar';
@@ -65,7 +66,8 @@ interface IItem {
 const Item = ({ item, baseUrl, user, onPress }: IItem): JSX.Element => {
 	const { theme } = useTheme();
 	const username = item?.u?.username;
-	const date = formatDateThreads(item.ts);
+	const messageTime = moment(item.ts).format('LT');
+	const messageDate = formatDateThreads(item.ts);
 
 	return (
 		<Touchable
@@ -79,7 +81,7 @@ const Item = ({ item, baseUrl, user, onPress }: IItem): JSX.Element => {
 						<Text style={[styles.title, { color: themes[theme!].titleText }]} numberOfLines={1}>
 							{username}
 						</Text>
-						<Text style={[styles.time, { color: themes[theme!].auxiliaryText }]}>{date}</Text>
+						<Text style={[styles.time, { color: themes[theme!].auxiliaryText }]}>{messageTime}</Text>
 					</View>
 					<View style={styles.messageContainer}>
 						{/* @ts-ignore */}
@@ -93,7 +95,7 @@ const Item = ({ item, baseUrl, user, onPress }: IItem): JSX.Element => {
 							preview
 						/>
 					</View>
-					<DiscussionDetails item={item} user={user} time={date} style={styles.discussionDetails} />
+					<DiscussionDetails item={item} user={user} time={messageDate} style={styles.discussionDetails} />
 				</View>
 			</View>
 		</Touchable>

app/views/DiscussionsView/index.tsx

@@ -5,6 +5,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 import { RouteProp } from '@react-navigation/core';
 
+import { SubscriptionType } from '../../definitions';
+import { ChatsStackParamList } from '../../stacks/types';
 import ActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
@@ -20,29 +22,16 @@ import { getHeaderTitlePosition } from '../../containers/Header';
 import { useTheme } from '../../theme';
 import RocketChat from '../../lib/rocketchat';
 import SearchHeader from '../../containers/SearchHeader';
+import { TThreadModel } from '../../definitions/IThread';
 import Item from './Item';
 import styles from './styles';
 
 const API_FETCH_COUNT = 50;
 
-interface IItem {
-	rid: string;
-	drid: string;
-	prid: string;
-	id: string;
-	u: {
-		username: string;
-	};
-	dcount: string | number;
-	replies?: any;
-	msg: string;
-	ts: string;
-}
-
 interface IDiscussionsViewProps {
-	navigation: StackNavigationProp<any, 'DiscussionsView'>;
-	route: RouteProp<any, 'DiscussionsView'>;
-	item: IItem;
+	navigation: StackNavigationProp<ChatsStackParamList, 'DiscussionsView'>;
+	route: RouteProp<ChatsStackParamList, 'DiscussionsView'>;
+	item: TThreadModel;
 }
 
 interface IDiscussionsViewState {
@@ -187,19 +176,19 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): JSX.Elem
 	}, [navigation, isSearching]);
 
 	const onDiscussionPress = debounce(
-		(item: IItem) => {
+		(item: TThreadModel) => {
 			navigation.push('RoomView', {
-				rid: item.drid,
+				rid: item.drid!,
 				prid: item.rid,
 				name: item.msg,
-				t: item.rid === 'GENERAL' ? 'c' : 'p'
+				t: item.rid! === 'GENERAL' ? SubscriptionType.CHANNEL : SubscriptionType.GROUP
 			});
 		},
 		1000,
 		true
 	);
 
-	const renderItem = ({ item }: { item: IItem }) => (
+	const renderItem = ({ item }: { item: TThreadModel }) => (
 		<Item
 			{...{
 				item,

app/views/ThreadMessagesView/Item.stories.js

@@ -8,6 +8,7 @@ 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 = {
@@ -38,7 +39,6 @@ const BaseItem = ({ item, ...props }) => (
 		}}
 		onPress={() => alert('pressed')}
 		{...props}
-		thread
 	/>
 );
 
@@ -50,28 +50,6 @@ const listDecorator = story => (
 	</ScrollView>
 );
 
-const reducers = combineReducers({
-	login: () => ({
-		user: {
-			id: 'abc',
-			username: 'rocket.cat',
-			name: 'Rocket Cat'
-		}
-	}),
-	server: () => ({
-		server: 'https://open.rocket.chat',
-		version: '3.7.0'
-	}),
-	share: () => ({
-		server: 'https://open.rocket.chat',
-		version: '3.7.0'
-	}),
-	settings: () => ({
-		blockUnauthenticatedAccess: false
-	})
-});
-const store = createStore(reducers);
-
 const stories = storiesOf('Thread Messages.Item', module)
 	.addDecorator(listDecorator)
 	.addDecorator(story => <Provider store={store}>{story()}</Provider>);

storybook/stories/index.js

@@ -11,6 +11,7 @@ import './Markdown';
 import './HeaderButtons';
 import './UnreadBadge';
 import '../../app/views/ThreadMessagesView/Item.stories.js';
+import '../../app/views/DiscussionsView/Item.stories.js';
 import './Avatar';
 import './NewMarkdown';
 import '../../app/containers/BackgroundContainer/index.stories.js';