refactor: Replace useForm in favor of RHF on AppInstallPage (#30634)

RocketChat · Oct 26, 2023 · eb73bc5 · eb73bc5
1 parent 9f9d38a
commit eb73bc5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 33 deletions.
diff --git a/apps/meteor/client/views/marketplace/AppInstallPage.js b/apps/meteor/client/views/marketplace/AppInstallPage.js
@@ -1,4 +1,5 @@
-import { Button, ButtonGroup, Icon, Field, FieldGroup, TextInput, Throbber } from '@rocket.chat/fuselage';
+import { Button, ButtonGroup, Icon, Field, FieldGroup, FieldLabel, FieldRow, TextInput } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import {
 	useSetModal,
 	useEndpoint,
@@ -8,13 +9,13 @@ import {
 	useRouter,
 	useSearchParameter,
 } from '@rocket.chat/ui-contexts';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
 
 import { AppClientOrchestratorInstance } from '../../../ee/client/apps/orchestrator';
 import Page from '../../components/Page';
 import { useAppsReload } from '../../contexts/hooks/useAppsReload';
 import { useFileInput } from '../../hooks/useFileInput';
-import { useForm } from '../../hooks/useForm';
 import AppPermissionsReviewModal from './AppPermissionsReviewModal';
 import AppUpdateModal from './AppUpdateModal';
 import AppInstallModal from './components/AppInstallModal/AppInstallModal';
@@ -48,22 +49,12 @@ function AppInstallPage() {
 
 	const appCountQuery = useAppsCountQuery('private');
 
-	const { values, handlers } = useForm({
-		file: {},
-		url: queryUrl,
-	});
+	const { control, setValue, watch } = useForm({ defaultValues: { url: queryUrl || '' } });
+	const { file, url } = watch();
 
-	const { file, url } = values;
+	const canSave = !!url || !!file?.name;
 
-	const canSave = !!url || !!file.name;
-
-	const { handleFile, handleUrl } = handlers;
-
-	useEffect(() => {
-		queryUrl && handleUrl(queryUrl);
-	}, [queryUrl, handleUrl]);
-
-	const [handleUploadButtonClick] = useFileInput(handleFile, 'app');
+	const [handleUploadButtonClick] = useFileInput((value) => setValue('file', value), 'app');
 
 	const sendFile = async (permissionsGranted, appFile, appId) => {
 		let app;
@@ -200,35 +191,52 @@ function AppInstallPage() {
 		});
 	};
 
+	const urlField = useUniqueId();
+	const fileField = useUniqueId();
+
 	return (
 		<Page flexDirection='column'>
 			<Page.Header title={t('App_Installation')} />
 			<Page.ScrollableContent>
 				<FieldGroup display='flex' flexDirection='column' alignSelf='center' maxWidth='x600' w='full'>
 					<Field>
-						<Field.Label>{t('App_Url_to_Install_From')}</Field.Label>
-						<Field.Row>
-							<TextInput placeholder={placeholderUrl} value={url} onChange={handleUrl} addon={<Icon name='permalink' size='x20' />} />
-						</Field.Row>
+						<FieldLabel htmlFor={urlField}>{t('App_Url_to_Install_From')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='url'
+								control={control}
+								render={({ field }) => (
+									<TextInput id={urlField} placeholder={placeholderUrl} addon={<Icon name='permalink' size='x20' />} {...field} />
+								)}
+							/>
+						</FieldRow>
 					</Field>
 					<Field>
-						<Field.Label>{t('App_Url_to_Install_From_File')}</Field.Label>
-						<Field.Row>
-							<TextInput
-								value={file.name || ''}
-								addon={
-									<Button icon='upload' small primary onClick={handleUploadButtonClick} mb='neg-x4' mie='neg-x8'>
-										{t('Browse_Files')}
-									</Button>
-								}
+						<FieldLabel htmlFor={fileField}>{t('App_Url_to_Install_From_File')}</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='file'
+								control={control}
+								render={({ field }) => (
+									<TextInput
+										id={fileField}
+										readOnly
+										{...field}
+										value={field.value?.name || ''}
+										addon={
+											<Button icon='upload' small primary onClick={handleUploadButtonClick} mb='neg-x4' mie='neg-x8'>
+												{t('Browse_Files')}
+											</Button>
+										}
+									/>
+								)}
 							/>
-						</Field.Row>
+						</FieldRow>
 					</Field>
 					<Field>
 						<ButtonGroup>
 							<Button disabled={!canSave || installing} onClick={install}>
-								{!installing && t('Install')}
-								{installing && <Throbber inheritColor />}
+								{installing ? t('Installing') : t('Install')}
 							</Button>
 							<Button onClick={handleCancel}>{t('Cancel')}</Button>
 						</ButtonGroup>

diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -2611,6 +2611,7 @@
   "Install_FxOs_done": "Great! You can now use Rocket.Chat via the icon on your homescreen. Have fun with Rocket.Chat!",
   "Install_FxOs_error": "Sorry, that did not work as intended! The following error appeared:",
   "Install_FxOs_follow_instructions": "Please confirm the app installation on your device (press \"Install\" when prompted).",
+  "Installing": "Installing",
   "Install_package": "Install package",
   "Installation": "Installation",
   "Installed": "Installed",