♻️ compute everything in useQueries

src/components/EditInternalResourceDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "@app/components/ui/button";
 import { Input } from "@app/components/ui/input";
 import {
@@ -170,9 +170,8 @@ export default function EditInternalResourceDialog({
             resourceQueries.resourceUsers({ resourceId: resource.id }),
             resourceQueries.resourceRoles({ resourceId: resource.id }),
             resourceQueries.resourceClients({ resourceId: resource.id })
-        ]
+        ],
-    });
+        combine: (results) => {
-
             const [
                 rolesQuery,
                 usersQuery,
@@ -180,7 +179,7 @@ export default function EditInternalResourceDialog({
                 resourceUsersQuery,
                 resourceRolesQuery,
                 resourceClientsQuery
-    ] = queries;
+            ] = results;
 
             const allRoles = (rolesQuery.data ?? [])
                 .map((role) => ({
@@ -208,10 +207,42 @@ export default function EditInternalResourceDialog({
                 })
             );
 
-    const hasMachineClients =
+            const formRoles = (resourceRolesQuery.data ?? [])
-        machineClients.length > 0 || existingClients.length > 0;
+                .map((i) => ({
+                    id: i.roleId.toString(),
+                    text: i.name
+                }))
+                .filter((role) => role.text !== "Admin");
 
-    const loadingRolesUsers = queries.some((query) => query.isLoading);
+            const formUsers = (resourceUsersQuery.data ?? []).map((i) => ({
+                id: i.userId.toString(),
+                text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
+            }));
+
+            return {
+                allRoles,
+                allUsers,
+                machineClients,
+                existingClients,
+                formRoles,
+                formUsers,
+                hasMachineClients:
+                    machineClients.length > 0 || existingClients.length > 0,
+                isLoading: results.some((query) => query.isLoading)
+            };
+        }
+    });
+
+    const {
+        allRoles,
+        allUsers,
+        machineClients,
+        existingClients,
+        formRoles,
+        formUsers,
+        hasMachineClients,
+        isLoading: loadingRolesUsers
+    } = queries;
 
     const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
         number | null
@@ -306,38 +337,17 @@ export default function EditInternalResourceDialog({
         }
     };
 
-    // Set form values when data is loaded
+    // Set form values only once after initial load
-    useEffect(() => {
+    const hasInitialized = useRef(false);
-        if (resourceRolesQuery.data) {
-            form.setValue(
-                "roles",
-                resourceRolesQuery.data
-                    .map((i) => ({
-                        id: i.roleId.toString(),
-                        text: i.name
-                    }))
-                    .filter((role) => role.text !== "Admin")
-            );
-        }
-    }, [resourceRolesQuery.data, form]);
 
     useEffect(() => {
-        if (resourceUsersQuery.data) {
+        if (!loadingRolesUsers && !hasInitialized.current) {
-            form.setValue(
+            hasInitialized.current = true;
-                "users",
+            form.setValue("roles", formRoles);
-                resourceUsersQuery.data.map((i) => ({
+            form.setValue("users", formUsers);
-                    id: i.userId.toString(),
-                    text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
-                }))
-            );
-        }
-    }, [resourceUsersQuery.data, form]);
-
-    useEffect(() => {
-        if (clientsQuery.data) {
             form.setValue("clients", existingClients);
         }
-    }, [clientsQuery.data, existingClients, form]);
+    }, [loadingRolesUsers, formRoles, formUsers, existingClients, form]);
 
     return (
         <Credenza