feat(mobx): add persistence

src/mobx/stores/Auth.ts

@@ -3,6 +3,7 @@ import { Session } from "revolt-api/types/Auth";
 import { Nullable } from "revolt.js/dist/util/null";
 
 import Persistent from "../interfaces/Persistent";
+import Store from "../interfaces/Store";
 
 interface Data {
     sessions: Record<string, Session>;
@@ -13,7 +14,7 @@ interface Data {
  * Handles account authentication, managing multiple
  * accounts and their sessions.
  */
-export default class Auth implements Persistent<Data> {
+export default class Auth implements Store, Persistent<Data> {
     private sessions: ObservableMap<string, Session>;
     private current: Nullable<string>;
 
@@ -26,10 +27,14 @@ export default class Auth implements Persistent<Data> {
         makeAutoObservable(this);
     }
 
+    get id() {
+        return "auth";
+    }
+
     toJSON() {
         return {
-            sessions: this.sessions,
-            current: this.current,
+            sessions: [...this.sessions],
+            current: this.current ?? undefined,
         };
     }
 

src/mobx/stores/Draft.ts

@@ -1,6 +1,9 @@
 import { action, computed, makeAutoObservable, ObservableMap } from "mobx";
 
+import { mapToRecord } from "../../lib/conversion";
+
 import Persistent from "../interfaces/Persistent";
+import Store from "../interfaces/Store";
 
 interface Data {
     drafts: Record<string, string>;
@@ -9,7 +12,7 @@ interface Data {
 /**
  * Handles storing draft (currently being written) messages.
  */
-export default class Draft implements Persistent<Data> {
+export default class Draft implements Store, Persistent<Data> {
     private drafts: ObservableMap<string, string>;
 
     /**
@@ -20,9 +23,13 @@ export default class Draft implements Persistent<Data> {
         makeAutoObservable(this);
     }
 
+    get id() {
+        return "draft";
+    }
+
     toJSON() {
         return {
-            drafts: this.drafts,
+            drafts: mapToRecord(this.drafts),
         };
     }
 

src/mobx/stores/Experiments.ts

@@ -1,6 +1,13 @@
-import { action, computed, makeAutoObservable, ObservableSet } from "mobx";
+import {
+    action,
+    autorun,
+    computed,
+    makeAutoObservable,
+    ObservableSet,
+} from "mobx";
 
 import Persistent from "../interfaces/Persistent";
+import Store from "../interfaces/Store";
 
 /**
  * Union type of available experiments.
@@ -35,7 +42,7 @@ interface Data {
 /**
  * Handles enabling and disabling client experiments.
  */
-export default class Experiments implements Persistent<Data> {
+export default class Experiments implements Store, Persistent<Data> {
     private enabled: ObservableSet<Experiment>;
 
     /**
@@ -43,12 +50,17 @@ export default class Experiments implements Persistent<Data> {
      */
     constructor() {
         this.enabled = new ObservableSet();
+
         makeAutoObservable(this);
     }
 
+    get id() {
+        return "experiments";
+    }
+
     toJSON() {
         return {
-            enabled: this.enabled,
+            enabled: [...this.enabled],
         };
     }
 

src/mobx/stores/Layout.ts

@@ -1,6 +1,9 @@
 import { action, computed, makeAutoObservable, ObservableMap } from "mobx";
 
+import { mapToRecord } from "../../lib/conversion";
+
 import Persistent from "../interfaces/Persistent";
+import Store from "../interfaces/Store";
 
 interface Data {
     lastSection?: "home" | "server";
@@ -14,7 +17,7 @@ interface Data {
  * Handles providing good UX experience on navigating
  * back and forth between different parts of the app.
  */
-export default class Layout implements Persistent<Data> {
+export default class Layout implements Store, Persistent<Data> {
     /**
      * The last 'major section' that the user had open.
      * This is either the home tab or a channel ID (for a server channel).
@@ -47,12 +50,16 @@ export default class Layout implements Persistent<Data> {
         makeAutoObservable(this);
     }
 
+    get id() {
+        return "layout";
+    }
+
     toJSON() {
         return {
             lastSection: this.lastSection,
             lastHomePath: this.lastHomePath,
-            lastOpened: this.lastOpened,
-            openSections: this.openSections,
+            lastOpened: mapToRecord(this.lastOpened),
+            openSections: mapToRecord(this.openSections),
         };
     }
 

src/mobx/stores/LocaleOptions.ts

@@ -3,6 +3,7 @@ import { action, computed, makeAutoObservable } from "mobx";
 import { Language, Languages } from "../../context/Locale";
 
 import Persistent from "../interfaces/Persistent";
+import Store from "../interfaces/Store";
 
 interface Data {
     lang: Language;
@@ -52,7 +53,7 @@ export function findLanguage(lang?: string): Language {
  * Handles providing good UX experience on navigating
  * back and forth between different parts of the app.
  */
-export default class LocaleOptions implements Persistent<Data> {
+export default class LocaleOptions implements Store, Persistent<Data> {
     private lang: Language;
 
     /**
@@ -63,6 +64,10 @@ export default class LocaleOptions implements Persistent<Data> {
         makeAutoObservable(this);
     }
 
+    get id() {
+        return "locale";
+    }
+
     toJSON() {
         return {
             lang: this.lang,

src/mobx/stores/NotificationOptions.ts

@@ -1,7 +1,10 @@
 import { action, computed, makeAutoObservable, ObservableMap } from "mobx";
 import { Channel } from "revolt-api/types/Channels";
 
+import { mapToRecord } from "../../lib/conversion";
+
 import Persistent from "../interfaces/Persistent";
+import Store from "../interfaces/Store";
 
 /**
  * Possible notification states.
@@ -31,7 +34,7 @@ interface Data {
 /**
  * Manages the user's notification preferences.
  */
-export default class NotificationOptions implements Persistent<Data> {
+export default class NotificationOptions implements Store, Persistent<Data> {
     private server: ObservableMap<string, string>;
     private channel: ObservableMap<string, string>;
 
@@ -44,10 +47,14 @@ export default class NotificationOptions implements Persistent<Data> {
         makeAutoObservable(this);
     }
 
+    get id() {
+        return "notifications";
+    }
+
     toJSON() {
         return {
-            server: this.server,
-            channel: this.channel,
+            server: mapToRecord(this.server),
+            channel: mapToRecord(this.channel),
         };
     }