env context and refactor api support different ports

src/app/[orgId]/settings/access/roles/components/CreateRoleForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import api from "@app/api";
 import { Button } from "@app/components/ui/button";
 import {
     Form,
@@ -30,6 +29,8 @@ import {
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { CreateRoleBody, CreateRoleResponse } from "@server/routers/role";
 import { formatAxiosError } from "@app/lib/utils";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 type CreateRoleFormProps = {
     open: boolean;
@@ -52,6 +53,8 @@ export default function CreateRoleForm({
 
     const [loading, setLoading] = useState(false);
 
+    const api = createApiClient(useEnvContext());
+
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {

src/app/[orgId]/settings/access/roles/components/DeleteRoleForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import api from "@app/api";
 import { Button } from "@app/components/ui/button";
 import {
     Form,
@@ -37,6 +36,8 @@ import {
 } from "@app/components/ui/select";
 import { RoleRow } from "./RolesTable";
 import { formatAxiosError } from "@app/lib/utils";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 type CreateRoleFormProps = {
     open: boolean;
@@ -61,6 +62,8 @@ export default function DeleteRoleForm({
     const [loading, setLoading] = useState(false);
     const [roles, setRoles] = useState<ListRolesResponse["roles"]>([]);
 
+    const api = createApiClient(useEnvContext());
+
     useEffect(() => {
         async function fetchRoles() {
             const res = await api

src/app/[orgId]/settings/access/roles/components/RolesTable.tsx

@@ -11,13 +11,14 @@ import { Button } from "@app/components/ui/button";
 import { ArrowUpDown, Crown, MoreHorizontal } from "lucide-react";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import api from "@app/api";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { useToast } from "@app/hooks/useToast";
 import { RolesDataTable } from "./RolesDataTable";
 import { Role } from "@server/db/schema";
 import CreateRoleForm from "./CreateRoleForm";
 import DeleteRoleForm from "./DeleteRoleForm";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 export type RoleRow = Role;
 
@@ -33,6 +34,8 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
 
     const [roleToRemove, setUserToRemove] = useState<RoleRow | null>(null);
 
+    const api = createApiClient(useEnvContext());
+
     const { org } = useOrgContext();
     const { toast } = useToast();
 

src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import api from "@app/api";
 import {
     Form,
     FormControl,
@@ -30,6 +29,8 @@ import { useParams } from "next/navigation";
 import { Button } from "@app/components/ui/button";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { formatAxiosError } from "@app/lib/utils";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const formSchema = z.object({
     email: z.string().email({ message: "Please enter a valid email" }),
@@ -40,6 +41,8 @@ export default function AccessControlsPage() {
     const { toast } = useToast();
     const { orgUser: user } = userOrgUserContext();
 
+    const api = createApiClient(useEnvContext());
+
     const { orgId } = useParams();
 
     const [loading, setLoading] = useState(false);

src/app/[orgId]/settings/access/users/components/InviteUserForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import api from "@app/api";
 import { Button } from "@app/components/ui/button";
 import {
     Form,
@@ -39,6 +38,8 @@ import {
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { ListRolesResponse } from "@server/routers/role";
 import { formatAxiosError } from "@app/lib/utils";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 type InviteUserFormProps = {
     open: boolean;
@@ -55,6 +56,8 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
     const { toast } = useToast();
     const { org } = useOrgContext();
 
+    const api = createApiClient(useEnvContext());
+
     const [inviteLink, setInviteLink] = useState<string | null>(null);
     const [loading, setLoading] = useState(false);
     const [expiresInDays, setExpiresInDays] = useState(1);

src/app/[orgId]/settings/access/users/components/UsersTable.tsx

@@ -14,12 +14,13 @@ import { useState } from "react";
 import InviteUserForm from "./InviteUserForm";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { useUserContext } from "@app/hooks/useUserContext";
-import api from "@app/api";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { useToast } from "@app/hooks/useToast";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { formatAxiosError } from "@app/lib/utils";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 export type UserRow = {
     id: string;
@@ -42,6 +43,8 @@ export default function UsersTable({ users: u }: UsersTableProps) {
 
     const router = useRouter();
 
+    const api  = createApiClient(useEnvContext());
+
     const user = useUserContext();
     const { org } = useOrgContext();
     const { toast } = useToast();

src/app/[orgId]/settings/components/Header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import api from "@app/api";
+import { createApiClient } from "@app/api";
 import { Avatar, AvatarFallback } from "@app/components/ui/avatar";
 import { Button } from "@app/components/ui/button";
 import {
@@ -33,6 +33,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@app/components/ui/select";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useToast } from "@app/hooks/useToast";
 import { cn, formatAxiosError } from "@app/lib/utils";
 import { ListOrgsResponse } from "@server/routers/org";
@@ -55,6 +56,8 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) {
 
     const router = useRouter();
 
+    const api = createApiClient(useEnvContext());
+
     function getInitials() {
         if (name) {
             const [firstName, lastName] = name.split(" ");

src/app/[orgId]/settings/resources/[resourceId]/authentication/components/SetResourcePasswordForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import api from "@app/api";
 import { Button } from "@app/components/ui/button";
 import {
     Form,
@@ -30,6 +29,8 @@ import {
 import { formatAxiosError } from "@app/lib/utils";
 import { AxiosResponse } from "axios";
 import { Resource } from "@server/db/schema";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const setPasswordFormSchema = z.object({
     password: z.string().min(4).max(100),
@@ -56,6 +57,8 @@ export default function SetResourcePasswordForm({
 }: SetPasswordFormProps) {
     const { toast } = useToast();
 
+    const api = createApiClient(useEnvContext());
+
     const [loading, setLoading] = useState(false);
 
     const form = useForm<SetPasswordFormValues>({

src/app/[orgId]/settings/resources/[resourceId]/authentication/components/SetResourcePincodeForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import api from "@app/api";
 import { Button } from "@app/components/ui/button";
 import {
     Form,
@@ -35,6 +34,8 @@ import {
     InputOTPGroup,
     InputOTPSlot,
 } from "@app/components/ui/input-otp";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const setPincodeFormSchema = z.object({
     pincode: z.string().length(6),
@@ -63,6 +64,8 @@ export default function SetResourcePincodeForm({
 
     const [loading, setLoading] = useState(false);
 
+    const api = createApiClient(useEnvContext());
+
     const form = useForm<SetPincodeFormValues>({
         resolver: zodResolver(setPincodeFormSchema),
         defaultValues,

src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import api from "@app/api";
 import { ListRolesResponse } from "@server/routers/role";
 import { useToast } from "@app/hooks/useToast";
 import { useOrgContext } from "@app/hooks/useOrgContext";
@@ -36,6 +35,8 @@ import { Binary, Key, ShieldCheck } from "lucide-react";
 import SetResourcePasswordForm from "./components/SetResourcePasswordForm";
 import { Separator } from "@app/components/ui/separator";
 import SetResourcePincodeForm from "./components/SetResourcePincodeForm";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const UsersRolesFormSchema = z.object({
     roles: z.array(
@@ -58,6 +59,8 @@ export default function ResourceAuthenticationPage() {
     const { resource, updateResource, authInfo, updateAuthInfo } =
         useResourceContext();
 
+    const api = createApiClient(useEnvContext());
+
     const [pageLoading, setPageLoading] = useState(true);
 
     const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>(

src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx

@@ -12,7 +12,6 @@ import {
     SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
-import api from "@app/api";
 import { AxiosResponse } from "axios";
 import { ListTargetsResponse } from "@server/routers/target/listTargets";
 import { useForm } from "react-hook-form";
@@ -49,9 +48,9 @@ import { useToast } from "@app/hooks/useToast";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import { ArrayElement } from "@server/types/ArrayElement";
-import { Dot } from "lucide-react";
 import { formatAxiosError } from "@app/lib/utils";
-import { Separator } from "@radix-ui/react-separator";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { createApiClient } from "@app/api";
 
 const addTargetSchema = z.object({
     ip: z.string().ip(),
@@ -83,6 +82,8 @@ export default function ReverseProxyTargets(props: {
     const { toast } = useToast();
     const { resource, updateResource } = useResourceContext();
 
+    const api = createApiClient(useEnvContext());
+
     const [targets, setTargets] = useState<LocalTarget[]>([]);
     const [targetsToRemove, setTargetsToRemove] = useState<number[]>([]);
     const [sslEnabled, setSslEnabled] = useState(resource.ssl);

src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx

@@ -33,7 +33,6 @@ import { useResourceContext } from "@app/hooks/useResourceContext";
 import { ListSitesResponse } from "@server/routers/site";
 import { useEffect, useState } from "react";
 import { AxiosResponse } from "axios";
-import api from "@app/api";
 import { useParams, useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { GetResourceAuthInfoResponse } from "@server/routers/resource";
@@ -43,6 +42,8 @@ import { useOrgContext } from "@app/hooks/useOrgContext";
 import CustomDomainInput from "../components/CustomDomainInput";
 import ResourceInfoBox from "../components/ResourceInfoBox";
 import { subdomainSchema } from "@server/schemas/subdomainSchema";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const GeneralFormSchema = z.object({
     name: z.string(),
@@ -61,6 +62,8 @@ export default function GeneralForm() {
 
     const orgId = params.orgId;
 
+    const api = createApiClient(useEnvContext());
+
     const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
     const [saveLoading, setSaveLoading] = useState(false);
     const [domainSuffix, setDomainSuffix] = useState(org.org.domain);

src/app/[orgId]/settings/resources/components/CreateResourceForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import api from "@app/api";
 import { Button, buttonVariants } from "@app/components/ui/button";
 import {
     Form,
@@ -9,7 +8,7 @@ import {
     FormField,
     FormItem,
     FormLabel,
-    FormMessage,
+    FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
 import { useToast } from "@app/hooks/useToast";
@@ -25,7 +24,7 @@ import {
     CredenzaDescription,
     CredenzaFooter,
     CredenzaHeader,
-    CredenzaTitle,
+    CredenzaTitle
 } from "@app/components/Credenza";
 import { useParams, useRouter } from "next/navigation";
 import { ListSitesResponse } from "@server/routers/site";
@@ -34,7 +33,7 @@ import { CheckIcon } from "lucide-react";
 import {
     Popover,
     PopoverContent,
-    PopoverTrigger,
+    PopoverTrigger
 } from "@app/components/ui/popover";
 import {
     Command,
@@ -42,7 +41,7 @@ import {
     CommandGroup,
     CommandInput,
     CommandItem,
-    CommandList,
+    CommandList
 } from "@app/components/ui/command";
 import { CaretSortIcon } from "@radix-ui/react-icons";
 import CustomDomainInput from "../[resourceId]/components/CustomDomainInput";
@@ -50,11 +49,13 @@ 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/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const accountFormSchema = z.object({
     subdomain: subdomainSchema,
     name: z.string(),
-    siteId: z.number(),
+    siteId: z.number()
 });
 
 type AccountFormValues = z.infer<typeof accountFormSchema>;
@@ -66,10 +67,12 @@ type CreateResourceFormProps = {
 
 export default function CreateResourceForm({
     open,
-    setOpen,
+    setOpen
 }: CreateResourceFormProps) {
     const { toast } = useToast();
 
+    const api = createApiClient(useEnvContext());
+
     const [loading, setLoading] = useState(false);
     const params = useParams();
 
@@ -85,8 +88,8 @@ export default function CreateResourceForm({
         resolver: zodResolver(accountFormSchema),
         defaultValues: {
             subdomain: "",
-            name: "My Resource",
-        },
+            name: "My Resource"
+        }
     });
 
     useEffect(() => {
@@ -96,7 +99,7 @@ export default function CreateResourceForm({
 
         const fetchSites = async () => {
             const res = await api.get<AxiosResponse<ListSitesResponse>>(
-                `/org/${orgId}/sites/`,
+                `/org/${orgId}/sites/`
             );
             setSites(res.data.data.sites);
 
@@ -116,9 +119,9 @@ export default function CreateResourceForm({
                 `/org/${orgId}/site/${data.siteId}/resource/`,
                 {
                     name: data.name,
-                    subdomain: data.subdomain,
+                    subdomain: data.subdomain
                     // subdomain: data.subdomain,
-                },
+                }
             )
             .catch((e) => {
                 toast({
@@ -126,8 +129,8 @@ export default function CreateResourceForm({
                     title: "Error creating resource",
                     description: formatAxiosError(
                         e,
-                        "An error occurred when creating the resource",
-                    ),
+                        "An error occurred when creating the resource"
+                    )
                 });
             });
 
@@ -198,7 +201,7 @@ export default function CreateResourceForm({
                                                     onChange={(value) =>
                                                         form.setValue(
                                                             "subdomain",
-                                                            value,
+                                                            value
                                                         )
                                                     }
                                                 />
@@ -227,14 +230,14 @@ export default function CreateResourceForm({
                                                             className={cn(
                                                                 "w-[350px] justify-between",
                                                                 !field.value &&
-                                                                    "text-muted-foreground",
+                                                                    "text-muted-foreground"
                                                             )}
                                                         >
                                                             {field.value
                                                                 ? sites.find(
                                                                       (site) =>
                                                                           site.siteId ===
-                                                                          field.value,
+                                                                          field.value
                                                                   )?.name
                                                                 : "Select site"}
                                                             <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -261,7 +264,7 @@ export default function CreateResourceForm({
                                                                             onSelect={() => {
                                                                                 form.setValue(
                                                                                     "siteId",
-                                                                                    site.siteId,
+                                                                                    site.siteId
                                                                                 );
                                                                             }}
                                                                         >
@@ -271,14 +274,14 @@ export default function CreateResourceForm({
                                                                                     site.siteId ===
                                                                                         field.value
                                                                                         ? "opacity-100"
-                                                                                        : "opacity-0",
+                                                                                        : "opacity-0"
                                                                                 )}
                                                                             />
                                                                             {
                                                                                 site.name
                                                                             }
                                                                         </CommandItem>
-                                                                    ),
+                                                                    )
                                                                 )}
                                                             </CommandGroup>
                                                         </CommandList>

src/app/[orgId]/settings/resources/components/ResourcesTable.tsx

@@ -21,13 +21,14 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import api from "@app/api";
 import CreateResourceForm from "./CreateResourceForm";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { set } from "zod";
 import { formatAxiosError } from "@app/lib/utils";
 import { useToast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 export type ResourceRow = {
     id: number;
@@ -49,6 +50,8 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
 
     const { toast } = useToast();
 
+    const api = createApiClient(useEnvContext());
+
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedResource, setSelectedResource] =

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -15,11 +15,12 @@ import {
 import { Input } from "@/components/ui/input";
 import { useSiteContext } from "@app/hooks/useSiteContext";
 import { useForm } from "react-hook-form";
-import api from "@app/api";
 import { useToast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { formatAxiosError } from "@app/lib/utils";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const GeneralFormSchema = z.object({
     name: z.string(),
@@ -31,6 +32,8 @@ export default function GeneralPage() {
     const { site, updateSite } = useSiteContext();
     const { toast } = useToast();
 
+    const api = createApiClient(useEnvContext());
+
     const router = useRouter();
 
     const form = useForm<GeneralFormValues>({

src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import api from "@app/api";
 import { Button, buttonVariants } from "@app/components/ui/button";
 import {
     Form,
@@ -41,6 +40,8 @@ import {
     SelectValue,
 } from "@app/components/ui/select";
 import { formatAxiosError } from "@app/lib/utils";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const method = [
     { label: "Newt", value: "newt" },
@@ -74,6 +75,8 @@ type CreateSiteFormProps = {
 export default function CreateSiteForm({ open, setOpen }: CreateSiteFormProps) {
     const { toast } = useToast();
 
+    const api = createApiClient(useEnvContext());
+
     const [loading, setLoading] = useState(false);
 
     const params = useParams();

src/app/[orgId]/settings/sites/components/SitesTable.tsx

@@ -12,13 +12,14 @@ import { Button } from "@app/components/ui/button";
 import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import api from "@app/api";
 import { AxiosResponse } from "axios";
 import { useState } from "react";
 import CreateSiteForm from "./CreateSiteForm";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { useToast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/utils";
+import { createApiClient } from "@app/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
 export type SiteRow = {
     id: number;
@@ -44,6 +45,8 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
 
+    const api = createApiClient(useEnvContext());
+
     const callApi = async () => {
         const res = await api.put<AxiosResponse<any>>(`/newt`);
         console.log(res);