feat(Core): Add connection type for Gates, add new Update logic

fixes #73

assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/SignatureSettings.tsx

@@ -1,6 +1,5 @@
 import { Dialog } from 'primereact/dialog';
 import { useCallback, useEffect } from 'react';
-// import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { OutCommand, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import {
@@ -25,102 +24,106 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
   const { outCommand } = useMapRootState();
 
   const handleShow = async () => {};
-  const form = useForm<Partial<SystemSignaturePrepared>>({});
+  const signatureForm = useForm<Partial<SystemSignaturePrepared>>({});
 
-  const handleSave = useCallback(async () => {
-    if (!signatureData) {
-      return;
-    }
+  const handleSave = useCallback(
+    async (e: any) => {
+      e?.preventDefault();
+      if (!signatureData) {
+        return;
+      }
 
-    const { group, ...values } = form.getValues();
-    let out = { ...signatureData };
+      const { group, ...values } = signatureForm.getValues();
+      let out = { ...signatureData };
 
-    switch (group) {
-      case SignatureGroup.Wormhole:
-        if (values.linked_system) {
-          await outCommand({
-            type: OutCommand.linkSignatureToSystem,
-            data: {
-              signature_eve_id: signatureData.eve_id,
-              solar_system_source: systemId,
-              solar_system_target: values.linked_system,
-            },
-          });
-        }
+      switch (group) {
+        case SignatureGroup.Wormhole:
+          if (values.linked_system) {
+            await outCommand({
+              type: OutCommand.linkSignatureToSystem,
+              data: {
+                signature_eve_id: signatureData.eve_id,
+                solar_system_source: systemId,
+                solar_system_target: values.linked_system,
+              },
+            });
+          }
 
-        if (values.type != null) {
-          out = { ...out, type: values.type };
-        }
+          if (values.type != null) {
+            out = { ...out, type: values.type };
+          }
 
-        if (signatureData.group !== SignatureGroup.Wormhole) {
-          out = { ...out, name: '' };
-        }
+          if (signatureData.group !== SignatureGroup.Wormhole) {
+            out = { ...out, name: '' };
+          }
 
-        break;
-      case SignatureGroup.CosmicSignature:
-        out = { ...out, type: '', name: '' };
-        break;
-      default:
-        if (values.name != null) {
-          out = { ...out, name: values.name ?? '' };
-        }
-    }
+          break;
+        case SignatureGroup.CosmicSignature:
+          out = { ...out, type: '', name: '' };
+          break;
+        default:
+          if (values.name != null) {
+            out = { ...out, name: values.name ?? '' };
+          }
+      }
 
-    if (values.description != null) {
-      out = { ...out, description: values.description };
-    }
+      if (values.description != null) {
+        out = { ...out, description: values.description };
+      }
+
+      // Note: when type of signature changed from WH to other type - we should drop name
+      if (
+        group !== SignatureGroup.Wormhole && // new
+        signatureData.group === SignatureGroup.Wormhole && // prev
+        signatureData.linked_system
+      ) {
+        await outCommand({
+          type: OutCommand.unlinkSignature,
+          data: { signature_eve_id: signatureData.eve_id, solar_system_source: systemId },
+        });
+
+        out = { ...out, type: '' };
+      }
+
+      if (group === SignatureGroup.Wormhole && signatureData.linked_system != null && values.linked_system === null) {
+        await outCommand({
+          type: OutCommand.unlinkSignature,
+          data: { signature_eve_id: signatureData.eve_id, solar_system_source: systemId },
+        });
+      }
+
+      // Note: despite groups have optional type - this will always set
+      out = { ...out, group: group! };
 
-    // Note: when type of signature changed from WH to other type - we should drop name
-    if (
-      group !== SignatureGroup.Wormhole && // new
-      signatureData.group === SignatureGroup.Wormhole && // prev
-      signatureData.linked_system
-    ) {
       await outCommand({
-        type: OutCommand.unlinkSignature,
-        data: { signature_eve_id: signatureData.eve_id, solar_system_source: systemId },
+        type: OutCommand.updateSignatures,
+        data: {
+          system_id: systemId,
+          added: [],
+          updated: [out],
+          removed: [],
+        },
       });
 
-      out = { ...out, type: '' };
-    }
-
-    if (group === SignatureGroup.Wormhole && signatureData.linked_system != null && values.linked_system === null) {
-      await outCommand({
-        type: OutCommand.unlinkSignature,
-        data: { signature_eve_id: signatureData.eve_id, solar_system_source: systemId },
-      });
-    }
-
-    // Note: despite groups have optional type - this will always set
-    out = { ...out, group: group! };
-
-    await outCommand({
-      type: OutCommand.updateSignatures,
-      data: {
-        system_id: systemId,
-        added: [],
-        updated: [out],
-        removed: [],
-      },
-    });
-
-    form.reset();
-    onHide();
-  }, [form, onHide, outCommand, signatureData, systemId]);
+      signatureForm.reset();
+      onHide();
+    },
+    [signatureForm, onHide, outCommand, signatureData, systemId],
+  );
 
   useEffect(() => {
     if (!signatureData) {
-      form.reset();
+      signatureForm.reset();
       return;
     }
 
     const { linked_system, ...rest } = signatureData;
 
-    form.reset({
+    signatureForm.reset({
       linked_system: linked_system?.solar_system_id.toString() ?? undefined,
       ...rest,
     });
-  }, [form, signatureData]);
+  }, [signatureForm, signatureData]);
 
   return (
     <Dialog
@@ -138,32 +141,34 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
       }}
     >
       <SystemsSettingsProvider initialValue={{ systemId }}>
-        <FormProvider {...form}>
-          <div className="flex flex-col gap-2 justify-between">
-            <div className="w-full flex flex-col gap-1 p-1 min-h-[150px]">
-              <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
-                <span>Group:</span>
-                <SignatureGroupSelect name="group" />
-              </label>
+        <FormProvider {...signatureForm}>
+          <form onSubmit={handleSave}>
+            <div className="flex flex-col gap-2 justify-between">
+              <div className="w-full flex flex-col gap-1 p-1 min-h-[150px]">
+                <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
+                  <span>Group:</span>
+                  <SignatureGroupSelect name="group" />
+                </label>
 
-              <SignatureGroupContent />
+                <SignatureGroupContent />
 
-              <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
-                <span>Description:</span>
-                <Controller
-                  name="description"
-                  control={form.control}
-                  render={({ field }) => (
-                    <InputText placeholder="Type description" value={field.value} onChange={field.onChange} />
-                  )}
-                />
-              </label>
+                <label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
+                  <span>Description:</span>
+                  <Controller
+                    name="description"
+                    control={signatureForm.control}
+                    render={({ field }) => (
+                      <InputText placeholder="Type description" value={field.value} onChange={field.onChange} />
+                    )}
+                  />
+                </label>
+              </div>
+
+              <div className="flex gap-2 justify-end">
+                <Button onClick={handleSave} outlined size="small" label="Save"></Button>
+              </div>
             </div>
-
-            <div className="flex gap-2 justify-end">
-              <Button onClick={handleSave} outlined size="small" label="Save"></Button>
-            </div>
-          </div>
+          </form>
         </FormProvider>
       </SystemsSettingsProvider>
     </Dialog>