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

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,11 @@
 // TODO: нужно как-то объединить файлы FlasherSelectModal.tsx, ServerSelectModal.tsx, DocSelectModal.tsx, чтобы уменьшить повторения кода
+import { useState } from 'react';
+
 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 +22,7 @@ interface DocSelectModalProps {
 
 interface formValues {
   // текущее значение поля ввода для адреса
-  inputHost: string;
+  host: string;
 }
 
 export const DocSelectModal: React.FC<DocSelectModalProps> = ({
@@ -31,18 +34,23 @@ 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 [lastHost, setLastHost] = useState<string | undefined>(undefined);
+
   // текущий адрес к которому подключен клиент
   const handleSubmit = hookHandleSubmit((data) => {
-    handleCustom(String(data.inputHost));
+    setLastHost(String(data.host));
+    handleCustom(String(data.host));
     onRequestClose();
   });
 
@@ -51,7 +59,15 @@ export const DocSelectModal: React.FC<DocSelectModalProps> = ({
   };
 
   const handleReturnOriginalValues = () => {
-    setValue('inputHost', props.originaltHostValue);
+    setValue('host', props.originaltHostValue);
+  };
+
+  const onAfterOpen = () => {
+    if (lastHost != undefined) {
+      reset({ host: lastHost });
+    } else {
+      reset();
+    }
   };
 
   return (
@@ -61,11 +77,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,10 @@
+import { useState } from 'react';
+
 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 +16,7 @@ const options = [
 
 interface FlasherSelectModalProps {
   isOpen: boolean;
+  isLocal: boolean;
   onClose: () => void;
   handleLocal: () => void;
   handleRemote: (host: string, port: number) => void;
@@ -30,13 +32,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,14 +52,19 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
       });
     },
   });
-
+  // последнии отправленные пользователем хост и порт
+  const [lastHost, setLastHost] = useState<string | undefined>(undefined);
+  const [lastPort, setLastPort] = useState<number | undefined>(undefined);
   // октрыта ли опция выбора локального загрузчика
   const showSecondaryField = watch('flasherType') === SELECT_REMOTE;
 
   const handleSubmit = hookHandleSubmit((data) => {
     if (data.flasherType == SELECT_LOCAL) {
       handleLocal();
     } else {
+      setLastHost(data.host);
+      setLastPort(data.port);
+      //console.log(lastHost, lastPort);
       handleRemote(data.host, data.port);
     }
     onRequestClose();
@@ -65,13 +74,26 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
     onClose();
   };
 
+  const currentServer = () => {
+    return `Текущий тип сервера: ${isLocal ? 'локальный' : 'удалённый'}`;
+  };
+
+  const onAfterOpen = () => {
+    if (lastHost != undefined && lastPort != undefined) {
+      reset({ host: lastHost, port: lastPort, flasherType: SELECT_REMOTE });
+    } else {
+      reset();
+    }
+  };
+
   return (
     <Modal
       {...props}
       onRequestClose={onRequestClose}
       title={'Выберите загрузчик'}
       submitLabel="Подключиться"
       onSubmit={handleSubmit}
+      onAfterOpen={onAfterOpen}
     >
       <div className="flex items-center">
         <Controller
@@ -121,6 +143,7 @@ export const FlasherSelectModal: React.FC<FlasherSelectModalProps> = ({
           disabled={!showSecondaryField}
         />
       </div>
+      <div> {currentServer()}</div>
     </Modal>
   );
 };

src/renderer/src/components/serverSelect/ServerSelectModal.tsx

@@ -1,6 +1,9 @@
+import { useState } from 'react';
+
 import { useForm } from 'react-hook-form';
 
 import { Modal, TextInput } from '@renderer/components/UI';
+
 import { Settings } from '../Modules/Settings';
 
 interface ServerSelectModalProps {
@@ -21,9 +24,9 @@ interface ServerSelectModalProps {
 
 interface formValues {
   // текущее значение поля ввода для хоста
-  inputHost: string;
+  host: string;
   // текущее значение поля ввода для порта
-  inputPort: string;
+  port: string;
 }
 
 export const ServerSelectModal: React.FC<ServerSelectModalProps> = ({
@@ -35,19 +38,26 @@ 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 [lastHost, setLastHost] = useState<string | undefined>(undefined);
+  const [lastPort, setLastPort] = useState<string | undefined>(undefined);
+
   const handleSubmit = hookHandleSubmit((data) => {
-    handleCustom(data.inputHost, Number(data.inputPort));
+    setLastHost(data.host);
+    setLastPort(data.port);
+    handleCustom(data.host, Number(data.port));
     onRequestClose();
   });
 
@@ -56,8 +66,16 @@ 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 = () => {
+    if (lastHost != undefined && lastPort != undefined) {
+      reset({ host: lastHost, port: lastPort });
+    } else {
+      reset();
+    }
   };
 
   return (
@@ -67,19 +85,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}