From 8e9acd500643848a4303bf280f543ef656f9a2f9 Mon Sep 17 00:00:00 2001 From: Syahdan Date: Wed, 29 Apr 2026 19:20:27 +0700 Subject: [PATCH] ui: unnest dashboard detail routes and stabilize form hooks --- apps/web/src/routeTree.gen.ts | 166 +++++++++--------- ...d.tsx => dashboard.domains_.$domainId.tsx} | 66 ++++--- ...oteId.tsx => dashboard.notes_.$noteId.tsx} | 40 +++-- ...d.tsx => dashboard.servers_.$serverId.tsx} | 52 ++++-- ...tsx => dashboard.services_.$serviceId.tsx} | 52 ++++-- 5 files changed, 219 insertions(+), 157 deletions(-) rename apps/web/src/routes/{dashboard.domains.$domainId.tsx => dashboard.domains_.$domainId.tsx} (87%) rename apps/web/src/routes/{dashboard.notes.$noteId.tsx => dashboard.notes_.$noteId.tsx} (93%) rename apps/web/src/routes/{dashboard.servers.$serverId.tsx => dashboard.servers_.$serverId.tsx} (93%) rename apps/web/src/routes/{dashboard.services.$serviceId.tsx => dashboard.services_.$serviceId.tsx} (94%) diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts index 83f00c8..3f406e0 100644 --- a/apps/web/src/routeTree.gen.ts +++ b/apps/web/src/routeTree.gen.ts @@ -17,14 +17,14 @@ import { Route as DashboardServicesRouteImport } from './routes/dashboard.servic import { Route as DashboardServersRouteImport } from './routes/dashboard.servers' import { Route as DashboardNotesRouteImport } from './routes/dashboard.notes' import { Route as DashboardDomainsRouteImport } from './routes/dashboard.domains' +import { Route as DashboardServicesServiceIdRouteImport } from './routes/dashboard.services_.$serviceId' import { Route as DashboardServicesNewRouteImport } from './routes/dashboard.services.new' -import { Route as DashboardServicesServiceIdRouteImport } from './routes/dashboard.services.$serviceId' +import { Route as DashboardServersServerIdRouteImport } from './routes/dashboard.servers_.$serverId' import { Route as DashboardServersNewRouteImport } from './routes/dashboard.servers.new' -import { Route as DashboardServersServerIdRouteImport } from './routes/dashboard.servers.$serverId' +import { Route as DashboardNotesNoteIdRouteImport } from './routes/dashboard.notes_.$noteId' import { Route as DashboardNotesNewRouteImport } from './routes/dashboard.notes.new' -import { Route as DashboardNotesNoteIdRouteImport } from './routes/dashboard.notes.$noteId' +import { Route as DashboardDomainsDomainIdRouteImport } from './routes/dashboard.domains_.$domainId' import { Route as DashboardDomainsNewRouteImport } from './routes/dashboard.domains.new' -import { Route as DashboardDomainsDomainIdRouteImport } from './routes/dashboard.domains.$domainId' const LoginRoute = LoginRouteImport.update({ id: '/login', @@ -66,49 +66,49 @@ const DashboardDomainsRoute = DashboardDomainsRouteImport.update({ path: '/domains', getParentRoute: () => DashboardRoute, } as any) +const DashboardServicesServiceIdRoute = + DashboardServicesServiceIdRouteImport.update({ + id: '/services_/$serviceId', + path: '/services/$serviceId', + getParentRoute: () => DashboardRoute, + } as any) const DashboardServicesNewRoute = DashboardServicesNewRouteImport.update({ id: '/new', path: '/new', getParentRoute: () => DashboardServicesRoute, } as any) -const DashboardServicesServiceIdRoute = - DashboardServicesServiceIdRouteImport.update({ - id: '/$serviceId', - path: '/$serviceId', - getParentRoute: () => DashboardServicesRoute, +const DashboardServersServerIdRoute = + DashboardServersServerIdRouteImport.update({ + id: '/servers_/$serverId', + path: '/servers/$serverId', + getParentRoute: () => DashboardRoute, } as any) const DashboardServersNewRoute = DashboardServersNewRouteImport.update({ id: '/new', path: '/new', getParentRoute: () => DashboardServersRoute, } as any) -const DashboardServersServerIdRoute = - DashboardServersServerIdRouteImport.update({ - id: '/$serverId', - path: '/$serverId', - getParentRoute: () => DashboardServersRoute, - } as any) +const DashboardNotesNoteIdRoute = DashboardNotesNoteIdRouteImport.update({ + id: '/notes_/$noteId', + path: '/notes/$noteId', + getParentRoute: () => DashboardRoute, +} as any) const DashboardNotesNewRoute = DashboardNotesNewRouteImport.update({ id: '/new', path: '/new', getParentRoute: () => DashboardNotesRoute, } as any) -const DashboardNotesNoteIdRoute = DashboardNotesNoteIdRouteImport.update({ - id: '/$noteId', - path: '/$noteId', - getParentRoute: () => DashboardNotesRoute, -} as any) +const DashboardDomainsDomainIdRoute = + DashboardDomainsDomainIdRouteImport.update({ + id: '/domains_/$domainId', + path: '/domains/$domainId', + getParentRoute: () => DashboardRoute, + } as any) const DashboardDomainsNewRoute = DashboardDomainsNewRouteImport.update({ id: '/new', path: '/new', getParentRoute: () => DashboardDomainsRoute, } as any) -const DashboardDomainsDomainIdRoute = - DashboardDomainsDomainIdRouteImport.update({ - id: '/$domainId', - path: '/$domainId', - getParentRoute: () => DashboardDomainsRoute, - } as any) export interface FileRoutesByFullPath { '/': typeof IndexRoute @@ -119,14 +119,14 @@ export interface FileRoutesByFullPath { '/dashboard/servers': typeof DashboardServersRouteWithChildren '/dashboard/services': typeof DashboardServicesRouteWithChildren '/dashboard/': typeof DashboardIndexRoute - '/dashboard/domains/$domainId': typeof DashboardDomainsDomainIdRoute '/dashboard/domains/new': typeof DashboardDomainsNewRoute - '/dashboard/notes/$noteId': typeof DashboardNotesNoteIdRoute + '/dashboard/domains/$domainId': typeof DashboardDomainsDomainIdRoute '/dashboard/notes/new': typeof DashboardNotesNewRoute - '/dashboard/servers/$serverId': typeof DashboardServersServerIdRoute + '/dashboard/notes/$noteId': typeof DashboardNotesNoteIdRoute '/dashboard/servers/new': typeof DashboardServersNewRoute - '/dashboard/services/$serviceId': typeof DashboardServicesServiceIdRoute + '/dashboard/servers/$serverId': typeof DashboardServersServerIdRoute '/dashboard/services/new': typeof DashboardServicesNewRoute + '/dashboard/services/$serviceId': typeof DashboardServicesServiceIdRoute } export interface FileRoutesByTo { '/': typeof IndexRoute @@ -136,14 +136,14 @@ export interface FileRoutesByTo { '/dashboard/servers': typeof DashboardServersRouteWithChildren '/dashboard/services': typeof DashboardServicesRouteWithChildren '/dashboard': typeof DashboardIndexRoute - '/dashboard/domains/$domainId': typeof DashboardDomainsDomainIdRoute '/dashboard/domains/new': typeof DashboardDomainsNewRoute - '/dashboard/notes/$noteId': typeof DashboardNotesNoteIdRoute + '/dashboard/domains/$domainId': typeof DashboardDomainsDomainIdRoute '/dashboard/notes/new': typeof DashboardNotesNewRoute - '/dashboard/servers/$serverId': typeof DashboardServersServerIdRoute + '/dashboard/notes/$noteId': typeof DashboardNotesNoteIdRoute '/dashboard/servers/new': typeof DashboardServersNewRoute - '/dashboard/services/$serviceId': typeof DashboardServicesServiceIdRoute + '/dashboard/servers/$serverId': typeof DashboardServersServerIdRoute '/dashboard/services/new': typeof DashboardServicesNewRoute + '/dashboard/services/$serviceId': typeof DashboardServicesServiceIdRoute } export interface FileRoutesById { __root__: typeof rootRouteImport @@ -155,14 +155,14 @@ export interface FileRoutesById { '/dashboard/servers': typeof DashboardServersRouteWithChildren '/dashboard/services': typeof DashboardServicesRouteWithChildren '/dashboard/': typeof DashboardIndexRoute - '/dashboard/domains/$domainId': typeof DashboardDomainsDomainIdRoute '/dashboard/domains/new': typeof DashboardDomainsNewRoute - '/dashboard/notes/$noteId': typeof DashboardNotesNoteIdRoute + '/dashboard/domains_/$domainId': typeof DashboardDomainsDomainIdRoute '/dashboard/notes/new': typeof DashboardNotesNewRoute - '/dashboard/servers/$serverId': typeof DashboardServersServerIdRoute + '/dashboard/notes_/$noteId': typeof DashboardNotesNoteIdRoute '/dashboard/servers/new': typeof DashboardServersNewRoute - '/dashboard/services/$serviceId': typeof DashboardServicesServiceIdRoute + '/dashboard/servers_/$serverId': typeof DashboardServersServerIdRoute '/dashboard/services/new': typeof DashboardServicesNewRoute + '/dashboard/services_/$serviceId': typeof DashboardServicesServiceIdRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath @@ -175,14 +175,14 @@ export interface FileRouteTypes { | '/dashboard/servers' | '/dashboard/services' | '/dashboard/' - | '/dashboard/domains/$domainId' | '/dashboard/domains/new' - | '/dashboard/notes/$noteId' + | '/dashboard/domains/$domainId' | '/dashboard/notes/new' - | '/dashboard/servers/$serverId' + | '/dashboard/notes/$noteId' | '/dashboard/servers/new' - | '/dashboard/services/$serviceId' + | '/dashboard/servers/$serverId' | '/dashboard/services/new' + | '/dashboard/services/$serviceId' fileRoutesByTo: FileRoutesByTo to: | '/' @@ -192,14 +192,14 @@ export interface FileRouteTypes { | '/dashboard/servers' | '/dashboard/services' | '/dashboard' - | '/dashboard/domains/$domainId' | '/dashboard/domains/new' - | '/dashboard/notes/$noteId' + | '/dashboard/domains/$domainId' | '/dashboard/notes/new' - | '/dashboard/servers/$serverId' + | '/dashboard/notes/$noteId' | '/dashboard/servers/new' - | '/dashboard/services/$serviceId' + | '/dashboard/servers/$serverId' | '/dashboard/services/new' + | '/dashboard/services/$serviceId' id: | '__root__' | '/' @@ -210,14 +210,14 @@ export interface FileRouteTypes { | '/dashboard/servers' | '/dashboard/services' | '/dashboard/' - | '/dashboard/domains/$domainId' | '/dashboard/domains/new' - | '/dashboard/notes/$noteId' + | '/dashboard/domains_/$domainId' | '/dashboard/notes/new' - | '/dashboard/servers/$serverId' + | '/dashboard/notes_/$noteId' | '/dashboard/servers/new' - | '/dashboard/services/$serviceId' + | '/dashboard/servers_/$serverId' | '/dashboard/services/new' + | '/dashboard/services_/$serviceId' fileRoutesById: FileRoutesById } export interface RootRouteChildren { @@ -284,6 +284,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardDomainsRouteImport parentRoute: typeof DashboardRoute } + '/dashboard/services_/$serviceId': { + id: '/dashboard/services_/$serviceId' + path: '/services/$serviceId' + fullPath: '/dashboard/services/$serviceId' + preLoaderRoute: typeof DashboardServicesServiceIdRouteImport + parentRoute: typeof DashboardRoute + } '/dashboard/services/new': { id: '/dashboard/services/new' path: '/new' @@ -291,12 +298,12 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardServicesNewRouteImport parentRoute: typeof DashboardServicesRoute } - '/dashboard/services/$serviceId': { - id: '/dashboard/services/$serviceId' - path: '/$serviceId' - fullPath: '/dashboard/services/$serviceId' - preLoaderRoute: typeof DashboardServicesServiceIdRouteImport - parentRoute: typeof DashboardServicesRoute + '/dashboard/servers_/$serverId': { + id: '/dashboard/servers_/$serverId' + path: '/servers/$serverId' + fullPath: '/dashboard/servers/$serverId' + preLoaderRoute: typeof DashboardServersServerIdRouteImport + parentRoute: typeof DashboardRoute } '/dashboard/servers/new': { id: '/dashboard/servers/new' @@ -305,12 +312,12 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardServersNewRouteImport parentRoute: typeof DashboardServersRoute } - '/dashboard/servers/$serverId': { - id: '/dashboard/servers/$serverId' - path: '/$serverId' - fullPath: '/dashboard/servers/$serverId' - preLoaderRoute: typeof DashboardServersServerIdRouteImport - parentRoute: typeof DashboardServersRoute + '/dashboard/notes_/$noteId': { + id: '/dashboard/notes_/$noteId' + path: '/notes/$noteId' + fullPath: '/dashboard/notes/$noteId' + preLoaderRoute: typeof DashboardNotesNoteIdRouteImport + parentRoute: typeof DashboardRoute } '/dashboard/notes/new': { id: '/dashboard/notes/new' @@ -319,12 +326,12 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardNotesNewRouteImport parentRoute: typeof DashboardNotesRoute } - '/dashboard/notes/$noteId': { - id: '/dashboard/notes/$noteId' - path: '/$noteId' - fullPath: '/dashboard/notes/$noteId' - preLoaderRoute: typeof DashboardNotesNoteIdRouteImport - parentRoute: typeof DashboardNotesRoute + '/dashboard/domains_/$domainId': { + id: '/dashboard/domains_/$domainId' + path: '/domains/$domainId' + fullPath: '/dashboard/domains/$domainId' + preLoaderRoute: typeof DashboardDomainsDomainIdRouteImport + parentRoute: typeof DashboardRoute } '/dashboard/domains/new': { id: '/dashboard/domains/new' @@ -333,23 +340,14 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardDomainsNewRouteImport parentRoute: typeof DashboardDomainsRoute } - '/dashboard/domains/$domainId': { - id: '/dashboard/domains/$domainId' - path: '/$domainId' - fullPath: '/dashboard/domains/$domainId' - preLoaderRoute: typeof DashboardDomainsDomainIdRouteImport - parentRoute: typeof DashboardDomainsRoute - } } } interface DashboardDomainsRouteChildren { - DashboardDomainsDomainIdRoute: typeof DashboardDomainsDomainIdRoute DashboardDomainsNewRoute: typeof DashboardDomainsNewRoute } const DashboardDomainsRouteChildren: DashboardDomainsRouteChildren = { - DashboardDomainsDomainIdRoute: DashboardDomainsDomainIdRoute, DashboardDomainsNewRoute: DashboardDomainsNewRoute, } @@ -357,12 +355,10 @@ const DashboardDomainsRouteWithChildren = DashboardDomainsRoute._addFileChildren(DashboardDomainsRouteChildren) interface DashboardNotesRouteChildren { - DashboardNotesNoteIdRoute: typeof DashboardNotesNoteIdRoute DashboardNotesNewRoute: typeof DashboardNotesNewRoute } const DashboardNotesRouteChildren: DashboardNotesRouteChildren = { - DashboardNotesNoteIdRoute: DashboardNotesNoteIdRoute, DashboardNotesNewRoute: DashboardNotesNewRoute, } @@ -371,12 +367,10 @@ const DashboardNotesRouteWithChildren = DashboardNotesRoute._addFileChildren( ) interface DashboardServersRouteChildren { - DashboardServersServerIdRoute: typeof DashboardServersServerIdRoute DashboardServersNewRoute: typeof DashboardServersNewRoute } const DashboardServersRouteChildren: DashboardServersRouteChildren = { - DashboardServersServerIdRoute: DashboardServersServerIdRoute, DashboardServersNewRoute: DashboardServersNewRoute, } @@ -384,12 +378,10 @@ const DashboardServersRouteWithChildren = DashboardServersRoute._addFileChildren(DashboardServersRouteChildren) interface DashboardServicesRouteChildren { - DashboardServicesServiceIdRoute: typeof DashboardServicesServiceIdRoute DashboardServicesNewRoute: typeof DashboardServicesNewRoute } const DashboardServicesRouteChildren: DashboardServicesRouteChildren = { - DashboardServicesServiceIdRoute: DashboardServicesServiceIdRoute, DashboardServicesNewRoute: DashboardServicesNewRoute, } @@ -402,6 +394,10 @@ interface DashboardRouteChildren { DashboardServersRoute: typeof DashboardServersRouteWithChildren DashboardServicesRoute: typeof DashboardServicesRouteWithChildren DashboardIndexRoute: typeof DashboardIndexRoute + DashboardDomainsDomainIdRoute: typeof DashboardDomainsDomainIdRoute + DashboardNotesNoteIdRoute: typeof DashboardNotesNoteIdRoute + DashboardServersServerIdRoute: typeof DashboardServersServerIdRoute + DashboardServicesServiceIdRoute: typeof DashboardServicesServiceIdRoute } const DashboardRouteChildren: DashboardRouteChildren = { @@ -410,6 +406,10 @@ const DashboardRouteChildren: DashboardRouteChildren = { DashboardServersRoute: DashboardServersRouteWithChildren, DashboardServicesRoute: DashboardServicesRouteWithChildren, DashboardIndexRoute: DashboardIndexRoute, + DashboardDomainsDomainIdRoute: DashboardDomainsDomainIdRoute, + DashboardNotesNoteIdRoute: DashboardNotesNoteIdRoute, + DashboardServersServerIdRoute: DashboardServersServerIdRoute, + DashboardServicesServiceIdRoute: DashboardServicesServiceIdRoute, } const DashboardRouteWithChildren = DashboardRoute._addFileChildren( diff --git a/apps/web/src/routes/dashboard.domains.$domainId.tsx b/apps/web/src/routes/dashboard.domains_.$domainId.tsx similarity index 87% rename from apps/web/src/routes/dashboard.domains.$domainId.tsx rename to apps/web/src/routes/dashboard.domains_.$domainId.tsx index 5f15dc4..8f2fa73 100644 --- a/apps/web/src/routes/dashboard.domains.$domainId.tsx +++ b/apps/web/src/routes/dashboard.domains_.$domainId.tsx @@ -1,13 +1,14 @@ +import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui"; +import { queryClient, trpc, trpcClient } from "@/utils/trpc"; import { Button } from "@minmon/ui/components/button"; import { StatusBadge } from "@minmon/ui/components/status-badge"; import { useForm } from "@tanstack/react-form"; import { useMutation, useQuery } from "@tanstack/react-query"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; +import { useEffect } from "react"; import { toast } from "sonner"; -import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui"; -import { queryClient, trpc, trpcClient } from "@/utils/trpc"; -export const Route = createFileRoute("/dashboard/domains/$domainId")({ +export const Route = createFileRoute("/dashboard/domains_/$domainId")({ component: RouteComponent, }); @@ -54,6 +55,31 @@ function RouteComponent() { onError: (error) => toast.error(error.message), }); + const form = useForm({ + defaultValues: { + serviceId: "", + name: "", + expectedServerIp: "", + remarks: "", + } satisfies DomainFormValues, + onSubmit: async ({ value }) => { + await updateDomain.mutateAsync(value); + }, + }); + + useEffect(() => { + if (!domain.data) { + return; + } + + form.reset({ + serviceId: domain.data.serviceId, + name: domain.data.name, + expectedServerIp: domain.data.expectedServerIp, + remarks: domain.data.remarks ?? "", + }); + }, [domain.data, form]); + if (domain.isLoading || services.isLoading) { return ; } @@ -62,20 +88,6 @@ function RouteComponent() { return ; } - const defaultValues: DomainFormValues = { - serviceId: domain.data.serviceId, - name: domain.data.name, - expectedServerIp: domain.data.expectedServerIp, - remarks: domain.data.remarks ?? "", - }; - - const form = useForm({ - defaultValues, - onSubmit: async ({ value }) => { - await updateDomain.mutateAsync(value); - }, - }); - return (
@@ -122,16 +134,16 @@ function RouteComponent() { > {(field) => ( - field.handleChange(e.target.value)} - description={`Available: ${services.data.map((item) => `${item.name} (${item.id})`).join(", ")}`} - /> - )} - + field.handleChange(e.target.value)} + description={`Available: ${services.data.map((item) => `${item.name} (${item.id})`).join(", ")}`} + /> + )} +
{(field) => field.handleChange(e.target.value)} />} {(field) => field.handleChange(e.target.value)} />} diff --git a/apps/web/src/routes/dashboard.notes.$noteId.tsx b/apps/web/src/routes/dashboard.notes_.$noteId.tsx similarity index 93% rename from apps/web/src/routes/dashboard.notes.$noteId.tsx rename to apps/web/src/routes/dashboard.notes_.$noteId.tsx index c56fc07..9fe591e 100644 --- a/apps/web/src/routes/dashboard.notes.$noteId.tsx +++ b/apps/web/src/routes/dashboard.notes_.$noteId.tsx @@ -2,11 +2,12 @@ import { Button } from "@minmon/ui/components/button"; import { useForm } from "@tanstack/react-form"; import { useMutation, useQuery } from "@tanstack/react-query"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; +import { useEffect } from "react"; import { toast } from "sonner"; import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui"; import { queryClient, trpc, trpcClient } from "@/utils/trpc"; -export const Route = createFileRoute("/dashboard/notes/$noteId")({ +export const Route = createFileRoute("/dashboard/notes_/$noteId")({ component: RouteComponent, }); @@ -39,19 +40,11 @@ function RouteComponent() { onError: (error) => toast.error(error.message), }); - if (note.isLoading || servers.isLoading) { - return ; - } - - if (note.isError || servers.isError || !note.data || !servers.data) { - return ; - } - const defaultValues: NoteFormValues = { - serverId: note.data.serverId, - title: note.data.title, - category: note.data.category ?? "", - content: note.data.content, + serverId: "", + title: "", + category: "", + content: "", }; const form = useForm({ @@ -61,6 +54,27 @@ function RouteComponent() { }, }); + useEffect(() => { + if (!note.data) { + return; + } + + form.reset({ + serverId: note.data.serverId, + title: note.data.title, + category: note.data.category ?? "", + content: note.data.content, + }); + }, [note.data, form]); + + if (note.isLoading || servers.isLoading) { + return ; + } + + if (note.isError || servers.isError || !note.data || !servers.data) { + return ; + } + return (
diff --git a/apps/web/src/routes/dashboard.servers.$serverId.tsx b/apps/web/src/routes/dashboard.servers_.$serverId.tsx similarity index 93% rename from apps/web/src/routes/dashboard.servers.$serverId.tsx rename to apps/web/src/routes/dashboard.servers_.$serverId.tsx index a0253f7..625cc2b 100644 --- a/apps/web/src/routes/dashboard.servers.$serverId.tsx +++ b/apps/web/src/routes/dashboard.servers_.$serverId.tsx @@ -3,11 +3,12 @@ import { StatusBadge } from "@minmon/ui/components/status-badge"; import { useForm } from "@tanstack/react-form"; import { useMutation, useQuery } from "@tanstack/react-query"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; +import { useEffect } from "react"; import { toast } from "sonner"; import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui"; import { queryClient, trpc, trpcClient } from "@/utils/trpc"; -export const Route = createFileRoute("/dashboard/servers/$serverId")({ +export const Route = createFileRoute("/dashboard/servers_/$serverId")({ component: RouteComponent, }); @@ -45,23 +46,15 @@ function RouteComponent() { onError: (error) => toast.error(error.message), }); - if (server.isLoading) { - return ; - } - - if (server.isError || !server.data) { - return ; - } - const defaultValues: ServerFormValues = { - name: server.data.name, - primaryIpAddress: server.data.primaryIpAddress, - secondaryIpAddress: server.data.secondaryIpAddress ?? "", - operatingSystem: server.data.operatingSystem ?? "", - location: server.data.location ?? "", - provider: server.data.provider ?? "", - description: server.data.description ?? "", - status: server.data.status, + name: "", + primaryIpAddress: "", + secondaryIpAddress: "", + operatingSystem: "", + location: "", + provider: "", + description: "", + status: "active", }; const form = useForm({ @@ -71,6 +64,31 @@ function RouteComponent() { }, }); + useEffect(() => { + if (!server.data) { + return; + } + + form.reset({ + name: server.data.name, + primaryIpAddress: server.data.primaryIpAddress, + secondaryIpAddress: server.data.secondaryIpAddress ?? "", + operatingSystem: server.data.operatingSystem ?? "", + location: server.data.location ?? "", + provider: server.data.provider ?? "", + description: server.data.description ?? "", + status: server.data.status, + }); + }, [server.data, form]); + + if (server.isLoading) { + return ; + } + + if (server.isError || !server.data) { + return ; + } + return (
diff --git a/apps/web/src/routes/dashboard.services.$serviceId.tsx b/apps/web/src/routes/dashboard.services_.$serviceId.tsx similarity index 94% rename from apps/web/src/routes/dashboard.services.$serviceId.tsx rename to apps/web/src/routes/dashboard.services_.$serviceId.tsx index 598ee1d..2587697 100644 --- a/apps/web/src/routes/dashboard.services.$serviceId.tsx +++ b/apps/web/src/routes/dashboard.services_.$serviceId.tsx @@ -3,11 +3,12 @@ import { StatusBadge } from "@minmon/ui/components/status-badge"; import { useForm } from "@tanstack/react-form"; import { useMutation, useQuery } from "@tanstack/react-query"; import { createFileRoute, useNavigate } from "@tanstack/react-router"; +import { useEffect } from "react"; import { toast } from "sonner"; import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui"; import { queryClient, trpc, trpcClient } from "@/utils/trpc"; -export const Route = createFileRoute("/dashboard/services/$serviceId")({ +export const Route = createFileRoute("/dashboard/services_/$serviceId")({ component: RouteComponent, }); @@ -48,23 +49,15 @@ function RouteComponent() { onError: (error) => toast.error(error.message), }); - if (service.isLoading || servers.isLoading) { - return ; - } - - if (service.isError || servers.isError || !service.data || !servers.data) { - return ; - } - const defaultValues: ServiceFormValues = { - serverId: service.data.serverId, - name: service.data.name, - type: service.data.type, - internalPort: service.data.internalPort?.toString() ?? "", - externalPort: service.data.externalPort?.toString() ?? "", - protocol: service.data.protocol, - status: service.data.status, - description: service.data.description ?? "", + serverId: "", + name: "", + type: "web_app", + internalPort: "", + externalPort: "", + protocol: "http", + status: "active", + description: "", }; const form = useForm({ @@ -74,6 +67,31 @@ function RouteComponent() { }, }); + useEffect(() => { + if (!service.data) { + return; + } + + form.reset({ + serverId: service.data.serverId, + name: service.data.name, + type: service.data.type, + internalPort: service.data.internalPort?.toString() ?? "", + externalPort: service.data.externalPort?.toString() ?? "", + protocol: service.data.protocol, + status: service.data.status, + description: service.data.description ?? "", + }); + }, [service.data, form]); + + if (service.isLoading || servers.isLoading) { + return ; + } + + if (service.isError || servers.isError || !service.data || !servers.data) { + return ; + } + return (