chore: reorganized and created useThreadMessages hook

RocketChat · Oct 21, 2024 · 6ef34b5 · 6ef34b5
1 parent 6ff6647
commit 6ef34b5
Show file tree

Hide file tree

Showing 8 changed files with 466 additions and 461 deletions.
diff --git a/app/views/ThreadMessagesView/components/EmptyThreads.tsx b/app/views/ThreadMessagesView/components/EmptyThreads.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import I18n from 'i18n-js';
+
+import { Filter } from '../filters';
+import BackgroundContainer from '../../../containers/BackgroundContainer';
+
+type TEmptyThreads = {
+	currentFilter: Filter;
+};
+
+const EmptyThreads = ({ currentFilter }: TEmptyThreads) => {
+	let text;
+	if (currentFilter === Filter.Following) {
+		text = I18n.t('No_threads_following');
+	} else if (currentFilter === Filter.Unread) {
+		text = I18n.t('No_threads_unread');
+	} else {
+		text = I18n.t('No_threads');
+	}
+	return <BackgroundContainer text={text} />;
+};
+
+export default EmptyThreads;
diff --git a/...views/ThreadMessagesView/Item.stories.tsx → ...agesView/components/Item/Item.stories.tsx b/...views/ThreadMessagesView/Item.stories.tsx → ...agesView/components/Item/Item.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
 
-import * as List from '../../containers/List';
-import { themes } from '../../lib/constants';
-import { ThemeContext, TSupportedThemes } from '../../theme';
-import Item, { IItem } from './Item';
+import * as List from '../../../../containers/List';
+import { themes } from '../../../../lib/constants';
+import { ThemeContext, TSupportedThemes } from '../../../../theme';
+import Item, { IItem } from '.';
 
 const author = {
 	_id: 'userid',

diff --git a/app/views/ThreadMessagesView/Item.tsx → ...eadMessagesView/components/Item/index.tsx b/app/views/ThreadMessagesView/Item.tsx → ...eadMessagesView/components/Item/index.tsx
@@ -1,60 +1,15 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
-import { useTheme } from '../../theme';
-import Avatar from '../../containers/Avatar';
-import sharedStyles from '../Styles';
-import { themes } from '../../lib/constants';
-import { MarkdownPreview } from '../../containers/markdown';
-import { formatDateThreads, makeThreadName } from '../../lib/methods/helpers/room';
-import ThreadDetails from '../../containers/ThreadDetails';
-import { TThreadModel } from '../../definitions';
-
-const styles = StyleSheet.create({
-	container: {
-		flexDirection: 'row',
-		padding: 16
-	},
-	contentContainer: {
-		flexDirection: 'column',
-		flex: 1
-	},
-	titleContainer: {
-		flexDirection: 'row',
-		marginBottom: 2,
-		alignItems: 'center'
-	},
-	title: {
-		flexShrink: 1,
-		fontSize: 18,
-		...sharedStyles.textMedium
-	},
-	time: {
-		fontSize: 14,
-		marginLeft: 4,
-		...sharedStyles.textRegular
-	},
-	avatar: {
-		marginRight: 8
-	},
-	threadDetails: {
-		marginTop: 8
-	},
-	badge: {
-		width: 8,
-		height: 8,
-		borderRadius: 4,
-		marginHorizontal: 8,
-		alignSelf: 'center'
-	},
-	messageContainer: {
-		flexDirection: 'row'
-	},
-	markdown: {
-		flex: 1
-	}
-});
+import { useTheme } from '../../../../theme';
+import Avatar from '../../../../containers/Avatar';
+import { themes } from '../../../../lib/constants';
+import { MarkdownPreview } from '../../../../containers/markdown';
+import { formatDateThreads, makeThreadName } from '../../../../lib/methods/helpers/room';
+import ThreadDetails from '../../../../containers/ThreadDetails';
+import { TThreadModel } from '../../../../definitions';
+import styles from './styles';
 
 export interface IItem {
 	item: TThreadModel;
@@ -77,8 +32,7 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
 		<Touchable
 			onPress={() => onPress(item)}
 			testID={`thread-messages-view-${item.msg}`}
-			style={{ backgroundColor: themes[theme].surfaceRoom }}
-		>
+			style={{ backgroundColor: themes[theme].surfaceRoom }}>
 			<View style={styles.container}>
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>

diff --git a/app/views/ThreadMessagesView/components/Item/styles.ts b/app/views/ThreadMessagesView/components/Item/styles.ts
@@ -0,0 +1,50 @@
+import { StyleSheet } from "react-native";
+
+import sharedStyles from '../../../Styles';
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		padding: 16
+	},
+	contentContainer: {
+		flexDirection: 'column',
+		flex: 1
+	},
+	titleContainer: {
+		flexDirection: 'row',
+		marginBottom: 2,
+		alignItems: 'center'
+	},
+	title: {
+		flexShrink: 1,
+		fontSize: 18,
+		...sharedStyles.textMedium
+	},
+	time: {
+		fontSize: 14,
+		marginLeft: 4,
+		...sharedStyles.textRegular
+	},
+	avatar: {
+		marginRight: 8
+	},
+	threadDetails: {
+		marginTop: 8
+	},
+	badge: {
+		width: 8,
+		height: 8,
+		borderRadius: 4,
+		marginHorizontal: 8,
+		alignSelf: 'center'
+	},
+	messageContainer: {
+		flexDirection: 'row'
+	},
+	markdown: {
+		flex: 1
+	}
+});
+
+export default styles