Chore: AutoTranslate contextualBar rewrite (#25751)

RocketChat · Jun 4, 2022 · 55cfc84 · 55cfc84
1 parent 68595d0
commit 55cfc84
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 29 deletions.
diff --git a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx
@@ -1,20 +1,27 @@
 import { FieldGroup, Field, ToggleSwitch, Select } from '@rocket.chat/fuselage';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement, ChangeEvent } from 'react';
 
 import VerticalBar from '../../../../components/VerticalBar';
 
 type AutoTranslateProps = {
 	language: string;
 	languages: SelectOption[];
-	handleSwitch: (event?: any) => void;
+	handleSwitch: (e: ChangeEvent<HTMLInputElement>) => void;
 	translateEnable: boolean | undefined;
 	handleChangeLanguage: (value: string) => void;
 	handleClose?: () => void;
 };
 
-const AutoTranslate = ({ language, languages, handleSwitch, translateEnable, handleChangeLanguage, handleClose }: AutoTranslateProps) => {
+const AutoTranslate = ({
+	language,
+	languages,
+	handleSwitch,
+	translateEnable,
+	handleChangeLanguage,
+	handleClose,
+}: AutoTranslateProps): ReactElement => {
 	const t = useTranslation();
 
 	return (
@@ -24,17 +31,20 @@ const AutoTranslate = ({ language, languages, handleSwitch, translateEnable, han
 				<VerticalBar.Text>{t('Auto_Translate')}</VerticalBar.Text>
 				{handleClose && <VerticalBar.Close onClick={handleClose} />}
 			</VerticalBar.Header>
-			<VerticalBar.Content>
+			<VerticalBar.Content pbs='x24'>
 				<FieldGroup>
-					<Field.Label htmlFor='automatic-translation'>{t('Automatic_Translation')}</Field.Label>
-					<Field.Row>
-						<ToggleSwitch id='automatic-translation' onChange={handleSwitch} defaultChecked={translateEnable} />
-					</Field.Row>
-
-					<Field.Label htmlFor='language'>{t('Language')}</Field.Label>
-					<Field.Row verticalAlign='middle'>
-						<Select id='language' value={language} disabled={!translateEnable} onChange={handleChangeLanguage} options={languages} />
-					</Field.Row>
+					<Field>
+						<Field.Row>
+							<ToggleSwitch id='automatic-translation' onChange={handleSwitch} defaultChecked={translateEnable} />
+							<Field.Label htmlFor='automatic-translation'>{t('Automatic_Translation')}</Field.Label>
+						</Field.Row>
+					</Field>
+					<Field>
+						<Field.Label htmlFor='language'>{t('Language')}</Field.Label>
+						<Field.Row verticalAlign='middle'>
+							<Select id='language' value={language} disabled={!translateEnable} onChange={handleChangeLanguage} options={languages} />
+						</Field.Row>
+					</Field>
 				</FieldGroup>
 			</VerticalBar.Content>
 		</>

diff --git a/...ar/AutoTranslate/AutoTranslateWithData.js → ...r/AutoTranslate/AutoTranslateWithData.tsx b/...ar/AutoTranslate/AutoTranslateWithData.js → ...r/AutoTranslate/AutoTranslateWithData.tsx
@@ -1,26 +1,25 @@
+import { IRoom } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useUserSubscription, useLanguage } from '@rocket.chat/ui-contexts';
-import React, { useMemo, useEffect, useState, memo } from 'react';
+import React, { useMemo, useEffect, useState, memo, ReactElement } from 'react';
 
 import { useEndpointActionExperimental } from '../../../../hooks/useEndpointActionExperimental';
 import { useEndpointData } from '../../../../hooks/useEndpointData';
 import { useTabBarClose } from '../../providers/ToolboxProvider';
 import AutoTranslate from './AutoTranslate';
 
-const AutoTranslateWithData = ({ rid }) => {
-	const close = useTabBarClose();
+const AutoTranslateWithData = ({ rid }: { rid: IRoom['_id'] }): ReactElement => {
+	const handleClose = useTabBarClose();
 	const userLanguage = useLanguage();
 	const subscription = useUserSubscription(rid);
+	const [currentLanguage, setCurrentLanguage] = useState(subscription?.autoTranslateLanguage ?? '');
+	const saveSettings = useEndpointActionExperimental('POST', 'autotranslate.saveSettings');
 
-	const { value: data } = useEndpointData(
+	const { value: translateData } = useEndpointData(
 		'autotranslate.getSupportedLanguages',
 		useMemo(() => ({ targetLanguage: userLanguage }), [userLanguage]),
 	);
 
-	const [currentLanguage, setCurrentLanguage] = useState(subscription.autoTranslateLanguage);
-
-	const saveSettings = useEndpointActionExperimental('POST', 'autotranslate.saveSettings');
-
 	const handleChangeLanguage = useMutableCallback((value) => {
 		setCurrentLanguage(value);
 
@@ -40,23 +39,23 @@ const AutoTranslateWithData = ({ rid }) => {
 	});
 
 	useEffect(() => {
-		if (!subscription.autoTranslate) {
+		if (!subscription?.autoTranslate) {
 			return;
 		}
 
-		if (!subscription.autoTranslateLanguage) {
+		if (!subscription?.autoTranslateLanguage) {
 			handleChangeLanguage(userLanguage);
 		}
-	}, [subscription.autoTranslate, subscription.autoTranslateLanguage, handleChangeLanguage, userLanguage]);
+	}, [subscription?.autoTranslate, subscription?.autoTranslateLanguage, handleChangeLanguage, userLanguage]);
 
 	return (
 		<AutoTranslate
 			language={currentLanguage}
-			languages={data ? data.languages.map((value) => [value.language, value.name]) : []}
+			languages={translateData ? translateData.languages.map((language) => [language.language, language.name]) : []}
 			handleSwitch={handleSwitch}
 			handleChangeLanguage={handleChangeLanguage}
-			translateEnable={!!subscription.autoTranslate}
-			handleClose={close}
+			translateEnable={!!subscription?.autoTranslate}
+			handleClose={handleClose}
 		/>
 	);
 };

diff --git a/packages/core-typings/src/ISubscription.ts b/packages/core-typings/src/ISubscription.ts
@@ -53,7 +53,7 @@ export interface ISubscription extends IRocketChatRecord {
 	blocked?: unknown;
 	blocker?: unknown;
 	autoTranslate?: unknown;
-	autoTranslateLanguage?: unknown;
+	autoTranslateLanguage?: string;
 	disableNotifications?: unknown;
 	muteGroupMentions?: unknown;
 	ignored?: unknown;

diff --git a/packages/rest-typings/src/index.ts b/packages/rest-typings/src/index.ts
@@ -2,6 +2,7 @@
 import type { KeyOfEach } from '@rocket.chat/core-typings';
 
 import type { AppsEndpoints } from './apps';
+import type { AutoTranslateEndpoints } from './v1/autoTranslate';
 import type { ReplacePlaceholders } from './helpers/ReplacePlaceholders';
 import type { BannersEndpoints } from './v1/banners';
 import type { ChannelsEndpoints } from './v1/channels';
@@ -72,7 +73,7 @@ export interface Endpoints
 		EmailInboxEndpoints,
 		WebdavEndpoints,
 		OAuthAppsEndpoint,
-		AppsEndpoints {}
+		AutoTranslateEndpoints {}
 
 type OperationsByPathPattern<TPathPattern extends keyof Endpoints> = TPathPattern extends any
 	? OperationsByPathPatternAndMethod<TPathPattern>

diff --git a/packages/rest-typings/src/v1/autoTranslate.ts b/packages/rest-typings/src/v1/autoTranslate.ts
@@ -0,0 +1,13 @@
+import type { ISupportedLanguage } from '@rocket.chat/core-typings';
+
+export type AutoTranslateEndpoints = {
+	'autotranslate.getSupportedLanguages': {
+		GET: (params: { targetLanguage: string }) => { languages: ISupportedLanguage[] };
+	};
+	'autotranslate.saveSettings': {
+		POST: (params: { roomId: string; field: string; value: boolean; defaultLanguage?: string }) => void;
+	};
+	'autotranslate.translateMessage': {
+		POST: (params: { messageId: string; targetLanguage?: string }) => void;
+	};
+};