Rebuilding Task.svelte component

frontend/config.js

@@ -1,4 +1,4 @@
 export const config = {
-  endpoint: "https://yt-dls-api.andreafazzi.eu",
+  endpoint: "http://localhost:8080",
   version: "bc2b5fe9c5d39cdea7379502b6d96ab232c711d1"
 }

frontend/src/Task.svelte

@@ -3,28 +3,34 @@
 
   export let endpoint: string
   export let url: string
-  
-  onMount(async () => {
+
+  let intervalID: NodeJS.Timer
+  let task
+  let videoInfo
+
+  onMount(startDownload)
+
+  async function startDownload() {
     const res = await fetch(`${endpoint}/task`, {method: 'POST', body: new URLSearchParams({'url': url})})
-    const videoInfo = await res.json()
-  })
+    videoInfo = await res.json()
+    
+    if (res.ok) {
+      intervalID = setInterval(async () => {
+	const res = await fetch(`${endpoint}/task/${videoInfo.ID}`);
+	task = await res.json();
+      }, 2000)
+    }
+    
+  }
   
 </script>
 
-{#await startDownload()}
-  <p>waiting...</p>
-{:then video_info}
-  <a href={download_path} class="list-group-item list-group-item-action" aria-current="true">
-    <div class="d-flex bd-highlight">
-      <div class="pb-2 flex-grow-1 bd-highlight"><h5>{video_info.Title}</h5></div>
-      <div class="pb-2 px-2 bd-highlight"><small>2 minutes ago</small></div>
-      {#if status.Status}
-	<div class="pb-2 px-2 bd-highlight"><span class={statusBadge[status.Status].class}>{statusBadge[status.Status].text}</span></div>
-      {/if}
-    </div>
-    <p><small>{url}</small></p>
-    <img alt="This is a thumbnail" src={video_info.Thumbnails[0].URL}/>
-</a>
-{:catch error}
-  <p style="color: red">{error.message}</p>
-{/await}
+
+{#if !videoInfo}
+  <p>Waiting...</p>
+{:else}
+  <p>Video ID: {videoInfo.ID}</p>
+  {#if task}
+    <p>{task.Status}</p>
+  {/if}
+{/if}