Fix useToolbarActionsLogic

RocketChat · Dec 7, 2023 · 68ac0c9 · 68ac0c9
1 parent c908033
commit 68ac0c9
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 58 deletions.
diff --git a/...client/views/room/composer/messageBox/MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx b/...client/views/room/composer/messageBox/MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx
@@ -41,11 +41,8 @@ const ActionsToolbarDropdown = ({ actions, isRecording, rid, tmid, ...props }: A
 			/>
 			{isVisible && (
 				<Dropdown reference={reference} ref={target} placement='bottom-start'>
-					{actions.map((option, index) => {
+					{actions.map((option) => {
 						if (typeof option === 'string') {
-							if (index + 1 === actions.length) {
-								return null;
-							}
 							return <OptionTitle key={option}>{t.has(option) ? t(option) : option}</OptionTitle>;
 						}
 

diff --git a/...ient/views/room/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx b/...ient/views/room/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx
@@ -1,6 +1,5 @@
 import type { IRoom, IMessage } from '@rocket.chat/core-typings';
 import { MessageComposerAction, MessageComposerActionsDivider } from '@rocket.chat/ui-composer';
-import { useLayoutHiddenActions } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
 import React, { memo } from 'react';
 
@@ -35,19 +34,10 @@ const MessageBoxActionsToolbarBuilder = ({
 		tmid,
 		variant,
 	});
-	const { composerToolbox: hiddenActions } = useLayoutHiddenActions();
 
-	const featured = data.featured.filter((action) => !hiddenActions.includes(action.id));
-	const menu = data.menu.filter((action) => {
-		if (typeof action === 'string') {
-			return action;
-		}
-		return !hiddenActions.includes(action.id);
-	});
-
-	const hasValidMenuItems = menu.some((item) => typeof item !== 'string');
+	const { featured, menu } = data;
 
-	if (!featured.length && !hasValidMenuItems) {
+	if (!featured.length && !menu.length) {
 		return null;
 	}
 
@@ -62,7 +52,7 @@ const MessageBoxActionsToolbarBuilder = ({
 					icon={action.icon as ComponentProps<typeof MessageComposerAction>['icon']}
 				/>
 			))}
-			{hasValidMenuItems && <ActionsToolbarDropdown actions={menu} isRecording={isRecording} rid={rid} tmid={tmid} />}
+			{menu.length > 0 && <ActionsToolbarDropdown actions={menu} isRecording={isRecording} rid={rid} tmid={tmid} />}
 		</>
 	);
 };

diff --git a/...client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useToolbarActions.ts b/...client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useToolbarActions.ts
@@ -1,4 +1,4 @@
-import { useUserRoom, useTranslation } from '@rocket.chat/ui-contexts';
+import { useUserRoom, useTranslation, useLayoutHiddenActions } from '@rocket.chat/ui-contexts';
 
 import { messageBox } from '../../../../../../../app/ui-utils/client';
 import { isTruthy } from '../../../../../../../lib/isTruthy';
@@ -21,6 +21,13 @@ type ToolbarActionsOptions = {
 	tmid?: string;
 };
 
+const isHidden = (hiddenActions: Array<string>, action: ToolbarAction) => {
+	if (!action) {
+		return true;
+	}
+	return hiddenActions.includes(action.id);
+};
+
 export const useToolbarActions = ({ canSend, typing, isRecording, isMicrophoneDenied, rid, tmid, variant }: ToolbarActionsOptions) => {
 	const room = useUserRoom(rid);
 	const t = useTranslation();
@@ -33,21 +40,34 @@ export const useToolbarActions = ({ canSend, typing, isRecording, isMicrophoneDe
 	const shareLocationAction = useShareLocationAction(room, tmid);
 
 	const apps = useMessageboxAppsActionButtons();
+	const { composerToolbox: hiddenActions } = useLayoutHiddenActions();
 
-	const data = (() => {
-		const actions: { featured: Array<ToolbarAction>; menu: Array<ToolbarAction | string> } = {
-			featured: [],
-			menu: ['Create_new', createDiscussionAction],
-		};
+	const allActions = {
+		...(!isHidden(hiddenActions, videoMessageAction) && { videoMessageAction }),
+		...(!isHidden(hiddenActions, audioMessageAction) && { audioMessageAction }),
+		...(!isHidden(hiddenActions, fileUploadAction) && { fileUploadAction }),
+		...(!isHidden(hiddenActions, createDiscussionAction) && { createDiscussionAction }),
+		...(!isHidden(hiddenActions, shareLocationAction) && { shareLocationAction }),
+		...(!hiddenActions.includes('webdav-add') && { webdavActions }),
+	};
+
+	const data: { featured: ToolbarAction[]; menu: Array<string | ToolbarAction> } = (() => {
+		const featured: Array<ToolbarAction | undefined> = [];
+		const createNew = [];
+		const share = [];
 
 		if (variant === 'small') {
-			actions.featured.push(audioMessageAction);
-			actions.menu.push(videoMessageAction, fileUploadAction);
+			featured.push(allActions.audioMessageAction);
+			createNew.push(allActions.videoMessageAction, allActions.fileUploadAction);
 		} else {
-			actions.featured.push(videoMessageAction, audioMessageAction, fileUploadAction);
+			featured.push(allActions.videoMessageAction, allActions.audioMessageAction, allActions.fileUploadAction);
 		}
 
-		actions.menu.push(...webdavActions, 'Share', shareLocationAction);
+		if (allActions.webdavActions) {
+			createNew.push(...allActions.webdavActions);
+		}
+
+		share.push(allActions.shareLocationAction);
 
 		const groups = {
 			...(apps.isSuccess &&
@@ -57,21 +77,33 @@ export const useToolbarActions = ({ canSend, typing, isRecording, isMicrophoneDe
 			...messageBox.actions.get(),
 		};
 
-		const messageBoxActions = Object.entries(groups)
-			.flatMap(([name, group]) => {
-				const items = group.map((item) => ({
+		const messageBoxActions = Object.entries(groups).reduce<Array<string | ToolbarAction>>((acc, [name, group]) => {
+			const items = group
+				.filter((item) => !hiddenActions.includes(item.id))
+				.map((item) => ({
 					id: item.id,
 					icon: item.icon || '',
 					label: t(item.label),
 					onClick: item.action,
 				}));
 
-				return [t.has(name) && t(name), ...items];
-			})
-			.filter(isTruthy);
+			if (items.length === 0) {
+				return acc;
+			}
+			return [...acc, (t.has(name) && t(name)) || name, ...items];
+		}, []);
 
-		actions.menu.push(...messageBoxActions);
-		return actions;
+		const createNewFiltered = createNew.filter(isTruthy);
+		const shareFiltered = share.filter(isTruthy);
+
+		return {
+			featured: featured.filter(isTruthy),
+			menu: [
+				...(createNewFiltered.length > 0 ? ['Create_new', ...createNewFiltered] : []),
+				...(shareFiltered.length > 0 ? ['Share', ...shareFiltered] : []),
+				...messageBoxActions,
+			],
+		};
 	})();
 
 	return data;

diff --git a/...nt/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useVideoMessageAction.ts b/...nt/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useVideoMessageAction.ts
@@ -1,11 +1,8 @@
-// import { Option, OptionIcon, OptionContent } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-// import { MessageComposerAction } from '@rocket.chat/ui-composer';
 import { useTranslation, useSetting } from '@rocket.chat/ui-contexts';
 import { useEffect, useMemo } from 'react';
 
 import { VideoRecorder } from '../../../../../../../app/ui/client/lib/recorderjs/videoRecorder';
-// import type { ChatAPI } from '../../../../../../lib/chats/ChatAPI';
 import { useChat } from '../../../../contexts/ChatContext';
 import { useMediaActionTitle } from '../../hooks/useMediaActionTitle';
 import { useMediaPermissions } from '../../hooks/useMediaPermissions';
@@ -64,24 +61,4 @@ export const useVideoMessageAction = (disabled: boolean): ToolbarAction => {
 		icon: 'video',
 		label: t('Video_message'),
 	};
-
-	// if (collapsed) {
-	// 	return (
-	// 		<Option title={getMediaActionTitle} disabled={!isAllowed || disabled} onClick={handleOpenVideoMessage}>
-	// 			<OptionIcon name='video' />
-	// 			<OptionContent>{t('Video_message')}</OptionContent>
-	// 		</Option>
-	// 	);
-	// }
-
-	// return (
-	// 	<MessageComposerAction
-	// 		data-qa-id='video-message'
-	// 		icon='video'
-	// 		disabled={!isAllowed || disabled}
-	// 		onClick={handleOpenVideoMessage}
-	// 		title={getMediaActionTitle}
-	// 		{...props}
-	// 	/>
-	// );
 };