diff --git a/src/components/EditInternalResourceDialog.tsx b/src/components/EditInternalResourceDialog.tsx index 231940cd..ea5ee8e2 100644 --- a/src/components/EditInternalResourceDialog.tsx +++ b/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; - 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 { data: existingClients = [] } = useQuery( - resourceQueries.resourceUsers({ resourceId: resource.id }) - ); - const { data: clientsResponse = [] } = useQuery( - orgQueries.clients({ - orgId, - filters: { - filter: "machine" - } - }) - ); - - const allUsers = usersResponse.map((user) => ({ + const allUsers = (usersQuery.data ?? []).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({ 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>( - // // `/org/${orgId}/roles` - // // ), - // api.get>( - // `/site-resource/${resource.id}/roles` - // ), - // api.get>( - // `/org/${orgId}/users` - // ), - // api.get>( - // `/site-resource/${resource.id}/users` - // ), - // api.get>( - // `/org/${orgId}/clients?filter=machine&limit=1000` - // ) - // ]); - - // let resourceClientsResponse: AxiosResponse< - // AxiosResponse - // >; - // try { - // resourceClientsResponse = await api.get< - // AxiosResponse - // >(`/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 ( + queryOptions({ + queryKey: ["RESOURCES", resourceId, "ROLES"] as const, + queryFn: async ({ signal, meta }) => { + const res = await meta!.api.get< + AxiosResponse + >(`/site-resource/${resourceId}/clients`, { signal }); + + return res.data.data.clients; + } }) };