From 093efc08b3496d672ed6d8d54ef46c98e95f507c Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Mon, 12 Feb 2024 14:12:57 +0100
Subject: [PATCH] Fix an issue of creating duplicate groups in the access
 control and network routes modal when group does not exist (#328)

---
 src/app/(dashboard)/peer/page.tsx             |  2 +-
 .../access-control/AccessControlModal.tsx     |  4 +++-
 src/modules/groups/useGroupHelper.tsx         | 19 ++++++++++++-------
 src/modules/routes/RouteModal.tsx             |  4 +++-
 src/modules/routes/RouteUpdateModal.tsx       |  4 +++-
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
index e00156d..072ef08 100644
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -132,7 +132,7 @@ function PeerOverview() {
             <Breadcrumbs.Item label={peer.ip} active />
           </Breadcrumbs>
 
-          <div className={"flex justify-between max-w-6xl"}>
+          <div className={"flex justify-between max-w-6xl items-start"}>
             <div>
               <div className={"flex items-center gap-3"}>
                 <h1 className={"flex items-center gap-3"}>
diff --git a/src/modules/access-control/AccessControlModal.tsx b/src/modules/access-control/AccessControlModal.tsx
index 0e046d6..46b8df6 100644
--- a/src/modules/access-control/AccessControlModal.tsx
+++ b/src/modules/access-control/AccessControlModal.tsx
@@ -162,7 +162,9 @@ export function AccessControlModalContent({
     const createOrUpdateGroups = uniqBy([...g1, ...g2], "name").map(
       (g) => g.promise,
     );
-    const groups = await Promise.all(createOrUpdateGroups);
+    const groups = await Promise.all(
+      createOrUpdateGroups.map((call) => call()),
+    );
 
     let sources = sourceGroups
       .map((g) => {
diff --git a/src/modules/groups/useGroupHelper.tsx b/src/modules/groups/useGroupHelper.tsx
index 890a6ef..3fc38ff 100644
--- a/src/modules/groups/useGroupHelper.tsx
+++ b/src/modules/groups/useGroupHelper.tsx
@@ -1,4 +1,5 @@
 import { useApiCall } from "@utils/api";
+import { isEmpty } from "lodash";
 import { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
 import { useGroups } from "@/contexts/GroupsProvider";
@@ -46,7 +47,7 @@ export default function useGroupHelper({ initial = [], peer }: Props) {
     return groupsToUpdate.map((group) => {
       return {
         name: group.name,
-        promise: updateOrCreateGroup(group),
+        promise: () => updateOrCreateGroup(group),
       };
     });
   };
@@ -67,7 +68,7 @@ export default function useGroupHelper({ initial = [], peer }: Props) {
       return removePeerFromGroup(group);
     });
 
-    return [...updateCalls, ...removeCalls] as Promise<Group>[];
+    return [...updateCalls.map((c) => c()), ...removeCalls] as Promise<Group>[];
   };
 
   const removePeerFromGroup = async (g: Group) => {
@@ -93,20 +94,24 @@ export default function useGroupHelper({ initial = [], peer }: Props) {
   const updateOrCreateGroup = async (selectedGroup: Group) => {
     const groupPeers =
       selectedGroup.peers &&
-      selectedGroup.peers.map((p) => {
-        const groupPeer = p as GroupPeer;
-        return groupPeer.id;
-      });
+      selectedGroup.peers
+        .map((p) => {
+          const groupPeer = p as GroupPeer;
+          return groupPeer.id;
+        })
+        .filter((p) => p !== undefined && p !== null);
 
     // Update group if it has an id (only when peer prop is passed)
     const hasId = !!selectedGroup.id;
+    const peers = isEmpty(groupPeers) ? undefined : groupPeers;
+
     if (hasId) {
       if (selectedGroup.name == "All" || !peer)
         return Promise.resolve(selectedGroup);
       return groupRequest.put(
         {
           name: selectedGroup.name,
-          peers: groupPeers || [],
+          peers: peers,
         },
         `/${selectedGroup.id}`,
       );
diff --git a/src/modules/routes/RouteModal.tsx b/src/modules/routes/RouteModal.tsx
index b672d0f..e121293 100644
--- a/src/modules/routes/RouteModal.tsx
+++ b/src/modules/routes/RouteModal.tsx
@@ -113,7 +113,9 @@ export function RouteModalContent({ onSuccess, peer }: ModalProps) {
     const createOrUpdateGroups = uniqBy([...g1, ...g2], "name").map(
       (g) => g.promise,
     );
-    const createdGroups = await Promise.all(createOrUpdateGroups);
+    const createdGroups = await Promise.all(
+      createOrUpdateGroups.map((call) => call()),
+    );
     const peerGroups = routingPeerGroups
       .map((g) => {
         const find = createdGroups.find((group) => group.name === g.name);
diff --git a/src/modules/routes/RouteUpdateModal.tsx b/src/modules/routes/RouteUpdateModal.tsx
index 2ace897..fc4f0a9 100644
--- a/src/modules/routes/RouteUpdateModal.tsx
+++ b/src/modules/routes/RouteUpdateModal.tsx
@@ -150,7 +150,9 @@ function RouteUpdateModalContent({ onSuccess, route, cell }: ModalProps) {
     const createOrUpdateGroups = uniqBy([...g1, ...g2], "name").map(
       (g) => g.promise,
     );
-    const createdGroups = await Promise.all(createOrUpdateGroups);
+    const createdGroups = await Promise.all(
+      createOrUpdateGroups.map((call) => call()),
+    );
     const peerGroups = routingPeerGroups
       .map((g) => {
         const find = createdGroups.find((group) => group.name === g.name);