[FIX] Contact Bar not reactive (#22016)

* WIP

* Bump

* ContactContetualBar -> TS

* Opss

* méeeee

* done

* fix

* ??

* TS fix

* remove tabId from quickactions component

* Fix onhold missing

* prevent error with no contact

* prepare directory chatinfo to use the the endpoint instead the hook useOmnichannelRoom

* Canelada

* fix identation

* fix stream issues

* fix resume chat onhold

* remove unnecessary import

* missed fields chat info panel

* ChatsContextualBar reactive

* Allow agents to edit rooms on contact center.

Co-authored-by: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Co-authored-by: Rafael <rafaelblink@gmail.com>
Co-authored-by: Renato Becker <renato.augusto.becker@gmail.com>

app/threads/client/components/ThreadComponent.tsx

@@ -100,7 +100,7 @@ const ThreadComponent: FC<{
 	}, [dispatchToastMessage, followMessage, unfollowMessage, mid]);
 
 	const handleClose = useCallback(() => {
-		channelRoute.push(room.t === 'd' ? { rid: room._id } : { name: room.name });
+		channelRoute.push(room.t === 'd' ? { rid: room._id } : { name: room.name || room._id });
 	}, [channelRoute, room._id, room.t, room.name]);
 
 	const [viewData, setViewData] = useState(() => ({

app/ui-sidenav/client/roomList.js

@@ -161,65 +161,148 @@ const mergeSubRoom = (subscription) => {
 			retention: 1,
 			teamId: 1,
 			teamMain: 1,
+			onHold: 1,
+			metrics: 1,
+			servedBy: 1,
+			ts: 1,
+			waitingResponse: 1,
 		},
 	};
 
 	const room = Rooms.findOne({ _id: subscription.rid }, options) || { };
 
 	const lastRoomUpdate = room.lm || subscription.ts || subscription._updatedAt;
 
-	if (room.uids) {
-		subscription.uids = room.uids;
-	}
-
-	if (room.v) {
-		subscription.v = room.v;
-	}
-
-	subscription.usernames = room.usernames;
+	const {
+		encrypted,
+		description,
+		cl,
+		topic,
+		announcement,
+		broadcast,
+		archived,
+		retention,
+		lastMessage,
+		streamingOptions,
+		teamId,
+		teamMain,
+		uids,
+		usernames,
+
+		v,
+		transcriptRequest,
+		servedBy,
+		onHold,
+		tags,
+		closedAt,
+		metrics,
+		waitingResponse,
+		responseBy,
+		priorityId,
+		livechatData,
+		ts,
+	} = room;
 
-	subscription.lastMessage = room.lastMessage;
 	subscription.lm = subscription.lr ? new Date(Math.max(subscription.lr, lastRoomUpdate)) : lastRoomUpdate;
-	subscription.streamingOptions = room.streamingOptions;
-
-	subscription.encrypted = room.encrypted;
-	subscription.description = room.description;
-	subscription.cl = room.cl;
-	subscription.topic = room.topic;
-	subscription.announcement = room.announcement;
-	subscription.broadcast = room.broadcast;
-	subscription.archived = room.archived;
-	subscription.retention = room.retention;
-
-	subscription.teamId = room.teamId;
-	subscription.teamMain = room.teamMain;
-	return Object.assign(subscription, getLowerCaseNames(subscription));
+
+	return Object.assign(subscription, getLowerCaseNames(subscription), {
+		encrypted,
+		description,
+		cl,
+		topic,
+		announcement,
+		broadcast,
+		archived,
+		retention,
+		lastMessage,
+		streamingOptions,
+		teamId,
+		teamMain,
+		uids,
+		usernames,
+
+		v,
+		transcriptRequest,
+		servedBy,
+		onHold,
+		tags,
+		closedAt,
+		metrics,
+		waitingResponse,
+		responseBy,
+		priorityId,
+		livechatData,
+		ts,
+	});
 };
 
 const mergeRoomSub = (room) => {
 	const sub = Subscriptions.findOne({ rid: room._id });
 	if (!sub) {
 		return room;
 	}
+
+	const {
+		encrypted,
+		description,
+		cl,
+		topic,
+		announcement,
+		broadcast,
+		archived,
+		retention,
+		lastMessage,
+		streamingOptions,
+		teamId,
+		teamMain,
+		uids,
+		usernames,
+
+		v,
+		transcriptRequest,
+		servedBy,
+		onHold,
+		tags,
+		closedAt,
+		metrics,
+		waitingResponse,
+		responseBy,
+		priorityId,
+		livechatData,
+		ts,
+
+	} = room;
+
 	Subscriptions.update({
 		rid: room._id,
 	}, {
 		$set: {
-			encrypted: room.encrypted,
-			description: room.description,
-			cl: room.cl,
-			topic: room.topic,
-			announcement: room.announcement,
-			broadcast: room.broadcast,
-			archived: room.archived,
-			retention: room.retention,
-			...Array.isArray(room.uids) && { uids: room.uids },
-			...Array.isArray(room.uids) && { usernames: room.usernames },
-			...room.v && { v: room.v },
-			lastMessage: room.lastMessage,
-			streamingOptions: room.streamingOptions,
-			teamId: room.teamId,
-			teamMain: room.teamMain,
+			encrypted,
+			description,
+			cl,
+			topic,
+			announcement,
+			broadcast,
+			archived,
+			retention,
+			uids,
+			usernames,
+			lastMessage,
+			streamingOptions,
+			teamId,
+			teamMain,
+			v,
+			transcriptRequest,
+			servedBy,
+			onHold,
+			tags,
+			closedAt,
+			metrics,
+			waitingResponse,
+			responseBy,
+			priorityId,
+			livechatData,
+			ts,
 			...getLowerCaseNames(room, sub.name, sub.fname),
 		},
 	});

client/components/ErrorBoundary.js

@@ -0,0 +1,17 @@
+import { Component } from 'react';
+
+export class ErrorBoundary extends Component {
+	state = { hasError: false };
+
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return null;
+		}
+
+		return this.props.children;
+	}
+}

