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

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}

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,30 +21,19 @@ interface DocSelectModalProps {
 
 interface formValues {
   // текущее значение поля ввода для адреса
-  inputHost: string;
+  host: string;
 }
 
 export const DocSelectModal: React.FC<DocSelectModalProps> = ({
   onClose,
   handleCustom: handleCustom,
   ...props
 }) => {
-  const {
-    register,
-    handleSubmit: hookHandleSubmit,
-    setValue,
-  } = useForm<formValues>({
-    defaultValues: async () => {
-      return Settings.get(props.electronSettingsKey).then((server) => {
-        return {
-          inputHost: server.host ?? '',
-        };
-      });
-    },
-  });
+  const { register, handleSubmit: hookHandleSubmit, setValue, reset } = useForm<formValues>({});
+
   // текущий адрес к которому подключен клиент
   const handleSubmit = hookHandleSubmit((data) => {
-    handleCustom(String(data.inputHost));
+    handleCustom(String(data.host));
     onRequestClose();
   });
 
@@ -51,7 +42,13 @@ export const DocSelectModal: React.FC<DocSelectModalProps> = ({
   };
 
   const handleReturnOriginalValues = () => {
-    setValue('inputHost', props.originaltHostValue);
+    setValue('host', props.originaltHostValue);
+  };
+
+  const onAfterOpen = () => {
+    Settings.get(props.electronSettingsKey).then((server) => {
+      reset({ host: server.host ?? '' });
+    });
   };
 
   return (
@@ -61,11 +58,12 @@ export const DocSelectModal: React.FC<DocSelectModalProps> = ({
       title={props.topTitle}
       submitLabel="Подключиться"
       onSubmit={handleSubmit}
+      onAfterOpen={onAfterOpen}
     >
       <div className={twMerge('flex')}>
         <TextInput
           maxLength={80}
-          {...register('inputHost')}
+          {...register('host')}
           label="Адрес:"
           placeholder="Напишите адрес"
           isHidden={false}

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,25 +30,16 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
   onClose,
   handleLocal,
   handleRemote,
+  isLocal,
   ...props
 }) => {
   const {
     register,
     control,
     handleSubmit: hookHandleSubmit,
     watch,
-  } = useForm<formValues>({
-    defaultValues: async () => {
-      return Settings.getFlasherSettings().then((server) => {
-        return {
-          host: String(server.host),
-          port: Number(server.port),
-          flasherType: SELECT_REMOTE,
-        };
-      });
-    },
-  });
-
+    reset,
+  } = useForm<formValues>({});
   // октрыта ли опция выбора локального загрузчика
   const showSecondaryField = watch('flasherType') === SELECT_REMOTE;
 
@@ -65,13 +56,24 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
     onClose();
   };
 
+  const currentServer = () => {
+    return `Текущий тип сервера: ${isLocal ? 'локальный' : 'удалённый'}`;
+  };
+
+  const onAfterOpen = () => {
+    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}
+      onAfterOpen={onAfterOpen}
     >
       <div className="flex items-center">
         <Controller
@@ -121,6 +123,7 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
           disabled={!showSecondaryField}
         />
       </div>
+      <div> {currentServer()}</div>
     </Modal>
   );
 };

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,33 +22,20 @@ interface ServerSelectModalProps {
 
 interface formValues {
   // текущее значение поля ввода для хоста
-  inputHost: string;
+  host: string;
   // текущее значение поля ввода для порта
-  inputPort: string;
+  port: string;
 }
 
 export const ServerSelectModal: React.FC<ServerSelectModalProps> = ({
   onClose,
   handleCustom: handleCustom,
   ...props
 }) => {
-  const {
-    handleSubmit: hookHandleSubmit,
-    setValue,
-    register,
-  } = useForm<formValues>({
-    defaultValues: async () => {
-      return Settings.get(props.electronSettingsKey).then((server) => {
-        return {
-          inputHost: server.host,
-          inputPort: server.port,
-        };
-      });
-    },
-  });
+  const { handleSubmit: hookHandleSubmit, setValue, register, reset } = useForm<formValues>({});
 
   const handleSubmit = hookHandleSubmit((data) => {
-    handleCustom(data.inputHost, Number(data.inputPort));
+    handleCustom(data.host, Number(data.port));
     onRequestClose();
   });
 
@@ -56,8 +44,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 onAfterOpen = () => {
+    Settings.get(props.electronSettingsKey).then((server) => {
+      reset({ host: server.host, port: server.port });
+    });
   };
 
   return (
@@ -67,19 +61,20 @@ export const ServerSelectModal: React.FC<ServerSelectModalProps> = ({
       title={props.topTitle}
       submitLabel="Подключиться"
       onSubmit={handleSubmit}
+      onAfterOpen={onAfterOpen}
     >
       <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}