Unverified Commit 1ea6fe11 authored by Reinaldo Neto's avatar Reinaldo Neto Committed by GitHub
Browse files

Chore: Migrate SelectedUsersView to Typescript (#3520)


Co-authored-by: default avatarAlexAlexandre <alexalexandrejr@gmail.com>
Co-authored-by: default avatarDiego Mello <diegolmello@gmail.com>
parent 4ba589cf
......@@ -46,7 +46,7 @@ interface IUserItem {
testID: string;
onLongPress?: () => void;
style?: StyleProp<ViewStyle>;
icon?: string;
icon?: string | null;
theme: string;
}
......
import React from 'react';
import PropTypes from 'prop-types';
import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';
import { FlatList, View } from 'react-native';
import { connect } from 'react-redux';
import orderBy from 'lodash/orderBy';
import { Q } from '@nozbe/watermelondb';
import { Subscription } from 'rxjs';
import * as List from '../containers/List';
import database from '../lib/database';
......@@ -22,33 +24,51 @@ import { addUser as addUserAction, removeUser as removeUserAction, reset as rese
import { showErrorAlert } from '../utils/info';
import SafeAreaView from '../containers/SafeAreaView';
import sharedStyles from './Styles';
import { ChatsStackParamList } from '../stacks/types';
const ITEM_WIDTH = 250;
const getItemLayout = (_, index) => ({ length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index });
class SelectedUsersView extends React.Component {
static propTypes = {
baseUrl: PropTypes.string,
addUser: PropTypes.func.isRequired,
removeUser: PropTypes.func.isRequired,
reset: PropTypes.func.isRequired,
users: PropTypes.array,
loading: PropTypes.bool,
user: PropTypes.shape({
id: PropTypes.string,
token: PropTypes.string,
username: PropTypes.string,
name: PropTypes.string
}),
navigation: PropTypes.object,
route: PropTypes.object,
theme: PropTypes.string
const getItemLayout = (_: any, index: number) => ({ length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index });
interface IUser {
_id: string;
name: string;
fname: string;
search?: boolean;
// username is used when is from searching
username?: string;
}
interface ISelectedUsersViewState {
maxUsers?: number;
search: IUser[];
chats: IUser[];
}
interface ISelectedUsersViewProps {
navigation: StackNavigationProp<ChatsStackParamList, 'SelectedUsersView'>;
route: RouteProp<ChatsStackParamList, 'SelectedUsersView'>;
baseUrl: string;
addUser(user: IUser): void;
removeUser(user: IUser): void;
reset(): void;
users: IUser[];
loading: boolean;
user: {
id: string;
token: string;
username: string;
name: string;
};
theme: string;
}
constructor(props) {
class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelectedUsersViewState> {
private flatlist?: FlatList;
private querySubscription?: Subscription;
constructor(props: ISelectedUsersViewProps) {
super(props);
this.init();
this.flatlist = React.createRef();
const maxUsers = props.route.params?.maxUsers;
this.state = {
maxUsers,
......@@ -62,7 +82,7 @@ class SelectedUsersView extends React.Component {
this.setHeader(props.route.params?.showButton);
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: ISelectedUsersViewProps) {
if (this.isGroupChat()) {
const { users } = this.props;
if (prevProps.users.length !== users.length) {
......@@ -80,7 +100,7 @@ class SelectedUsersView extends React.Component {
}
// showButton can be sent as route params or updated by the component
setHeader = showButton => {
setHeader = (showButton?: boolean) => {
const { navigation, route } = this.props;
const title = route.params?.title ?? I18n.t('Select_Users');
const buttonText = route.params?.buttonText ?? I18n.t('Next');
......@@ -107,7 +127,8 @@ class SelectedUsersView extends React.Component {
.query(Q.where('t', 'd'))
.observeWithColumns(['room_updated_at']);
this.querySubscription = observable.subscribe(data => {
// TODO: Refactor when migrate room
this.querySubscription = observable.subscribe((data: any) => {
const chats = orderBy(data, ['roomUpdatedAt'], ['desc']);
this.setState({ chats });
});
......@@ -116,11 +137,11 @@ class SelectedUsersView extends React.Component {
}
};
onSearchChangeText(text) {
onSearchChangeText(text: string) {
this.search(text);
}
search = async text => {
search = async (text: string) => {
const result = await RocketChat.search({ text, filterRooms: false });
this.setState({
search: result
......@@ -129,15 +150,15 @@ class SelectedUsersView extends React.Component {
isGroupChat = () => {
const { maxUsers } = this.state;
return maxUsers > 2;
return maxUsers! > 2;
};
isChecked = username => {
isChecked = (username: string) => {
const { users } = this.props;
return users.findIndex(el => el.name === username) !== -1;
};
toggleUser = user => {
toggleUser = (user: IUser) => {
const { maxUsers } = this.state;
const {
addUser,
......@@ -163,29 +184,29 @@ class SelectedUsersView extends React.Component {
}
};
_onPressItem = (id, item = {}) => {
_onPressItem = (id: string, item = {} as IUser) => {
if (item.search) {
this.toggleUser({ _id: item._id, name: item.username, fname: item.name });
this.toggleUser({ _id: item._id, name: item.username!, fname: item.name });
} else {
this.toggleUser({ _id: item._id, name: item.name, fname: item.fname });
}
};
_onPressSelectedItem = item => this.toggleUser(item);
_onPressSelectedItem = (item: IUser) => this.toggleUser(item);
renderHeader = () => {
const { theme } = this.props;
return (
<View style={{ backgroundColor: themes[theme].backgroundColor }}>
<SearchBox onChangeText={text => this.onSearchChangeText(text)} testID='select-users-view-search' />
<SearchBox onChangeText={(text: string) => this.onSearchChangeText(text)} testID='select-users-view-search' />
{this.renderSelected()}
</View>
);
};
setFlatListRef = ref => (this.flatlist = ref);
setFlatListRef = (ref: FlatList) => (this.flatlist = ref);
onContentSizeChange = () => this.flatlist.scrollToEnd({ animated: true });
onContentSizeChange = () => this.flatlist?.scrollToEnd({ animated: true });
renderSelected = () => {
const { users, theme } = this.props;
......@@ -204,35 +225,32 @@ class SelectedUsersView extends React.Component {
style={[sharedStyles.separatorTop, { borderColor: themes[theme].separatorColor }]}
contentContainerStyle={{ marginVertical: 5 }}
renderItem={this.renderSelectedItem}
enableEmptySections
keyboardShouldPersistTaps='always'
horizontal
/>
);
};
renderSelectedItem = ({ item }) => {
const { baseUrl, user, theme } = this.props;
renderSelectedItem = ({ item }: { item: IUser }) => {
const { theme } = this.props;
return (
<UserItem
name={item.fname}
username={item.name}
onPress={() => this._onPressSelectedItem(item)}
testID={`selected-user-${item.name}`}
baseUrl={baseUrl}
style={{ paddingRight: 15 }}
user={user}
theme={theme}
/>
);
};
renderItem = ({ item, index }) => {
renderItem = ({ item, index }: { item: IUser; index: number }) => {
const { search, chats } = this.state;
const { baseUrl, user, theme } = this.props;
const { theme } = this.props;
const name = item.search ? item.name : item.fname;
const username = item.search ? item.username : item.name;
const username = item.search ? item.username! : item.name;
let style = { borderColor: themes[theme].separatorColor };
if (index === 0) {
style = { ...style, ...sharedStyles.separatorTop };
......@@ -250,9 +268,7 @@ class SelectedUsersView extends React.Component {
onPress={() => this._onPressItem(item._id, item)}
testID={`select-users-view-item-${item.name}`}
icon={this.isChecked(username) ? 'check' : null}
baseUrl={baseUrl}
style={style}
user={user}
theme={theme}
/>
);
......@@ -275,7 +291,6 @@ class SelectedUsersView extends React.Component {
ItemSeparatorComponent={List.Separator}
ListHeaderComponent={this.renderHeader}
contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
enableEmptySections
keyboardShouldPersistTaps='always'
/>
);
......@@ -293,16 +308,16 @@ class SelectedUsersView extends React.Component {
};
}
const mapStateToProps = state => ({
const mapStateToProps = (state: any) => ({
baseUrl: state.server.server,
users: state.selectedUsers.users,
loading: state.selectedUsers.loading,
user: getUserSelector(state)
});
const mapDispatchToProps = dispatch => ({
addUser: user => dispatch(addUserAction(user)),
removeUser: user => dispatch(removeUserAction(user)),
const mapDispatchToProps = (dispatch: any) => ({
addUser: (user: any) => dispatch(addUserAction(user)),
removeUser: (user: any) => dispatch(removeUserAction(user)),
reset: () => dispatch(resetAction())
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment