From 11f00fb5f76cddba2ce35aaa7b972e169d08cbdc Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Thu, 2 Dec 2021 10:58:49 -0300 Subject: [PATCH] Chore: Migrate TeamChannelsView to Typescript (#3532) Co-authored-by: Gerzon Z --- .../HeaderButton/HeaderButtonContainer.tsx | 2 +- ...amChannelsView.js => TeamChannelsView.tsx} | 132 ++++++++++++------ 2 files changed, 87 insertions(+), 47 deletions(-) rename app/views/{TeamChannelsView.js => TeamChannelsView.tsx} (82%) diff --git a/app/containers/HeaderButton/HeaderButtonContainer.tsx b/app/containers/HeaderButton/HeaderButtonContainer.tsx index 2d4c45b6f..f757d43d7 100644 --- a/app/containers/HeaderButton/HeaderButtonContainer.tsx +++ b/app/containers/HeaderButton/HeaderButtonContainer.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; interface IHeaderButtonContainer { - children: JSX.Element; + children: React.ReactNode; left?: boolean; } diff --git a/app/views/TeamChannelsView.js b/app/views/TeamChannelsView.tsx similarity index 82% rename from app/views/TeamChannelsView.js rename to app/views/TeamChannelsView.tsx index 13546703e..bf2df4ff1 100644 --- a/app/views/TeamChannelsView.js +++ b/app/views/TeamChannelsView.tsx @@ -1,10 +1,11 @@ import React from 'react'; 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 { withSafeAreaInsets } from 'react-native-safe-area-context'; +import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context'; 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 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_ADD_TEAM_CHANNEL = 'add-team-channel'; -const getItemLayout = (data, index) => ({ - length: data.length, +const getItemLayout = (data: IItem[] | null | undefined, index: number) => ({ + length: data?.length || 0, offset: ROW_HEIGHT * index, index }); -const keyExtractor = item => item._id; +const keyExtractor = (item: IItem) => item._id; -class TeamChannelsView extends React.Component { - static propTypes = { - route: PropTypes.object, - navigation: PropTypes.object, - isMasterDetail: PropTypes.bool, - insets: PropTypes.object, - theme: PropTypes.string, - useRealName: PropTypes.bool, - width: PropTypes.number, - StoreLastMessage: PropTypes.bool, - addTeamChannelPermission: PropTypes.array, - editTeamChannelPermission: PropTypes.array, - removeTeamChannelPermission: PropTypes.array, - deleteCPermission: PropTypes.array, - deletePPermission: PropTypes.array, - showActionSheet: PropTypes.func, - deleteRoom: PropTypes.func, - showAvatar: PropTypes.bool, - displayMode: PropTypes.string - }; +// This interface comes from request RocketChat.getTeamListRoom +interface IItem { + _id: string; + fname: string; + customFields: object; + broadcast: boolean; + encrypted: boolean; + name: string; + t: string; + msgs: number; + usersCount: number; + u: { _id: string; name: string }; + ts: string; + ro: boolean; + teamId: string; + default: boolean; + sysMes: boolean; + _updatedAt: 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; + 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 { + private teamId: string; + + // TODO: Refactor when migrate room + private teamChannels: any; + + // TODO: Refactor when migrate room + private team: any; + + constructor(props: ITeamChannelsViewProps) { super(props); this.teamId = props.route.params?.teamId; this.state = { @@ -95,7 +135,7 @@ class TeamChannelsView extends React.Component { try { const subCollection = db.get('subscriptions'); 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(); if (!this.team) { @@ -140,7 +180,7 @@ class TeamChannelsView extends React.Component { loading: false, loadingMore: false, end: result.rooms.length < API_FETCH_COUNT - }; + } as ITeamChannelsViewState; if (isSearching) { newState.search = [...search, ...result.rooms]; @@ -170,7 +210,7 @@ class TeamChannelsView extends React.Component { const headerTitlePosition = getHeaderTitlePosition({ insets, numIconsRight: 2 }); if (isSearching) { - const options = { + const options: StackNavigationOptions = { headerTitleAlign: 'left', headerLeft: () => ( @@ -187,7 +227,7 @@ class TeamChannelsView extends React.Component { return navigation.setOptions(options); } - const options = { + const options: StackNavigationOptions = { headerShown: true, headerTitleAlign: 'left', headerTitleContainerStyle: { @@ -232,7 +272,7 @@ class TeamChannelsView extends React.Component { this.setState({ isSearching: true }, () => this.setHeader()); }; - onSearchChangeText = debounce(searchText => { + onSearchChangeText = debounce((searchText: string) => { this.setState( { searchText, @@ -270,7 +310,7 @@ class TeamChannelsView extends React.Component { ); }; - goRoomActionsView = screen => { + goRoomActionsView = (screen: string) => { logEvent(events.TC_GO_ACTIONS); const { team } = this; 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( - async item => { + async (item: IItem) => { logEvent(events.TC_GO_ROOM); const { navigation, isMasterDetail } = this.props; try { @@ -314,7 +354,7 @@ class TeamChannelsView extends React.Component { navigation.pop(); } goRoom({ item: params, isMasterDetail, navigationMethod: navigation.push }); - } catch (e) { + } catch (e: any) { if (e.data.error === 'not-allowed') { showErrorAlert(I18n.t('error-not-allowed')); } else { @@ -326,7 +366,7 @@ class TeamChannelsView extends React.Component { true ); - toggleAutoJoin = async item => { + toggleAutoJoin = async (item: IItem) => { logEvent(events.TC_TOGGLE_AUTOJOIN); try { const { data } = this.state; @@ -346,7 +386,7 @@ class TeamChannelsView extends React.Component { } }; - remove = item => { + remove = (item: IItem) => { Alert.alert( I18n.t('Confirmation'), 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); try { const { data } = this.state; @@ -380,7 +420,7 @@ class TeamChannelsView extends React.Component { } }; - delete = item => { + delete = (item: IItem) => { logEvent(events.TC_DELETE_ROOM); 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); const { showActionSheet, @@ -464,7 +504,7 @@ class TeamChannelsView extends React.Component { showActionSheet({ options }); }; - renderItem = ({ item }) => { + renderItem = ({ item }: { item: IItem }) => { const { StoreLastMessage, useRealName, theme, width, showAvatar, displayMode } = this.props; return ( ({ +const mapStateToProps = (state: any) => ({ baseUrl: state.server.server, user: getUserSelector(state), useRealName: state.settings.UI_Use_Real_Name, @@ -549,8 +589,8 @@ const mapStateToProps = state => ({ displayMode: state.sortPreferences.displayMode }); -const mapDispatchToProps = dispatch => ({ - deleteRoom: (rid, t) => dispatch(deleteRoomAction(rid, t)) +const mapDispatchToProps = (dispatch: Dispatch) => ({ + deleteRoom: (rid: string, t: string) => dispatch(deleteRoomAction(rid, t)) }); export default connect(