client/components/Omnichannel/modals/TranscriptModal.tsx

@@ -2,14 +2,14 @@ import { Field, Button, TextInput, Icon, ButtonGroup, Modal } from '@rocket.chat
 import { useAutoFocus } from '@rocket.chat/fuselage-hooks';
 import React, { FC, useCallback, useEffect, useState, useMemo } from 'react';
 
-import { IRoom } from '../../../../definition/IRoom';
+import { IOmnichannelRoom } from '../../../../definition/IRoom';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { useComponentDidUpdate } from '../../../hooks/useComponentDidUpdate';
 import { useForm } from '../../../hooks/useForm';
 
 type TranscriptModalProps = {
 	email: string;
-	room?: IRoom;
+	room: IOmnichannelRoom;
 	onRequest: (email: string, subject: string) => void;
 	onSend?: (email: string, subject: string, token: string) => void;
 	onCancel: () => void;
@@ -38,7 +38,7 @@ const TranscriptModal: FC<TranscriptModalProps> = ({
 	const { handleEmail, handleSubject } = handlers;
 	const [emailError, setEmailError] = useState('');
 	const [subjectError, setSubjectError] = useState('');
-	const { transcriptRequest } = (room as unknown) as IRoom;
+	const { transcriptRequest } = room;
 	const roomOpen = room && room.open;
 	const token = room?.v?.token;
 

client/lib/RoomManager.ts

@@ -148,11 +148,11 @@ const subscribeOpenedRoom: Subscription<IRoom['_id'] | undefined> = {
 
 const fields = {};
 
-export const useHandleRoom = (rid: IRoom['_id']): AsyncState<IRoom> => {
-	const { resolve, update, ...state } = useAsyncState<IRoom>();
+export const useHandleRoom = <T extends IRoom>(rid: IRoom['_id']): AsyncState<T> => {
+	const { resolve, update, ...state } = useAsyncState<T>();
 	const uid = useUserId();
-	const subscription = (useUserSubscription(rid, fields) as unknown) as IRoom;
-	const _room = (useUserRoom(rid, fields) as unknown) as IRoom;
+	const subscription = (useUserSubscription(rid, fields) as unknown) as T;
+	const _room = (useUserRoom(rid, fields) as unknown) as T;
 
 	const room = uid ? subscription || _room : _room;
 

client/views/omnichannel/directory/ChatsContextualBar.js

@@ -1,10 +1,14 @@
+import { Box } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import VerticalBar from '../../../components/VerticalBar';
 import { useRoute, useRouteParameter } from '../../../contexts/RouterContext';
 import { useTranslation } from '../../../contexts/TranslationContext';
+import { AsyncStatePhase } from '../../../hooks/useAsyncState';
+import { useEndpointData } from '../../../hooks/useEndpointData';
+import { FormSkeleton } from './Skeleton';
 import Chat from './chats/Chat';
-import ChatInfo from './chats/contextualBar/ChatInfo';
+import ChatInfoDirectory from './chats/contextualBar/ChatInfoDirectory';
 import RoomEditWithData from './chats/contextualBar/RoomEditWithData';
 
 const ChatsContextualBar = ({ chatReload }) => {
@@ -27,10 +31,26 @@ const ChatsContextualBar = ({ chatReload }) => {
 		directoryRoute.push({ page: 'chats', id, bar: 'info' });
 	};
 
+	const { value: data, phase: state, error, reload: reloadInfo } = useEndpointData(
+		`rooms.info?roomId=${id}`,
+	);
+
 	if (bar === 'view') {
 		return <Chat rid={id} />;
 	}
 
+	if (state === AsyncStatePhase.LOADING) {
+		return (
+			<Box pi='x24'>
+				<FormSkeleton />
+			</Box>
+		);
+	}
+
+	if (error || !data || !data.room) {
+		return <Box mbs='x16'>{t('Room_not_found')}</Box>;
+	}
+
 	return (
 		<VerticalBar className={'contextual-bar'}>
 			<VerticalBar.Header>
@@ -53,12 +73,13 @@ const ChatsContextualBar = ({ chatReload }) => {
 				)}
 				<VerticalBar.Close onClick={handleChatsVerticalBarCloseButtonClick} />
 			</VerticalBar.Header>
-			{bar === 'info' && <ChatInfo id={id} />}
+			{bar === 'info' && <ChatInfoDirectory id={id} room={data.room} />}
 			{bar === 'edit' && (
 				<RoomEditWithData
 					id={id}
 					close={handleChatsVerticalBarBackButtonClick}
 					reload={chatReload}
+					reloadInfo={reloadInfo}
 				/>
 			)}
 		</VerticalBar>

client/views/omnichannel/directory/ContactContextualBar.js

@@ -10,12 +10,8 @@ import ContactNewEdit from './contacts/contextualBar/ContactNewEdit';
 const ContactContextualBar = ({ contactReload }) => {
 	const directoryRoute = useRoute('omnichannel-directory');
 	const bar = useRouteParameter('bar');
-	const page = useRouteParameter('page');
-	const tab = useRouteParameter('tab');
 	const id = useRouteParameter('id');
 
-	console.log(bar, tab, page, id);
-
 	const t = useTranslation();
 
 	const handleContactsVerticalBarCloseButtonClick = () => {