Provide named operations for stored state.

5 files changed, 10 insertions, 16 deletions

diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte
index 84f9119..d2d92fb 100644
--- a/hi-ui/src/lib/ActiveChannel.svelte
+++ b/hi-ui/src/lib/ActiveChannel.svelte
@@ -1,15 +1,9 @@
 <script>
-    import { activeChannel, events } from '../store';
+    import { activeChannel, messages } from '../store';
     import Message from './Message.svelte';
 
     let container;
-    $: messages = $events.filter(
-        (ev) => (
-            ev.type === 'message'
-            && $activeChannel !== null
-            && ev.channel.id === $activeChannel.id
-        )
-    );
+    $: messageList = $activeChannel.isSet() ? $messages.inChannel($activeChannel.get()) : [];
 
     // TODO: eventually, store scroll height/last unread in channel? scroll there?
 
@@ -19,7 +13,7 @@
 </script>
 
 <div class="container" bind:this={container}>
-    {#each messages as message}
+    {#each messageList as message}
         <div use:scroll>
             <Message {...message} />
         </div>
diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte
index 7826c46..ad07594 100644
--- a/hi-ui/src/lib/Channel.svelte
+++ b/hi-ui/src/lib/Channel.svelte
@@ -6,11 +6,11 @@
     let active = false;
 
     activeChannel.subscribe((value) => {
-        active = value ? value.id == id : false;
+        active = value.is(id);
     });
 
     function activate() {
-        activeChannel.update(() => ({ id, name }));
+        activeChannel.update((value) => value.set(id));
     }
 </script>
 
diff --git a/hi-ui/src/lib/ChannelList.svelte b/hi-ui/src/lib/ChannelList.svelte
index 9f88e24..5577d94 100644
--- a/hi-ui/src/lib/ChannelList.svelte
+++ b/hi-ui/src/lib/ChannelList.svelte
@@ -9,12 +9,12 @@
     let loading = true;
 
     channelsList.subscribe((value) => {
-        channels = value;
+        channels = value.channels;
     });
 
 	onMount(async () => {
         let channels = await listChannels();
-        channelsList.update(() => channels.data);
+        channelsList.update((value) => value.setChannels(channels.data));
         loading = false;
     });
 </script>
diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/CreateChannelForm.svelte
index 70dc13d..aa415fd 100644
--- a/hi-ui/src/lib/CreateChannelForm.svelte
+++ b/hi-ui/src/lib/CreateChannelForm.svelte
@@ -10,7 +10,7 @@
         disabled = true;
         const response = await createChannel(name);
         if (200 <= response.status && response.status < 300) {
-            channelsList.update((value) => [...value, response.data]);
+            channelsList.update((value) => value.addChannel(response.data));
             name = '';
         }
         disabled = false;
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
index 9a8475c..b899221 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -8,12 +8,12 @@
 
     let self;
     let input;
-    $: disabled = $activeChannel == null;
+    $: disabled = !$activeChannel.isSet();
 
     async function handleSubmit(event) {
         disabled = true;
         // TODO try/catch:
-        await postToChannel($activeChannel?.id, input);
+        await postToChannel($activeChannel.get(), input);
         input = '';
         disabled = false;
         await tick();