Merge branch 'wip/login-route'

3 files changed, 25 insertions, 23 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index f8744c1..0f8e83c 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,20 +1,19 @@
 <script>
-	import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+	import { onMount, onDestroy } from 'svelte';
 
 	import { boot, subscribeToEvents } from '$lib/apiServer';
 	import { currentUser, logins, channelsList, messages } from '$lib/store';
 
     import ChannelList from '$lib/components/ChannelList.svelte';
     import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
-    import LogIn from '$lib/components/LogIn.svelte';
     import MessageInput from '$lib/components/MessageInput.svelte';
 
-    let user;
     let loading = true;
+    let events = null;
 
-    currentUser.subscribe((value) => {
-        user = value;
-    });
+    $: channel = $page?.params?.channel;
 
     function onBooted(boot) {
         currentUser.update(() => ({
@@ -32,10 +31,11 @@
             switch (response.status) {
                 case 200:
                     onBooted(response.data);
-                    subscribeToEvents(response.data.resume_point);
+                    events = subscribeToEvents(response.data.resume_point);
                     break;
                 case 401:
                     currentUser.update(() => null);
+                    goto('/login');
                     break;
                 default:
                     // TODO: display error.
@@ -46,14 +46,20 @@
         }
         loading = false;
 	});
+
+    onDestroy(async () => {
+        if (events !== null) {
+            events.close();
+        }
+    });
 </script>
 
 {#if loading}
     <h2>Loading&hellip;</h2>
-{:else if user != null}
+{:else}
     <div id="interface">
         <div class="channel-list">
-            <ChannelList />
+            <ChannelList active={channel} />
         </div>
         <div class="active-channel">
             <slot />
@@ -62,11 +68,9 @@
             <CreateChannelForm />
         </div>
         <div class="create-message">
-            <MessageInput />
+            <MessageInput {channel} />
         </div>
     </div>
-{:else}
-    <LogIn />
 {/if}
 
 <style>
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>
diff --git a/ui/routes/(login)/login/+page.svelte b/ui/routes/(login)/login/+page.svelte
new file mode 100644
index 0000000..c333fdd
--- /dev/null
+++ b/ui/routes/(login)/login/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+    import LogIn from '$lib/components/LogIn.svelte';
+</script>
+
+<LogIn />