Absorb and display events

At least message-type ones, and at least without styling or memory-limit
concerns.

5 files changed, 50 insertions, 7 deletions

diff --git a/hi-ui/src/apiServer.js b/hi-ui/src/apiServer.js
index 92f4dcc..7365a36 100644
--- a/hi-ui/src/apiServer.js
+++ b/hi-ui/src/apiServer.js
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { events } from './store';
 
 export const apiServer = axios.create({
   baseURL: '/api/',
@@ -27,3 +28,18 @@ export async function listChannels() {
 export async function createChannel(name) {
   return apiServer.post('/channels', { name });
 }
+
+export async function postToChannel(channelId, message) {
+  return apiServer.post(`/channels/${channelId}`, { message });
+}
+
+export function subscribeToEvents() {
+  const evtSource = new EventSource("/api/events");
+  // TODO: this should process all incoming events and store them.
+  // TODO: eventually we'll need to handle expiring old info, so as not to use
+  //       infinite browser memory.
+  evtSource.onmessage = (evt) => {
+    const data = JSON.parse(evt.data);
+    events.update((value) => [...value, data]);
+  }
+}
diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte
index 42aa53f..680a785 100644
--- a/hi-ui/src/lib/ActiveChannel.svelte
+++ b/hi-ui/src/lib/ActiveChannel.svelte
@@ -1,15 +1,27 @@
 <script>
-    import { activeChannel } from '../store';
+    import { activeChannel, events } from '../store';
 
-    let channelName;
+    let channel;
+    let allMessages = [];
+    $: messages = allMessages.filter(
+        (ev) => ev.type === 'message' && channel !== null && ev.channel.id === channel.id
+    );
 
     activeChannel.subscribe((value) => {
-        channelName = value ? value.name : 'none';
+        channel = value;
+    });
+
+    events.subscribe((value) => {
+        allMessages = value;
     });
 </script>
 
 <div>
-    Active channel: {channelName}
+    {#each messages as message}
+        <div>
+            <pre><tt>{message.at} @{message.sender.name}: {message.message.body}</tt></pre>
+        </div>
+    {/each}
 </div>
 
 <style>
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
index 4bb4aab..96e9577 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -1,9 +1,22 @@
 <script>
+    import { postToChannel } from '../apiServer';
+    import { activeChannel } from '../store';
+
     let input;
     let disabled = false;
+    let activeChannelId;
+
+    activeChannel.subscribe((value) => {
+        activeChannelId = value ? value.id : null;
+    });
 
-    function handleSubmit(event) {
-        console.log(event);
+    async function handleSubmit(event) {
+        event.preventDefault();
+        disabled = true;
+        // TODO try/catch:
+        await postToChannel(activeChannelId, input);
+        input = '';
+        disabled = false;
     }
 </script>
 
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
index 6d60b0c..646665e 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
 
-	import { boot } from '../apiServer';
+	import { boot, subscribeToEvents } from '../apiServer';
 	import { currentUser } from '../store';
 
     import ActiveChannel from '../lib/ActiveChannel.svelte';
@@ -26,6 +26,7 @@
                     currentUser.update(() => ({
                         username: response.data.login.name,
                     }));
+                    subscribeToEvents();
                     break;
                 case 401:
                     currentUser.update(() => null);
diff --git a/hi-ui/src/store.js b/hi-ui/src/store.js
index 06042c2..a9d9421 100644
--- a/hi-ui/src/store.js
+++ b/hi-ui/src/store.js
@@ -3,3 +3,4 @@ import { writable } from 'svelte/store';
 export const currentUser = writable(null);
 export const activeChannel = writable(null);
 export const channelsList = writable([]);
+export const events = writable([]);