feat: add changelog modal

src/mobx/State.ts

@@ -11,6 +11,7 @@ import { legacyMigrateForwards, LegacyState } from "./legacy/redux";
 import Persistent from "./interfaces/Persistent";
 import Syncable from "./interfaces/Syncable";
 import Auth from "./stores/Auth";
+import Changelog from "./stores/Changelog";
 import Draft from "./stores/Draft";
 import Experiments from "./stores/Experiments";
 import Layout from "./stores/Layout";
@@ -32,6 +33,7 @@ export const MIGRATIONS = {
  */
 export default class State {
     auth: Auth;
+    changelog: Changelog;
     draft: Draft;
     locale: LocaleOptions;
     experiments: Experiments;
@@ -54,6 +56,7 @@ export default class State {
      */
     constructor() {
         this.auth = new Auth();
+        this.changelog = new Changelog();
         this.draft = new Draft();
         this.locale = new LocaleOptions();
         this.experiments = new Experiments();
@@ -147,6 +150,7 @@ export default class State {
                 () => stringify(store.toJSON()),
                 async (value) => {
                     try {
+                        console.log(id, "updated!");
                         // Save updated store to local storage.
                         await localforage.setItem(id, JSON.parse(value));
 

src/mobx/stores/Changelog.ts

@@ -0,0 +1,72 @@
+import { action, makeAutoObservable, runInAction } from "mobx";
+
+import { modalController } from "../../context/modals";
+
+import { latestChangelog } from "../../assets/changelogs";
+import Persistent from "../interfaces/Persistent";
+import Store from "../interfaces/Store";
+import Syncable from "../interfaces/Syncable";
+
+export interface Data {
+    viewed?: number;
+}
+
+/**
+ * Keeps track of viewed changelog items
+ */
+export default class Changelog implements Store, Persistent<Data>, Syncable {
+    /**
+     * Last viewed changelog ID
+     */
+    private viewed: number;
+
+    /**
+     * Construct new Layout store.
+     */
+    constructor() {
+        this.viewed = 0;
+        makeAutoObservable(this);
+    }
+
+    get id() {
+        return "changelog";
+    }
+
+    toJSON() {
+        return {
+            viewed: this.viewed,
+        };
+    }
+
+    @action hydrate(data: Data) {
+        if (data.viewed) {
+            this.viewed = data.viewed;
+        }
+    }
+
+    apply(_key: string, data: unknown, _revision: number): void {
+        this.hydrate(data as Data);
+    }
+
+    toSyncable(): { [key: string]: object } {
+        return {
+            changelog: this.toJSON(),
+        };
+    }
+
+    /**
+     * Check whether there are new updates
+     */
+    checkForUpdates() {
+        if (this.viewed < latestChangelog) {
+            modalController.push({
+                type: "changelog",
+                initial: latestChangelog,
+            });
+
+            runInAction(() => {
+                this.viewed = latestChangelog;
+            });
+        }
+    }
+}

src/mobx/stores/Sync.ts

@@ -19,7 +19,8 @@ export type SyncKeys =
     | "appearance"
     | "locale"
     | "notifications"
-    | "ordering";
+    | "ordering"
+    | "changelog";
 
 export const SYNC_KEYS: SyncKeys[] = [
     "theme",
@@ -27,6 +28,7 @@ export const SYNC_KEYS: SyncKeys[] = [
     "locale",
     "notifications",
     "ordering",
+    "changelog",
 ];
 
 export interface Data {