diff --git a/app/views/AddExistingChannelView.js b/app/views/AddExistingChannelView.tsx similarity index 78% rename from app/views/AddExistingChannelView.js rename to app/views/AddExistingChannelView.tsx index ed9a95ac4f..5efdbf34d1 100644 --- a/app/views/AddExistingChannelView.js +++ b/app/views/AddExistingChannelView.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; +import { RouteProp } from '@react-navigation/native'; import { FlatList, View } from 'react-native'; import { connect } from 'react-redux'; import { Q } from '@nozbe/watermelondb'; @@ -21,18 +22,27 @@ import { goRoom } from '../utils/goRoom'; import { showErrorAlert } from '../utils/info'; import debounce from '../utils/debounce'; -const QUERY_SIZE = 50; +interface IAddExistingChannelViewState { + // TODO: refactor with Room Model + search: any[]; + channels: any[]; + selected: string[]; + loading: boolean; +} -class AddExistingChannelView extends React.Component { - static propTypes = { - navigation: PropTypes.object, - route: PropTypes.object, - theme: PropTypes.string, - isMasterDetail: PropTypes.bool, - addTeamChannelPermission: PropTypes.array - }; +interface IAddExistingChannelViewProps { + navigation: StackNavigationProp; + route: RouteProp<{ AddExistingChannelView: { teamId: string } }, 'AddExistingChannelView'>; + theme: string; + isMasterDetail: boolean; + addTeamChannelPermission: string[]; +} - constructor(props) { +const QUERY_SIZE = 50; + +class AddExistingChannelView extends React.Component { + private teamId: string; + constructor(props: IAddExistingChannelViewProps) { super(props); this.query(); this.teamId = props.route?.params?.teamId; @@ -49,7 +59,7 @@ class AddExistingChannelView extends React.Component { const { navigation, isMasterDetail } = this.props; const { selected } = this.state; - const options = { + const options: StackNavigationOptions = { headerTitle: I18n.t('Add_Existing_Channel') }; @@ -82,9 +92,10 @@ class AddExistingChannelView extends React.Component { ) .fetch(); - const asyncFilter = async channelsArray => { + // TODO: Refactor with Room Model + const asyncFilter = async (channelsArray: any[]) => { const results = await Promise.all( - channelsArray.map(async channel => { + channelsArray.map(async (channel: any) => { if (channel.prid) { return false; } @@ -96,7 +107,7 @@ class AddExistingChannelView extends React.Component { }) ); - return channelsArray.filter((_v, index) => results[index]); + return channelsArray.filter((_v: any, index: number) => results[index]); }; const channelFiltered = await asyncFilter(channels); this.setState({ channels: channelFiltered }); @@ -105,7 +116,7 @@ class AddExistingChannelView extends React.Component { } }; - onSearchChangeText = debounce(text => { + onSearchChangeText = debounce((text: string) => { this.query(text); }, 300); @@ -126,7 +137,7 @@ class AddExistingChannelView extends React.Component { this.setState({ loading: false }); goRoom({ item: result, isMasterDetail }); } - } catch (e) { + } catch (e: any) { logEvent(events.CT_ADD_ROOM_TO_TEAM_F); showErrorAlert(I18n.t(e.data.error), I18n.t('Add_Existing_Channel'), () => {}); this.setState({ loading: false }); @@ -137,17 +148,17 @@ class AddExistingChannelView extends React.Component { const { theme } = this.props; return ( - this.onSearchChangeText(text)} testID='add-existing-channel-view-search' /> + this.onSearchChangeText(text)} testID='add-existing-channel-view-search' /> ); }; - isChecked = rid => { + isChecked = (rid: string) => { const { selected } = this.state; return selected.includes(rid); }; - toggleChannel = rid => { + toggleChannel = (rid: string) => { const { selected } = this.state; animateNextTransition(); @@ -161,7 +172,8 @@ class AddExistingChannelView extends React.Component { } }; - renderItem = ({ item }) => { + // TODO: refactor with Room Model + renderItem = ({ item }: { item: any }) => { const isChecked = this.isChecked(item.rid); // TODO: reuse logic inside RoomTypeIcon const icon = item.t === 'p' && !item.teamId ? 'channel-private' : 'channel-public'; @@ -207,7 +219,7 @@ class AddExistingChannelView extends React.Component { } } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ isMasterDetail: state.app.isMasterDetail, addTeamChannelPermission: state.permissions['add-team-channel'] });