"use client"; import { Button, buttonVariants } from "@app/components/ui/button"; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@app/components/ui/form"; import { Input } from "@app/components/ui/input"; import { useToast } from "@app/hooks/useToast"; import { zodResolver } from "@hookform/resolvers/zod"; import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; import { Credenza, CredenzaBody, CredenzaClose, CredenzaContent, CredenzaDescription, CredenzaFooter, CredenzaHeader, CredenzaTitle } from "@app/components/Credenza"; import { useParams, useRouter } from "next/navigation"; import { ListSitesResponse } from "@server/routers/site"; import { formatAxiosError } from "@app/lib/api"; import { CheckIcon } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger } from "@app/components/ui/popover"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@app/components/ui/command"; import { CaretSortIcon } from "@radix-ui/react-icons"; import CustomDomainInput from "./[resourceId]/CustomDomainInput"; import { Axios, AxiosResponse } from "axios"; import { Resource } from "@server/db/schema"; import { useOrgContext } from "@app/hooks/useOrgContext"; import { subdomainSchema } from "@server/schemas/subdomainSchema"; import { createApiClient } from "@app/lib/api"; import { useEnvContext } from "@app/hooks/useEnvContext"; import { cn } from "@app/lib/cn"; const accountFormSchema = z.object({ subdomain: subdomainSchema, name: z.string(), siteId: z.number() }); type AccountFormValues = z.infer; type CreateResourceFormProps = { open: boolean; setOpen: (open: boolean) => void; }; export default function CreateResourceForm({ open, setOpen }: CreateResourceFormProps) { const { toast } = useToast(); const api = createApiClient(useEnvContext()); const [loading, setLoading] = useState(false); const params = useParams(); const orgId = params.orgId; const router = useRouter(); const { org } = useOrgContext(); const [sites, setSites] = useState([]); const [domainSuffix, setDomainSuffix] = useState(org.org.domain); const form = useForm({ resolver: zodResolver(accountFormSchema), defaultValues: { subdomain: "", name: "My Resource" } }); useEffect(() => { if (!open) { return; } const fetchSites = async () => { const res = await api.get>( `/org/${orgId}/sites/` ); setSites(res.data.data.sites); if (res.data.data.sites.length > 0) { form.setValue("siteId", res.data.data.sites[0].siteId); } }; fetchSites(); }, [open]); async function onSubmit(data: AccountFormValues) { console.log(data); const res = await api .put>( `/org/${orgId}/site/${data.siteId}/resource/`, { name: data.name, subdomain: data.subdomain // subdomain: data.subdomain, } ) .catch((e) => { toast({ variant: "destructive", title: "Error creating resource", description: formatAxiosError( e, "An error occurred when creating the resource" ) }); }); if (res && res.status === 201) { const id = res.data.data.resourceId; // navigate to the resource page router.push(`/${orgId}/settings/resources/${id}`); } } return ( <> { setOpen(val); setLoading(false); // reset all values form.reset(); }} > Create Resource Create a new resource to proxy requests to your app
( Name This is the name that will be displayed for this resource. )} /> ( Subdomain form.setValue( "subdomain", value ) } /> This is the fully qualified domain name that will be used to access the resource. )} /> ( Site No site found. {sites.map( (site) => ( { form.setValue( "siteId", site.siteId ); }} > { site.name } ) )} This is the site that will be used in the dashboard. )} />
); }