Chore: Migrate to TS RommInfoEditView (#3766)

* initial commit

* fix last types

* fix import

* fix lint
This commit is contained in:
Gleidson Daniel Silva 2022-02-25 18:24:08 -03:00 committed by GitHub
parent 91de74ed9f
commit 4224f4d9d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 172 additions and 146 deletions

View File

@ -24,7 +24,7 @@ interface IMultiSelect {
multiselect?: boolean; multiselect?: boolean;
onSearch?: () => void; onSearch?: () => void;
onClose?: () => void; onClose?: () => void;
inputStyle: object; inputStyle?: object;
value?: any[]; value?: any[];
disabled?: boolean | object; disabled?: boolean | object;
theme: string; theme: string;

View File

@ -1,7 +1,7 @@
import sdk from './sdk'; import { SubscriptionType } from '../../../definitions';
import { TEAM_TYPE } from '../../../definitions/ITeam'; import { TEAM_TYPE } from '../../../definitions/ITeam';
import roomTypeToApiType, { RoomTypes } from '../methods/roomTypeToApiType'; import roomTypeToApiType, { RoomTypes } from '../methods/roomTypeToApiType';
import { SubscriptionType } from '../../../definitions'; import sdk from './sdk';
export const createChannel = ({ export const createChannel = ({
name, name,
@ -575,7 +575,7 @@ export const ignoreUser = ({ rid, userId, ignore }: { rid: string; userId: strin
// @ts-ignore // @ts-ignore
sdk.get('chat.ignoreUser', { rid, userId, ignore }); sdk.get('chat.ignoreUser', { rid, userId, ignore });
export const toggleArchiveRoom = (roomId: string, t: RoomTypes, archive: boolean): any => { export const toggleArchiveRoom = (roomId: string, t: SubscriptionType, archive: boolean): any => {
if (archive) { if (archive) {
// RC 0.48.0 // RC 0.48.0
// TODO: missing definitions from server // TODO: missing definitions from server

View File

@ -45,7 +45,7 @@ export type ModalStackParamList = {
title: string; title: string;
infoText: string; infoText: string;
nextAction: Function; nextAction: Function;
showAlert: () => void | boolean; showAlert?: () => void | boolean;
isSearch?: boolean; isSearch?: boolean;
onSearch?: Function; onSearch?: Function;
isRadio?: boolean; isRadio?: boolean;

View File

@ -1,11 +1,24 @@
import React from 'react'; import React from 'react';
import { Switch, Text, View } from 'react-native'; import { Switch, Text, TextStyle, View, ViewStyle } from 'react-native';
import PropTypes from 'prop-types';
import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors'; import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
import styles from './styles'; import styles from './styles';
const SwitchContainer = React.memo( interface ISwitchContainer {
value: boolean;
disabled?: boolean;
leftLabelPrimary: string;
leftLabelSecondary: string;
rightLabelPrimary?: string;
rightLabelSecondary?: string;
onValueChange: (value: any) => void;
theme: string;
testID: string;
labelContainerStyle?: ViewStyle;
leftLabelStyle?: TextStyle;
}
const SwitchContainer: React.FC<ISwitchContainer> = React.memo(
({ ({
children, children,
value, value,
@ -21,7 +34,7 @@ const SwitchContainer = React.memo(
leftLabelStyle leftLabelStyle
}) => ( }) => (
<> <>
<View key='switch-container' style={[styles.switchContainer, children && styles.switchMargin]}> <View key='switch-container' style={[styles.switchContainer, !!children && styles.switchMargin]}>
{leftLabelPrimary && ( {leftLabelPrimary && (
<View style={[styles.switchLabelContainer, labelContainerStyle]}> <View style={[styles.switchLabelContainer, labelContainerStyle]}>
<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}> <Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>
@ -57,19 +70,4 @@ const SwitchContainer = React.memo(
) )
); );
SwitchContainer.propTypes = {
value: PropTypes.bool,
disabled: PropTypes.bool,
leftLabelPrimary: PropTypes.string,
leftLabelSecondary: PropTypes.string,
rightLabelPrimary: PropTypes.string,
rightLabelSecondary: PropTypes.string,
onValueChange: PropTypes.func,
theme: PropTypes.string,
testID: PropTypes.string,
labelContainerStyle: PropTypes.object,
leftLabelStyle: PropTypes.object,
children: PropTypes.any
};
export default SwitchContainer; export default SwitchContainer;

View File

@ -1,75 +1,98 @@
import React from 'react'; import { Q } from '@nozbe/watermelondb';
import PropTypes from 'prop-types';
import { Alert, Keyboard, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { connect } from 'react-redux';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import ImagePicker from 'react-native-image-crop-picker';
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { Q } from '@nozbe/watermelondb'; import React from 'react';
import { Alert, Keyboard, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import ImagePicker, { Image } from 'react-native-image-crop-picker';
import { connect } from 'react-redux';
import { compareServerVersion } from '../../lib/utils'; import { deleteRoom } from '../../actions/room';
import database from '../../lib/database';
import { deleteRoom as deleteRoomAction } from '../../actions/room';
import KeyboardView from '../../presentation/KeyboardView';
import sharedStyles from '../Styles';
import scrollPersistTaps from '../../utils/scrollPersistTaps';
import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
import { LISTENER } from '../../containers/Toast';
import EventEmitter from '../../utils/events';
import RocketChat from '../../lib/rocketchat';
import RCTextInput from '../../containers/TextInput';
import Loading from '../../containers/Loading';
import random from '../../utils/random';
import log, { events, logEvent } from '../../utils/log';
import I18n from '../../i18n';
import StatusBar from '../../containers/StatusBar';
import { themes } from '../../constants/colors'; import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
import { MultiSelect } from '../../containers/UIKit/MultiSelect';
import { MessageTypeValues } from '../../utils/messageTypes';
import SafeAreaView from '../../containers/SafeAreaView';
import Avatar from '../../containers/Avatar'; import Avatar from '../../containers/Avatar';
import Loading from '../../containers/Loading';
import SafeAreaView from '../../containers/SafeAreaView';
import StatusBar from '../../containers/StatusBar';
import RCTextInput from '../../containers/TextInput';
import { LISTENER } from '../../containers/Toast';
import { MultiSelect } from '../../containers/UIKit/MultiSelect';
import { IApplicationState, IBaseScreen, ISubscription, TSubscriptionModel } from '../../definitions';
import { ERoomType } from '../../definitions/ERoomType';
import I18n from '../../i18n';
import database from '../../lib/database';
import { CustomIcon } from '../../lib/Icons'; import { CustomIcon } from '../../lib/Icons';
import SwitchContainer from './SwitchContainer'; import RocketChat from '../../lib/rocketchat';
import { compareServerVersion } from '../../lib/utils';
import KeyboardView from '../../presentation/KeyboardView';
import { TSupportedPermissions } from '../../reducers/permissions';
import { ModalStackParamList } from '../../stacks/MasterDetailStack/types';
import { ChatsStackParamList } from '../../stacks/types';
import { withTheme } from '../../theme';
import EventEmitter from '../../utils/events';
import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
import log, { events, logEvent } from '../../utils/log';
import { MessageTypeValues } from '../../utils/messageTypes';
import random from '../../utils/random';
import scrollPersistTaps from '../../utils/scrollPersistTaps';
import { IAvatar } from '../ProfileView/interfaces';
import sharedStyles from '../Styles';
import styles from './styles'; import styles from './styles';
import SwitchContainer from './SwitchContainer';
const PERMISSION_SET_READONLY = 'set-readonly'; interface IRoomInfoEditViewState {
const PERMISSION_SET_REACT_WHEN_READONLY = 'set-react-when-readonly'; room: ISubscription;
const PERMISSION_ARCHIVE = 'archive-room'; avatar: IAvatar;
const PERMISSION_UNARCHIVE = 'unarchive-room'; permissions: Record<TSupportedPermissions, string>;
const PERMISSION_DELETE_C = 'delete-c'; name: string;
const PERMISSION_DELETE_P = 'delete-p'; description?: string;
const PERMISSION_DELETE_TEAM = 'delete-team'; topic?: string;
announcement?: string;
joinCode: string;
nameError: any;
saving: boolean;
t: boolean;
ro: boolean;
reactWhenReadOnly?: boolean;
archived: boolean;
systemMessages?: boolean | string[];
enableSysMes?: boolean | string[];
encrypted?: boolean;
}
interface IRoomInfoEditViewProps extends IBaseScreen<ChatsStackParamList | ModalStackParamList, 'RoomInfoEditView'> {
serverVersion?: string;
encryptionEnabled: boolean;
theme: string;
setReadOnlyPermission: string[];
setReactWhenReadOnlyPermission: string[];
archiveRoomPermission: string[];
unarchiveRoomPermission: string[];
deleteCPermission: string[];
deletePPermission: string[];
deleteTeamPermission: string[];
isMasterDetail: boolean;
}
class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfoEditViewState> {
randomValue = random(15);
private querySubscription: any; // Observable dont have unsubscribe prop
private room!: TSubscriptionModel;
private name!: TextInput | null;
private description!: TextInput | null;
private topic!: TextInput | null;
private announcement!: TextInput | null;
private joinCode!: TextInput | null;
class RoomInfoEditView extends React.Component {
static navigationOptions = () => ({ static navigationOptions = () => ({
title: I18n.t('Room_Info_Edit') title: I18n.t('Room_Info_Edit')
}); });
static propTypes = { constructor(props: IRoomInfoEditViewProps) {
navigation: PropTypes.object,
route: PropTypes.object,
deleteRoom: PropTypes.func,
serverVersion: PropTypes.string,
encryptionEnabled: PropTypes.bool,
theme: PropTypes.string,
setReadOnlyPermission: PropTypes.array,
setReactWhenReadOnlyPermission: PropTypes.array,
archiveRoomPermission: PropTypes.array,
unarchiveRoomPermission: PropTypes.array,
deleteCPermission: PropTypes.array,
deletePPermission: PropTypes.array,
deleteTeamPermission: PropTypes.array,
isMasterDetail: PropTypes.bool
};
constructor(props) {
super(props); super(props);
this.state = { this.state = {
room: {}, room: {} as ISubscription,
avatar: {}, avatar: {} as IAvatar,
permissions: {}, permissions: {} as Record<TSupportedPermissions, string>,
name: '', name: '',
description: '', description: '',
topic: '', topic: '',
@ -134,14 +157,15 @@ class RoomInfoEditView extends React.Component {
); );
this.setState({ this.setState({
// @ts-ignore - Solved by migrating the hasPermission function
permissions: { permissions: {
[PERMISSION_SET_READONLY]: result[0], 'set-readonly': result[0],
[PERMISSION_SET_REACT_WHEN_READONLY]: result[1], 'set-react-when-readonly': result[1],
[PERMISSION_ARCHIVE]: result[2], 'archive-room': result[2],
[PERMISSION_UNARCHIVE]: result[3], 'unarchive-room': result[3],
[PERMISSION_DELETE_C]: result[4], 'delete-c': result[4],
[PERMISSION_DELETE_P]: result[5], 'delete-p': result[5],
...(this.room.teamMain && { [PERMISSION_DELETE_TEAM]: result[6] }) ...(this.room.teamMain && { 'delete-team': result[6] })
} }
}); });
} catch (e) { } catch (e) {
@ -149,10 +173,10 @@ class RoomInfoEditView extends React.Component {
} }
}; };
init = room => { init = (room: ISubscription) => {
const { description, topic, announcement, t, ro, reactWhenReadOnly, joinCodeRequired, sysMes, encrypted } = room; const { description, topic, announcement, t, ro, reactWhenReadOnly, joinCodeRequired, encrypted } = room;
const sysMes = room.sysMes as string[];
// fake password just to user knows about it // fake password just to user knows about it
this.randomValue = random(15);
this.setState({ this.setState({
room, room,
name: RocketChat.getRoomTitle(room), name: RocketChat.getRoomTitle(room),
@ -160,7 +184,7 @@ class RoomInfoEditView extends React.Component {
topic, topic,
announcement, announcement,
t: t === 'p', t: t === 'p',
avatar: {}, avatar: {} as IAvatar,
ro, ro,
reactWhenReadOnly, reactWhenReadOnly,
joinCode: joinCodeRequired ? this.randomValue : '', joinCode: joinCodeRequired ? this.randomValue : '',
@ -200,6 +224,7 @@ class RoomInfoEditView extends React.Component {
avatar avatar
} = this.state; } = this.state;
const { joinCodeRequired } = room; const { joinCodeRequired } = room;
const sysMes = room.sysMes as string[];
return !( return !(
room.name === name && room.name === name &&
room.description === description && room.description === description &&
@ -209,8 +234,8 @@ class RoomInfoEditView extends React.Component {
(room.t === 'p') === t && (room.t === 'p') === t &&
room.ro === ro && room.ro === ro &&
room.reactWhenReadOnly === reactWhenReadOnly && room.reactWhenReadOnly === reactWhenReadOnly &&
dequal(room.sysMes, systemMessages) && dequal(sysMes, systemMessages) &&
enableSysMes === (room.sysMes && room.sysMes.length > 0) && enableSysMes === (sysMes && sysMes.length > 0) &&
room.encrypted === encrypted && room.encrypted === encrypted &&
isEmpty(avatar) isEmpty(avatar)
); );
@ -245,7 +270,7 @@ class RoomInfoEditView extends React.Component {
// Clear error objects // Clear error objects
await this.clearErrors(); await this.clearErrors();
const params = {}; const params = {} as any;
// Name // Name
if (room.name !== name) { if (room.name !== name) {
@ -268,7 +293,8 @@ class RoomInfoEditView extends React.Component {
params.roomAnnouncement = announcement; params.roomAnnouncement = announcement;
} }
// Room Type // Room Type
if (room.t !== t) { // This logic is strange to me, since in the code t is boolean, but room.t is string
if (!!room.t !== t) {
params.roomType = t ? 'p' : 'c'; params.roomType = t ? 'p' : 'c';
} }
// Read Only // Read Only
@ -296,7 +322,7 @@ class RoomInfoEditView extends React.Component {
try { try {
await RocketChat.saveRoomSettings(room.rid, params); await RocketChat.saveRoomSettings(room.rid, params);
} catch (e) { } catch (e: any) {
if (e.error === 'error-invalid-room-name') { if (e.error === 'error-invalid-room-name') {
this.setState({ nameError: e }); this.setState({ nameError: e });
} }
@ -317,20 +343,26 @@ class RoomInfoEditView extends React.Component {
deleteTeam = async () => { deleteTeam = async () => {
const { room } = this.state; const { room } = this.state;
const { navigation, deleteCPermission, deletePPermission, deleteRoom } = this.props; const { navigation, deleteCPermission, deletePPermission, dispatch } = this.props;
try { try {
const db = database.active; const db = database.active;
const subCollection = db.get('subscriptions'); const subCollection = db.get('subscriptions');
const teamChannels = await subCollection.query(Q.where('team_id', room.teamId), Q.where('team_main', Q.notEq(true))); const teamChannels = await subCollection.query(
Q.where('team_id', room.teamId as string),
Q.where('team_main', Q.notEq(true))
);
const teamChannelOwner = []; const teamChannelOwner = [];
// @ts-ignore - wm schema type error dont including array
for (let i = 0; i < teamChannels.length; i += 1) { for (let i = 0; i < teamChannels.length; i += 1) {
// @ts-ignore - wm schema type error dont including array
const permissionType = teamChannels[i].t === 'c' ? deleteCPermission : deletePPermission; const permissionType = teamChannels[i].t === 'c' ? deleteCPermission : deletePPermission;
// @ts-ignore - wm schema type error dont including array
// eslint-disable-next-line no-await-in-loop // eslint-disable-next-line no-await-in-loop
const permissions = await RocketChat.hasPermission([permissionType], teamChannels[i].rid); const permissions = await RocketChat.hasPermission([permissionType], teamChannels[i].rid);
if (permissions[0]) { if (permissions[0]) {
// @ts-ignore - wm schema type error dont including array
teamChannelOwner.push(teamChannels[i]); teamChannelOwner.push(teamChannels[i]);
} }
} }
@ -340,11 +372,11 @@ class RoomInfoEditView extends React.Component {
title: 'Delete_Team', title: 'Delete_Team',
data: teamChannelOwner, data: teamChannelOwner,
infoText: 'Select_channels_to_delete', infoText: 'Select_channels_to_delete',
nextAction: selected => { nextAction: (selected: Record<string, string>) => {
showConfirmationAlert({ showConfirmationAlert({
message: I18n.t('You_are_deleting_the_team', { team: RocketChat.getRoomTitle(room) }), message: I18n.t('You_are_deleting_the_team', { team: RocketChat.getRoomTitle(room) }),
confirmationText: I18n.t('Yes_action_it', { action: I18n.t('delete') }), confirmationText: I18n.t('Yes_action_it', { action: I18n.t('delete') }),
onPress: () => deleteRoom('team', room, selected) onPress: () => deleteRoom(ERoomType.t, room, selected)
}); });
} }
}); });
@ -352,10 +384,10 @@ class RoomInfoEditView extends React.Component {
showConfirmationAlert({ showConfirmationAlert({
message: I18n.t('You_are_deleting_the_team', { team: RocketChat.getRoomTitle(room) }), message: I18n.t('You_are_deleting_the_team', { team: RocketChat.getRoomTitle(room) }),
confirmationText: I18n.t('Yes_action_it', { action: I18n.t('delete') }), confirmationText: I18n.t('Yes_action_it', { action: I18n.t('delete') }),
onPress: () => deleteRoom('team', room) onPress: () => dispatch(deleteRoom(ERoomType.t, room))
}); });
} }
} catch (e) { } catch (e: any) {
log(e); log(e);
showErrorAlert( showErrorAlert(
e.data.error ? I18n.t(e.data.error) : I18n.t('There_was_an_error_while_action', { action: I18n.t('deleting_team') }), e.data.error ? I18n.t(e.data.error) : I18n.t('There_was_an_error_while_action', { action: I18n.t('deleting_team') }),
@ -366,7 +398,7 @@ class RoomInfoEditView extends React.Component {
delete = () => { delete = () => {
const { room } = this.state; const { room } = this.state;
const { deleteRoom } = this.props; const { dispatch } = this.props;
Alert.alert( Alert.alert(
I18n.t('Are_you_sure_question_mark'), I18n.t('Are_you_sure_question_mark'),
@ -379,7 +411,7 @@ class RoomInfoEditView extends React.Component {
{ {
text: I18n.t('Yes_action_it', { action: I18n.t('delete') }), text: I18n.t('Yes_action_it', { action: I18n.t('delete') }),
style: 'destructive', style: 'destructive',
onPress: () => deleteRoom('channel', room) onPress: () => dispatch(deleteRoom(ERoomType.c, room))
} }
], ],
{ cancelable: false } { cancelable: false }
@ -421,14 +453,14 @@ class RoomInfoEditView extends React.Component {
const { room, permissions } = this.state; const { room, permissions } = this.state;
if (room.teamMain) { if (room.teamMain) {
return permissions[PERMISSION_DELETE_TEAM]; return permissions['delete-team'];
} }
if (room.t === 'p') { if (room.t === 'p') {
return permissions[PERMISSION_DELETE_P]; return permissions['delete-p'];
} }
return permissions[PERMISSION_DELETE_C]; return permissions['delete-c'];
}; };
renderSystemMessages = () => { renderSystemMessages = () => {
@ -445,9 +477,9 @@ class RoomInfoEditView extends React.Component {
value: m.value, value: m.value,
text: { text: I18n.t('Hide_type_messages', { type: I18n.t(m.text) }) } text: { text: I18n.t('Hide_type_messages', { type: I18n.t(m.text) }) }
}))} }))}
onChange={({ value }) => this.setState({ systemMessages: value })} onChange={({ value }: { value: boolean }) => this.setState({ systemMessages: value })}
placeholder={{ text: I18n.t('Hide_System_Messages') }} placeholder={{ text: I18n.t('Hide_System_Messages') }}
value={systemMessages} value={systemMessages as string[]}
context={BLOCK_CONTEXT.FORM} context={BLOCK_CONTEXT.FORM}
multiselect multiselect
theme={theme} theme={theme}
@ -466,7 +498,7 @@ class RoomInfoEditView extends React.Component {
}; };
try { try {
const response = await ImagePicker.openPicker(options); const response: Image = await ImagePicker.openPicker(options);
this.setState({ avatar: { url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' } }); this.setState({ avatar: { url: response.path, data: `data:image/jpeg;base64,${response.data}`, service: 'upload' } });
} catch (e) { } catch (e) {
console.log(e); console.log(e);
@ -477,27 +509,27 @@ class RoomInfoEditView extends React.Component {
this.setState({ avatar: { data: null } }); this.setState({ avatar: { data: null } });
}; };
toggleRoomType = value => { toggleRoomType = (value: boolean) => {
logEvent(events.RI_EDIT_TOGGLE_ROOM_TYPE); logEvent(events.RI_EDIT_TOGGLE_ROOM_TYPE);
this.setState(({ encrypted }) => ({ t: value, encrypted: value && encrypted })); this.setState(({ encrypted }) => ({ t: value, encrypted: value && encrypted }));
}; };
toggleReadOnly = value => { toggleReadOnly = (value: boolean) => {
logEvent(events.RI_EDIT_TOGGLE_READ_ONLY); logEvent(events.RI_EDIT_TOGGLE_READ_ONLY);
this.setState({ ro: value }); this.setState({ ro: value });
}; };
toggleReactions = value => { toggleReactions = (value: boolean) => {
logEvent(events.RI_EDIT_TOGGLE_REACTIONS); logEvent(events.RI_EDIT_TOGGLE_REACTIONS);
this.setState({ reactWhenReadOnly: value }); this.setState({ reactWhenReadOnly: value });
}; };
toggleHideSystemMessages = value => { toggleHideSystemMessages = (value: boolean) => {
logEvent(events.RI_EDIT_TOGGLE_SYSTEM_MSG); logEvent(events.RI_EDIT_TOGGLE_SYSTEM_MSG);
this.setState(({ systemMessages }) => ({ enableSysMes: value, systemMessages: value ? systemMessages : [] })); this.setState(({ systemMessages }) => ({ enableSysMes: value, systemMessages: value ? systemMessages : [] }));
}; };
toggleEncrypted = value => { toggleEncrypted = (value: boolean) => {
logEvent(events.RI_EDIT_TOGGLE_ENCRYPTED); logEvent(events.RI_EDIT_TOGGLE_ENCRYPTED);
this.setState({ encrypted: value }); this.setState({ encrypted: value });
}; };
@ -538,15 +570,15 @@ class RoomInfoEditView extends React.Component {
<TouchableOpacity <TouchableOpacity
style={styles.avatarContainer} style={styles.avatarContainer}
onPress={this.changeAvatar} onPress={this.changeAvatar}
disabled={compareServerVersion(serverVersion, 'lowerThan', '3.6.0')}> disabled={compareServerVersion(serverVersion || '', 'lowerThan', '3.6.0')}>
<Avatar <Avatar
type={room.t} type={room.t}
text={room.name} text={room.name}
avatar={avatar?.url} avatar={avatar?.url}
isStatic={avatar?.url} isStatic={avatar?.url}
rid={isEmpty(avatar) && room.rid} rid={isEmpty(avatar) ? room.rid : undefined}
size={100}> size={100}>
{compareServerVersion(serverVersion, 'lowerThan', '3.6.0') ? null : ( {serverVersion && compareServerVersion(serverVersion, 'lowerThan', '3.6.0') ? undefined : (
<TouchableOpacity <TouchableOpacity
style={[styles.resetButton, { backgroundColor: themes[theme].dangerColor }]} style={[styles.resetButton, { backgroundColor: themes[theme].dangerColor }]}
onPress={this.resetAvatar}> onPress={this.resetAvatar}>
@ -563,7 +595,7 @@ class RoomInfoEditView extends React.Component {
value={name} value={name}
onChangeText={value => this.setState({ name: value })} onChangeText={value => this.setState({ name: value })}
onSubmitEditing={() => { onSubmitEditing={() => {
this.description.focus(); this.description?.focus();
}} }}
error={nameError} error={nameError}
theme={theme} theme={theme}
@ -577,7 +609,7 @@ class RoomInfoEditView extends React.Component {
value={description} value={description}
onChangeText={value => this.setState({ description: value })} onChangeText={value => this.setState({ description: value })}
onSubmitEditing={() => { onSubmitEditing={() => {
this.topic.focus(); this.topic?.focus();
}} }}
theme={theme} theme={theme}
testID='room-info-edit-view-description' testID='room-info-edit-view-description'
@ -590,7 +622,7 @@ class RoomInfoEditView extends React.Component {
value={topic} value={topic}
onChangeText={value => this.setState({ topic: value })} onChangeText={value => this.setState({ topic: value })}
onSubmitEditing={() => { onSubmitEditing={() => {
this.announcement.focus(); this.announcement?.focus();
}} }}
theme={theme} theme={theme}
testID='room-info-edit-view-topic' testID='room-info-edit-view-topic'
@ -603,7 +635,7 @@ class RoomInfoEditView extends React.Component {
value={announcement} value={announcement}
onChangeText={value => this.setState({ announcement: value })} onChangeText={value => this.setState({ announcement: value })}
onSubmitEditing={() => { onSubmitEditing={() => {
this.joinCode.focus(); this.joinCode?.focus();
}} }}
theme={theme} theme={theme}
testID='room-info-edit-view-announcement' testID='room-info-edit-view-announcement'
@ -647,19 +679,19 @@ class RoomInfoEditView extends React.Component {
rightLabelPrimary={I18n.t('Read_Only')} rightLabelPrimary={I18n.t('Read_Only')}
rightLabelSecondary={I18n.t('Only_authorized_users_can_write_new_messages')} rightLabelSecondary={I18n.t('Only_authorized_users_can_write_new_messages')}
onValueChange={this.toggleReadOnly} onValueChange={this.toggleReadOnly}
disabled={!permissions[PERMISSION_SET_READONLY] || room.broadcast} disabled={!permissions['set-readonly'] || room.broadcast}
theme={theme} theme={theme}
testID='room-info-edit-view-ro' testID='room-info-edit-view-ro'
/> />
{ro && !room.broadcast ? ( {ro && !room.broadcast ? (
<SwitchContainer <SwitchContainer
value={reactWhenReadOnly} value={reactWhenReadOnly as boolean}
leftLabelPrimary={I18n.t('No_Reactions')} leftLabelPrimary={I18n.t('No_Reactions')}
leftLabelSecondary={I18n.t('Reactions_are_disabled')} leftLabelSecondary={I18n.t('Reactions_are_disabled')}
rightLabelPrimary={I18n.t('Allow_Reactions')} rightLabelPrimary={I18n.t('Allow_Reactions')}
rightLabelSecondary={I18n.t('Reactions_are_enabled')} rightLabelSecondary={I18n.t('Reactions_are_enabled')}
onValueChange={this.toggleReactions} onValueChange={this.toggleReactions}
disabled={!permissions[PERMISSION_SET_REACT_WHEN_READONLY]} disabled={!permissions['set-react-when-readonly']}
theme={theme} theme={theme}
testID='room-info-edit-view-react-when-ro' testID='room-info-edit-view-react-when-ro'
/> />
@ -670,9 +702,9 @@ class RoomInfoEditView extends React.Component {
<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} /> <View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
] ]
: null} : null}
{!compareServerVersion(serverVersion, 'lowerThan', '3.0.0') ? ( {serverVersion && !compareServerVersion(serverVersion, 'lowerThan', '3.0.0') ? (
<SwitchContainer <SwitchContainer
value={enableSysMes} value={enableSysMes as boolean}
leftLabelPrimary={I18n.t('Hide_System_Messages')} leftLabelPrimary={I18n.t('Hide_System_Messages')}
leftLabelSecondary={ leftLabelSecondary={
enableSysMes enableSysMes
@ -689,7 +721,7 @@ class RoomInfoEditView extends React.Component {
) : null} ) : null}
{encryptionEnabled ? ( {encryptionEnabled ? (
<SwitchContainer <SwitchContainer
value={encrypted} value={encrypted as boolean}
disabled={!t} disabled={!t}
leftLabelPrimary={I18n.t('Encrypted')} leftLabelPrimary={I18n.t('Encrypted')}
leftLabelSecondary={I18n.t('End_to_end_encrypted_room')} leftLabelSecondary={I18n.t('End_to_end_encrypted_room')}
@ -735,12 +767,12 @@ class RoomInfoEditView extends React.Component {
styles.buttonInverted, styles.buttonInverted,
styles.buttonContainer_inverted, styles.buttonContainer_inverted,
archived archived
? !permissions[PERMISSION_UNARCHIVE] && sharedStyles.opacity5 ? !permissions['unarchive-room'] && sharedStyles.opacity5
: !permissions[PERMISSION_ARCHIVE] && sharedStyles.opacity5, : !permissions['archive-room'] && sharedStyles.opacity5,
{ flex: 1, marginLeft: 10, borderColor: dangerColor } { flex: 1, marginLeft: 10, borderColor: dangerColor }
]} ]}
onPress={this.toggleArchive} onPress={this.toggleArchive}
disabled={archived ? !permissions[PERMISSION_UNARCHIVE] : !permissions[PERMISSION_ARCHIVE]} disabled={archived ? !permissions['unarchive-room'] : !permissions['archive-room']}
testID={archived ? 'room-info-edit-view-unarchive' : 'room-info-edit-view-archive'}> testID={archived ? 'room-info-edit-view-unarchive' : 'room-info-edit-view-archive'}>
<Text style={[styles.button, styles.button_inverted, { color: dangerColor }]}> <Text style={[styles.button, styles.button_inverted, { color: dangerColor }]}>
{archived ? I18n.t('UNARCHIVE') : I18n.t('ARCHIVE')} {archived ? I18n.t('UNARCHIVE') : I18n.t('ARCHIVE')}
@ -771,21 +803,17 @@ class RoomInfoEditView extends React.Component {
} }
} }
const mapStateToProps = state => ({ const mapStateToProps = (state: IApplicationState) => ({
serverVersion: state.server.version, serverVersion: state.server.version as string,
encryptionEnabled: state.encryption.enabled, encryptionEnabled: state.encryption.enabled,
setReadOnlyPermission: state.permissions[PERMISSION_SET_READONLY], setReadOnlyPermission: state.permissions['set-readonly'] as string[],
setReactWhenReadOnlyPermission: state.permissions[PERMISSION_SET_REACT_WHEN_READONLY], setReactWhenReadOnlyPermission: state.permissions['set-react-when-readonly'] as string[],
archiveRoomPermission: state.permissions[PERMISSION_ARCHIVE], archiveRoomPermission: state.permissions['archive-room'] as string[],
unarchiveRoomPermission: state.permissions[PERMISSION_UNARCHIVE], unarchiveRoomPermission: state.permissions['unarchive-room'] as string[],
deleteCPermission: state.permissions[PERMISSION_DELETE_C], deleteCPermission: state.permissions['delete-c'] as string[],
deletePPermission: state.permissions[PERMISSION_DELETE_P], deletePPermission: state.permissions['delete-p'] as string[],
deleteTeamPermission: state.permissions[PERMISSION_DELETE_TEAM], deleteTeamPermission: state.permissions['delete-team'] as string[],
isMasterDetail: state.app.isMasterDetail isMasterDetail: state.app.isMasterDetail
}); });
const mapDispatchToProps = dispatch => ({ export default connect(mapStateToProps)(withTheme(RoomInfoEditView));
deleteRoom: (roomType, room, selected) => dispatch(deleteRoomAction(roomType, room, selected))
});
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(RoomInfoEditView));