From 1d8b828d1bbe0e0daa64f6fc2689799c7169afa0 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 19 Sep 2024 23:26:39 -0400
Subject: Add basic browser client

Using Svelte.

No tests, no linting, yet.

This is just starting to get familiar with things.

You'll still have to run the dev server and the dev client builder each
in their own terminals.

Enjoy!
---
 hi-ui/src/store.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 hi-ui/src/store.js

(limited to 'hi-ui/src/store.js')

diff --git a/hi-ui/src/store.js b/hi-ui/src/store.js
new file mode 100644
index 0000000..06042c2
--- /dev/null
+++ b/hi-ui/src/store.js
@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export const currentUser = writable(null);
+export const activeChannel = writable(null);
+export const channelsList = writable([]);
-- 
cgit v1.2.3


From 01d995c731c296292cd3f1f9a4702eb96a0bf628 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Mon, 30 Sep 2024 23:14:36 -0400
Subject: Absorb and display events

At least message-type ones, and at least without styling or memory-limit
concerns.
---
 hi-ui/src/apiServer.js             | 16 ++++++++++++++++
 hi-ui/src/lib/ActiveChannel.svelte | 20 ++++++++++++++++----
 hi-ui/src/lib/MessageInput.svelte  | 17 +++++++++++++++--
 hi-ui/src/routes/+page.svelte      |  3 ++-
 hi-ui/src/store.js                 |  1 +
 5 files changed, 50 insertions(+), 7 deletions(-)

(limited to 'hi-ui/src/store.js')

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([]);
-- 
cgit v1.2.3