537 lines
16 KiB
TypeScript
537 lines
16 KiB
TypeScript
import React from 'react';
|
|
import { ScrollView, Text, View } from 'react-native';
|
|
import { BorderlessButton } from 'react-native-gesture-handler';
|
|
import { connect } from 'react-redux';
|
|
import UAParser from 'ua-parser-js';
|
|
import isEmpty from 'lodash/isEmpty';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { CompositeNavigationProp, RouteProp } from '@react-navigation/native';
|
|
import { Observable, Subscription } from 'rxjs';
|
|
|
|
import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
|
|
import Status from '../../containers/Status';
|
|
import Avatar from '../../containers/Avatar';
|
|
import sharedStyles from '../Styles';
|
|
import RoomTypeIcon from '../../containers/RoomTypeIcon';
|
|
import I18n from '../../i18n';
|
|
import * as HeaderButton from '../../containers/HeaderButton';
|
|
import StatusBar from '../../containers/StatusBar';
|
|
import log, { events, logEvent } from '../../lib/methods/helpers/log';
|
|
import { themes } from '../../lib/constants';
|
|
import { TSupportedThemes, withTheme } from '../../theme';
|
|
import { MarkdownPreview } from '../../containers/markdown';
|
|
import { LISTENER } from '../../containers/Toast';
|
|
import EventEmitter from '../../lib/methods/helpers/events';
|
|
import SafeAreaView from '../../containers/SafeAreaView';
|
|
import { goRoom } from '../../lib/methods/helpers/goRoom';
|
|
import Navigation from '../../lib/navigation/appNavigation';
|
|
import Livechat from './Livechat';
|
|
import Channel from './Channel';
|
|
import Direct from './Direct';
|
|
import styles from './styles';
|
|
import { ChatsStackParamList } from '../../stacks/types';
|
|
import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
|
|
import { SubscriptionType, TSubscriptionModel, ISubscription, IUser, IApplicationState } from '../../definitions';
|
|
import { ILivechatVisitor } from '../../definitions/ILivechatVisitor';
|
|
import { callJitsi } from '../../lib/methods';
|
|
import { getRoomTitle, getUidDirectMessage, hasPermission } from '../../lib/methods/helpers';
|
|
import { Services } from '../../lib/services';
|
|
import { getSubscriptionByRoomId } from '../../lib/database/services/Subscription';
|
|
import { handleIgnore } from '../../lib/methods/helpers/handleIgnore';
|
|
|
|
interface IGetRoomTitle {
|
|
room: ISubscription;
|
|
type: SubscriptionType;
|
|
name?: string;
|
|
username: string;
|
|
statusText?: string;
|
|
theme: TSupportedThemes;
|
|
}
|
|
|
|
const renderRoomTitle = ({ room, type, name, username, statusText, theme }: IGetRoomTitle) =>
|
|
type === SubscriptionType.DIRECT ? (
|
|
<>
|
|
<Text testID='room-info-view-name' style={[styles.roomTitle, { color: themes[theme].titleText }]}>
|
|
{name}
|
|
</Text>
|
|
{username && (
|
|
<Text
|
|
testID='room-info-view-username'
|
|
style={[styles.roomUsername, { color: themes[theme].auxiliaryText }]}
|
|
>{`@${username}`}</Text>
|
|
)}
|
|
{!!statusText && (
|
|
<View testID='room-info-view-custom-status'>
|
|
<MarkdownPreview msg={statusText} style={[styles.roomUsername, { color: themes[theme].auxiliaryText }]} />
|
|
</View>
|
|
)}
|
|
</>
|
|
) : (
|
|
<View style={styles.roomTitleRow}>
|
|
<RoomTypeIcon
|
|
type={room.prid ? 'discussion' : room.t}
|
|
teamMain={room.teamMain}
|
|
key='room-info-type'
|
|
status={room.visitor?.status}
|
|
sourceType={room.source}
|
|
/>
|
|
<Text testID='room-info-view-name' style={[styles.roomTitle, { color: themes[theme].titleText }]} key='room-info-name'>
|
|
{getRoomTitle(room)}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
interface IRoomInfoViewProps {
|
|
navigation: CompositeNavigationProp<
|
|
StackNavigationProp<ChatsStackParamList, 'RoomInfoView'>,
|
|
StackNavigationProp<MasterDetailInsideStackParamList>
|
|
>;
|
|
route: RouteProp<ChatsStackParamList, 'RoomInfoView'>;
|
|
subscribedRoom: string;
|
|
theme: TSupportedThemes;
|
|
isMasterDetail: boolean;
|
|
jitsiEnabled: boolean;
|
|
editRoomPermission?: string[];
|
|
editOmnichannelContact?: string[];
|
|
editLivechatRoomCustomfields?: string[];
|
|
roles: { [key: string]: string };
|
|
}
|
|
|
|
export interface IUserParsed extends IUser {
|
|
parsedRoles?: string[];
|
|
}
|
|
|
|
export interface ILivechatVisitorModified extends ILivechatVisitor {
|
|
os?: string;
|
|
browser?: string;
|
|
}
|
|
|
|
interface IRoomInfoViewState {
|
|
room: ISubscription;
|
|
roomUser: IUserParsed | ILivechatVisitorModified;
|
|
showEdit: boolean;
|
|
roomFromRid?: TSubscriptionModel;
|
|
}
|
|
|
|
class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewState> {
|
|
private rid: string;
|
|
|
|
private t: SubscriptionType;
|
|
|
|
private unsubscribeFocus?: () => void;
|
|
|
|
private subscription?: Subscription;
|
|
|
|
private roomObservable?: Observable<TSubscriptionModel>;
|
|
|
|
private fromRid?: string;
|
|
|
|
private subscriptionRoomFromRid?: Subscription;
|
|
|
|
constructor(props: IRoomInfoViewProps) {
|
|
super(props);
|
|
const room = props.route.params?.room;
|
|
const roomUser = props.route.params?.member;
|
|
this.rid = props.route.params?.rid;
|
|
this.t = props.route.params?.t;
|
|
this.fromRid = props.route.params?.fromRid;
|
|
this.state = {
|
|
room: (room || { rid: this.rid, t: this.t }) as any,
|
|
roomUser: roomUser || {},
|
|
showEdit: false,
|
|
roomFromRid: undefined
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.isDirect) {
|
|
this.loadUser();
|
|
this.loadRoomFromRid();
|
|
} else {
|
|
this.loadRoom();
|
|
}
|
|
this.setHeader();
|
|
|
|
const { navigation } = this.props;
|
|
this.unsubscribeFocus = navigation.addListener('focus', () => {
|
|
if (this.isLivechat) {
|
|
this.loadVisitor();
|
|
}
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.subscription && this.subscription.unsubscribe) {
|
|
this.subscription.unsubscribe();
|
|
}
|
|
if (this.subscriptionRoomFromRid && this.subscriptionRoomFromRid.unsubscribe) {
|
|
this.subscriptionRoomFromRid.unsubscribe();
|
|
}
|
|
if (this.unsubscribeFocus) {
|
|
this.unsubscribeFocus();
|
|
}
|
|
}
|
|
|
|
setHeader = () => {
|
|
const { roomUser, room, showEdit } = this.state;
|
|
const { navigation, route } = this.props;
|
|
const t = route.params?.t;
|
|
const rid = route.params?.rid;
|
|
const showCloseModal = route.params?.showCloseModal;
|
|
navigation.setOptions({
|
|
headerLeft: showCloseModal ? () => <HeaderButton.CloseModal navigation={navigation} /> : undefined,
|
|
title: t === SubscriptionType.DIRECT ? I18n.t('User_Info') : I18n.t('Room_Info'),
|
|
headerRight: showEdit
|
|
? () => (
|
|
<HeaderButton.Container>
|
|
<HeaderButton.Item
|
|
iconName='edit'
|
|
onPress={() => {
|
|
const isLivechat = t === SubscriptionType.OMNICHANNEL;
|
|
logEvent(events[`RI_GO_${isLivechat ? 'LIVECHAT' : 'RI'}_EDIT`]);
|
|
navigation.navigate(isLivechat ? 'LivechatEditView' : 'RoomInfoEditView', { rid, room, roomUser });
|
|
}}
|
|
testID='room-info-view-edit-button'
|
|
/>
|
|
</HeaderButton.Container>
|
|
)
|
|
: undefined
|
|
});
|
|
};
|
|
|
|
get isDirect() {
|
|
const { room } = this.state;
|
|
return room.t === SubscriptionType.DIRECT;
|
|
}
|
|
|
|
get isLivechat() {
|
|
const { room } = this.state;
|
|
return room.t === SubscriptionType.OMNICHANNEL;
|
|
}
|
|
|
|
getRoleDescription = (id: string) => {
|
|
const { roles } = this.props;
|
|
return roles[id];
|
|
};
|
|
|
|
loadVisitor = async () => {
|
|
const { room } = this.state;
|
|
try {
|
|
if (room.visitor?._id) {
|
|
const result = await Services.getVisitorInfo(room.visitor._id);
|
|
if (result.success) {
|
|
const { visitor } = result;
|
|
const params: { os?: string; browser?: string } = {};
|
|
if (visitor.userAgent) {
|
|
const ua = new UAParser();
|
|
ua.setUA(visitor.userAgent);
|
|
params.os = `${ua.getOS().name} ${ua.getOS().version}`;
|
|
params.browser = `${ua.getBrowser().name} ${ua.getBrowser().version}`;
|
|
}
|
|
this.setState({ roomUser: { ...visitor, ...params } as ILivechatVisitorModified }, () => this.setHeader());
|
|
}
|
|
}
|
|
} catch (error) {
|
|
// Do nothing
|
|
}
|
|
};
|
|
|
|
parseRoles = (roleArray: string[]) =>
|
|
Promise.all(
|
|
roleArray.map(async role => {
|
|
const description = await this.getRoleDescription(role);
|
|
return description;
|
|
})
|
|
);
|
|
|
|
loadUser = async () => {
|
|
const { room, roomUser } = this.state;
|
|
|
|
if (isEmpty(roomUser)) {
|
|
try {
|
|
const roomUserId = getUidDirectMessage(room);
|
|
const result = await Services.getUserInfo(roomUserId);
|
|
if (result.success) {
|
|
const { user } = result;
|
|
const { roles } = user;
|
|
const parsedRoles: { parsedRoles?: string[] } = {};
|
|
if (roles && roles.length) {
|
|
parsedRoles.parsedRoles = await this.parseRoles(roles);
|
|
}
|
|
|
|
this.setState({ roomUser: { ...user, ...parsedRoles } as IUserParsed });
|
|
}
|
|
} catch {
|
|
// do nothing
|
|
}
|
|
} else {
|
|
try {
|
|
const { roles } = roomUser as IUserParsed;
|
|
if (roles && roles.length) {
|
|
const parsedRoles = await this.parseRoles(roles);
|
|
this.setState({ roomUser: { ...roomUser, parsedRoles } });
|
|
} else {
|
|
this.setState({ roomUser });
|
|
}
|
|
} catch (e) {
|
|
// do nothing
|
|
}
|
|
}
|
|
};
|
|
|
|
loadRoomFromRid = async () => {
|
|
if (this.fromRid) {
|
|
try {
|
|
const sub = await getSubscriptionByRoomId(this.fromRid);
|
|
this.subscriptionRoomFromRid = sub?.observe().subscribe(roomFromRid => {
|
|
this.setState({ roomFromRid });
|
|
});
|
|
} catch (e) {
|
|
// do nothing
|
|
}
|
|
}
|
|
};
|
|
|
|
loadRoom = async () => {
|
|
const { room: roomState } = this.state;
|
|
const { route, editRoomPermission, editOmnichannelContact, editLivechatRoomCustomfields } = this.props;
|
|
let room = route.params?.room as any;
|
|
const roomModel = room as TSubscriptionModel;
|
|
if (roomModel && roomModel.observe) {
|
|
this.roomObservable = roomModel.observe();
|
|
this.subscription = this.roomObservable.subscribe(changes => {
|
|
this.setState({ room: changes }, () => this.setHeader());
|
|
});
|
|
} else {
|
|
try {
|
|
const result = await Services.getRoomInfo(this.rid);
|
|
if (result.success) {
|
|
({ room } = result);
|
|
this.setState({ room: { ...roomState, ...room } });
|
|
}
|
|
} catch (e) {
|
|
log(e);
|
|
}
|
|
}
|
|
|
|
const permissionToEdit = this.isLivechat ? [editOmnichannelContact, editLivechatRoomCustomfields] : [editRoomPermission];
|
|
|
|
const permissions = await hasPermission(permissionToEdit, room.rid);
|
|
if (permissions.some(Boolean)) {
|
|
this.setState({ showEdit: true }, () => this.setHeader());
|
|
}
|
|
};
|
|
|
|
createDirect = () =>
|
|
new Promise<void>(async (resolve, reject) => {
|
|
const { route } = this.props;
|
|
|
|
// We don't need to create a direct
|
|
const member = route.params?.member;
|
|
if (!isEmpty(member)) {
|
|
return resolve();
|
|
}
|
|
|
|
// TODO: Check if some direct with the user already exists on database
|
|
try {
|
|
const {
|
|
roomUser: { username }
|
|
} = this.state;
|
|
const result = await Services.createDirectMessage(username);
|
|
if (result.success) {
|
|
const {
|
|
room: { rid }
|
|
} = result;
|
|
return this.setState(({ room }) => ({ room: { ...room, rid } }), resolve);
|
|
}
|
|
} catch {
|
|
// do nothing
|
|
}
|
|
reject();
|
|
});
|
|
|
|
goRoom = () => {
|
|
logEvent(events.RI_GO_ROOM_USER);
|
|
const { room } = this.state;
|
|
const { navigation, isMasterDetail, subscribedRoom } = this.props;
|
|
const params = {
|
|
rid: room.rid,
|
|
name: getRoomTitle(room),
|
|
t: room.t,
|
|
roomUserId: getUidDirectMessage(room)
|
|
};
|
|
|
|
if (room.rid) {
|
|
if (room.rid === subscribedRoom) {
|
|
if (isMasterDetail) {
|
|
return Navigation.navigate('DrawerNavigator');
|
|
}
|
|
return navigation.goBack();
|
|
}
|
|
// if it's on master detail layout, we close the modal and replace RoomView
|
|
goRoom({ item: params, isMasterDetail, popToRoot: true });
|
|
}
|
|
};
|
|
|
|
handleCreateDirectMessage = async (onPress: () => void) => {
|
|
try {
|
|
if (this.isDirect) {
|
|
await this.createDirect();
|
|
}
|
|
onPress();
|
|
} catch {
|
|
EventEmitter.emit(LISTENER, {
|
|
message: I18n.t('error-action-not-allowed', { action: I18n.t('Create_Direct_Messages') })
|
|
});
|
|
}
|
|
};
|
|
|
|
videoCall = () => {
|
|
const { room } = this.state;
|
|
callJitsi(room);
|
|
};
|
|
|
|
handleBlockUser = async (rid: string, blocked: string, block: boolean) => {
|
|
logEvent(events.RI_TOGGLE_BLOCK_USER);
|
|
try {
|
|
await Services.toggleBlockUser(rid, blocked, block);
|
|
} catch (e) {
|
|
log(e);
|
|
}
|
|
};
|
|
|
|
handleEditAvatar = () => {
|
|
const {navigation} = this.props
|
|
navigation.navigate("ChangeAvatarView",{titleHeader:I18n.t('Room_Info')})
|
|
}
|
|
|
|
renderAvatar = (room: ISubscription, roomUser: IUserParsed) => {
|
|
const { theme } = this.props;
|
|
const { showEdit } = this.state;
|
|
const showAvatarEdit = showEdit && this.t !== SubscriptionType.OMNICHANNEL;
|
|
|
|
return (
|
|
<Avatar
|
|
text={room.name || roomUser.username}
|
|
style={styles.avatar}
|
|
type={this.t}
|
|
size={100}
|
|
rid={room?.rid}
|
|
handleEdit={showAvatarEdit ? this.handleEditAvatar : undefined}
|
|
>
|
|
{this.t === SubscriptionType.DIRECT && roomUser._id ? (
|
|
<View style={[sharedStyles.status, { backgroundColor: themes[theme].auxiliaryBackground }]}>
|
|
<Status size={20} id={roomUser._id} />
|
|
</View>
|
|
) : null}
|
|
</Avatar>
|
|
);
|
|
};
|
|
|
|
renderButton = (onPress: () => void, iconName: TIconsName, text: string, danger?: boolean) => {
|
|
const { theme } = this.props;
|
|
const color = danger ? themes[theme].dangerColor : themes[theme].actionTintColor;
|
|
return (
|
|
<BorderlessButton testID={`room-info-view-${iconName}`} onPress={onPress} style={styles.roomButton}>
|
|
<CustomIcon name={iconName} size={30} color={color} />
|
|
<Text style={[styles.roomButtonText, { color }]}>{text}</Text>
|
|
</BorderlessButton>
|
|
);
|
|
};
|
|
|
|
renderButtons = () => {
|
|
const { roomFromRid, roomUser } = this.state;
|
|
const { jitsiEnabled } = this.props;
|
|
|
|
const isFromDm = roomFromRid?.rid ? new RegExp(roomUser._id).test(roomFromRid.rid) : false;
|
|
const isDirectFromSaved = this.isDirect && this.fromRid && roomFromRid;
|
|
|
|
// Following the web behavior, when is a DM with myself, shouldn't appear block or ignore option
|
|
const isDmWithMyself = roomFromRid?.uids && roomFromRid.uids?.filter(uid => uid !== roomUser._id).length === 0;
|
|
|
|
const ignored = roomFromRid?.ignored;
|
|
const isIgnored = ignored?.includes?.(roomUser._id);
|
|
|
|
const blocker = roomFromRid?.blocker;
|
|
|
|
return (
|
|
<View style={styles.roomButtonsContainer}>
|
|
{this.renderButton(() => this.handleCreateDirectMessage(this.goRoom), 'message', I18n.t('Message'))}
|
|
{jitsiEnabled && this.isDirect
|
|
? this.renderButton(() => this.handleCreateDirectMessage(this.videoCall), 'camera', I18n.t('Video_call'))
|
|
: null}
|
|
{isDirectFromSaved && !isFromDm && !isDmWithMyself
|
|
? this.renderButton(
|
|
() => handleIgnore(roomUser._id, !isIgnored, roomFromRid.rid),
|
|
'ignore',
|
|
I18n.t(isIgnored ? 'Unignore' : 'Ignore'),
|
|
true
|
|
)
|
|
: null}
|
|
{isDirectFromSaved && isFromDm
|
|
? this.renderButton(
|
|
() => this.handleBlockUser(roomFromRid.rid, roomUser._id, !blocker),
|
|
'ignore',
|
|
I18n.t(`${blocker ? 'Unblock' : 'Block'}_user`),
|
|
true
|
|
)
|
|
: null}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
renderContent = () => {
|
|
const { room, roomUser } = this.state;
|
|
|
|
if (this.isDirect) {
|
|
return <Direct roomUser={roomUser as IUserParsed} />;
|
|
}
|
|
|
|
if (this.t === SubscriptionType.OMNICHANNEL) {
|
|
return <Livechat room={room} roomUser={roomUser as ILivechatVisitorModified} />;
|
|
}
|
|
return <Channel room={room} />;
|
|
};
|
|
|
|
render() {
|
|
const { room, roomUser } = this.state;
|
|
const { theme } = this.props;
|
|
const roomUserParsed = roomUser as IUserParsed;
|
|
|
|
return (
|
|
<ScrollView style={[styles.scroll, { backgroundColor: themes[theme].backgroundColor }]}>
|
|
<StatusBar />
|
|
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-info-view'>
|
|
<View style={[styles.avatarContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
|
|
{this.renderAvatar(room, roomUserParsed)}
|
|
<View style={styles.roomTitleContainer}>
|
|
{renderRoomTitle({
|
|
room,
|
|
type: this.t,
|
|
name: roomUserParsed?.name,
|
|
username: roomUserParsed?.username,
|
|
statusText: roomUserParsed?.statusText,
|
|
theme
|
|
})}
|
|
</View>
|
|
{this.renderButtons()}
|
|
</View>
|
|
{this.renderContent()}
|
|
</SafeAreaView>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state: IApplicationState) => ({
|
|
subscribedRoom: state.room.subscribedRoom,
|
|
isMasterDetail: state.app.isMasterDetail,
|
|
jitsiEnabled: (state.settings.Jitsi_Enabled as boolean) || false,
|
|
editRoomPermission: state.permissions['edit-room'],
|
|
editOmnichannelContact: state.permissions['edit-omnichannel-contact'],
|
|
editLivechatRoomCustomfields: state.permissions['edit-livechat-room-customfields'],
|
|
roles: state.roles
|
|
});
|
|
|
|
export default connect(mapStateToProps)(withTheme(RoomInfoView));
|