Socket connection and token fetching

3 files changed, 54 insertions, 0 deletions

diff --git a/assets/src/components/DataPicker.svelte b/assets/src/components/DataPicker.svelte
new file mode 100644
index 0000000..433018d
--- /dev/null
+++ b/assets/src/components/DataPicker.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import data from "../stores/data";
+
+    let value = "";
+
+    const submit = () => {
+        data.set(value);
+    };
+</script>
+
+<form on:submit|preventDefault={submit}>
+    <input type="text" bind:value />
+    <input type="submit" value="Submit" />
+</form>
diff --git a/assets/src/components/IncomingRequests.svelte b/assets/src/components/IncomingRequests.svelte
new file mode 100644
index 0000000..1db50af
--- /dev/null
+++ b/assets/src/components/IncomingRequests.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { getToken, joinShareChannel } from "../network/socket";
+    import requests from "../stores/requests";
+
+    const startConnection = async () => {
+        const token = await getToken();
+        joinShareChannel(token);
+        return token;
+    };
+</script>
+
+{#await startConnection()}
+    <h3>Fetching token...</h3>
+{:then token}
+    <h3>Your token is <b>{token}</b>.</h3>
+
+    {#each $requests as request}
+        <p>{JSON.stringify(request)}</p>
+    {/each}
+{/await}
diff --git a/assets/src/components/Share.svelte b/assets/src/components/Share.svelte
new file mode 100644
index 0000000..5ea55b2
--- /dev/null
+++ b/assets/src/components/Share.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import data from "../stores/data";
+    import DataPicker from "./DataPicker.svelte";
+    import IncomingRequests from "./IncomingRequests.svelte";
+</script>
+
+<main>
+    <h1>Sharing</h1>
+    {#if !$data.locked}
+        <DataPicker />
+    {:else}
+        <IncomingRequests />
+    {/if}
+</main>
+
+<style>
+    h1 {
+        font-size: 4em;
+    }
+</style>