♻️ use Queries

src/components/EditInternalResourceDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Button } from "@app/components/ui/button";
 import { Input } from "@app/components/ui/input";
 import {
@@ -45,7 +45,7 @@ import { ListClientsResponse } from "@server/routers/client/listClients";
 import { Tag, TagInput } from "@app/components/tags/tag-input";
 import { AxiosResponse } from "axios";
 import { UserType } from "@server/types/UserTypes";
-import { useQuery } from "@tanstack/react-query";
+import { useQueries, useQuery } from "@tanstack/react-query";
 import { orgQueries, resourceQueries } from "@app/lib/queries";
 
 type InternalResourceData = {
@@ -157,42 +157,61 @@ export default function EditInternalResourceDialog({
 
     type FormData = z.infer<typeof formSchema>;
 
-    const { data: rolesResponse = [] } = useQuery(orgQueries.roles({ orgId }));
+    const queries = useQueries({
+        queries: [
+            orgQueries.roles({ orgId }),
+            orgQueries.users({ orgId }),
+            orgQueries.clients({
+                orgId,
+                filters: {
+                    filter: "machine"
+                }
+            }),
+            resourceQueries.resourceUsers({ resourceId: resource.id }),
+            resourceQueries.resourceRoles({ resourceId: resource.id }),
+            resourceQueries.resourceClients({ resourceId: resource.id })
+        ]
+    });
 
-    const allRoles = rolesResponse
+    const [
+        rolesQuery,
+        usersQuery,
+        clientsQuery,
+        resourceUsersQuery,
+        resourceRolesQuery,
+        resourceClientsQuery
+    ] = queries;
+
+    const allRoles = (rolesQuery.data ?? [])
         .map((role) => ({
             id: role.roleId.toString(),
             text: role.name
         }))
         .filter((role) => role.text !== "Admin");
 
-    const { data: usersResponse = [] } = useQuery(orgQueries.users({ orgId }));
+    const allUsers = (usersQuery.data ?? []).map((user) => ({
-    const { data: existingClients = [] } = useQuery(
-        resourceQueries.resourceUsers({ resourceId: resource.id })
-    );
-    const { data: clientsResponse = [] } = useQuery(
-        orgQueries.clients({
-            orgId,
-            filters: {
-                filter: "machine"
-            }
-        })
-    );
-
-    const allUsers = usersResponse.map((user) => ({
         id: user.id.toString(),
         text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
     }));
 
-    const allClients = clientsResponse
+    const machineClients = (clientsQuery.data ?? [])
         .filter((client) => !client.userId)
         .map((client) => ({
             id: client.clientId.toString(),
             text: client.name
         }));
 
+    const existingClients = (resourceClientsQuery.data ?? []).map(
+        (c: { clientId: number; name: string }) => ({
+            id: c.clientId.toString(),
+            text: c.name
+        })
+    );
+
     const hasMachineClients =
-        allClients.length > 0 || existingClients.length > 0;
+        machineClients.length > 0 || existingClients.length > 0;
+
+    const loadingRolesUsers = queries.some((query) => query.isLoading);
 
     const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
         number | null
@@ -203,7 +222,6 @@ export default function EditInternalResourceDialog({
     const [activeClientsTagIndex, setActiveClientsTagIndex] = useState<
         number | null
     >(null);
-    const [loadingRolesUsers, setLoadingRolesUsers] = useState(false);
 
     const form = useForm<FormData>({
         resolver: zodResolver(formSchema),
@@ -223,117 +241,6 @@ export default function EditInternalResourceDialog({
 
     const mode = form.watch("mode");
 
-    // const fetchRolesAndUsers = async () => {
-    //     setLoadingRolesUsers(true);
-    //     try {
-    //         const [
-    //             // rolesResponse,
-    //             resourceRolesResponse,
-    //             usersResponse,
-    //             resourceUsersResponse,
-    //             clientsResponse
-    //         ] = await Promise.all([
-    //             // api.get<AxiosResponse<ListRolesResponse>>(
-    //             //     `/org/${orgId}/roles`
-    //             // ),
-    //             api.get<AxiosResponse<ListSiteResourceRolesResponse>>(
-    //                 `/site-resource/${resource.id}/roles`
-    //             ),
-    //             api.get<AxiosResponse<ListUsersResponse>>(
-    //                 `/org/${orgId}/users`
-    //             ),
-    //             api.get<AxiosResponse<ListSiteResourceUsersResponse>>(
-    //                 `/site-resource/${resource.id}/users`
-    //             ),
-    //             api.get<AxiosResponse<ListClientsResponse>>(
-    //                 `/org/${orgId}/clients?filter=machine&limit=1000`
-    //             )
-    //         ]);
-
-    //         let resourceClientsResponse: AxiosResponse<
-    //             AxiosResponse<ListSiteResourceClientsResponse>
-    //         >;
-    //         try {
-    //             resourceClientsResponse = await api.get<
-    //                 AxiosResponse<ListSiteResourceClientsResponse>
-    //             >(`/site-resource/${resource.id}/clients`);
-    //         } catch {
-    //             resourceClientsResponse = {
-    //                 data: {
-    //                     data: {
-    //                         clients: []
-    //                     }
-    //                 },
-    //                 status: 200,
-    //                 statusText: "OK",
-    //                 headers: {} as any,
-    //                 config: {} as any
-    //             } as any;
-    //         }
-
-    //         // setAllRoles(
-    //         //     rolesResponse.data.data.roles
-    //         //         .map((role) => ({
-    //         //             id: role.roleId.toString(),
-    //         //             text: role.name
-    //         //         }))
-    //         //         .filter((role) => role.text !== "Admin")
-    //         // );
-
-    //         form.setValue(
-    //             "roles",
-    //             resourceRolesResponse.data.data.roles
-    //                 .map((i) => ({
-    //                     id: i.roleId.toString(),
-    //                     text: i.name
-    //                 }))
-    //                 .filter((role) => role.text !== "Admin")
-    //         );
-
-    //         form.setValue(
-    //             "users",
-    //             resourceUsersResponse.data.data.users.map((i) => ({
-    //                 id: i.userId.toString(),
-    //                 text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
-    //             }))
-    //         );
-
-    //         const machineClients = clientsResponse.data.data.clients
-    //             .filter((client) => !client.userId)
-    //             .map((client) => ({
-    //                 id: client.clientId.toString(),
-    //                 text: client.name
-    //             }));
-
-    //         setAllClients(machineClients);
-
-    //         const existingClients =
-    //             resourceClientsResponse.data.data.clients.map(
-    //                 (c: { clientId: number; name: string }) => ({
-    //                     id: c.clientId.toString(),
-    //                     text: c.name
-    //                 })
-    //             );
-
-    //         form.setValue("clients", existingClients);
-
-    //         // Show clients tag input if there are machine clients OR existing client access
-    //         setHasMachineClients(
-    //             machineClients.length > 0 || existingClients.length > 0
-    //         );
-    //     } catch (error) {
-    //         console.error("Error fetching roles, users, and clients:", error);
-    //     } finally {
-    //         setLoadingRolesUsers(false);
-    //     }
-    // };
-
-    // useEffect(() => {
-    //     if (open) {
-    //         fetchRolesAndUsers();
-    //     }
-    // }, [open, resource]);
-
     const handleSubmit = async (data: FormData) => {
         setIsSubmitting(true);
         try {
@@ -399,6 +306,39 @@ export default function EditInternalResourceDialog({
         }
     };
 
+    // Set form values when data is loaded
+    useEffect(() => {
+        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) {
+            form.setValue(
+                "users",
+                resourceUsersQuery.data.map((i) => ({
+                    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]);
+
     return (
         <Credenza
             open={open}
@@ -818,7 +758,7 @@ export default function EditInternalResourceDialog({
                                                                     true
                                                                 }
                                                                 autocompleteOptions={
-                                                                    allClients
+                                                                    machineClients
                                                                 }
                                                                 allowDuplicates={
                                                                     false

src/lib/queries.ts

@@ -3,6 +3,7 @@ import type { ListClientsResponse } from "@server/routers/client";
 import type { ListRolesResponse } from "@server/routers/role";
 import type { ListSitesResponse } from "@server/routers/site";
 import type {
+    ListSiteResourceClientsResponse,
     ListSiteResourceRolesResponse,
     ListSiteResourceUsersResponse
 } from "@server/routers/siteResource";
@@ -160,5 +161,16 @@ export const resourceQueries = {
 
                 return res.data.data.roles;
             }
+        }),
+    resourceClients: ({ resourceId }: { resourceId: number }) =>
+        queryOptions({
+            queryKey: ["RESOURCES", resourceId, "ROLES"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<ListSiteResourceClientsResponse>
+                >(`/site-resource/${resourceId}/clients`, { signal });
+
+                return res.data.data.clients;
+            }
         })
 };