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

@@ -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"}>

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) => {

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}`,
       );

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);

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);