From fc0f1654a56d2247728a766f43e72ff169704888 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Sat, 15 Feb 2025 15:17:03 -0500
Subject: Hoist global state access out of individual components.

Access to "global" (maybe "external?") state is now handled at the top level of the component hierarchy, in `+page.svelte`, `+layout.svelte`, and their associated scripts. State is otherwise passed down through props, and changes are passed up through callbacks.

This is - hopefully - groundwork for refactoring state management a bit. I wanted to move access to state out to a smaller number of places, so that I have fewer places to update to implement reconnect logic. My broader goal is to make it easier to refactor these kinds of external side effects, as well, though no such changes are in this branch.

This change also makes testing a mile easier, since tests can interact with props and callbacks instead of emulating the whole HTTP request stack and the Pilcrow API. This change removes do-very-little tests.
---
 ui/routes/(app)/+layout.svelte | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 6339abd..02f7d19 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -5,7 +5,7 @@
   import { getContext, onDestroy, onMount } from 'svelte';
   import TinyGesture from 'tinygesture';
 
-  import { boot, subscribeToEvents } from '$lib/apiServer';
+  import * as api from '$lib/apiServer.js';
   import { channelsList, currentUser, logins, messages, onEvent } from '$lib/store';
 
   import ChannelList from '$lib/components/ChannelList.svelte';
@@ -58,20 +58,20 @@
       return;
     }
     gesture = new TinyGesture(window);
-    gesture.on('swiperight', (event) => {
+    gesture.on('swiperight', () => {
       pageContext.showMenu = true;
     });
-    gesture.on('swipeleft', (event) => {
+    gesture.on('swipeleft', () => {
       pageContext.showMenu = false;
     });
   }
 
   onMount(async () => {
-    let response = await boot();
+    let response = await api.boot();
     switch (response.status) {
       case 200:
         onBooted(response.data);
-        events = subscribeToEvents(response.data.resume_point);
+        events = api.subscribeToEvents(response.data.resume_point);
         events.onmessage = onEvent.fromMessage;
         break;
       case 401:
@@ -109,6 +109,10 @@
     event.returnValue = '';
     return '';
   }
+
+  async function createChannel(name) {
+    await api.createChannel(name);
+  }
 </script>
 
 <svelte:window {onbeforeunload} />
@@ -125,7 +129,7 @@
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
       <ChannelList active={channel} channels={enrichedChannels} />
       <div class="create-channel">
-        <CreateChannelForm />
+        <CreateChannelForm {createChannel} />
       </div>
     </nav>
     <main>
-- 
cgit v1.2.3

