Refactor touch component and update removeRoom and deleteRoom methods

app/containers/List/ListItem.js

@@ -79,11 +79,10 @@ const Content = React.memo(({
 ));
 
 const Button = React.memo(({
-	onPress, backgroundColor, underlayColor, ...props
+	onPress, underlayColor, ...props
 }) => (
 	<Touch
 		onPress={() => onPress(props.title)}
-		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
 		theme={props.theme}

app/i18n/locales/en.json

@@ -722,5 +722,7 @@
   "Add_Existing": "Add Existing",
   "Add_Existing_Channel": "Add Existing Channel",
   "Remove_from_Team": "Remove from Team",
-  "Auto-join": "Auto-join"
+  "Auto-join": "Auto-join",
+  "Delete_Team_Room_Warning": "Woud you like to remove this channel from the team? The channel will be moved back to the workspace",
+  "Confirmation": "Confirmation"
 }

app/lib/rocketchat.js

@@ -754,13 +754,9 @@ const RocketChat = {
 		// RC 3.13.0
 		return this.post('teams.addRooms', params);
 	},
-	deleteTeamRoom({ rid, teamId }) {
-		const params = {
-			roomId: rid,
-			teamId
-		};
+	removeTeamRoom({ roomId, teamId }) {
 		// RC 3.13.0
-		return this.post('teams.removeRoom', params);
+		return this.post('teams.removeRoom', { roomId, teamId });
 	},
 	joinRoom(roomId, joinCode, type) {
 		// TODO: join code

app/presentation/RoomItem/RoomItem.js

@@ -24,7 +24,6 @@ const RoomItem = ({
 	status,
 	useRealName,
 	theme,
-	isFocused,
 	isGroupChat,
 	isRead,
 	date,
@@ -61,7 +60,6 @@ const RoomItem = ({
 		testID={testID}
 		type={type}
 		theme={theme}
-		isFocused={isFocused}
 		swipeEnabled={swipeEnabled}
 	>
 		<Wrapper
@@ -163,7 +161,6 @@ RoomItem.propTypes = {
 	status: PropTypes.string,
 	useRealName: PropTypes.bool,
 	theme: PropTypes.string,
-	isFocused: PropTypes.bool,
 	isGroupChat: PropTypes.bool,
 	isRead: PropTypes.bool,
 	teamMain: PropTypes.bool,

app/presentation/RoomItem/Touchable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Animated, Pressable } from 'react-native';
+import { Animated } from 'react-native';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 
 import {
@@ -9,8 +9,8 @@ import {
 	LONG_SWIPE
 } from './styles';
 import { isRTL } from '../../i18n';
-import { themes } from '../../constants/colors';
 import { LeftActions, RightActions } from './Actions';
+import Touch from '../../utils/touch';
 
 class Touchable extends React.Component {
 	static propTypes = {
@@ -27,7 +27,6 @@ class Touchable extends React.Component {
 		hideChannel: PropTypes.func,
 		children: PropTypes.element,
 		theme: PropTypes.string,
-		isFocused: PropTypes.bool,
 		swipeEnabled: PropTypes.bool
 	}
 
@@ -217,7 +216,7 @@ class Touchable extends React.Component {
 
 		render() {
 			const {
-				testID, isRead, width, favorite, children, theme, isFocused, swipeEnabled
+				testID, isRead, width, favorite, children, theme, swipeEnabled
 			} = this.props;
 
 			return (
@@ -249,17 +248,14 @@ class Touchable extends React.Component {
 								transform: [{ translateX: this.transX }]
 							}}
 						>
-							<Pressable
+							<Touch
 								onPress={this.onPress}
 								onLongPress={this.onLongPress}
 								theme={theme}
 								testID={testID}
-								style={{
-									backgroundColor: isFocused ? themes[theme].chatComponentBackground : themes[theme].backgroundColor
-								}}
 							>
 								{children}
-							</Pressable>
+							</Touch>
 						</Animated.View>
 					</Animated.View>
 

app/presentation/RoomItem/index.js

@@ -14,7 +14,6 @@ const attrs = [
 	'status',
 	'connected',
 	'theme',
-	'isFocused',
 	'forceUpdate',
 	'showLastMessage'
 ];
@@ -37,7 +36,6 @@ class RoomItemContainer extends React.Component {
 		getUserPresence: PropTypes.func,
 		connected: PropTypes.bool,
 		theme: PropTypes.string,
-		isFocused: PropTypes.bool,
 		getRoomTitle: PropTypes.func,
 		getRoomAvatar: PropTypes.func,
 		getIsGroupChat: PropTypes.func,
@@ -129,7 +127,6 @@ class RoomItemContainer extends React.Component {
 			toggleRead,
 			hideChannel,
 			theme,
-			isFocused,
 			avatarSize,
 			status,
 			showLastMessage,
@@ -178,7 +175,6 @@ class RoomItemContainer extends React.Component {
 				testID={testID}
 				type={item.t}
 				theme={theme}
-				isFocused={isFocused}
 				size={avatarSize}
 				prid={item.prid}
 				status={status}

app/utils/touch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RectButton } from 'react-native-gesture-handler';
 
+import { Pressable } from 'react-native';
 import { themes } from '../constants/colors';
 
 class Touch extends React.Component {
@@ -15,21 +15,23 @@ class Touch extends React.Component {
 
 	render() {
 		const {
-			children, onPress, onLongPress, theme, underlayColor, ...props
+			children, onPress, onLongPress, theme, ...props
 		} = this.props;
 
 		return (
-			<RectButton
+			<Pressable
 				ref={this.getRef}
 				onPress={onPress}
 				onLongPress={onLongPress}
 				activeOpacity={1}
-				underlayColor={underlayColor || themes[theme].bannerBackground}
-				rippleColor={themes[theme].bannerBackground}
+				style={({ pressed }) => [{
+					backgroundColor: pressed ? themes[theme].chatComponentBackground : themes[theme].backgroundColor
+				}]}
+				android_ripple={{ color: themes[theme].bannerBackground }}
 				{...props}
 			>
 				{children}
-			</RectButton>
+			</Pressable>
 		);
 	}
 }

app/views/AddChannelTeamView.js

@@ -72,7 +72,6 @@ class AddChannelTeamView extends React.Component {
 		return (
 			<Touch
 				onPress={onPress}
-				style={{ backgroundColor: themes[theme].backgroundColor }}
 				testID={testID}
 				theme={theme}
 			>

app/views/NewMessageView.js

@@ -148,7 +148,6 @@ class NewMessageView extends React.Component {
 		return (
 			<Touch
 				onPress={onPress}
-				style={{ backgroundColor: themes[theme].backgroundColor }}
 				testID={testID}
 				theme={theme}
 			>

app/views/RoomsListView/index.js

@@ -586,10 +586,7 @@ class RoomsListView extends React.Component {
 	}
 
 	onPressItem = (item = {}) => {
-		const { navigation, isMasterDetail } = this.props;
-		if (!navigation.isFocused()) {
-			return;
-		}
+		const { isMasterDetail } = this.props;
 
 		this.cancelSearch();
 		this.goRoom({ item, isMasterDetail });
@@ -894,7 +891,6 @@ class RoomsListView extends React.Component {
 			return this.renderSectionHeader(item.rid);
 		}
 
-		const { item: currentItem } = this.state;
 		const {
 			user: { username },
 			StoreLastMessage,
@@ -925,7 +921,6 @@ class RoomsListView extends React.Component {
 				getIsGroupChat={this.isGroupChat}
 				getIsRead={this.isRead}
 				visitor={item.visitor}
-				isFocused={currentItem?.rid === item.rid}
 			/>
 		);
 	};

app/views/TeamChannelsView.js

@@ -51,6 +51,7 @@ class TeamChannelsView extends React.Component {
 		width: PropTypes.number,
 		StoreLastMessage: PropTypes.bool,
 		addTeamChannelPermission: PropTypes.array,
+		removeTeamChannelPermission: PropTypes.array,
 		showActionSheet: PropTypes.func,
 		deleteRoom: PropTypes.func
 	}
@@ -79,6 +80,8 @@ class TeamChannelsView extends React.Component {
 
 	loadTeam = async() => {
 		const { addTeamChannelPermission } = this.props;
+		const { loading } = this.state;
+
 		const db = database.active;
 		try {
 			const subCollection = db.get('subscriptions');
@@ -96,6 +99,9 @@ class TeamChannelsView extends React.Component {
 			if (permissions[0]) {
 				this.setState({ showCreate: true }, () => this.setHeader());
 			}
+			if (loading) {
+				this.setState({ loading: false });
+			}
 		} catch {
 			const { navigation } = this.props;
 			navigation.pop();
@@ -103,7 +109,7 @@ class TeamChannelsView extends React.Component {
 		}
 	}
 
-	load = debounce(async() => {
+	load = async() => {
 		const {
 			loadingMore, data, search, isSearching, searchText, end
 		} = this.state;
@@ -147,7 +153,7 @@ class TeamChannelsView extends React.Component {
 			log(e);
 			this.setState({ loading: false, loadingMore: false });
 		}
-	}, 300)
+	}
 
 	setHeader = () => {
 		const { isSearching, showCreate, data } = this.state;
@@ -308,18 +314,54 @@ class TeamChannelsView extends React.Component {
 			title: I18n.t('Remove_from_Team'),
 			icon: 'close',
 			danger: true,
-			onPress: this.removeFromTeam(item.id, this.teamId)
+			onPress: () => this.remove(item)
 		},
 		{
 			title: I18n.t('Delete'),
 			icon: 'delete',
 			danger: true,
-			onPress: this.delete
+			onPress: () => this.delete(item)
 		}
 	])
 
-	delete = () => {
-		const { room } = this.state;
+	remove = (item) => {
+		Alert.alert(
+			I18n.t('Confirmation'),
+			I18n.t('Delete_Team_Room_Warning'),
+			[
+				{
+					text: I18n.t('Cancel'),
+					style: 'cancel'
+				},
+				{
+					text: I18n.t('Yes_action_it', { action: I18n.t('delete') }),
+					style: 'destructive',
+					onPress: () => this.removeRoom(item)
+				}
+			],
+			{ cancelable: false }
+		);
+	}
+
+	removeRoom = async(item) => {
+		try {
+			const { data } = this.state;
+			const result = await RocketChat.removeTeamRoom({ roomId: item.rid, teamId: this.team.teamId });
+			if (result.success) {
+				console.log({ result });
+				const newData = data.filter(room => result.room._id !== room.rid);
+				console.log({ newData });
+				this.setState({ loading: true, data: newData }, () => {
+					this.loadTeam();
+					this.load();
+				});
+			}
+		} catch (e) {
+			log(e);
+		}
+	}
+
+	delete = (item) => {
 		const { deleteRoom } = this.props;
 
 		Alert.alert(
@@ -333,16 +375,21 @@ class TeamChannelsView extends React.Component {
 				{
 					text: I18n.t('Yes_action_it', { action: I18n.t('delete') }),
 					style: 'destructive',
-					onPress: () => deleteRoom(room.rid, room.t)
+					onPress: () => deleteRoom(item.rid, item.t)
 				}
 			],
 			{ cancelable: false }
 		);
 	}
 
-	showChannelActions = (item) => {
+	showChannelActions = async(item) => {
 		logEvent(events.ROOM_SHOW_BOX_ACTIONS);
-		const { showActionSheet } = this.props;
+		const { showActionSheet, removeTeamChannelPermission } = this.props;
+
+		const permissions = await RocketChat.hasPermission([removeTeamChannelPermission], this.team.rid);
+		if (!permissions[0]) {
+			return;
+		}
 		showActionSheet({ options: this.options(item) });
 	}
 
@@ -426,7 +473,8 @@ const mapStateToProps = state => ({
 	useRealName: state.settings.UI_Use_Real_Name,
 	isMasterDetail: state.app.isMasterDetail,
 	StoreLastMessage: state.settings.Store_Last_Message,
-	addTeamChannelPermission: state.permissions['add-team-channel']
+	addTeamChannelPermission: state.permissions['add-team-channel'],
+	removeTeamChannelPermission: state.permissions['remove-team-channel']
 });
 
 const mapDispatchToProps = dispatch => ({