API

API with first two endpoint to fetch information from Tahoe to
SvelteKit.

packages/.env.example

@@ -0,0 +1 @@
+TAHOE_API=http://x.x.x.x:xxxx

packages/package.json

@@ -22,5 +22,8 @@
 		"svelte": "^5.0.0",
 		"vite": "^5.0.3",
 		"vitest": "^2.0.4"
+	},
+	"dependencies": {
+		"dotenv": "^16.4.5"
 	}
 }

packages/pnpm-lock.yaml

@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      dotenv:
+        specifier: ^16.4.5
+        version: 16.4.5
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
@@ -419,6 +423,10 @@ packages:
   devalue@5.1.1:
     resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
 
+  dotenv@16.4.5:
+    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+    engines: {node: '>=12'}
+
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -941,6 +949,8 @@ snapshots:
 
   devalue@5.1.1: {}
 
+  dotenv@16.4.5: {}
+
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5

packages/src/routes/api/[slug]/+server.js

@@ -0,0 +1,41 @@
+import { json } from '@sveltejs/kit'
+import { env } from '$env/dynamic/private'
+
+export const POST = async ({ params, request }) => {
+  const { slug } = params
+  const body = await request.json()
+
+  switch (slug) {
+    case 'createAlias': {
+      try {
+        const url = `${env.TAHOE_API}/uri?t=mkdir`
+        const response = await fetch(url, { method: 'POST' })
+        const capKey = await response.json()
+
+        return json({ success: true, capKey })
+      } catch (err) {
+        console.log({ err })
+        return json({ success: false, code: 500, error: err })
+      }
+    }
+
+    case 'listDirectories': {
+      try {
+        const encodedCapKey = body.capKey.replace(/:/g, '%3A')
+        const url = `${env.TAHOE_API}/uri/${encodedCapKey}?t=json`
+        const response = await fetch(url, { method: 'GET' })
+        const list = await response.json()
+        console.log({ url, list })
+
+        return json({ success: true, list })
+      } catch (err) {
+        console.log({ err })
+        return json({ success: false, code: 500, error: err })
+      }
+    }
+
+    default: {
+      return json({ success: true })
+    }
+  }
+}

packages/src/routes/dashboard/+page.server.js

@@ -1,12 +1,36 @@
 import { fail } from '@sveltejs/kit'
 
 export const actions = {
-  createCapKey: async ({ request }) => {
+  createCapKey: async ({ request, fetch }) => {
     try {
-      return { success: true, endpoint: 'createCapKey', capKey: 123 }
+      const response = await fetch('/api/createAlias', { method: 'POST' })
+      const jsonResponse = await response.json()
+
+      return { endpoint: 'createCapKey', capKey: jsonResponse.capKey }
     } catch (err) {
       console.log({ err })
       return fail(500, { endpoint: 'createCapKey', error: err })
     }
+  },
+
+  listDirectories: async ({ request, fetch }) => {
+    const formData = await request.formData()
+    const capKey = formData.get('capKeyInput')
+    const encoded = encodeURIComponent(capKey)
+
+    try {
+      const response = await fetch('/api/listDirectories', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ capKey: encoded })
+      })
+      const jsonResponse = await response.json()
+      if (!jsonResponse.success) throw new Error(jsonResponse.error)
+
+      return { endpoint: 'listDirectories', list: jsonResponse.list, capKey }
+    } catch (err) {
+      console.log({ err })
+      return fail(500, { endpoint: 'listDirectories', error: err })
+    }
   }
 }

packages/src/routes/dashboard/+page.svelte

@@ -2,6 +2,7 @@
   import { enhance } from '$app/forms'
   import { beforeNavigate } from '$app/navigation'
 
+  let { form } = $props()
   let capKey = $state()
   let capKeyInput = $state()
   let newCapKey = $state()
@@ -19,8 +20,18 @@
   const enhanceForm = () => {
     return async ({ result, update }) => {
       await update()
+
+      if (result.status === 200) {
+        switch (result.data.endpoint) {
+          case 'createCapKey': {
             newCapKey = result.data.capKey
           }
+          case 'listDirectories': {
+            capKey = result.data.capKey
+          }
+        }
+      }
+    }
   }
 
   beforeNavigate(({ cancel }) => {
@@ -29,6 +40,12 @@
       alert('Please confirm you copied and saved the cap key.')
     }
   })
+
+  $effect(() => {
+    if (form?.error) console.log({ error: form.error })
+  })
+
+  $effect(() => console.log({ form }))
 </script>
 
 <svelte:head>
@@ -37,19 +54,20 @@
 </svelte:head>
 <h1>Dashboard</h1>
 
-{#if !capKey && !newCapKey}
+{#if !form?.capKey && !newCapKey}
   <div class='cap-key-div add'>
-    <div class='cap-key'>
+    <form action='?/listDirectories' class='cap-key' method='post' enctype='form-data' use:enhance={enhanceForm}>
       <label for='capKeyInput'>Cap key:</label>
-      <input type='text' name='capKeyInput' bind:value={capKeyInput} />
-      <button onclick={submitKey}>Submit</button>
-    </div>
+      <input type='text' name='capKeyInput' />
+
+      <button type='submit'>Submit</button>
+    </form>
 
     <form action='?/createCapKey' method='post' enctype='form-data' use:enhance={enhanceForm}>
       <button type='submit'>New cap key</button>
     </form>
   </div>
-{:else if !capKey && newCapKey}
+{:else if !form?.capKey && newCapKey}
   <div class='cap-key-div get'>
     <label for='newCapKey'><h2>New cap key</h2></label>
     <input type='text' id='newCapKey' name='newCapKey' value={newCapKey} />
@@ -73,7 +91,7 @@
   </div>
 {:else}
   <h2>File tree</h2>
-  <p>{capKey}</p>
+  <p>{form.capKey}</p>
 {/if}
 
 <style>