Merge branch 'develop' into fix/memberList

.changeset/gorgeous-dryers-raise.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fix: Omnichannel contact table not being updated after add/edit/remove

.changeset/weak-ghosts-suffer.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+fix: Handle live subscription removal

apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx

@@ -18,10 +18,9 @@ import {
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import { useIsCallReady } from '../../../../contexts/CallContext';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
 import { useFormatDate } from '../../../../hooks/useFormatDate';
-import { AsyncStatePhase } from '../../../../lib/asyncState';
 import { CallDialpadButton } from '../components/CallDialpadButton';
+import { useCurrentContacts } from './hooks/useCurrentContacts';
 
 function ContactTable(): ReactElement {
 	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
@@ -64,8 +63,7 @@ function ContactTable(): ReactElement {
 			}),
 	);
 
-	const { reload, ...result } = useEndpointData('/v1/livechat/visitors.search', { params: query });
-
+	const { data: contactResult, isLoading, isError, isSuccess, refetch } = useCurrentContacts(query);
 	return (
 		<>
 			<FilterByText
@@ -74,6 +72,7 @@ function ContactTable(): ReactElement {
 				onButtonClick={onButtonNewClick}
 				onChange={({ text }): void => setTerm(text)}
 			/>
+
 			<GenericTable>
 				<GenericTableHeader>
 					<GenericTableHeaderCell
@@ -112,8 +111,8 @@ function ContactTable(): ReactElement {
 					<GenericTableHeaderCell key='call' width={44} />
 				</GenericTableHeader>
 				<GenericTableBody>
-					{result.phase === AsyncStatePhase.RESOLVED &&
-						result.value.visitors.map(({ _id, username, fname, name, visitorEmails, phone, lastChat }) => {
+					{contactResult &&
+						contactResult.visitors.map(({ _id, username, fname, name, visitorEmails, phone, lastChat }) => {
 							const phoneNumber = (phone?.length && phone[0].phoneNumber) || '';
 							const visitorEmail = visitorEmails?.length && visitorEmails[0].address;
 
@@ -137,29 +136,30 @@ function ContactTable(): ReactElement {
 								</GenericTableRow>
 							);
 						})}
-					{result.phase === AsyncStatePhase.LOADING && <GenericTableLoadingTable headerCells={6} />}
+					{isLoading && <GenericTableLoadingTable headerCells={6} />}
+					{isError && <Box mbs='x16'>{t('Something_went_wrong')}</Box>}
 				</GenericTableBody>
 			</GenericTable>
 
-			{result.phase === AsyncStatePhase.REJECTED && (
+			{isError && (
 				<Box mbs='x20'>
 					<States>
 						<StatesIcon variation='danger' name='circle-exclamation' />
 						<StatesTitle>{t('Connection_error')}</StatesTitle>
 						<StatesActions>
-							<StatesAction onClick={reload}>
+							<StatesAction onClick={() => refetch()}>
 								<Icon mie='x4' size='x20' name='reload' />
 								{t('Reload_page')}
 							</StatesAction>
 						</StatesActions>
 					</States>
 				</Box>
 			)}
-			{result.phase === AsyncStatePhase.RESOLVED && (
+			{isSuccess && (
 				<Pagination
 					current={current}
 					itemsPerPage={itemsPerPage}
-					count={result.value.total}
+					count={contactResult.total}
 					onSetItemsPerPage={setItemsPerPage}
 					onSetCurrent={setCurrent}
 					{...paginationProps}

apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactNewEdit.tsx

@@ -1,6 +1,7 @@
 import type { ILivechatVisitor, Serialized } from '@rocket.chat/core-typings';
 import { Field, TextInput, ButtonGroup, Button } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
@@ -58,6 +59,7 @@ const getInitialValues = (data: ContactNewEditProps['data']): ContactFormData =>
 const ContactNewEdit = ({ id, data, close }: ContactNewEditProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
 
 	const canViewCustomFields = (): boolean =>
 		hasAtLeastOnePermission(['view-livechat-room-customfields', 'edit-livechat-room-customfields']);
@@ -168,6 +170,7 @@ const ContactNewEdit = ({ id, data, close }: ContactNewEditProps): ReactElement
 		try {
 			await saveContact(payload);
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
+			await queryClient.invalidateQueries({ queryKey: ['current-contacts'] });
 			close();
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });

apps/meteor/client/views/omnichannel/directory/contacts/hooks/useCurrentContacts.ts

@@ -0,0 +1,12 @@
+import type { GETLivechatRoomsParams, OperationResult } from '@rocket.chat/rest-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+export const useCurrentContacts = (
+	query: GETLivechatRoomsParams,
+): UseQueryResult<OperationResult<'GET', '/v1/livechat/visitors.search'>> => {
+	const currentContacts = useEndpoint('GET', '/v1/livechat/visitors.search');
+
+	return useQuery(['current-contacts', query], () => currentContacts(query));
+};

apps/meteor/client/views/room/components/body/RoomBody.tsx

@@ -44,6 +44,7 @@ import UnreadMessagesIndicator from './UnreadMessagesIndicator';
 import UploadProgressIndicator from './UploadProgressIndicator';
 import ComposerContainer from './composer/ComposerContainer';
 import { useFileUploadDropTarget } from './hooks/useFileUploadDropTarget';
+import { useGoToHomeOnRemoved } from './hooks/useGoToHomeOnRemoved';
 import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
 import { useRestoreScrollPosition } from './hooks/useRestoreScrollPosition';
 import { useRetentionPolicy } from './hooks/useRetentionPolicy';
@@ -211,6 +212,8 @@ const RoomBody = (): ReactElement => {
 
 	const retentionPolicy = useRetentionPolicy(room);
 
+	useGoToHomeOnRemoved(room, user?._id);
+
 	useEffect(() => {
 		callbacks.add(
 			'streamNewMessage',

apps/meteor/client/views/room/components/body/hooks/useGoToHomeOnRemoved.ts

@@ -0,0 +1,33 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { useRoute, useStream, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+export function useGoToHomeOnRemoved(room: IRoom, userId: string | undefined): void {
+	const homeRouter = useRoute('home');
+	const queryClient = useQueryClient();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const subscribeToNotifyUser = useStream('notify-user');
+	const t = useTranslation();
+
+	useEffect(() => {
+		if (!userId) {
+			return;
+		}
+
+		const unSubscribeFromNotifyUser = subscribeToNotifyUser(`${userId}/subscriptions-changed`, (event, subscription) => {
+			if (event === 'removed' && subscription.rid === room._id) {
+				queryClient.invalidateQueries(['rooms', room._id]);
+				dispatchToastMessage({
+					type: 'info',
+					message: t('You_have_been_removed_from__roomName_', {
+						roomName: room?.fname || room?.name || '',
+					}),
+				});
+				homeRouter.push({});
+			}
+		});
+
+		return unSubscribeFromNotifyUser;
+	}, [userId, homeRouter, subscribeToNotifyUser, room._id, room?.fname, room?.name, t, dispatchToastMessage, queryClient]);
+}

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -5608,6 +5608,7 @@
   "You_followed_this_message": "You followed this message.",
   "You_have_a_new_message": "You have a new message",
   "You_have_been_muted": "You have been muted and cannot speak in this room",
+  "You_have_been_removed_from__roomName_": "You've been removed from the room {{roomName}}",
   "You_have_joined_a_new_call_with": "You have joined a new call with",
   "You_have_n_codes_remaining": "You have {{number}} codes remaining.",
   "You_have_not_verified_your_email": "You have not verified your email.",