try catch if getting sandboxes errors

e2b-dev · Jul 15, 2024 · c6e3dd4 · c6e3dd4
1 parent 2e71880
commit c6e3dd4
Showing 1 changed file with 45 additions and 56 deletions.
diff --git a/apps/docs/src/components/Dashboard/Sandboxes.tsx b/apps/docs/src/components/Dashboard/Sandboxes.tsx
@@ -10,28 +10,33 @@ import {
 import { useState } from 'react'
 import { useEffect } from 'react'
 
-const fakeSandboxes = [
-  {
-    id: '1',
-    template: 'base',
-    cpuCount: 2,
-    memoryMB: 512,
-    startedAt: '2023-11-12T10:21:33.000Z',
-    clientID: '1',
-  },
-  {
-    id: '2',
-    template: 'base',
-    cpuCount: 2,
-    memoryMB: 512,
-    startedAt: '2023-05-16T10:01:23.000Z',
-    clientID: '1',
-  },
-]
+interface Sandbox {
+  sandboxID: string
+  templateID: string
+  cpuCount: number
+  memoryMB: number
+  startedAt: string
+  clientID: string
+}
+
+export const SandboxesContent = ({ user }) => {
+  const [runningSandboxes, setRunningSandboxes] = useState<Sandbox[]>([])
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const apiKey = user?.apiKeys[0]?.api_key
+      if (apiKey) {
+        fetchSandboxes(apiKey).then((newSandboxes) => {
+          if (newSandboxes) {
+            setRunningSandboxes(newSandboxes)
+          }
+        })
+      }
+    }, 2000)
 
-export const SandboxesContent = () => {
-  const [runningSandboxes, setRunningSandboxes] = useState(fakeSandboxes)
-  useSimulateSandboxLifecycle(runningSandboxes, setRunningSandboxes)
+    // Cleanup interval on component unmount
+    return () => clearInterval(interval)
+  }, [user])
 
   return (
     <div className="flex flex-col justify-center">
@@ -53,9 +58,9 @@ export const SandboxesContent = () => {
           {runningSandboxes.map((sandbox) => (
             <TableRow 
             className='hover:bg-orange-300/10 dark:hover:bg-orange-300/10 border-b border-white/5'
-            key={sandbox.id}>
-              <TableCell>{sandbox.id}</TableCell>
-              <TableCell>{sandbox.template}</TableCell>
+            key={sandbox.sandboxID}>
+              <TableCell>{sandbox.sandboxID}</TableCell>
+              <TableCell>{sandbox.templateID}</TableCell>
               <TableCell>{sandbox.cpuCount}</TableCell>
               <TableCell>{sandbox.memoryMB}</TableCell>
               <TableCell>{new Date(sandbox.startedAt).toLocaleString('en-UK', {timeZoneName: 'short'})}</TableCell>
@@ -69,39 +74,23 @@ export const SandboxesContent = () => {
   )
 }
 
-const useSimulateSandboxLifecycle = (runningSandboxes, setRunningSandboxes) => {
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setRunningSandboxes((prevSandboxes) => {
-        // Decide randomly to add or remove a sandbox
-        const shouldAdd = Math.random() > 0.5
-        if (shouldAdd) {
-          // Add a new sandbox
-          const newSandbox = generateNewSandbox()
-          return [...prevSandboxes, newSandbox]
-        } else if (prevSandboxes.length > 0) {
-          // Remove a random sandbox
-          const randomIndex = Math.floor(Math.random() * prevSandboxes.length)
-          return prevSandboxes.filter((_, index) => index !== randomIndex)
-        }
-        return prevSandboxes
-      })
-    }, 1000) // Run every second
+const fetchSandboxes = async (apiKey: string): Promise<Sandbox[]> => {
 
-    // Cleanup interval on component unmount
-    return () => clearInterval(interval)
-  }, [setRunningSandboxes])
-}
+  const res = await fetch('https://api.e2b.dev/sandboxes', {
+    method: 'GET',
+    headers: {
+      'X-API-KEY': apiKey,
+    }
+  })
+  try {
+    const data: Sandbox[] = await res.json()
+    data.sort((a, b) => new Date(a.startedAt).getTime() - new Date(b.startedAt).getTime())
+    return data
+  } catch (e) {
+    // TODO: add sentry event here
+    return []
+  }
+} 
 
 
-const generateNewSandbox = () => {
-  return {
-    id: (Math.random() * 10000).toFixed(0),
-    template: 'base',
-    cpuCount: Math.floor(Math.random() * 4) + 1,
-    memoryMB: Math.floor(Math.random() * 2048) + 512,
-    startedAt: new Date().toISOString(),
-    clientID: (Math.random() * 10).toFixed(0),
-  }
-}