Обновление форм с настройками серверов (#178)

- Модальное окно выбора загрузчика показывает текущий тип сервера (локальный или удалённый). - Модальные окна выбора серверов сбрасывают ввод пользователя, если тот не нажал на кнопку "Подключиться".
kruzhok-team · Jan 24, 2024 · c11240e · c11240e
1 parent 8d290a7
commit c11240e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 17 deletions.
diff --git a/src/renderer/src/components/Sidebar/Loader.tsx b/src/renderer/src/components/Sidebar/Loader.tsx
@@ -327,6 +327,7 @@ export const Loader: React.FC<FlasherProps> = ({ compilerData }) => {
 
       <FlasherSelectModal
         isOpen={isFlasherModalOpen}
+        isLocal={flasherIsLocal}
         handleLocal={handleLocalFlasher}
         handleRemote={handleRemoteFlasher}
         onClose={closeFlasherModal}

diff --git a/src/renderer/src/components/serverSelect/DocSelectModal.tsx b/src/renderer/src/components/serverSelect/DocSelectModal.tsx
@@ -1,8 +1,10 @@
 // TODO: нужно как-то объединить файлы FlasherSelectModal.tsx, ServerSelectModal.tsx, DocSelectModal.tsx, чтобы уменьшить повторения кода
+
 import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 
 import { Modal, TextInput } from '@renderer/components/UI';
+
 import { Settings } from '../Modules/Settings';
 
 interface DocSelectModalProps {
@@ -19,7 +21,7 @@ interface DocSelectModalProps {
 
 interface formValues {
   // текущее значение поля ввода для адреса
-  inputHost: string;
+  host: string;
 }
 
 export const DocSelectModal: React.FC<DocSelectModalProps> = ({
@@ -31,18 +33,20 @@ export const DocSelectModal: React.FC<DocSelectModalProps> = ({
     register,
     handleSubmit: hookHandleSubmit,
     setValue,
+    reset,
   } = useForm<formValues>({
     defaultValues: async () => {
       return Settings.get(props.electronSettingsKey).then((server) => {
         return {
-          inputHost: server.host ?? '',
+          host: server.host ?? '',
         };
       });
     },
   });
+
   // текущий адрес к которому подключен клиент
   const handleSubmit = hookHandleSubmit((data) => {
-    handleCustom(String(data.inputHost));
+    handleCustom(String(data.host));
     onRequestClose();
   });
 
@@ -51,7 +55,13 @@ export const DocSelectModal: React.FC<DocSelectModalProps> = ({
   };
 
   const handleReturnOriginalValues = () => {
-    setValue('inputHost', props.originaltHostValue);
+    setValue('host', props.originaltHostValue);
+  };
+
+  const resetSettings = () => {
+    Settings.get(props.electronSettingsKey).then((server) => {
+      reset({ host: server.host ?? '' });
+    });
   };
 
   return (
@@ -61,11 +71,12 @@ export const DocSelectModal: React.FC<DocSelectModalProps> = ({
       title={props.topTitle}
       submitLabel="Подключиться"
       onSubmit={handleSubmit}
+      onAfterClose={resetSettings}
     >
       <div className={twMerge('flex')}>
         <TextInput
           maxLength={80}
-          {...register('inputHost')}
+          {...register('host')}
           label="Адрес:"
           placeholder="Напишите адрес"
           isHidden={false}

diff --git a/src/renderer/src/components/serverSelect/FlasherSelectModal.tsx b/src/renderer/src/components/serverSelect/FlasherSelectModal.tsx
@@ -1,9 +1,8 @@
 import { Controller, useForm } from 'react-hook-form';
 
-import { Select } from '@renderer/components/UI';
+import { Select, Modal, TextInput } from '@renderer/components/UI';
 
 import { Settings } from '../Modules/Settings';
-import { Modal, TextInput } from '@renderer/components/UI';
 
 const SELECT_LOCAL = 'local';
 const SELECT_REMOTE = 'remote';
@@ -15,6 +14,7 @@ const options = [
 
 interface FlasherSelectModalProps {
   isOpen: boolean;
+  isLocal: boolean;
   onClose: () => void;
   handleLocal: () => void;
   handleRemote: (host: string, port: number) => void;
@@ -30,13 +30,15 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
   onClose,
   handleLocal,
   handleRemote,
+  isLocal,
   ...props
 }) => {
   const {
     register,
     control,
     handleSubmit: hookHandleSubmit,
     watch,
+    reset,
   } = useForm<formValues>({
     defaultValues: async () => {
       return Settings.getFlasherSettings().then((server) => {
@@ -48,7 +50,6 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
       });
     },
   });
-
   // октрыта ли опция выбора локального загрузчика
   const showSecondaryField = watch('flasherType') === SELECT_REMOTE;
 
@@ -65,13 +66,24 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
     onClose();
   };
 
+  const currentServer = () => {
+    return `Текущий тип сервера: ${isLocal ? 'локальный' : 'удалённый'}`;
+  };
+
+  const resetSettings = () => {
+    Settings.getFlasherSettings().then((server) => {
+      reset({ host: String(server.host), port: Number(server.port), flasherType: SELECT_REMOTE });
+    });
+  };
+
   return (
     <Modal
       {...props}
       onRequestClose={onRequestClose}
       title={'Выберите загрузчик'}
       submitLabel="Подключиться"
       onSubmit={handleSubmit}
+      onAfterClose={resetSettings}
     >
       <div className="flex items-center">
         <Controller
@@ -121,6 +133,7 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
           disabled={!showSecondaryField}
         />
       </div>
+      <div> {currentServer()}</div>
     </Modal>
   );
 };
diff --git a/src/renderer/src/components/serverSelect/ServerSelectModal.tsx b/src/renderer/src/components/serverSelect/ServerSelectModal.tsx
@@ -1,6 +1,7 @@
 import { useForm } from 'react-hook-form';
 
 import { Modal, TextInput } from '@renderer/components/UI';
+
 import { Settings } from '../Modules/Settings';
 
 interface ServerSelectModalProps {
@@ -21,9 +22,9 @@ interface ServerSelectModalProps {
 
 interface formValues {
   // текущее значение поля ввода для хоста
-  inputHost: string;
+  host: string;
   // текущее значение поля ввода для порта
-  inputPort: string;
+  port: string;
 }
 
 export const ServerSelectModal: React.FC<ServerSelectModalProps> = ({
@@ -35,19 +36,20 @@ export const ServerSelectModal: React.FC<ServerSelectModalProps> = ({
     handleSubmit: hookHandleSubmit,
     setValue,
     register,
+    reset,
   } = useForm<formValues>({
     defaultValues: async () => {
       return Settings.get(props.electronSettingsKey).then((server) => {
         return {
-          inputHost: server.host,
-          inputPort: server.port,
+          host: server.host,
+          port: server.port,
         };
       });
     },
   });
 
   const handleSubmit = hookHandleSubmit((data) => {
-    handleCustom(data.inputHost, Number(data.inputPort));
+    handleCustom(data.host, Number(data.port));
     onRequestClose();
   });
 
@@ -56,8 +58,14 @@ export const ServerSelectModal: React.FC<ServerSelectModalProps> = ({
   };
 
   const handleReturnOriginalValues = () => {
-    setValue('inputHost', props.originaltHostValue);
-    setValue('inputPort', props.originaltPortValue);
+    setValue('host', props.originaltHostValue);
+    setValue('port', props.originaltPortValue);
+  };
+
+  const reloadSettings = () => {
+    Settings.get(props.electronSettingsKey).then((server) => {
+      reset({ host: server.host, port: server.port });
+    });
   };
 
   return (
@@ -67,19 +75,20 @@ export const ServerSelectModal: React.FC<ServerSelectModalProps> = ({
       title={props.topTitle}
       submitLabel="Подключиться"
       onSubmit={handleSubmit}
+      onAfterClose={reloadSettings}
     >
       <div className={'flex'}>
         <TextInput
           maxLength={80}
-          {...register('inputHost')}
+          {...register('host')}
           label="Хост:"
           placeholder="Напишите адрес хоста"
           isHidden={false}
           error={false}
           errorMessage={''}
         />
         <TextInput
-          {...register('inputPort')}
+          {...register('port')}
           label="Порт:"
           placeholder="Напишите порт"
           isHidden={false}