From cabc4c0ad99ccc76291cd1e0e3885d29f5dd664a Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 29 Oct 2021 18:03:07 -0300 Subject: [PATCH 1/3] Chore: Migrate AddExistingChannelView to Typescript --- ...nnelView.js => AddExistingChannelView.tsx} | 55 +++++++++++-------- 1 file changed, 33 insertions(+), 22 deletions(-) rename app/views/{AddExistingChannelView.js => AddExistingChannelView.tsx} (80%) diff --git a/app/views/AddExistingChannelView.js b/app/views/AddExistingChannelView.tsx similarity index 80% rename from app/views/AddExistingChannelView.js rename to app/views/AddExistingChannelView.tsx index ed9a95ac4f..7b2c1ba372 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,26 @@ import { goRoom } from '../utils/goRoom'; import { showErrorAlert } from '../utils/info'; import debounce from '../utils/debounce'; -const QUERY_SIZE = 50; +interface IState { + search: object[]; + 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 IAddExistingChannelView { + 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: IAddExistingChannelView) { super(props); this.query(); this.teamId = props.route?.params?.teamId; @@ -51,7 +60,7 @@ class AddExistingChannelView extends React.Component { const options = { headerTitle: I18n.t('Add_Existing_Channel') - }; + } as StackNavigationOptions; if (isMasterDetail) { options.headerLeft = () => ; @@ -82,9 +91,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 +106,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 +115,7 @@ class AddExistingChannelView extends React.Component { } }; - onSearchChangeText = debounce(text => { + onSearchChangeText = debounce((text: string) => { this.query(text); }, 300); @@ -126,7 +136,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 +147,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 +171,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 +218,7 @@ class AddExistingChannelView extends React.Component { } } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ isMasterDetail: state.app.isMasterDetail, addTeamChannelPermission: state.permissions['add-team-channel'] }); From 666ba9eef040acd9041484f069bbfd2f46c4ece0 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 29 Oct 2021 18:09:09 -0300 Subject: [PATCH 2/3] minor tweak --- app/views/AddExistingChannelView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/views/AddExistingChannelView.tsx b/app/views/AddExistingChannelView.tsx index 7b2c1ba372..acb34f3a6f 100644 --- a/app/views/AddExistingChannelView.tsx +++ b/app/views/AddExistingChannelView.tsx @@ -23,7 +23,8 @@ import { showErrorAlert } from '../utils/info'; import debounce from '../utils/debounce'; interface IState { - search: object[]; + // TODO: refactor with Room Model + search: any[]; channels: any[]; selected: string[]; loading: boolean; From 2430f6126a5d89b8e972f740bbed51a9d25ab515 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Wed, 3 Nov 2021 11:17:26 -0300 Subject: [PATCH 3/3] minor tweaks --- app/views/AddExistingChannelView.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/views/AddExistingChannelView.tsx b/app/views/AddExistingChannelView.tsx index acb34f3a6f..5efdbf34d1 100644 --- a/app/views/AddExistingChannelView.tsx +++ b/app/views/AddExistingChannelView.tsx @@ -22,7 +22,7 @@ import { goRoom } from '../utils/goRoom'; import { showErrorAlert } from '../utils/info'; import debounce from '../utils/debounce'; -interface IState { +interface IAddExistingChannelViewState { // TODO: refactor with Room Model search: any[]; channels: any[]; @@ -30,7 +30,7 @@ interface IState { loading: boolean; } -interface IAddExistingChannelView { +interface IAddExistingChannelViewProps { navigation: StackNavigationProp; route: RouteProp<{ AddExistingChannelView: { teamId: string } }, 'AddExistingChannelView'>; theme: string; @@ -40,9 +40,9 @@ interface IAddExistingChannelView { const QUERY_SIZE = 50; -class AddExistingChannelView extends React.Component { +class AddExistingChannelView extends React.Component { private teamId: string; - constructor(props: IAddExistingChannelView) { + constructor(props: IAddExistingChannelViewProps) { super(props); this.query(); this.teamId = props.route?.params?.teamId; @@ -59,9 +59,9 @@ class AddExistingChannelView extends React.Component ;