Regression: Fix reactivity on teamsMembers and roomMembers

client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.js

@@ -46,6 +46,7 @@ export const AddUsers = ({
 export default ({
 	rid,
 	onClickBack,
+	reload,
 }) => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -79,6 +80,7 @@ export default ({
 			await saveAction({ rid, users });
 			dispatchToastMessage({ type: 'success', message: t('Users_added') });
 			onClickBack();
+			reload();
 		} catch (e) {
 			dispatchToastMessage({ type: 'error', message: e });
 		}

client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.js

@@ -23,14 +23,14 @@ export const InviteUsers = ({
 	const { copy } = useClipboardWithToast(linkText);
 
 	return (
-		<Box position='absolute' h='full' w='full'>
+		<>
 			<VerticalBar.Header>
 				{onClickBack && <VerticalBar.Back onClick={onClickBack} />}
 				<VerticalBar.Text>{t('Invite_Users')}</VerticalBar.Text>
 				{onClickClose && <VerticalBar.Close onClick={onClickClose} />}
 			</VerticalBar.Header>
 
-			<VerticalBar.Content>
+			<VerticalBar.ScrollableContent>
 				<Field>
 					<Field.Label flexGrow={0}>{t('Invite_Link')}</Field.Label>
 					<Field.Row>
@@ -45,8 +45,8 @@ export const InviteUsers = ({
 				<Box pb='x16'>
 					{onClickEdit && <Button onClick={onClickEdit}>{t('Edit_Invite')}</Button>}
 				</Box>
-			</VerticalBar.Content>
-		</Box>
+			</VerticalBar.ScrollableContent>
+		</>
 	);
 };
 

client/views/room/contextualBar/RoomMembers/List/RoomMembers.js

@@ -38,7 +38,7 @@ export const createItemData = memoize((onClickView, rid) => ({
 	rid,
 }));
 
-const DefaultRow = React.memo(({ user, data, index }) => {
+const DefaultRow = React.memo(({ user, data, index, reload }) => {
 	const { onClickView, rid } = data;
 
 	if (!user) {
@@ -53,6 +53,7 @@ const DefaultRow = React.memo(({ user, data, index }) => {
 		status={user.status}
 		name={user.name}
 		onClickView={onClickView}
+		reload={reload}
 	/>;
 });
 
@@ -72,6 +73,7 @@ export const RoomMembers = ({
 	loadMoreItems,
 	renderRow: Row = DefaultRow,
 	rid,
+	reload,
 }) => {
 	const t = useTranslation();
 	const inputRef = useAutoFocus(true);
@@ -107,15 +109,16 @@ export const RoomMembers = ({
 					</Box>
 				</Box>
 
-				{ error && <Box pi='x24' pb='x12'><Callout type='danger'>
-					{error}
-				</Callout></Box> }
-
 				{loading && <Box pi='x24' pb='x12'><Throbber size='x12' /></Box>}
+
+				{error && <Box pi='x24' pb='x12'><Callout type='danger'>
+					{error.message}
+				</Callout></Box>}
+
 				{!loading && members.length <= 0 && <Box pi='x24' pb='x12'>{t('No_results_found')}</Box>}
 
 				{!loading && members.length > 0 && (
-					<Box pi='x24' pb='x12'>
+					<Box pi='x18' pb='x12'>
 						<Box is='span' color='info' fontScale='p1'>
 							{t('Showing')}: <Box is='span' color='default' fontScale='p2'>{members.length}</Box>
 						</Box>
@@ -145,6 +148,7 @@ export const RoomMembers = ({
 							data={itemData}
 							user={data}
 							index={index}
+							reload={reload}
 						/>}
 					/>}
 				</Box>
@@ -179,10 +183,10 @@ export default ({
 	const [type, setType] = useLocalStorage('members-list-type', 'online');
 	const [text, setText] = useState('');
 
-	const debouncedText = useDebouncedValue(text, 500);
+	const debouncedText = useDebouncedValue(text, 700);
 	const params = useMemo(() => [rid, type === 'all', { limit: 50 }, debouncedText], [rid, type, debouncedText]);
 
-	const { value, phase, more, error } = useGetUsersOfRoom(params);
+	const { value, phase, more, error, reload } = useGetUsersOfRoom(params);
 
 	const canAddUsers = useAtLeastOnePermission(useMemo(() => [room.t === 'p' ? 'add-user-to-any-p-room' : 'add-user-to-any-c-room', 'add-user-to-joined-room'], [room.t]), rid);
 
@@ -223,7 +227,7 @@ export default ({
 	}
 
 	if (state.tab === 'AddUsers') {
-		return <AddUsers onClickClose={onClickClose} rid={rid} onClickBack={handleBack} />;
+		return <AddUsers onClickClose={onClickClose} rid={rid} onClickBack={handleBack} reload={reload} />;
 	}
 
 	return (
@@ -242,6 +246,7 @@ export default ({
 			onClickAdd={canAddUsers && addUser}
 			onClickInvite={canAddUsers && createInvite}
 			loadMoreItems={loadMoreItems}
+			reload={reload}
 		/>
 	);
 };

client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js

@@ -13,8 +13,8 @@ import UserAvatar from '../../../../../../components/avatar/UserAvatar';
 import { ReactiveUserStatus } from '../../../../../../components/UserStatus';
 import { usePreventProgation } from '../../../../../../hooks/usePreventProgation';
 
-const UserActions = ({ username, _id, rid }) => {
-	const { menu: menuOptions } = useActionSpread(useUserInfoActions({ _id, username }, rid), 0);
+const UserActions = ({ username, _id, rid, reload }) => {
+	const { menu: menuOptions } = useActionSpread(useUserInfoActions({ _id, username }, rid, reload), 0);
 	if (!menuOptions) {
 		return null;
 	}
@@ -27,7 +27,16 @@ const UserActions = ({ username, _id, rid }) => {
 	/>;
 };
 
-export const MemberItem = ({ _id, status, name, username, onClickView, style, rid }) => {
+export const MemberItem = ({
+	_id,
+	status,
+	name,
+	username,
+	onClickView,
+	style,
+	rid,
+	reload,
+}) => {
 	const [showButton, setShowButton] = useState();
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -50,7 +59,7 @@ export const MemberItem = ({ _id, status, name, username, onClickView, style, ri
 			<Option.Column><ReactiveUserStatus uid={_id} presence={status}/></Option.Column>
 			<Option.Content>{name} <Option.Description>({username})</Option.Description></Option.Content>
 			<Option.Menu onClick={onClick}>
-				{showButton ? <UserActions username={username} rid={rid} _id={_id} /> : <ActionButton
+				{showButton ? <UserActions username={username} rid={rid} _id={_id} reload={reload} /> : <ActionButton
 					ghost
 					tiny
 					icon='kebab'

client/views/room/hooks/useUserInfoActions.js

@@ -77,7 +77,7 @@ const WarningModal = ({ text, confirmText, close, confirm, ...props }) => {
 	</Modal>;
 };
 
-export const useUserInfoActions = (user = {}, rid) => {
+export const useUserInfoActions = (user = {}, rid, reload) => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const directRoute = useRoute('direct');
@@ -299,9 +299,10 @@ export const useUserInfoActions = (user = {}, rid) => {
 				userId={user?._id}
 				onClose={closeModal}
 				onCancel={closeModal}
-				onConfirm={(rooms) => {
-					removeFromTeam({ teamId: room.teamId, members: [{ userId: user._id }], rooms });
+				onConfirm={async (rooms) => {
+					await removeFromTeam({ teamId: room.teamId, members: [{ userId: user._id }], rooms });
 					closeModal();
+					reload && reload();
 				}}
 			/>);
 		}
@@ -310,9 +311,14 @@ export const useUserInfoActions = (user = {}, rid) => {
 			text={t('The_user_will_be_removed_from_s', roomName)}
 			close={closeModal}
 			confirmText={t('Yes_remove_user')}
-			confirm={() => { removeUserAction({ roomId: rid, userId: uid }); closeModal(); }}
+			confirm={async () => {
+				await removeUserAction({ roomId: rid, userId: uid });
+				closeModal();
+				reload && reload();
+			}}
 		/>);
 	});
+
 	const removeUserOption = useMemo(() => roomCanRemove && userCanRemove && {
 		label: <Box color='danger'>{room.teamMain ? t('Remove_from_team') : t('Remove_from_room')}</Box>,
 		icon: 'sign-out',

client/views/teams/members/TeamsMembers.js

@@ -37,7 +37,7 @@ const TeamMembers = ({
 	const debouncedText = useDebouncedValue(text, 500);
 	const params = useMemo(() => [rid, type === 'all', { limit: 50 }, debouncedText], [rid, type, debouncedText]);
 
-	const { value, phase, more, error } = useGetUsersOfRoom(params);
+	const { value, phase, more, error, reload } = useGetUsersOfRoom(params);
 
 	const canAddUsers = useAtLeastOnePermission(useMemo(() => [room.t === 'p' ? 'add-user-to-any-p-room' : 'add-user-to-any-c-room', 'add-user-to-joined-room'], [room.t]), rid);
 
@@ -78,7 +78,7 @@ const TeamMembers = ({
 	}
 
 	if (state.tab === 'AddUsers') {
-		return <AddUsers onClickClose={onClickClose} rid={rid} onClickBack={handleBack} />;
+		return <AddUsers onClickClose={onClickClose} rid={rid} onClickBack={handleBack} reload={reload} />;
 	}
 
 	return (
@@ -97,6 +97,7 @@ const TeamMembers = ({
 			onClickAdd={canAddUsers && addUser}
 			onClickInvite={canAddUsers && createInvite}
 			loadMoreItems={loadMoreItems}
+			reload={reload}
 		/>
 	);
 };