Rocket.Chat.ReactNative/app/views/DirectoryView/index.tsx

332 lines
9.0 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { FlatList, ListRenderItem, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { CompositeNavigationProp } from '@react-navigation/native';
import { ChatsStackParamList } from '../../stacks/types';
import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
import * as List from '../../containers/List';
import Touch from '../../containers/Touch';
import DirectoryItem from '../../containers/DirectoryItem';
import sharedStyles from '../Styles';
import I18n from '../../i18n';
import SearchBox from '../../containers/SearchBox';
import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
import StatusBar from '../../containers/StatusBar';
2019-12-04 16:39:53 +00:00
import ActivityIndicator from '../../containers/ActivityIndicator';
import * as HeaderButton from '../../containers/HeaderButton';
import { debounce } from '../../lib/methods/helpers';
import log, { events, logEvent } from '../../lib/methods/helpers/log';
import { TSupportedThemes, withTheme } from '../../theme';
import { themes } from '../../lib/constants';
2020-02-11 14:09:14 +00:00
import { getUserSelector } from '../../selectors/login';
[CHORE] Update react-navigation to v5 (#2154) * react-navigation v5 installed * compiling * Outside working * InsideStack compiling * Switch stack * Starting room * RoomView header * SafeAreaView * Slide from right stack animation * stash * Fix params * Create channel * inapp notification * Custom status * Add server working * Refactor appStart * Attachment * in-app notification * AuthLoadingView * Remove compat * Navigation * Outside animations * Fix new server icon * block modal * AttachmentView header * Remove unnecessary code * SelectedUsersView header * StatusView * CreateDiscussionView * RoomInfoView * RoomInfoEditView style * RoomMembersView * RoomsListView header * RoomView header * Share extension * getParam * Focus/blur * Trying to fix inapp * Lint * Simpler app container * Update libs * Revert "Simpler app container" This reverts commit 1e49d80bb49481c34f415831b9da5e9d53e66057. * Load messages faster * Fix safearea on ReactionsModal * Update safe area to v3 * lint * Fix transition * stash - drawer replace working * stash - modal nav * RoomActionsView as tablet modal * RoomStack * Stop showing RoomView header when there's no room * Custom Header and different navigation based on stack * Refactor setHeader * MasterDetailContext * RoomView header * Fix isMasterDetail rule * KeyCommands kind of working * Create channel on tablet * RoomView sCU * Remove withSplit * Settings opening as modal * Settings * StatusView headerLeft * Admin panel * TwoFactor style * DirectoryView * ServerDropdown and SortDropdown animations * ThreadMessagesView * Navigate to empty RoomView on server switch when in master detail * ProfileView header * Fix navigation issues * Nav to any room info on tablet * Room info * Refactoring * Fix rooms search * Roomslist commands * SearchMessagesView close modal * Key commands * Fix undefined subscription * Disallow navigate to focused room * isFocused state on RoomsListView * Blur text inputs when focus is lost * Replace animation * Default nav theme * Refactoring * Always open Attachment with close modal button * ModalContainer backdrop following themes * Screen tracking * Refactor get active route for in-app notification * Only mark room as focused when in master detail layout * Lint * Open modals as fade from bottom on Android * typo * Fixing tests * Fix in-app update * Fixing goRoom issues * Refactor stack names * Fix unreadsCount * Fix stack * Fix header animation * Refactor ShareNavigation * Refactor navigation theme * Make sure title is set * Fix create discussion navigation * Remove unused variable * Create discussions from actions fixed * Layout animation * Screen lock on share extension * Unnecessary change * Admin border * Set header after state callback * Fix key commands on outside stack * Fix back button pressed * Remove layout animations from Android * Tweak animations on Android * Disable swipe gesture to open drawer * Fix current item on RoomsListView * Fix add server * Fix drawer * Fix broadcast * LayoutAnimation instead of Transitions * Fix onboarding back press * Fix assorted tests * Create discussion fix * RoomInfoView header * Drawer active item
2020-06-15 14:00:46 +00:00
import SafeAreaView from '../../containers/SafeAreaView';
import { goRoom, TGoRoomItem } from '../../lib/methods/helpers/goRoom';
import { IApplicationState, IServerRoom, IUser, SubscriptionType } from '../../definitions';
import styles from './styles';
import Options from './Options';
import { Services } from '../../lib/services';
interface IDirectoryViewProps {
navigation: CompositeNavigationProp<
StackNavigationProp<ChatsStackParamList, 'DirectoryView'>,
StackNavigationProp<MasterDetailInsideStackParamList>
>;
baseUrl: string;
isFederationEnabled: boolean;
user: IUser;
theme: TSupportedThemes;
directoryDefaultView: string;
isMasterDetail: boolean;
}
interface IDirectoryViewState {
data: IServerRoom[];
loading: boolean;
text: string;
total: number;
showOptionsDropdown: boolean;
globalUsers: boolean;
type: string;
}
class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewState> {
static navigationOptions = ({ navigation, isMasterDetail }: IDirectoryViewProps) => {
const options: StackNavigationOptions = {
2019-11-25 20:01:17 +00:00
title: I18n.t('Directory')
};
[CHORE] Update react-navigation to v5 (#2154) * react-navigation v5 installed * compiling * Outside working * InsideStack compiling * Switch stack * Starting room * RoomView header * SafeAreaView * Slide from right stack animation * stash * Fix params * Create channel * inapp notification * Custom status * Add server working * Refactor appStart * Attachment * in-app notification * AuthLoadingView * Remove compat * Navigation * Outside animations * Fix new server icon * block modal * AttachmentView header * Remove unnecessary code * SelectedUsersView header * StatusView * CreateDiscussionView * RoomInfoView * RoomInfoEditView style * RoomMembersView * RoomsListView header * RoomView header * Share extension * getParam * Focus/blur * Trying to fix inapp * Lint * Simpler app container * Update libs * Revert "Simpler app container" This reverts commit 1e49d80bb49481c34f415831b9da5e9d53e66057. * Load messages faster * Fix safearea on ReactionsModal * Update safe area to v3 * lint * Fix transition * stash - drawer replace working * stash - modal nav * RoomActionsView as tablet modal * RoomStack * Stop showing RoomView header when there's no room * Custom Header and different navigation based on stack * Refactor setHeader * MasterDetailContext * RoomView header * Fix isMasterDetail rule * KeyCommands kind of working * Create channel on tablet * RoomView sCU * Remove withSplit * Settings opening as modal * Settings * StatusView headerLeft * Admin panel * TwoFactor style * DirectoryView * ServerDropdown and SortDropdown animations * ThreadMessagesView * Navigate to empty RoomView on server switch when in master detail * ProfileView header * Fix navigation issues * Nav to any room info on tablet * Room info * Refactoring * Fix rooms search * Roomslist commands * SearchMessagesView close modal * Key commands * Fix undefined subscription * Disallow navigate to focused room * isFocused state on RoomsListView * Blur text inputs when focus is lost * Replace animation * Default nav theme * Refactoring * Always open Attachment with close modal button * ModalContainer backdrop following themes * Screen tracking * Refactor get active route for in-app notification * Only mark room as focused when in master detail layout * Lint * Open modals as fade from bottom on Android * typo * Fixing tests * Fix in-app update * Fixing goRoom issues * Refactor stack names * Fix unreadsCount * Fix stack * Fix header animation * Refactor ShareNavigation * Refactor navigation theme * Make sure title is set * Fix create discussion navigation * Remove unused variable * Create discussions from actions fixed * Layout animation * Screen lock on share extension * Unnecessary change * Admin border * Set header after state callback * Fix key commands on outside stack * Fix back button pressed * Remove layout animations from Android * Tweak animations on Android * Disable swipe gesture to open drawer * Fix current item on RoomsListView * Fix add server * Fix drawer * Fix broadcast * LayoutAnimation instead of Transitions * Fix onboarding back press * Fix assorted tests * Create discussion fix * RoomInfoView header * Drawer active item
2020-06-15 14:00:46 +00:00
if (isMasterDetail) {
options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} testID='directory-view-close' />;
2019-11-25 20:01:17 +00:00
}
return options;
};
constructor(props: IDirectoryViewProps) {
super(props);
this.state = {
data: [],
loading: false,
text: '',
total: -1,
showOptionsDropdown: false,
globalUsers: true,
type: props.directoryDefaultView
};
}
componentDidMount() {
this.load({});
}
onSearchChangeText = (text: string) => {
this.setState({ text }, this.search);
};
load = debounce(async ({ newSearch = false }) => {
if (newSearch) {
this.setState({ data: [], total: -1, loading: false });
}
const {
loading,
text,
total,
data: { length }
} = this.state;
if (loading || length === total) {
return;
}
this.setState({ loading: true });
try {
const { data, type, globalUsers } = this.state;
const query = { text, type, workspace: globalUsers ? 'all' : 'local' };
const directories = await Services.getDirectory({
query,
offset: data.length,
count: 50,
sort: type === 'users' ? { username: 1 } : { usersCount: -1 }
});
if (directories.success) {
this.setState({
data: [...data, ...(directories.result as IServerRoom[])],
loading: false,
total: directories.total
});
} else {
this.setState({ loading: false });
}
} catch (e) {
log(e);
this.setState({ loading: false });
}
}, 200);
search = () => {
this.load({ newSearch: true });
};
changeType = (type: string) => {
this.setState({ type, data: [] }, () => this.search());
[NEW] Log events from RoomsList, SideDrawer and Profile (#2190) * Create method to track user event to isolate the logic to improve future refactoring * Track Onboarding view * Track NewServer view * Refactor track method due to firebase already send the current screen * Track default login and all the oAuth options * Track default sign up in RegisterView * Change trackUserEvent signature and update all the files * Track the remaining login services * track add server, change server and search * Track SidebarView and refactor to use react-navigation * Track profile events and handle exceptions * Track create channel flux * Track send message to user via NewMessageView * Track create direct message flux * Handle failure of create channel and group in the saga * Track create discussion flux * Track navigate to directory and its actions * Track read, favorite and hide a channel, handling its errors * Track all channels sorting and grouping * Resolve requests to improve the importing logs and events * Remove unused events file * Leave a bugsnag breadcrumb when logging an event * Move all logEvent to the top of code block and log remaining fail events * Move all the non-logic-dependent logEvent to the top of code block * Improve the logging of sidebar events * Improve events from onboarding and newserver * Improve events from login and register view, and log enter with apple * Improve NewMessageView events * Improve CreateChannel events * Improve CreateDiscussion and SelectedUsers create group events * Improve RoomsList events and log trivial events * Improve ProfileView events * Remove single line function body for the sidebarNavigate * Navigate to Status and AdminPanel View using the defined sidebarNavigate method Co-authored-by: Diego Mello <diegolmello@gmail.com>
2020-07-30 13:26:17 +00:00
if (type === 'users') {
logEvent(events.DIRECTORY_SEARCH_USERS);
} else if (type === 'channels') {
logEvent(events.DIRECTORY_SEARCH_CHANNELS);
} else if (type === 'teams') {
logEvent(events.DIRECTORY_SEARCH_TEAMS);
[NEW] Log events from RoomsList, SideDrawer and Profile (#2190) * Create method to track user event to isolate the logic to improve future refactoring * Track Onboarding view * Track NewServer view * Refactor track method due to firebase already send the current screen * Track default login and all the oAuth options * Track default sign up in RegisterView * Change trackUserEvent signature and update all the files * Track the remaining login services * track add server, change server and search * Track SidebarView and refactor to use react-navigation * Track profile events and handle exceptions * Track create channel flux * Track send message to user via NewMessageView * Track create direct message flux * Handle failure of create channel and group in the saga * Track create discussion flux * Track navigate to directory and its actions * Track read, favorite and hide a channel, handling its errors * Track all channels sorting and grouping * Resolve requests to improve the importing logs and events * Remove unused events file * Leave a bugsnag breadcrumb when logging an event * Move all logEvent to the top of code block and log remaining fail events * Move all the non-logic-dependent logEvent to the top of code block * Improve the logging of sidebar events * Improve events from onboarding and newserver * Improve events from login and register view, and log enter with apple * Improve NewMessageView events * Improve CreateChannel events * Improve CreateDiscussion and SelectedUsers create group events * Improve RoomsList events and log trivial events * Improve ProfileView events * Remove single line function body for the sidebarNavigate * Navigate to Status and AdminPanel View using the defined sidebarNavigate method Co-authored-by: Diego Mello <diegolmello@gmail.com>
2020-07-30 13:26:17 +00:00
}
};
toggleWorkspace = () => {
this.setState(
({ globalUsers }) => ({ globalUsers: !globalUsers, data: [] }),
() => this.search()
);
};
toggleDropdown = () => {
this.setState(({ showOptionsDropdown }) => ({ showOptionsDropdown: !showOptionsDropdown }));
};
goRoom = (item: TGoRoomItem) => {
const { isMasterDetail } = this.props;
goRoom({ item, isMasterDetail, popToRoot: true });
};
onPressItem = async (item: IServerRoom) => {
const { type } = this.state;
if (type === 'users') {
const result = await Services.createDirectMessage(item.username as string);
if (result.success) {
this.goRoom({ rid: result.room._id, name: item.username, t: SubscriptionType.DIRECT });
}
} else if (['p', 'c'].includes(item.t) && !item.teamMain) {
const result = await Services.getRoomInfo(item._id);
if (result.success) {
this.goRoom({
rid: item._id,
name: item.name,
joinCodeRequired: result.room.joinCodeRequired,
t: item.t as SubscriptionType,
search: true
});
}
} else {
this.goRoom({
rid: item._id,
name: item.name,
t: item.t as SubscriptionType,
search: true,
teamMain: item.teamMain,
teamId: item.teamId
});
}
};
renderHeader = () => {
const { type } = this.state;
2019-12-04 16:39:53 +00:00
const { theme } = this.props;
let text = 'Users';
let icon: TIconsName = 'user';
if (type === 'channels') {
text = 'Channels';
icon = 'channel-public';
}
if (type === 'teams') {
text = 'Teams';
icon = 'teams';
}
return (
<>
<SearchBox onChangeText={this.onSearchChangeText} onSubmitEditing={this.search} testID='directory-view-search' />
<Touch onPress={this.toggleDropdown} style={styles.dropdownItemButton} testID='directory-view-dropdown'>
<View
style={[
sharedStyles.separatorVertical,
styles.toggleDropdownContainer,
{ borderColor: themes[theme].separatorColor }
]}
>
<CustomIcon name={icon} size={20} color={themes[theme].tintColor} style={styles.toggleDropdownIcon} />
<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{I18n.t(text)}</Text>
<CustomIcon
name='chevron-down'
size={20}
color={themes[theme].auxiliaryTintColor}
style={styles.toggleDropdownArrow}
/>
</View>
</Touch>
</>
);
};
renderItem: ListRenderItem<IServerRoom> = ({ item, index }) => {
const { data, type } = this.state;
2019-12-04 16:39:53 +00:00
const { baseUrl, user, theme } = this.props;
let style;
if (index === data.length - 1) {
style = {
...sharedStyles.separatorBottom,
borderColor: themes[theme].separatorColor
};
}
const commonProps = {
title: item.name as string,
onPress: () => this.onPressItem(item),
baseUrl,
2023-02-23 13:03:48 +00:00
testID: `directory-view-item-${item.name}`,
style,
2019-12-04 16:39:53 +00:00
user,
[NEW] Channel avatars (#2504) * [WIP] Avatar cache invalidation * [WIP] Avatar container * [IMPROVEMENT] Avatar container * [CHORE] Improve code * Allow static image on Avatar * Fix avatar changing while change username (#1583) Co-authored-by: Prateek93a <prateek93a@gmail.com> * Add default props to properly update on Sidebar and ProfileView * Fix subscribing on the wrong moment * Storyshots update * RoomItem using Avatar Component * use iife to unsubscribe from user * Use component on avatar container * RoomItem as a React.Component * Move servers models to servers folder * Avatar -> AvatarContainer * Users indexed fields * Initialize author and check if u is present * Not was found -> User not found (turn comments more relevant) * RoomItemInner -> Wrapper * Revert Avatar Touchable logic * Revert responsability of LeftButton on Tablet Mode * Prevent setState on constructor * Run avatarURL only when its not static * Add streams RC Version * Move entire add user logic to result.success * Reorder init on RoomItem * onPress as a class function * Fix roomItem using same username * Add avatar Stories * Fix pick an image from gallery on ProfileView * Format Avatar URL to use RoomId. Co-authored-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com> * edit room avatar * invalidate cache of room images * reinit avatar if something change * read avatar cache on search * room avatar changed system message * add avatar by rid test * update snapshot * etag cache on select channel * reset room avatar * increase caching to have a better image quality * fix lgtm warn * invalidate ci cache * get avatar etag on select users of create discussion * invalidate ci cache * Fix migration * Fix sidebar avatar not updating * Remove outdated comment * Tests Co-authored-by: Prateek93a <prateek93a@gmail.com> Co-authored-by: Diego Mello <diegolmello@gmail.com> Co-authored-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
2020-10-30 13:51:04 +00:00
theme,
rid: item._id
};
if (type === 'users') {
return (
<DirectoryItem
avatar={item.username}
description={item.username}
rightLabel={item.federation && item.federation.peer}
type='d'
{...commonProps}
/>
);
}
if (type === 'teams') {
return (
<DirectoryItem
avatar={item.name}
description={item.name}
rightLabel={I18n.t('N_channels', { n: item.roomsCount })}
type={item.t}
teamMain={item.teamMain}
{...commonProps}
/>
);
}
return (
<DirectoryItem
avatar={item.name}
description={item.topic}
rightLabel={I18n.t('N_users', { n: item.usersCount })}
type={item.t}
{...commonProps}
/>
);
};
render = () => {
const { data, loading, showOptionsDropdown, type, globalUsers } = this.state;
2019-12-04 16:39:53 +00:00
const { isFederationEnabled, theme } = this.props;
return (
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
<StatusBar />
<FlatList
data={data}
style={styles.list}
contentContainerStyle={styles.listContainer}
extraData={this.state}
keyExtractor={item => item._id}
ListHeaderComponent={this.renderHeader}
renderItem={this.renderItem}
ItemSeparatorComponent={List.Separator}
keyboardShouldPersistTaps='always'
ListFooterComponent={loading ? <ActivityIndicator /> : null}
onEndReached={() => this.load({})}
/>
{showOptionsDropdown ? (
<Options
theme={theme}
type={type}
globalUsers={globalUsers}
close={this.toggleDropdown}
changeType={this.changeType}
toggleWorkspace={this.toggleWorkspace}
isFederationEnabled={isFederationEnabled}
/>
) : null}
</SafeAreaView>
);
};
}
const mapStateToProps = (state: IApplicationState) => ({
2020-02-11 14:09:14 +00:00
baseUrl: state.server.server,
user: getUserSelector(state),
isFederationEnabled: state.settings.FEDERATION_Enabled as boolean,
directoryDefaultView: state.settings.Accounts_Directory_DefaultView as string,
[CHORE] Update react-navigation to v5 (#2154) * react-navigation v5 installed * compiling * Outside working * InsideStack compiling * Switch stack * Starting room * RoomView header * SafeAreaView * Slide from right stack animation * stash * Fix params * Create channel * inapp notification * Custom status * Add server working * Refactor appStart * Attachment * in-app notification * AuthLoadingView * Remove compat * Navigation * Outside animations * Fix new server icon * block modal * AttachmentView header * Remove unnecessary code * SelectedUsersView header * StatusView * CreateDiscussionView * RoomInfoView * RoomInfoEditView style * RoomMembersView * RoomsListView header * RoomView header * Share extension * getParam * Focus/blur * Trying to fix inapp * Lint * Simpler app container * Update libs * Revert "Simpler app container" This reverts commit 1e49d80bb49481c34f415831b9da5e9d53e66057. * Load messages faster * Fix safearea on ReactionsModal * Update safe area to v3 * lint * Fix transition * stash - drawer replace working * stash - modal nav * RoomActionsView as tablet modal * RoomStack * Stop showing RoomView header when there's no room * Custom Header and different navigation based on stack * Refactor setHeader * MasterDetailContext * RoomView header * Fix isMasterDetail rule * KeyCommands kind of working * Create channel on tablet * RoomView sCU * Remove withSplit * Settings opening as modal * Settings * StatusView headerLeft * Admin panel * TwoFactor style * DirectoryView * ServerDropdown and SortDropdown animations * ThreadMessagesView * Navigate to empty RoomView on server switch when in master detail * ProfileView header * Fix navigation issues * Nav to any room info on tablet * Room info * Refactoring * Fix rooms search * Roomslist commands * SearchMessagesView close modal * Key commands * Fix undefined subscription * Disallow navigate to focused room * isFocused state on RoomsListView * Blur text inputs when focus is lost * Replace animation * Default nav theme * Refactoring * Always open Attachment with close modal button * ModalContainer backdrop following themes * Screen tracking * Refactor get active route for in-app notification * Only mark room as focused when in master detail layout * Lint * Open modals as fade from bottom on Android * typo * Fixing tests * Fix in-app update * Fixing goRoom issues * Refactor stack names * Fix unreadsCount * Fix stack * Fix header animation * Refactor ShareNavigation * Refactor navigation theme * Make sure title is set * Fix create discussion navigation * Remove unused variable * Create discussions from actions fixed * Layout animation * Screen lock on share extension * Unnecessary change * Admin border * Set header after state callback * Fix key commands on outside stack * Fix back button pressed * Remove layout animations from Android * Tweak animations on Android * Disable swipe gesture to open drawer * Fix current item on RoomsListView * Fix add server * Fix drawer * Fix broadcast * LayoutAnimation instead of Transitions * Fix onboarding back press * Fix assorted tests * Create discussion fix * RoomInfoView header * Drawer active item
2020-06-15 14:00:46 +00:00
isMasterDetail: state.app.isMasterDetail
});
2019-12-04 16:39:53 +00:00
export default connect(mapStateToProps)(withTheme(DirectoryView));