Merge branch 'prop/preserve-state'

3 files changed, 89 insertions, 23 deletions

diff --git a/ui/lib/constants.js b/ui/lib/constants.js
new file mode 100644
index 0000000..f854f5d
--- /dev/null
+++ b/ui/lib/constants.js
@@ -0,0 +1,3 @@
+export const EPOCH_STRING = '1970-01-01T00:00:00Z';
+
+export const STORE_KEY_CHANNELS_DATA = 'pilcrow:channelsData';
diff --git a/ui/lib/store.js b/ui/lib/store.js
index c179dac..57b5cce 100644
--- a/ui/lib/store.js
+++ b/ui/lib/store.js
@@ -1,11 +1,18 @@
 import { writable } from 'svelte/store';
-import { Channels } from '$lib/store/channels.svelte.js';
+import { browser } from '$app/environment';
+import { Channels, ChannelsMeta } from '$lib/store/channels.svelte.js';
 import { Messages } from '$lib/store/messages.svelte.js';
 import { Logins } from '$lib/store/logins';
+import { STORE_KEY_CHANNELS_DATA } from '$lib/constants';
+
+// Get channelsList content from the local storage
+const channelsMetaData =
+  (browser && JSON.parse(localStorage.getItem(STORE_KEY_CHANNELS_DATA))) || {};
 
 export const currentUser = writable(null);
 export const logins = writable(new Logins());
-export const channelsList = writable(new Channels());
+export const channelsMetaList = writable(new ChannelsMeta({ channelsMetaData }));
+export const channelsList = writable(new Channels({ channelsMetaList }));
 export const messages = writable(new Messages());
 
 export function onEvent(event) {
diff --git a/ui/lib/store/channels.svelte.js b/ui/lib/store/channels.svelte.js
index c82f9aa..9058d86 100644
--- a/ui/lib/store/channels.svelte.js
+++ b/ui/lib/store/channels.svelte.js
@@ -1,39 +1,31 @@
 import { DateTime } from 'luxon';
-const EPOCH_STRING = '1970-01-01T00:00:00Z';
-
-// For reasons unclear to me, a straight up class definition with a constructor
-// doesn't seem to work, reactively. So we resort to this.
-// Owen suggests that this sentence in the Svelte docs should make the reason
-// clear:
-// > If $state is used with an array or a simple object, the result is a deeply
-// > reactive state proxy.
-// Emphasis on "simple object".
-// --Kit
-function makeChannelObject({ id, name, draft = '', lastReadAt = null, scrollPosition = null }) {
-  return {
-    id,
-    name,
-    lastReadAt: lastReadAt || DateTime.fromISO(EPOCH_STRING),
-    draft,
-    scrollPosition
-  };
-}
+import { get } from 'svelte/store';
+import { STORE_KEY_CHANNELS_DATA, EPOCH_STRING } from '$lib/constants';
 
 export class Channels {
   channels = $state([]);
 
+  constructor({ channelsMetaList }) {
+    // This is the state wrapper around the channels meta object. Dammit.
+    this.channelsMetaList = channelsMetaList;
+  }
+
   getChannel(channelId) {
     return this.channels.filter((ch) => ch.id === channelId)[0] || null;
   }
 
   setChannels(channels) {
-    this.channels = channels.map(makeChannelObject);
+    // Because this is called at initialization, we need to initialize the matching meta:
+    get(this.channelsMetaList).ensureChannels(channels);
+    this.channels = channels;
     this.sort();
     return this;
   }
 
   addChannel(id, name) {
-    this.channels = [...this.channels, makeChannelObject({ id, name })];
+    const newChannel = { id, name };
+    this.channels = [...this.channels, newChannel];
+    get(this.channelsMetaList).initializeChannel(newChannel);
     this.sort();
     return this;
   }
@@ -57,3 +49,67 @@ export class Channels {
     });
   }
 }
+
+export class ChannelsMeta {
+  // Store channelId -> { draft = '', lastReadAt = null, scrollPosition = null }
+  channelsMeta = $state({});
+
+  constructor({ channelsMetaData }) {
+    const channelsMeta = objectMap(channelsMetaData, (ch) => {
+      let lastReadAt = ch.lastReadAt;
+      if (typeof lastReadAt === 'string') {
+        lastReadAt = DateTime.fromISO(lastReadAt);
+      }
+      if (!Boolean(lastReadAt)) {
+        lastReadAt = DateTime.fromISO(EPOCH_STRING);
+      }
+      return {
+        ...ch,
+        lastReadAt
+      };
+    });
+    this.channelsMeta = channelsMeta;
+  }
+
+  writeOutToLocalStorage() {
+    localStorage.setItem(STORE_KEY_CHANNELS_DATA, JSON.stringify(this.channelsMeta));
+  }
+
+  updateLastReadAt(channelId, at) {
+    const channelObject = this.getChannel(channelId);
+    // Do it this way, rather than with Math.max tricks, to avoid assignment
+    // when we don't need it, to minimize reactive changes:
+    if (at > channelObject?.lastReadAt) {
+      channelObject.lastReadAt = at;
+      this.writeOutToLocalStorage();
+    }
+  }
+
+  ensureChannels(channelsList) {
+    channelsList.forEach(({ id }) => {
+      this.initializeChannel(id);
+    });
+  }
+
+  initializeChannel(channelId) {
+    if (!this.channelsMeta[channelId]) {
+      const channelData = {
+        lastReadAt: null,
+        draft: '',
+        scrollPosition: null
+      };
+      this.channelsMeta[channelId] = channelData;
+    }
+  }
+
+  getChannel(channelId) {
+    return this.channelsMeta[channelId] || null;
+  }
+}
+
+function objectMap(object, mapFn) {
+  return Object.keys(object).reduce((result, key) => {
+    result[key] = mapFn(object[key]);
+    return result;
+  }, {});
+}