navigate to subgroups in modal

src/user/JoinGroupDialog.tsx

@@ -63,24 +63,27 @@ export const JoinGroupDialog = ({
 
   const { id } = useParams<{ id: string }>();
 
-  if (id) {
   useEffect(
     () =>
       asyncStateFetch(
         async () => {
-            const existingUserGroups = await adminClient.users.listGroups({
-              id,
-            });
           const allGroups = await adminClient.groups.find();
 
           if (groupId) {
             const group = await adminClient.groups.findOne({ id: groupId });
             return { group, groups: group.subGroups! };
-            } else {
+          } else if (id) {
+            const existingUserGroups = await adminClient.users.listGroups({
+              id,
+            });
+
             return {
               groups: _.differenceBy(allGroups, existingUserGroups, "id"),
             };
-            }
+          } else
+            return {
+              groups: allGroups,
+            };
         },
         async ({ group: selectedGroup, groups }) => {
           if (selectedGroup) {
@@ -90,25 +93,14 @@ export const JoinGroupDialog = ({
           groups.forEach((group: Group) => {
             group.checked = !!selectedRows.find((r) => r.id === group.id);
           });
-            setGroups(groups);
+          id
+            ? setGroups(groups)
+            : setGroups([...groups.filter((row) => !chips.includes(row.name))]);
         },
         errorHandler
       ),
     [groupId]
   );
-  } else if (!id) {
-    useEffect(() => {
-      return asyncStateFetch(
-        () => {
-          return Promise.resolve(adminClient.groups.find());
-        },
-        (groups) => {
-          setGroups([...groups.filter((row) => !chips.includes(row.name))]);
-        },
-        errorHandler
-      );
-    }, []);
-  }
 
   return (
     <Modal