Added Settings storage #101 (#104)

package.json

@@ -13,7 +13,6 @@
 	},
 	"devDependencies": {
 		"@craco/craco": "^6.4.5",
-		"@types/chrome": "^0.0.196",
 		"@types/craco__craco": "^6.4.0",
 		"@types/node": "^18.7.16",
 		"@types/react": "^18.0.18",

src/Models/Data/SettingsModel.ts

@@ -0,0 +1,13 @@
+export default class SettingsModel
+{
+	// Add new settings here.
+
+	public constructor();
+	public constructor(storageData: Record<string, any>);
+	public constructor(storageData?: Record<string, any>)
+	{
+		if (!storageData)
+			return;
+		// TODO: Convert storageData to SettingsModel.
+	}
+}

src/Models/Data/index.d.ts

@@ -1,5 +1,6 @@
 import CollectionModel from "./CollectionModel";
 import GroupModel from "./GroupModel";
 import TabModel from "./TabModel";
+import SettingsModel from "./SettingsModel";
 
-export { CollectionModel, GroupModel, TabModel };
+export { SettingsModel, CollectionModel, GroupModel, TabModel };

src/Services/Storage/SettingsService.ts

@@ -1 +1,45 @@
-export {}
+import { Browser, Storage } from "webextension-polyfill";
+import { SettingsModel } from "../../Models/Data";
+import { Event, ext } from "../../Utils";
+
+export default class SettingsService
+{
+	private constructor() {}
+
+	public static readonly Changed = new Event<Browser, Partial<SettingsModel>>();
+
+	public static async GetSettings(): Promise<SettingsModel>
+	{
+		let fallbackOptions = new SettingsModel();
+
+		if (!ext)
+			return fallbackOptions;
+
+		let options: Record<string, any> = await ext.storage.sync.get(fallbackOptions);
+
+		if (!ext.storage.sync.onChanged.hasListener(SettingsService.OnStorageChanged))
+			ext.storage.sync.onChanged.addListener(SettingsService.OnStorageChanged);
+
+		return new SettingsModel(options);
+	}
+
+	public static async SetSettings(changes: Partial<SettingsModel>): Promise<void>
+	{
+		if (ext)
+			await ext.storage.sync.set(changes);
+		else
+			SettingsService.Changed.Invoke(null, changes);
+	}
+
+	private static OnStorageChanged(changes: { [key: string]: Storage.StorageChange }): void
+	{
+		let propsList: string[] = Object.keys(new SettingsService());
+		let settings: { [key: string]: any; } = {};
+
+		Object.entries(changes)
+			.filter(i => propsList.includes(i[0]))
+			.map(i => settings[i[0]] = i[1].newValue);
+
+		SettingsService.Changed.Invoke(ext, settings as Partial<SettingsModel>);
+	}
+}

src/Utils/Event.ts

@@ -0,0 +1,21 @@
+export type EventHandler<S, T> = (sender: S, args: T) => void;
+
+export default class Event<S = any, T = any>
+{
+	private _handlers: EventHandler<S, T>[] = [];
+
+	public AddListener(handler: EventHandler<S, T>): void
+	{
+		this._handlers.push(handler);
+	}
+
+	public RemoveListener(handler: EventHandler<S, T>): void
+	{
+		this._handlers = this._handlers.filter(i => i !== handler);
+	}
+
+	public Invoke(sender: S, args: T): void
+	{
+		this._handlers.forEach(i => i(sender, args));
+	}
+}

src/Utils/ext.ts

@@ -1,4 +1,4 @@
-import Browser from "webextension-polyfill";
+import { Browser } from "webextension-polyfill";
 
-const ext: typeof Browser | null = (process.env.NODE_ENV !== "development") ? require("webextension-polyfill") : null;
+const ext: Browser | null = (process.env.NODE_ENV !== "development") ? require("webextension-polyfill") : null;
 export default ext;

src/Utils/index.d.ts

@@ -1,3 +1,4 @@
 import ext from "./ext";
+import Event, { EventHandler } from "./Event";
 
-export { ext };
+export { ext, Event, EventHandler };

yarn.lock

@@ -2540,14 +2540,6 @@
   dependencies:
     browserslist "*"
 
-"@types/chrome@^0.0.196":
-  version "0.0.196"
-  resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.196.tgz#9e0196a6fcdf3c0e12cfbcd086cd28feb5206990"
-  integrity sha512-LAjGIQYC0wyiYu6lVT03dBrHBfYTMsM8EmNfQ+UdZipGZe8OUiir6weoa9oQoBw3T3RLzBCp9m904T+rFtpPAg==
-  dependencies:
-    "@types/filesystem" "*"
-    "@types/har-format" "*"
-
 "@types/connect-history-api-fallback@*", "@types/connect-history-api-fallback@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
@@ -2625,30 +2617,13 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/filesystem@*":
-  version "0.0.32"
-  resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.32.tgz#307df7cc084a2293c3c1a31151b178063e0a8edf"
-  integrity sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==
-  dependencies:
-    "@types/filewriter" "*"
-
-"@types/filewriter@*":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/filewriter/-/filewriter-0.0.29.tgz#a48795ecadf957f6c0d10e0c34af86c098fa5bee"
-  integrity sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==
-
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
   integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
   dependencies:
     "@types/node" "*"
 
-"@types/har-format@*":
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@types/har-format/-/har-format-1.2.8.tgz#e6908b76d4c88be3db642846bb8b455f0bfb1c4e"
-  integrity sha512-OP6L9VuZNdskgNN3zFQQ54ceYD8OLq5IbqO4VK91ORLfOm7WdT/CiT/pHEBSQEqCInJ2y3O6iCm/zGtPElpgJQ==
-
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"