Improve naming

e2b-dev · Dec 19, 2024 · 713c920 · 713c920
1 parent f7d51d8
commit 713c920
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 84 deletions.
diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@@ -87,9 +87,9 @@ const Dashboard = ({ user }) => {
   const [teams, setTeams] = useState<Team[]>([])
   const [currentTeam, setCurrentTeam] = useState<Team | null>(null)
 
-  const apiUrlState = useLocalStorage(
-    'apiUrl',
-    process.env.NEXT_PUBLIC_API_URL || ''
+  const domainState = useLocalStorage(
+    'e2bDomain',
+    process.env.NEXT_PUBLIC_DOMAIN || ''
   )
 
   const initialTab =
@@ -162,7 +162,7 @@ const Dashboard = ({ user }) => {
             teams={teams}
             setTeams={setTeams}
             setCurrentTeam={setCurrentTeam}
-            apiUrlState={apiUrlState}
+            domainState={domainState}
           />
         </div>
       </>
@@ -250,37 +250,37 @@ function MainContent({
   teams,
   setTeams,
   setCurrentTeam,
-  apiUrlState,
+  domainState,
 }: {
   selectedItem: MenuLabel
   user: E2BUser
   team: Team
   teams: Team[]
   setTeams: (teams: Team[]) => void
   setCurrentTeam: (team: Team) => void
-  apiUrlState: [string, (value: string) => void]
+  domainState: [string, (value: string) => void]
 }) {
   switch (selectedItem) {
     case 'personal':
-      return <PersonalContent user={user} apiUrl={apiUrlState[0]} />
+      return <PersonalContent user={user} domain={domainState[0]} />
     case 'keys':
       return (
-        <KeysContent currentTeam={team} user={user} apiUrl={apiUrlState[0]} />
+        <KeysContent currentTeam={team} user={user} domain={domainState[0]} />
       )
     case 'sandboxes':
-      return <SandboxesContent team={team} apiUrl={apiUrlState[0]} />
+      return <SandboxesContent team={team} domain={domainState[0]} />
     case 'templates':
       return (
         <TemplatesContent
           user={user}
           teamId={team.id}
-          apiUrl={apiUrlState[0]}
+          domain={domainState[0]}
         />
       )
     case 'usage':
-      return <UsageContent team={team} apiUrl={apiUrlState[0]} />
+      return <UsageContent team={team} domain={domainState[0]} />
     case 'billing':
-      return <BillingContent team={team} apiUrl={apiUrlState[0]} />
+      return <BillingContent team={team} domain={domainState[0]} />
     case 'team':
       return (
         <TeamContent
@@ -289,11 +289,11 @@ function MainContent({
           teams={teams}
           setTeams={setTeams}
           setCurrentTeam={setCurrentTeam}
-          apiUrl={apiUrlState[0]}
+          domain={domainState[0]}
         />
       )
     case 'developer':
-      return <DeveloperContent domainState={apiUrlState} />
+      return <DeveloperContent domainState={domainState} />
     default:
       return <ErrorContent />
   }

diff --git a/apps/web/src/app/(dashboard)/dashboard/utils.ts b/apps/web/src/app/(dashboard)/dashboard/utils.ts
@@ -0,0 +1,27 @@
+export function getBaseUrl(domain: string) {
+  let url = domain
+  if (!domain.startsWith('http')) {
+    const local = domain === 'localhost' || domain.startsWith('127.0.0.')
+    url = `http${local ? '' : 's'}://${domain}`
+  }
+
+  const parsedUrl = new URL(url)
+
+  return parsedUrl.toString()
+}
+
+export function getBillingUrl(domain: string) {
+  let url = domain
+  const local = domain === 'localhost' || domain.startsWith('127.0.0.')
+
+  if (!domain.startsWith('http')) {
+    url = `http${local ? '' : 's'}://${domain}`
+  }
+
+  const parsedUrl = new URL(url)
+  if (!local) {
+    parsedUrl.hostname = `billing.${parsedUrl.hostname}`
+  }
+
+  return parsedUrl.toString()
+}
diff --git a/apps/web/src/components/Dashboard/Billing.tsx b/apps/web/src/components/Dashboard/Billing.tsx
@@ -12,6 +12,7 @@ import {
 } from '../ui/table'
 import SwitchToHobbyButton from '@/components/Pricing/SwitchToHobbyButton'
 import SwitchToProButton from '@/components/Pricing/SwitchToProButton'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 function formatCurrency(value: number) {
   return value.toLocaleString('en-US', {
@@ -29,10 +30,10 @@ interface Invoice {
 
 export const BillingContent = ({
   team,
-  apiUrl,
+  domain,
 }: {
   team: Team
-  apiUrl: string
+  domain: string
 }) => {
   const [invoices, setInvoices] = useState<Invoice[]>([])
   const [credits, setCredits] = useState<number | null>(null)
@@ -41,7 +42,7 @@ export const BillingContent = ({
     const getInvoices = async function getInvoices() {
       setInvoices([])
       const res = await fetch(
-        `https://billing.${apiUrl}/teams/${team.id}/invoices`,
+        `https://billing.${domain}/teams/${team.id}/invoices`,
         {
           headers: {
             'X-Team-API-Key': team.apiKeys[0],
@@ -59,7 +60,7 @@ export const BillingContent = ({
 
       setCredits(null)
       const creditsRes = await fetch(
-        `https://billing.${apiUrl}/teams/${team.id}/usage`,
+        `${getBillingUrl(domain)}/teams/${team.id}/usage`,
         {
           headers: {
             'X-Team-API-Key': team.apiKeys[0],
@@ -71,7 +72,7 @@ export const BillingContent = ({
     }
 
     getInvoices()
-  }, [team])
+  }, [domain, team])
 
   return (
     <div className="flex flex-col w-full">
@@ -114,7 +115,7 @@ export const BillingContent = ({
       <div className="flex flex-col items-start justify-center pb-10">
         <div className="flex items-center space-x-4">
           <h2>Pro tier</h2>
-          <SwitchToProButton apiUrl={apiUrl} team={team} />
+          <SwitchToProButton domain={domain} team={team} />
         </div>
         <ul className="flex flex-col list-disc list-inside text-neutral-400">
           <li>One-time $100 credits</li>

diff --git a/apps/web/src/components/Dashboard/Keys.tsx b/apps/web/src/components/Dashboard/Keys.tsx
@@ -28,6 +28,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 type TeamApiKey = {
   id: string
@@ -46,11 +47,11 @@ type TeamApiKey = {
 export const KeysContent = ({
   currentTeam,
   user,
-  apiUrl,
+  domain,
 }: {
   currentTeam: Team
   user: E2BUser
-  apiUrl: string
+  domain: string
 }) => {
   const { toast } = useToast()
   const [isKeyDialogOpen, setIsKeyDialogOpen] = useState(false)
@@ -60,11 +61,10 @@ export const KeysContent = ({
   const [newApiKeyInput, setNewApiKeyInput] = useState<string>('')
   const [apiKeys, setApiKeys] = useState<TeamApiKey[]>([])
 
-  console.log(apiUrl)
   useEffect(() => {
     async function fetchApiKeys() {
       const res = await fetch(
-        `https://billing.${apiUrl}/teams/${currentTeam.id}/api-keys`,
+        `${getBillingUrl(domain)}/teams/${currentTeam.id}/api-keys`,
         {
           headers: {
             'X-USER-ACCESS-TOKEN': user.accessToken,
@@ -86,7 +86,7 @@ export const KeysContent = ({
     }
 
     fetchApiKeys()
-  }, [apiUrl, currentTeam])
+  }, [domain, currentTeam, user.accessToken])
 
   async function deleteApiKey() {
     if (apiKeys.length === 1) {
@@ -98,7 +98,9 @@ export const KeysContent = ({
     }
 
     const res = await fetch(
-      `https://billing.${apiUrl}/teams/${currentTeam.id}/api-keys/${currentKey?.id}`,
+      `${getBillingUrl(domain)}/teams/${currentTeam.id}/api-keys/${
+        currentKey?.id
+      }`,
       {
         method: 'DELETE',
         headers: {
@@ -121,7 +123,7 @@ export const KeysContent = ({
 
   async function createApiKey() {
     const res = await fetch(
-      `https://billing.${apiUrl}/teams/${currentTeam.id}/api-keys`,
+      `${getBillingUrl(domain)}/teams/${currentTeam.id}/api-keys`,
       {
         method: 'POST',
         headers: {
@@ -153,7 +155,9 @@ export const KeysContent = ({
 
   async function updateApiKey() {
     const res = await fetch(
-      `https://billing.${apiUrl}/teams/${currentTeam.id}/api-keys/${currentKey?.id}`,
+      `${getBillingUrl(domain)}/teams/${currentTeam.id}/api-keys/${
+        currentKey?.id
+      }`,
       {
         method: 'PATCH',
         headers: {

diff --git a/apps/web/src/components/Dashboard/Personal.tsx b/apps/web/src/components/Dashboard/Personal.tsx
@@ -6,13 +6,14 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { Copy } from 'lucide-react'
 import { E2BUser } from '@/utils/useUser'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 export const PersonalContent = ({
   user,
-  apiUrl,
+  domain,
 }: {
   user: E2BUser
-  apiUrl: string
+  domain: string
 }) => {
   const { toast } = useToast()
   const [hovered, setHovered] = useState<boolean>(false)
@@ -33,7 +34,7 @@ export const PersonalContent = ({
   }
 
   const updateUserEmail = async () => {
-    const res = await fetch(`https://billing.${apiUrl}/users`, {
+    const res = await fetch(`${getBillingUrl(domain)}/users`, {
       method: 'PATCH',
       headers: {
         'Content-Type': 'application/json',

diff --git a/apps/web/src/components/Dashboard/Sandboxes.tsx b/apps/web/src/components/Dashboard/Sandboxes.tsx
@@ -10,6 +10,7 @@ import {
 import { useState } from 'react'
 import { useEffect } from 'react'
 import { Team } from '@/utils/useUser'
+import { getBaseUrl } from '@/app/(dashboard)/dashboard/utils'
 
 interface Sandbox {
   alias: string
@@ -25,18 +26,18 @@ interface Sandbox {
 
 export function SandboxesContent({
   team,
-  apiUrl,
+  domain,
 }: {
   team: Team
-  apiUrl: string
+  domain: string
 }) {
   const [runningSandboxes, setRunningSandboxes] = useState<Sandbox[]>([])
 
   useEffect(() => {
     function f() {
       const apiKey = team.apiKeys[0]
       if (apiKey) {
-        fetchSandboxes(apiUrl, apiKey).then((newSandboxes) => {
+        fetchSandboxes(domain, apiKey).then((newSandboxes) => {
           if (newSandboxes) {
             setRunningSandboxes(newSandboxes)
           }
@@ -101,10 +102,10 @@ export function SandboxesContent({
 }
 
 async function fetchSandboxes(
-  apiUrl: string,
+  domain: string,
   apiKey: string
 ): Promise<Sandbox[]> {
-  const res = await fetch(`${apiUrl}/sandboxes`, {
+  const res = await fetch(`${getBaseUrl(domain)}/sandboxes`, {
     method: 'GET',
     headers: {
       'X-API-KEY': apiKey,