chore: migrate AddExistingTeamView to hooks (#5042)

* chore: migrate AddExistingTeamView to hooks

* fix masterdetailstack lint

* fix inside stack

* minor tweak

* tweak empty space

app/lib/methods/subscriptions/rooms.ts

@@ -410,7 +410,6 @@ export default function subscribeRooms() {
 				log(e);
 			}
 		}
-		
 		if (/video-conference/.test(ev)) {
 			const [action, params] = ddpMessage.fields.args;
 			store.dispatch(handleVideoConfIncomingWebsocketMessages({ action, params }));

app/stacks/InsideStack.tsx

@@ -128,11 +128,7 @@ const ChatsStackNavigator = () => {
 			<ChatsStack.Screen name='TeamChannelsView' component={TeamChannelsView} />
 			<ChatsStack.Screen name='CreateChannelView' component={CreateChannelView} />
 			<ChatsStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
-			<ChatsStack.Screen
+			<ChatsStack.Screen name='AddExistingChannelView' component={AddExistingChannelView} />
-				name='AddExistingChannelView'
-				component={AddExistingChannelView}
-				options={AddExistingChannelView.navigationOptions}
-			/>
 			{/* @ts-ignore */}
 			<ChatsStack.Screen name='MarkdownTableView' component={MarkdownTableView} />
 			{/* @ts-ignore */}

app/stacks/MasterDetailStack/index.tsx

@@ -130,12 +130,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				{/* @ts-ignore */}
 				<ModalStack.Screen name='InviteUsersView' component={InviteUsersView} />
 				<ModalStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
-				<ModalStack.Screen
+				<ModalStack.Screen name='AddExistingChannelView' component={AddExistingChannelView} />
-					name='AddExistingChannelView'
-					// @ts-ignore
-					component={AddExistingChannelView}
-					options={AddExistingChannelView.navigationOptions}
-				/>
 				<ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
 				<ModalStack.Screen name='MessagesView' component={MessagesView} />
 				<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} />

app/stacks/types.ts

@@ -10,7 +10,6 @@ import { IMessage, TAnyMessageModel, TMessageModel } from '../definitions/IMessa
 import { TServerModel } from '../definitions/IServer';
 import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
 import { TChangeAvatarViewContext } from '../definitions/TChangeAvatarViewContext';
-import { IItem } from '../views/TeamChannelsView';
 import { MasterDetailInsideStackParamList, ModalStackParamList } from './MasterDetailStack/types';
 import { TNavigation } from './stackType';
 
@@ -154,12 +153,10 @@ export type ChatsStackParamList = {
 		teamId?: string;
 	};
 	AddChannelTeamView: {
-		teamId?: string;
+		teamId: string;
-		teamChannels: IItem[];
 	};
 	AddExistingChannelView: {
-		teamId?: string;
+		teamId: string;
-		teamChannels: IItem[];
 	};
 	MarkdownTableView: {
 		renderRows: (drawExtraBorders?: boolean) => JSX.Element;

app/views/AddChannelTeamView.tsx

@@ -40,7 +40,9 @@ const setHeader = ({
 const AddChannelTeamView = () => {
 	const navigation = useNavigation<TNavigation>();
 	const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail);
-	const { teamChannels, teamId } = useRoute<TRoute>().params;
+	const {
+		params: { teamId }
+	} = useRoute<TRoute>();
 
 	useEffect(() => {
 		setHeader({ navigation, isMasterDetail });
@@ -70,7 +72,7 @@ const AddChannelTeamView = () => {
 				<List.Separator />
 				<List.Item
 					title='Add_Existing'
-					onPress={() => navigation.navigate('AddExistingChannelView', { teamId, teamChannels })}
+					onPress={() => navigation.navigate('AddExistingChannelView', { teamId })}
 					testID='add-channel-team-view-add-existing'
 					left={() => <List.Icon name='channel-public' />}
 					right={() => <List.Icon name='chevron-right' />}

app/views/AddExistingChannelView.tsx

@@ -1,217 +0,0 @@
-import React from 'react';
-import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
-import { RouteProp } from '@react-navigation/native';
-import { FlatList } from 'react-native';
-import { connect } from 'react-redux';
-import { Q } from '@nozbe/watermelondb';
-
-import * as List from '../containers/List';
-import database from '../lib/database';
-import I18n from '../i18n';
-import log, { events, logEvent } from '../lib/methods/helpers/log';
-import SearchBox from '../containers/SearchBox';
-import * as HeaderButton from '../containers/HeaderButton';
-import StatusBar from '../containers/StatusBar';
-import { themes } from '../lib/constants';
-import { TSupportedThemes, withTheme } from '../theme';
-import SafeAreaView from '../containers/SafeAreaView';
-import { sendLoadingEvent } from '../containers/Loading';
-import { animateNextTransition } from '../lib/methods/helpers/layoutAnimation';
-import { showErrorAlert } from '../lib/methods/helpers/info';
-import { ChatsStackParamList } from '../stacks/types';
-import { TSubscriptionModel, SubscriptionType, IApplicationState } from '../definitions';
-import { getRoomTitle, hasPermission, debounce } from '../lib/methods/helpers';
-import { Services } from '../lib/services';
-
-interface IAddExistingChannelViewState {
-	search: TSubscriptionModel[];
-	channels: TSubscriptionModel[];
-	selected: string[];
-}
-
-interface IAddExistingChannelViewProps {
-	navigation: StackNavigationProp<ChatsStackParamList, 'AddExistingChannelView'>;
-	route: RouteProp<ChatsStackParamList, 'AddExistingChannelView'>;
-	theme?: TSupportedThemes;
-	isMasterDetail: boolean;
-	addTeamChannelPermission?: string[];
-}
-
-const QUERY_SIZE = 50;
-
-class AddExistingChannelView extends React.Component<IAddExistingChannelViewProps, IAddExistingChannelViewState> {
-	private teamId: string;
-
-	constructor(props: IAddExistingChannelViewProps) {
-		super(props);
-		this.query();
-		this.teamId = props.route?.params?.teamId ?? '';
-		this.state = {
-			search: [],
-			channels: [],
-			selected: []
-		};
-		this.setHeader();
-	}
-
-	setHeader = () => {
-		const { navigation, isMasterDetail } = this.props;
-		const { selected } = this.state;
-
-		const options: StackNavigationOptions = {
-			headerTitle: I18n.t('Add_Existing_Channel')
-		};
-
-		if (isMasterDetail) {
-			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
-		}
-
-		options.headerRight = () =>
-			selected.length > 0 && (
-				<HeaderButton.Container>
-					<HeaderButton.Item title={I18n.t('Next')} onPress={this.submit} testID='add-existing-channel-view-submit' />
-				</HeaderButton.Container>
-			);
-
-		navigation.setOptions(options);
-	};
-
-	query = async (stringToSearch = '') => {
-		try {
-			const { addTeamChannelPermission } = this.props;
-			const db = database.active;
-			const channels = await db
-				.get('subscriptions')
-				.query(
-					Q.where('team_id', ''),
-					Q.where('t', Q.oneOf(['c', 'p'])),
-					Q.where('name', Q.like(`%${stringToSearch}%`)),
-					Q.take(QUERY_SIZE),
-					Q.sortBy('room_updated_at', Q.desc)
-				)
-				.fetch();
-
-			const asyncFilter = async (channelsArray: TSubscriptionModel[]) => {
-				const results = await Promise.all(
-					channelsArray.map(async channel => {
-						if (channel.prid) {
-							return false;
-						}
-						const permissions = await hasPermission([addTeamChannelPermission], channel.rid);
-						if (!permissions[0]) {
-							return false;
-						}
-						return true;
-					})
-				);
-
-				return channelsArray.filter((_v: any, index: number) => results[index]);
-			};
-			const channelFiltered = await asyncFilter(channels);
-			this.setState({ channels: channelFiltered });
-		} catch (e) {
-			log(e);
-		}
-	};
-
-	onSearchChangeText = debounce((text: string) => {
-		this.query(text);
-	}, 300);
-
-	dismiss = () => {
-		const { navigation } = this.props;
-		return navigation.pop();
-	};
-
-	submit = async () => {
-		const { selected } = this.state;
-		const { navigation } = this.props;
-
-		sendLoadingEvent({ visible: true });
-		try {
-			logEvent(events.CT_ADD_ROOM_TO_TEAM);
-			const result = await Services.addRoomsToTeam({ rooms: selected, teamId: this.teamId });
-			if (result.success) {
-				sendLoadingEvent({ visible: false });
-				// Expect that after you add an existing channel to a team, the user should move back to the team
-				navigation.navigate('RoomView');
-			}
-		} catch (e: any) {
-			logEvent(events.CT_ADD_ROOM_TO_TEAM_F);
-			showErrorAlert(I18n.t(e.data.error), I18n.t('Add_Existing_Channel'), () => {});
-			sendLoadingEvent({ visible: false });
-		}
-	};
-
-	renderHeader = () => (
-		<SearchBox onChangeText={(text: string) => this.onSearchChangeText(text)} testID='add-existing-channel-view-search' />
-	);
-
-	isChecked = (rid: string) => {
-		const { selected } = this.state;
-		return selected.includes(rid);
-	};
-
-	toggleChannel = (rid: string) => {
-		const { selected } = this.state;
-
-		animateNextTransition();
-		if (!this.isChecked(rid)) {
-			logEvent(events.AEC_ADD_CHANNEL);
-			this.setState({ selected: [...selected, rid] }, () => this.setHeader());
-		} else {
-			logEvent(events.AEC_REMOVE_CHANNEL);
-			const filterSelected = selected.filter(el => el !== rid);
-			this.setState({ selected: filterSelected }, () => this.setHeader());
-		}
-	};
-
-	renderItem = ({ item }: { item: TSubscriptionModel }) => {
-		const isChecked = this.isChecked(item.rid);
-		// TODO: reuse logic inside RoomTypeIcon
-		const icon = item.t === SubscriptionType.DIRECT && !item?.teamId ? 'channel-private' : 'channel-public';
-		return (
-			<List.Item
-				title={getRoomTitle(item)}
-				translateTitle={false}
-				onPress={() => this.toggleChannel(item.rid)}
-				testID={`add-existing-channel-view-item-${item.name}`}
-				left={() => <List.Icon name={icon} />}
-				right={() => (isChecked ? <List.Icon name='check' /> : null)}
-			/>
-		);
-	};
-
-	renderList = () => {
-		const { search, channels } = this.state;
-		const { theme } = this.props;
-		return (
-			<FlatList
-				data={search.length > 0 ? search : channels}
-				extraData={this.state}
-				keyExtractor={item => item.id}
-				ListHeaderComponent={this.renderHeader}
-				renderItem={this.renderItem}
-				ItemSeparatorComponent={List.Separator}
-				contentContainerStyle={{ backgroundColor: themes[theme!].backgroundColor }}
-				keyboardShouldPersistTaps='always'
-			/>
-		);
-	};
-
-	render() {
-		return (
-			<SafeAreaView testID='add-existing-channel-view'>
-				<StatusBar />
-				{this.renderList()}
-			</SafeAreaView>
-		);
-	}
-}
-
-const mapStateToProps = (state: IApplicationState) => ({
-	isMasterDetail: state.app.isMasterDetail,
-	addTeamChannelPermission: state.permissions['add-team-channel']
-});
-
-export default connect(mapStateToProps)(withTheme(AddExistingChannelView));

app/views/AddExistingChannelView/index.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { FlatList } from 'react-native';
+import { Q } from '@nozbe/watermelondb';
+
+import * as List from '../../containers/List';
+import database from '../../lib/database';
+import I18n from '../../i18n';
+import log, { events, logEvent } from '../../lib/methods/helpers/log';
+import SearchBox from '../../containers/SearchBox';
+import * as HeaderButton from '../../containers/HeaderButton';
+import StatusBar from '../../containers/StatusBar';
+import { useTheme } from '../../theme';
+import SafeAreaView from '../../containers/SafeAreaView';
+import { sendLoadingEvent } from '../../containers/Loading';
+import { animateNextTransition } from '../../lib/methods/helpers/layoutAnimation';
+import { showErrorAlert } from '../../lib/methods/helpers/info';
+import { ChatsStackParamList } from '../../stacks/types';
+import { TSubscriptionModel, SubscriptionType } from '../../definitions';
+import { getRoomTitle, hasPermission, useDebounce } from '../../lib/methods/helpers';
+import { Services } from '../../lib/services';
+import { useAppSelector } from '../../lib/hooks';
+
+type TNavigation = StackNavigationProp<ChatsStackParamList, 'AddExistingChannelView'>;
+type TRoute = RouteProp<ChatsStackParamList, 'AddExistingChannelView'>;
+
+const QUERY_SIZE = 50;
+
+const AddExistingChannelView = () => {
+	const [channels, setChannels] = useState<TSubscriptionModel[]>([]);
+	const [selected, setSelected] = useState<string[]>([]);
+
+	const { colors } = useTheme();
+
+	const navigation = useNavigation<TNavigation>();
+	const {
+		params: { teamId }
+	} = useRoute<TRoute>();
+
+	const { addTeamChannelPermission, isMasterDetail } = useAppSelector(state => ({
+		isMasterDetail: state.app.isMasterDetail,
+		addTeamChannelPermission: state.permissions['add-team-channel']
+	}));
+
+	useLayoutEffect(() => {
+		setHeader();
+	}, [selected.length]);
+
+	useEffect(() => {
+		query();
+	}, []);
+
+	const setHeader = () => {
+		const options: StackNavigationOptions = {
+			headerTitle: I18n.t('Add_Existing_Channel')
+		};
+
+		if (isMasterDetail) {
+			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
+		}
+
+		options.headerRight = () =>
+			selected.length > 0 && (
+				<HeaderButton.Container>
+					<HeaderButton.Item title={I18n.t('Next')} onPress={submit} testID='add-existing-channel-view-submit' />
+				</HeaderButton.Container>
+			);
+
+		navigation.setOptions(options);
+	};
+
+	const query = async (stringToSearch = '') => {
+		try {
+			const db = database.active;
+			const channels = await db
+				.get('subscriptions')
+				.query(
+					Q.where('team_id', ''),
+					Q.where('t', Q.oneOf(['c', 'p'])),
+					Q.where('name', Q.like(`%${stringToSearch}%`)),
+					Q.take(QUERY_SIZE),
+					Q.sortBy('room_updated_at', Q.desc)
+				)
+				.fetch();
+
+			const asyncFilter = async (channelsArray: TSubscriptionModel[]) => {
+				const results = await Promise.all(
+					channelsArray.map(async channel => {
+						if (channel.prid) {
+							return false;
+						}
+						const permissions = await hasPermission([addTeamChannelPermission], channel.rid);
+						if (!permissions[0]) {
+							return false;
+						}
+						return true;
+					})
+				);
+
+				return channelsArray.filter((_v: any, index: number) => results[index]);
+			};
+			const channelFiltered = await asyncFilter(channels);
+			setChannels(channelFiltered);
+		} catch (e) {
+			log(e);
+		}
+	};
+
+	const onSearchChangeText = useDebounce((text: string) => {
+		query(text);
+	}, 300);
+
+	const isChecked = (rid: string) => selected.includes(rid);
+
+	const toggleChannel = (rid: string) => {
+		animateNextTransition();
+		if (!isChecked(rid)) {
+			logEvent(events.AEC_ADD_CHANNEL);
+			setSelected([...selected, rid]);
+		} else {
+			logEvent(events.AEC_REMOVE_CHANNEL);
+			const filterSelected = selected.filter(el => el !== rid);
+			setSelected(filterSelected);
+		}
+	};
+
+	const submit = async () => {
+		sendLoadingEvent({ visible: true });
+		try {
+			logEvent(events.CT_ADD_ROOM_TO_TEAM);
+			const result = await Services.addRoomsToTeam({ rooms: selected, teamId });
+			if (result.success) {
+				sendLoadingEvent({ visible: false });
+				// Expect that after you add an existing channel to a team, the user should move back to the team
+				navigation.navigate('RoomView');
+			}
+		} catch (e: any) {
+			logEvent(events.CT_ADD_ROOM_TO_TEAM_F);
+			showErrorAlert(I18n.t(e.data.error), I18n.t('Add_Existing_Channel'), () => {});
+			sendLoadingEvent({ visible: false });
+		}
+	};
+
+	return (
+		<SafeAreaView testID='add-existing-channel-view'>
+			<StatusBar />
+			<FlatList
+				data={channels}
+				extraData={channels}
+				keyExtractor={item => item.id}
+				ListHeaderComponent={
+					<SearchBox onChangeText={(text: string) => onSearchChangeText(text)} testID='add-existing-channel-view-search' />
+				}
+				renderItem={({ item }: { item: TSubscriptionModel }) => {
+					// TODO: reuse logic inside RoomTypeIcon
+					const icon = item.t === SubscriptionType.GROUP && !item?.teamId ? 'channel-private' : 'channel-public';
+					return (
+						<List.Item
+							title={getRoomTitle(item)}
+							translateTitle={false}
+							onPress={() => toggleChannel(item.rid)}
+							testID={`add-existing-channel-view-item-${item.name}`}
+							left={() => <List.Icon name={icon} />}
+							right={() => (isChecked(item.rid) ? <List.Icon name='check' /> : null)}
+						/>
+					);
+				}}
+				ItemSeparatorComponent={List.Separator}
+				contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
+				keyboardShouldPersistTaps='always'
+			/>
+		</SafeAreaView>
+	);
+};
+
+export default AddExistingChannelView;

app/views/TeamChannelsView.tsx

@@ -186,7 +186,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 	}, 300);
 
 	setHeader = () => {
-		const { isSearching, showCreate, data } = this.state;
+		const { isSearching, showCreate } = this.state;
 		const { navigation, isMasterDetail, theme } = this.props;
 
 		const { team } = this;
@@ -234,7 +234,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 						<HeaderButton.Item
 							iconName='create'
 							testID='team-channels-view-create'
-							onPress={() => navigation.navigate('AddChannelTeamView', { teamId: this.teamId, teamChannels: data })}
+							onPress={() => navigation.navigate('AddChannelTeamView', { teamId: this.teamId })}
 						/>
 					) : null}
 					<HeaderButton.Item iconName='search' testID='team-channels-view-search' onPress={this.onSearchPress} />