RocketChat · try-catch-stack · Jan 26, 2022
diff --git a/app/constants/colors.ts b/app/constants/colors.ts
@@ -65,6 +65,8 @@ export const themes: any = {
 		previewBackground: '#1F2329',
 		previewTintColor: '#ffffff',
 		backdropOpacity: 0.3,
+		chevronActive: '#0C0D0F',
+		chevronInactive: '#CBCED1',
 		attachmentLoadingOpacity: 0.7,
 		...mentions
 	},
@@ -112,6 +114,8 @@ export const themes: any = {
 		passcodeDotFull: '#6C727A',
 		previewBackground: '#030b1b',
 		previewTintColor: '#ffffff',
+		chevronActive: '#ffffff',
+		chevronInactive: '#414850',
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3,
 		...mentions
@@ -160,6 +164,8 @@ export const themes: any = {
 		passcodeDotFull: '#6C727A',
 		previewBackground: '#000000',
 		previewTintColor: '#ffffff',
+		chevronActive: '#ffffff',
+		chevronInactive: '#414850',
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3,
 		...mentions

diff --git a/app/presentation/DirectoryItem/index.tsx b/app/presentation/DirectoryItem/index.tsx
@@ -25,6 +25,7 @@ interface IDirectoryItem {
 	rightLabel?: string;
 	rid?: string;
 	theme: string;
+	featured?: boolean;
 	teamMain?: boolean;
 }
 
@@ -46,6 +47,7 @@ const DirectoryItem = ({
 	type,
 	rid,
 	theme,
+	featured = false,
 	teamMain
 }: IDirectoryItem): JSX.Element => (
 	<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID} theme={theme}>
@@ -57,6 +59,11 @@ const DirectoryItem = ({
 					<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>
 						{title}
 					</Text>
+					{featured && (
+						<View style={[styles.featured, { backgroundColor: themes[theme].actionTintColor }]}>
+							<Text style={[{ color: themes[theme].previewTintColor, fontSize: 12 }]}>Featured</Text>
+						</View>
+					)}
 				</View>
 				{description ? (
 					<Text style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>

diff --git a/app/presentation/DirectoryItem/styles.ts b/app/presentation/DirectoryItem/styles.ts
@@ -40,5 +40,10 @@ export default StyleSheet.create({
 		fontSize: 14,
 		paddingLeft: 10,
 		...sharedStyles.textRegular
+	},
+	featured: {
+		borderRadius: 2,
+		paddingVertical: 1,
+		paddingHorizontal: 2
 	}
 });
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
@@ -50,6 +50,10 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 
 	renderItem = (itemType: string) => {
 		const { changeType, type: propType, theme } = this.props;
+		const handleChangeType = () => {
+			changeType(itemType);
+			this.close();
+		};
 		let text = 'Users';
 		let icon = 'user';
 		if (itemType === 'channels') {
@@ -63,11 +67,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 		}
 
 		return (
-			<Touch
-				onPress={() => changeType(itemType)}
-				style={styles.dropdownItemButton}
-				theme={theme}
-				accessibilityLabel={I18n.t(text)}>
+			<Touch onPress={handleChangeType} style={styles.dropdownItemButton} theme={theme} accessibilityLabel={I18n.t(text)}>
 				<View style={styles.dropdownItemContainer}>
 					<CustomIcon style={[styles.dropdownItemIcon, { color: themes[theme].bodyText }]} size={22} name={icon} />
 					<Text style={[styles.dropdownItemText, { color: themes[theme].bodyText }]}>{I18n.t(text)}</Text>

diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
@@ -51,13 +51,18 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
 
 	constructor(props: IDirectoryViewProps) {
 		super(props);
+		console.log(props);
 		this.state = {
 			data: [],
 			loading: false,
 			text: '',
 			total: -1,
 			showOptionsDropdown: false,
 			globalUsers: true,
+			sortBy: 'usersCount',
+			sortDirection: -1,
+			headerType: 'name',
+			statsType: 'Users',
 			type: props.directoryDefaultView
 		};
 	}
@@ -89,13 +94,13 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
 		this.setState({ loading: true });
 
 		try {
-			const { data, type, globalUsers } = this.state;
+			const { data, type, globalUsers, sortBy, sortDirection } = this.state;
 			const query = { text, type, workspace: globalUsers ? 'all' : 'local' };
 			const directories = await RocketChat.getDirectory({
 				query,
 				offset: data.length,
 				count: 50,
-				sort: type === 'users' ? { username: 1 } : { usersCount: -1 }
+				sort: { [sortBy]: sortDirection }
 			});
 			if (directories.success) {
 				this.setState({
@@ -121,10 +126,13 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
 
 		if (type === 'users') {
 			logEvent(events.DIRECTORY_SEARCH_USERS);
+			this.setState({ headerType: 'username', statsType: 'Joined at', sortBy: 'username', sortDirection: 1 });
 		} else if (type === 'channels') {
 			logEvent(events.DIRECTORY_SEARCH_CHANNELS);
+			this.setState({ headerType: 'name', statsType: 'Users', sortBy: 'usersCount', sortDirection: -1 });
 		} else if (type === 'teams') {
 			logEvent(events.DIRECTORY_SEARCH_TEAMS);
+			this.setState({ headerType: 'name', statsType: 'Channels', sortBy: 'name', sortDirection: 1 });
 		}
 	};
 
@@ -177,8 +185,34 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
 		}
 	};
 
+	handleSort = (type: string) => {
+		const { sortBy, sortDirection } = this.state;
+		if (type === 'Users') {
+			type = 'usersCount';
+		} else if (type === 'Channels') {
+			return;
+		}
+		if (type === sortBy) {
+			this.setState({ sortDirection: -sortDirection }, () => this.search());
+			return;
+		}
+		this.setState({ sortBy: type, sortDirection: 1 }, () => this.search());
+	};
+
+	getChevronColor = (type: string, chevronType: number, theme: string) => {
+		const { sortBy, sortDirection } = this.state;
+		if (
+			(type === 'Users' && sortBy === 'usersCount') ||
+			(type === 'name' && sortBy === 'name') ||
+			(type === 'username' && sortBy === 'username')
+		) {
+			return chevronType === sortDirection ? themes[theme].chevronActive : themes[theme].chevronInactive;
+		}
+		return themes[theme].chevronInactive;
+	};
+
 	renderHeader = () => {
-		const { type } = this.state;
+		const { type, headerType, statsType } = this.state;
 		const { theme } = this.props;
 		let text = 'Users';
 		let icon = 'user';
@@ -212,14 +246,54 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
 						/>
 					</View>
 				</Touch>
+				<View
+					style={[
+						styles.headingContainer,
+						{ borderColor: themes[theme].separatorColor, borderBottomWidth: 1, borderTopWidth: 1 }
+					]}>
+					<Touch onPress={() => this.handleSort(headerType)} style={[styles.headingText]} theme={theme}>
+						<Text style={[{ color: themes[theme].headerTintColor, fontSize: 16 }]}>{I18n.t('Name')}</Text>
+						<View style={[styles.sortIcons]}>
+							<CustomIcon
+								name='chevron-up'
+								size={18}
+								style={[styles.chevronUp, { color: this.getChevronColor(headerType, -1, theme) }]}
+							/>
+							<CustomIcon
+								name='chevron-down'
+								size={18}
+								style={[styles.chevronDown, { color: this.getChevronColor(headerType, 1, theme) }]}
+							/>
+						</View>
+					</Touch>
+
+					{type !== 'users' && (
+						<Touch onPress={() => this.handleSort(statsType)} style={[styles.headingStats]} theme={theme}>
+							<Text style={[{ color: themes[theme].headerTintColor, fontSize: 16 }]}>{I18n.t(statsType)}</Text>
+							{type === 'channels' && (
+								<View style={[styles.sortIcons]}>
+									<CustomIcon
+										name='chevron-up'
+										size={18}
+										style={[styles.chevronUp, { color: this.getChevronColor(statsType, -1, theme) }]}
+									/>
+									<CustomIcon
+										name='chevron-down'
+										size={18}
+										style={[styles.chevronDown, { color: this.getChevronColor(statsType, 1, theme) }]}
+									/>
+								</View>
+							)}
+						</Touch>
+					)}
+				</View>
 			</>
 		);
 	};
 
 	renderItem = ({ item, index }: any) => {
 		const { data, type } = this.state;
 		const { baseUrl, user, theme } = this.props;
-
 		let style;
 		if (index === data.length - 1) {
 			style = {
@@ -259,6 +333,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
 					rightLabel={I18n.t('N_channels', { n: item.roomsCount })}
 					type={item.t}
 					teamMain={item.teamMain}
+					featured={item.featured}
 					{...commonProps}
 				/>
 			);
@@ -269,6 +344,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, any> {
 				description={item.topic}
 				rightLabel={I18n.t('N_users', { n: item.usersCount })}
 				type={item.t}
+				featured={item.featured}
 				{...commonProps}
 			/>
 		);

diff --git a/app/views/DirectoryView/styles.ts b/app/views/DirectoryView/styles.ts
@@ -12,6 +12,32 @@ export default StyleSheet.create({
 	separator: {
 		marginLeft: 60
 	},
+	headingContainer: {
+		flex: 1,
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		paddingVertical: 6
+	},
+	headingText: {
+		flexDirection: 'row',
+		alignItems: 'flex-end',
+		marginLeft: 60
+	},
+	headingStats: {
+		flexDirection: 'row',
+		alignItems: 'flex-end',
+		marginRight: 18
+	},
+	sortIcons: {
+		marginLeft: 2
+	},
+	chevronUp: {
+		position: 'absolute',
+		bottom: 7
+	},
+	chevronDown: {
+		bottom: 0
+	},
 	toggleDropdownContainer: {
 		height: 46,
 		flexDirection: 'row',