Socket connection with managed state

2 files changed, 11 insertions, 16 deletions

diff --git a/assets/src/components/IncomingRequests.svelte b/assets/src/components/IncomingRequests.svelte
index 1db50af..bf08ffe 100644
--- a/assets/src/components/IncomingRequests.svelte
+++ b/assets/src/components/IncomingRequests.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
-    import { getToken, joinShareChannel } from "../network/socket";
+    import { getOwnToken, start, Type } from "../network/channel/connection";
+
     import requests from "../stores/requests";
 
-    const startConnection = async () => {
-        const token = await getToken();
-        joinShareChannel(token);
-        return token;
-    };
+    const startPromise = start(Type.SHARE);
+
+    // TODO: Switch to store-based state updates.
 </script>
 
-{#await startConnection()}
+{#await startPromise}
     <h3>Fetching token...</h3>
-{:then token}
-    <h3>Your token is <b>{token}</b>.</h3>
+{:then}
+    <h3>Your token is <b>{getOwnToken()}</b>.</h3>
 
     {#each $requests as request}
         <p>{JSON.stringify(request)}</p>
diff --git a/assets/src/components/Request.svelte b/assets/src/components/Request.svelte
index 134c4d5..0c0b111 100644
--- a/assets/src/components/Request.svelte
+++ b/assets/src/components/Request.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
-    import { getToken, joinRequestChannel } from "../network/socket";
-    import getShareToken from "../utils/getShareToken";
+    import { start, Type } from "../network/channel/connection";
 
-    const startConnection = async () => {
-        const token = await getToken();
-        joinRequestChannel(token, getShareToken());
-    };
+    // TODO: Switch to store-based state updates.
 
-    startConnection();
+    start(Type.REQUEST);
 </script>
 
 <main>