Socket connection and token fetching

10 files changed, 127 insertions, 31 deletions

diff --git a/assets/src/App.svelte b/assets/src/App.svelte
deleted file mode 100644
index 27c0c68..0000000
--- a/assets/src/App.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-    export let name: string;
-</script>
-
-<main>
-    <h1>Hello from {name}!</h1>
-    <h2>Your token is {window.token}.</h2>
-</main>
-
-<style>
-    h1 {
-        font-size: 4em;
-    }
-</style>
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>
diff --git a/assets/src/entries/request.ts b/assets/src/entries/request.ts
index 2461768..0d064a2 100644
--- a/assets/src/entries/request.ts
+++ b/assets/src/entries/request.ts
@@ -1,10 +1,3 @@
-import App from '../App.svelte';
+// Request
 
-const app = new App({
-	target: document.getElementById("app"),
-	props: {
-		name: 'request'
-	}
-});
-
-export default app;
\ No newline at end of file
+export {};
diff --git a/assets/src/entries/share.ts b/assets/src/entries/share.ts
index 7527a53..d0279f1 100644
--- a/assets/src/entries/share.ts
+++ b/assets/src/entries/share.ts
@@ -1,10 +1,8 @@
-import App from '../App.svelte';
+import Share from "../components/Share.svelte";
 
-const app = new App({
-	target: document.getElementById("app"),
-	props: {
-		name: 'share'
-	}
+const app = new Share({
+    target: document.getElementById("app"),
+    props: {},
 });
 
-export default app;
\ No newline at end of file
+export default app;
diff --git a/assets/src/globals.d.ts b/assets/src/globals.d.ts
deleted file mode 100644
index 996ffe5..0000000
--- a/assets/src/globals.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare var token: string;
\ No newline at end of file
diff --git a/assets/src/network/socket.ts b/assets/src/network/socket.ts
new file mode 100644
index 0000000..c056b41
--- /dev/null
+++ b/assets/src/network/socket.ts
@@ -0,0 +1,33 @@
+import { Socket } from "phoenix";
+import requests from "../stores/requests";
+
+let socket = new Socket("/socket", {});
+socket.connect();
+
+export const getToken: () => Promise<string> = () => {
+    let tokenChannel = socket.channel("token", {});
+    return new Promise((resolve, reject) => {
+        tokenChannel
+            .join()
+            .receive("ok", () => {
+                tokenChannel
+                    .push("get_token", {}, 5000)
+                    .receive("ok", ({ token }) => resolve(token))
+                    .receive("error", err => reject(err))
+                    .receive("timeout", err => reject(err));
+            })
+            .receive("error", err => reject(err));
+    });
+};
+
+export const joinShareChannel = token => {
+    let shareChannel = socket.channel(`share:${token}`);
+
+    shareChannel.on("request", requests.addRequest);
+
+    shareChannel
+        .join()
+        .receive("error", err =>
+            console.log("failed joining share channel:" + err)
+        );
+};
diff --git a/assets/src/stores/data.ts b/assets/src/stores/data.ts
new file mode 100644
index 0000000..d59183c
--- /dev/null
+++ b/assets/src/stores/data.ts
@@ -0,0 +1,21 @@
+import { writable } from "svelte/store";
+
+const createDataStore = () => {
+    const { subscribe, update } = writable({ locked: false, data: null });
+
+    return {
+        subscribe,
+        set: data => {
+            update(state => {
+                if (!state.locked) {
+                    return { locked: true, data };
+                } else {
+                    console.error("Tried setting data after locking.");
+                    return state;
+                }
+            });
+        },
+    };
+};
+
+export default createDataStore();
diff --git a/assets/src/stores/requests.ts b/assets/src/stores/requests.ts
new file mode 100644
index 0000000..e80eb2b
--- /dev/null
+++ b/assets/src/stores/requests.ts
@@ -0,0 +1,12 @@
+import { writable } from "svelte/store";
+
+const createRequestStore = () => {
+    const { subscribe, update } = writable([]);
+
+    return {
+        subscribe,
+        addRequest: request => update(state => [request, ...state]),
+    };
+};
+
+export default createRequestStore();