Merge local channel data and remote to maintain state

When we hit the boot endpoint, we get the server's view of things. If we
just setChannels with that, we overwrite all our locally-stored info in
on things like lastReadAt. So we need to merge data.

Eventually, this might militate for a `meta` key containing an object of
locally stored data, rather than having to handle each key specially.

1 files changed, 58 insertions, 2 deletions

diff --git a/ui/lib/store/channels.svelte.js b/ui/lib/store/channels.svelte.js
index c82f9aa..49cc31c 100644
--- a/ui/lib/store/channels.svelte.js
+++ b/ui/lib/store/channels.svelte.js
@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon';
+import { STORE_KEY_CHANNELS_DATA } from '$lib/constants';
 const EPOCH_STRING = '1970-01-01T00:00:00Z';
 
 // For reasons unclear to me, a straight up class definition with a constructor
@@ -10,24 +11,79 @@ const EPOCH_STRING = '1970-01-01T00:00:00Z';
 // Emphasis on "simple object".
 // --Kit
 function makeChannelObject({ id, name, draft = '', lastReadAt = null, scrollPosition = null }) {
+  let lastReadAtParsed;
+  if (Boolean(lastReadAt)) {
+    if (typeof lastReadAt === "string") {
+      lastReadAtParsed = DateTime.fromISO(lastReadAt);
+    } else {
+      lastReadAtParsed = lastReadAt;
+    }
+  } else {
+    lastReadAtParsed = DateTime.fromISO(EPOCH_STRING);
+  }
   return {
     id,
     name,
-    lastReadAt: lastReadAt || DateTime.fromISO(EPOCH_STRING),
+    lastReadAt: lastReadAtParsed,
     draft,
     scrollPosition
   };
 }
 
+function mergeLocalData(remoteData, currentData) {
+  let currentDataObj = currentData.reduce(
+    (acc, cur) => {
+      acc[cur.id] = cur;
+      return acc;
+    },
+    {}
+  );
+  const ret = remoteData.map(
+    (ch) => {
+      const newCh = makeChannelObject(ch);
+      if (Boolean(currentDataObj[ch.id])) {
+        newCh.lastReadAt = currentDataObj[ch.id].lastReadAt;
+      }
+      return newCh;
+    }
+  );
+  return ret;
+}
+
 export class Channels {
   channels = $state([]);
 
+  constructor({ channelsData }) {
+    this.channels = channelsData.map(makeChannelObject);
+    // On channel edits (inc 'last read' ones), write out to localstorage?
+  }
+
+  writeOutToLocalStorage() {
+    localStorage.setItem(
+      STORE_KEY_CHANNELS_DATA,
+      JSON.stringify(this.channels)
+    );
+  }
+
+  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();
+    }
+  }
+
   getChannel(channelId) {
     return this.channels.filter((ch) => ch.id === channelId)[0] || null;
   }
 
   setChannels(channels) {
-    this.channels = channels.map(makeChannelObject);
+    // This gets called, among other times, when the page is first loaded, with
+    // server-sent data from the `boot` endpoint. That needs to be merged with
+    // locally stored data!
+    this.channels = mergeLocalData(channels, this.channels);
     this.sort();
     return this;
   }