Compute the active channel from the current routing state, not from a store.

9 files changed, 32 insertions, 83 deletions

diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index f6d6148..538fa85 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { activeChannel, channelsList, logins, messages } from '$lib/store';
+import { channelsList, logins, messages } from '$lib/store';
 
 export const apiServer = axios.create({
   baseURL: '/api/',
@@ -82,7 +82,6 @@ function onChannelEvent(data) {
       channelsList.update((value) => value.addChannel(data.id, data.name))
       break;
     case 'deleted':
-      activeChannel.update((value) => value.deleteChannel(data.id));
       channelsList.update((value) => value.deleteChannel(data.id));
       messages.update((value) => value.deleteChannel(data.id));
       break;
diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index 978e952..ece9f55 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -1,10 +1,11 @@
 <script>
-    import { activeChannel, messages } from '$lib/store';
+    import { messages } from '$lib/store';
     import Message from './Message.svelte';
 
-    let container;
-    $: messageList = $activeChannel.isSet() ? $messages.inChannel($activeChannel.get()) : [];
+    export let channel = null;
+    $: messageList = channel !== null ? $messages.inChannel(channel) : [];
 
+    let container;
     // TODO: eventually, store scroll height/last unread in channel? scroll there?
 
     let scroll = (message) => {
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index 97fea1f..e62f0f3 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,13 +1,7 @@
 <script>
-    import { activeChannel } from '$lib/store';
-
     export let id;
     export let name;
-    let active = false;
-
-    activeChannel.subscribe((value) => {
-        active = value.is(id);
-    });
+    export let active = false;
 </script>
 
 <li
diff --git a/ui/lib/components/ChannelList.svelte b/ui/lib/components/ChannelList.svelte
index e0e5f06..316e404 100644
--- a/ui/lib/components/ChannelList.svelte
+++ b/ui/lib/components/ChannelList.svelte
@@ -2,17 +2,15 @@
     import { channelsList } from '$lib/store';
     import Channel from './Channel.svelte';
 
-    let channels;
+    export let active = null;
 
-    channelsList.subscribe((value) => {
-        channels = value.channels;
-    });
+    $: channels = $channelsList.channels;
 </script>
 
 <nav class="list-nav">
     <ul>
         {#each channels as channel}
-            <Channel {...channel} />
+            <Channel {...channel} active={active === channel.id} />
         {/each}
     </ul>
 </nav>
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index b33574b..0da78d4 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -1,30 +1,28 @@
 <script>
     import { tick } from 'svelte';
     import { postToChannel } from '$lib/apiServer';
-    import { activeChannel } from '$lib/store';
 
+    export let channel = null;
     let input;
     let value;
-    let disabled;
-    activeChannel.subscribe((value) => {
-        disabled = !value.isSet();
-        if (input && !disabled) {
+    let sending = false;
+
+    $: disabled = (channel === null);
+
+    async function handleSubmit() {
+        if (channel !== null) {
+            sending = true;
+            // TODO try/catch:
+            await postToChannel(channel, value);
+            sending = false;
+            value = '';
+            await tick();
             input.focus();
         }
-    });
-
-    async function handleSubmit(event) {
-        disabled = true;
-        // TODO try/catch:
-        await postToChannel($activeChannel.get(), value);
-        value = '';
-        disabled = false;
-        await tick();
-        input.focus();
     }
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap">
-    <input bind:this={input} bind:value={value} disabled={disabled} type="search" class="flex-auto h-6 input rounded-r-none" />
+    <input bind:this={input} bind:value={value} disabled={sending || disabled} type="search" class="flex-auto h-6 input rounded-r-none" />
     <button color="primary variant-filled-secondary" type="submit" class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button>
 </form>
diff --git a/ui/lib/store.js b/ui/lib/store.js
index b964b4b..ae17ffa 100644
--- a/ui/lib/store.js
+++ b/ui/lib/store.js
@@ -1,10 +1,9 @@
 import { writable } from 'svelte/store';
-import { ActiveChannel, Channels } from '$lib/store/channels';
+import { Channels } from '$lib/store/channels';
 import { Messages } from '$lib/store/messages';
 import { Logins } from '$lib/store/logins';
 
 export const currentUser = writable(null);
-export const activeChannel = writable(new ActiveChannel());
 export const logins = writable(new Logins());
 export const channelsList = writable(new Channels());
 export const messages = writable(new Messages());
diff --git a/ui/lib/store/channels.js b/ui/lib/store/channels.js
index bb6c86c..b57ca7e 100644
--- a/ui/lib/store/channels.js
+++ b/ui/lib/store/channels.js
@@ -34,38 +34,3 @@ export class Channels {
 		});
 	}
 }
-
-export class ActiveChannel {
-	constructor() {
-		this.channel = null;
-	}
-
-	isSet() {
-		return this.channel !== null;
-	}
-
-	get() {
-		return this.channel;
-	}
-
-	is(id) {
-		return this.channel === id;
-	}
-
-	set(id) {
-		this.channel = id;
-		return this;
-	}
-
-	deleteChannel(id) {
-		if (this.is(id)) {
-			return this.clear();
-		}
-		return this;
-	}
-
-	clear() {
-		this.channel = null;
-		return this;
-	}
-}
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index f8744c1..1d561ae 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
+    import { page } from '$app/stores';
 
 	import { boot, subscribeToEvents } from '$lib/apiServer';
 	import { currentUser, logins, channelsList, messages } from '$lib/store';
@@ -11,6 +12,7 @@
 
     let user;
     let loading = true;
+    $: channel = $page?.params?.channel;
 
     currentUser.subscribe((value) => {
         user = value;
@@ -53,7 +55,7 @@
 {:else if user != null}
     <div id="interface">
         <div class="channel-list">
-            <ChannelList />
+            <ChannelList active={channel} />
         </div>
         <div class="active-channel">
             <slot />
@@ -62,7 +64,7 @@
             <CreateChannelForm />
         </div>
         <div class="create-message">
-            <MessageInput />
+            <MessageInput {channel} />
         </div>
     </div>
 {:else}
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index ef439d0..7bd28d9 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -1,17 +1,10 @@
 <script>
-    import { afterNavigate } from '$app/navigation';
     import { page } from '$app/stores';
-
-    import { activeChannel } from '$lib/store';
     import ActiveChannel from '$lib/components/ActiveChannel.svelte';
 
-    afterNavigate(async () => {
-        let { channel } = $page.params;
-        activeChannel.update((value) => {
-            value.set(channel)
-            return value;
-        });
-    });
+    $: channel = $page?.params?.channel;
 </script>
 
-<ActiveChannel />
+<div class="active-channel">
+    <ActiveChannel {channel} />
+</div>