sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Migrate TeamChannelsView to Typescript (#3532) 

Co-authored-by: Gerzon Z <gerzonzcanario@gmail.com>
This commit is contained in:
Reinaldo Neto 2021-12-02 10:58:49 -03:00 committed by GitHub
parent 65f5b03bdf
commit 11f00fb5f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 87 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/containers/HeaderButton/HeaderButtonContainer.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
interface IHeaderButtonContainer { interface IHeaderButtonContainer {
children: JSX.Element; children: React.ReactNode;
left?: boolean; left?: boolean;
} }

132
app/views/TeamChannelsView.js → app/views/TeamChannelsView.tsx
View File

@ -1,10 +1,11 @@
import React from 'react'; import React from 'react';
import { Alert, FlatList, Keyboard } from 'react-native'; import { Alert, FlatList, Keyboard } from 'react-native';
import PropTypes from 'prop-types'; import { RouteProp } from '@react-navigation/native';
import { Dispatch } from 'redux';
import { Q } from '@nozbe/watermelondb'; import { Q } from '@nozbe/watermelondb';
import { withSafeAreaInsets } from 'react-native-safe-area-context'; import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { HeaderBackButton } from '@react-navigation/stack'; import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import RoomHeader from '../containers/RoomHeader'; import RoomHeader from '../containers/RoomHeader';
@ -38,35 +39,74 @@ const PERMISSION_EDIT_TEAM_CHANNEL = 'edit-team-channel';
const PERMISSION_REMOVE_TEAM_CHANNEL = 'remove-team-channel'; const PERMISSION_REMOVE_TEAM_CHANNEL = 'remove-team-channel';
const PERMISSION_ADD_TEAM_CHANNEL = 'add-team-channel'; const PERMISSION_ADD_TEAM_CHANNEL = 'add-team-channel';
const getItemLayout = (data, index) => ({ const getItemLayout = (data: IItem[] | null | undefined, index: number) => ({
length: data.length, length: data?.length || 0,
offset: ROW_HEIGHT * index, offset: ROW_HEIGHT * index,
index index
}); });
const keyExtractor = item => item._id; const keyExtractor = (item: IItem) => item._id;
class TeamChannelsView extends React.Component { // This interface comes from request RocketChat.getTeamListRoom
static propTypes = { interface IItem {
route: PropTypes.object, _id: string;
navigation: PropTypes.object, fname: string;
isMasterDetail: PropTypes.bool, customFields: object;
insets: PropTypes.object, broadcast: boolean;
theme: PropTypes.string, encrypted: boolean;
useRealName: PropTypes.bool, name: string;
width: PropTypes.number, t: string;
StoreLastMessage: PropTypes.bool, msgs: number;
addTeamChannelPermission: PropTypes.array, usersCount: number;
editTeamChannelPermission: PropTypes.array, u: { _id: string; name: string };
removeTeamChannelPermission: PropTypes.array, ts: string;
deleteCPermission: PropTypes.array, ro: boolean;
deletePPermission: PropTypes.array, teamId: string;
showActionSheet: PropTypes.func, default: boolean;
deleteRoom: PropTypes.func, sysMes: boolean;
showAvatar: PropTypes.bool, _updatedAt: string;
displayMode: PropTypes.string teamDefault: boolean;
}; }
constructor(props) { interface ITeamChannelsViewState {
loading: boolean;
loadingMore: boolean;
data: IItem[];
isSearching: boolean;
searchText: string | null;
search: IItem[];
end: boolean;
showCreate: boolean;
}
interface ITeamChannelsViewProps {
route: RouteProp<{ TeamChannelsView: { teamId: string } }, 'TeamChannelsView'>;
navigation: StackNavigationProp<any, 'TeamChannelsView'>;
isMasterDetail: boolean;
insets: EdgeInsets;
theme: string;
useRealName: boolean;
width: number;
StoreLastMessage: boolean;
addTeamChannelPermission: string[];
editTeamChannelPermission: string[];
removeTeamChannelPermission: string[];
deleteCPermission: string[];
deletePPermission: string[];
showActionSheet: (options: any) => void;
deleteRoom: (rid: string, t: string) => void;
showAvatar: boolean;
displayMode: string;
}
class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChannelsViewState> {
private teamId: string;
// TODO: Refactor when migrate room
private teamChannels: any;
// TODO: Refactor when migrate room
private team: any;
constructor(props: ITeamChannelsViewProps) {
super(props); super(props);
this.teamId = props.route.params?.teamId; this.teamId = props.route.params?.teamId;
this.state = { this.state = {
@ -95,7 +135,7 @@ class TeamChannelsView extends React.Component {
try { try {
const subCollection = db.get('subscriptions'); const subCollection = db.get('subscriptions');
this.teamChannels = await subCollection.query(Q.where('team_id', Q.eq(this.teamId))); this.teamChannels = await subCollection.query(Q.where('team_id', Q.eq(this.teamId)));
this.team = this.teamChannels?.find(channel => channel.teamMain); this.team = this.teamChannels?.find((channel: any) => channel.teamMain);
this.setHeader(); this.setHeader();
if (!this.team) { if (!this.team) {
@ -140,7 +180,7 @@ class TeamChannelsView extends React.Component {
loading: false, loading: false,
loadingMore: false, loadingMore: false,
end: result.rooms.length < API_FETCH_COUNT end: result.rooms.length < API_FETCH_COUNT
}; } as ITeamChannelsViewState;
if (isSearching) { if (isSearching) {
newState.search = [...search, ...result.rooms]; newState.search = [...search, ...result.rooms];
@ -170,7 +210,7 @@ class TeamChannelsView extends React.Component {
const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 2 }); const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 2 });
if (isSearching) { if (isSearching) {
const options = { const options: StackNavigationOptions = {
headerTitleAlign: 'left', headerTitleAlign: 'left',
headerLeft: () => ( headerLeft: () => (
<HeaderButton.Container left> <HeaderButton.Container left>
@ -187,7 +227,7 @@ class TeamChannelsView extends React.Component {
return navigation.setOptions(options); return navigation.setOptions(options);
} }
const options = { const options: StackNavigationOptions = {
headerShown: true, headerShown: true,
headerTitleAlign: 'left', headerTitleAlign: 'left',
headerTitleContainerStyle: { headerTitleContainerStyle: {
@ -232,7 +272,7 @@ class TeamChannelsView extends React.Component {
this.setState({ isSearching: true }, () => this.setHeader()); this.setState({ isSearching: true }, () => this.setHeader());
}; };
onSearchChangeText = debounce(searchText => { onSearchChangeText = debounce((searchText: string) => {
this.setState( this.setState(
{ {
searchText, searchText,
@ -270,7 +310,7 @@ class TeamChannelsView extends React.Component {
); );
}; };
goRoomActionsView = screen => { goRoomActionsView = (screen: string) => {
logEvent(events.TC_GO_ACTIONS); logEvent(events.TC_GO_ACTIONS);
const { team } = this; const { team } = this;
const { navigation, isMasterDetail } = this.props; const { navigation, isMasterDetail } = this.props;
@ -293,12 +333,12 @@ class TeamChannelsView extends React.Component {
} }
}; };
getRoomTitle = item => RocketChat.getRoomTitle(item); getRoomTitle = (item: IItem) => RocketChat.getRoomTitle(item);
getRoomAvatar = item => RocketChat.getRoomAvatar(item); getRoomAvatar = (item: IItem) => RocketChat.getRoomAvatar(item);
onPressItem = debounce( onPressItem = debounce(
async item => { async (item: IItem) => {
logEvent(events.TC_GO_ROOM); logEvent(events.TC_GO_ROOM);
const { navigation, isMasterDetail } = this.props; const { navigation, isMasterDetail } = this.props;
try { try {
@ -314,7 +354,7 @@ class TeamChannelsView extends React.Component {
navigation.pop(); navigation.pop();
} }
goRoom({ item: params, isMasterDetail, navigationMethod: navigation.push }); goRoom({ item: params, isMasterDetail, navigationMethod: navigation.push });
} catch (e) { } catch (e: any) {
if (e.data.error === 'not-allowed') { if (e.data.error === 'not-allowed') {
showErrorAlert(I18n.t('error-not-allowed')); showErrorAlert(I18n.t('error-not-allowed'));
} else { } else {
@ -326,7 +366,7 @@ class TeamChannelsView extends React.Component {
true true
); );
toggleAutoJoin = async item => { toggleAutoJoin = async (item: IItem) => {
logEvent(events.TC_TOGGLE_AUTOJOIN); logEvent(events.TC_TOGGLE_AUTOJOIN);
try { try {
const { data } = this.state; const { data } = this.state;
@ -346,7 +386,7 @@ class TeamChannelsView extends React.Component {
} }
}; };
remove = item => { remove = (item: IItem) => {
Alert.alert( Alert.alert(
I18n.t('Confirmation'), I18n.t('Confirmation'),
I18n.t('Remove_Team_Room_Warning'), I18n.t('Remove_Team_Room_Warning'),
@ -365,7 +405,7 @@ class TeamChannelsView extends React.Component {
); );
}; };
removeRoom = async item => { removeRoom = async (item: IItem) => {
logEvent(events.TC_DELETE_ROOM); logEvent(events.TC_DELETE_ROOM);
try { try {
const { data } = this.state; const { data } = this.state;
@ -380,7 +420,7 @@ class TeamChannelsView extends React.Component {
} }
}; };
delete = item => { delete = (item: IItem) => {
logEvent(events.TC_DELETE_ROOM); logEvent(events.TC_DELETE_ROOM);
const { deleteRoom } = this.props; const { deleteRoom } = this.props;
@ -402,7 +442,7 @@ class TeamChannelsView extends React.Component {
); );
}; };
showChannelActions = async item => { showChannelActions = async (item: IItem) => {
logEvent(events.ROOM_SHOW_BOX_ACTIONS); logEvent(events.ROOM_SHOW_BOX_ACTIONS);
const { const {
showActionSheet, showActionSheet,
@ -464,7 +504,7 @@ class TeamChannelsView extends React.Component {
showActionSheet({ options }); showActionSheet({ options });
}; };
renderItem = ({ item }) => { renderItem = ({ item }: { item: IItem }) => {
const { StoreLastMessage, useRealName, theme, width, showAvatar, displayMode } = this.props; const { StoreLastMessage, useRealName, theme, width, showAvatar, displayMode } = this.props;
return ( return (
<RoomItem <RoomItem
@ -534,7 +574,7 @@ class TeamChannelsView extends React.Component {
} }
} }
const mapStateToProps = state => ({ const mapStateToProps = (state: any) => ({
baseUrl: state.server.server, baseUrl: state.server.server,
user: getUserSelector(state), user: getUserSelector(state),
useRealName: state.settings.UI_Use_Real_Name, useRealName: state.settings.UI_Use_Real_Name,
@ -549,8 +589,8 @@ const mapStateToProps = state => ({
displayMode: state.sortPreferences.displayMode displayMode: state.sortPreferences.displayMode
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = (dispatch: Dispatch) => ({
deleteRoom: (rid, t) => dispatch(deleteRoomAction(rid, t)) deleteRoom: (rid: string, t: string) => dispatch(deleteRoomAction(rid, t))
}); });
export default connect( export default connect(