Add get/set wrappers

Author: ayoung19

package-lock.json

@@ -67,8 +67,8 @@
         "@mantine/core": "^6.0.17",
         "@mantine/hooks": "^6.0.17",
         "@tabler/icons-react": "^2.26.0",
+        "@tanstack/react-query": "^4.32.1",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-hook-form": "^7.45.2"
+        "react-dom": "^18.2.0"
     }
 }

package.json

@@ -1,9 +1,6 @@
 import {Handle} from './lib/bridge/server';
 import {InternalResponseBundle} from './lib/bridge/types';
 import MessageSender = chrome.runtime.MessageSender;
-import {DEFAULT_SETTINGS, SettingsType} from './settings';
-import {StorageKey} from './lib/storage/keys';
-import {gStore} from './lib/storage/store';
 
 function unifiedHandler(request: any, sender: MessageSender, sendResponse: (response?: any) => void) {
     Handle(request, sender)
@@ -32,10 +29,3 @@ chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) =>
     unifiedHandler(request, sender, sendResponse);
     return true;
 });
-
-gStore.get<SettingsType>(StorageKey.SETTINGS).then((settings) => {
-    gStore.set<SettingsType>(StorageKey.SETTINGS, {
-        ...DEFAULT_SETTINGS,
-        ...(settings || {}),
-    });
-});

src/background.ts

@@ -12,6 +12,8 @@ import {StorageRemove} from './storage_remove';
 import {RequestType} from './types';
 import {FetchExtensionFile} from './fetch_extension_file';
 import {OpenOptionsPage} from './open_options_page';
+import {SettingsGet} from './settings_get';
+import {SettingsSet} from './settings_set';
 
 export const HANDLERS_MAP: {[key in RequestType]: RequestHandler<any, any>} = {
     [RequestType.EXECUTE_SCRIPT_ON_PAGE]: ExecuteScriptOnPage,
@@ -26,4 +28,6 @@ export const HANDLERS_MAP: {[key in RequestType]: RequestHandler<any, any>} = {
     [RequestType.FETCH_SKIN_MODEL]: FetchSkinModel,
     [RequestType.FETCH_EXTENSION_FILE]: FetchExtensionFile,
     [RequestType.OPEN_OPTIONS_PAGE]: OpenOptionsPage,
+    [RequestType.SETTINGS_GET]: SettingsGet,
+    [RequestType.SETTINGS_SET]: SettingsSet,
 };

src/lib/bridge/handlers/handlers.ts

@@ -1,12 +1,7 @@
-import {RequestHandler} from '../types';
 import {RequestType} from './types';
-import {isFirefox} from '../../utils/detect';
+import {runtimeNamespace} from '../../utils/detect';
 import {EmptyRequestHandler} from './main';
 
 export const OpenOptionsPage = new EmptyRequestHandler<void>(RequestType.OPEN_OPTIONS_PAGE, async () => {
-    if (isFirefox()) {
-        return await browser.runtime.openOptionsPage();
-    }
-
-    return chrome.runtime.openOptionsPage();
+    return await runtimeNamespace().runtime.openOptionsPage();
 });

src/lib/bridge/handlers/open_options_page.ts

@@ -0,0 +1,38 @@
+import {RequestHandler} from '../types';
+import {gStore} from '../../storage/store';
+import {ClientSend} from '../client';
+import {DynamicStorageKey, StorageKey, StorageRow} from '../../storage/keys';
+import {RequestType} from './types';
+import {GetSetting, Settings} from '../../../settings';
+
+interface SettingsGetRequest<T extends keyof Settings> {
+    name: T;
+}
+
+interface SettingsGetResponse<T extends keyof Settings> {
+    value: Settings[T];
+}
+
+class SettingsGetHandler<T extends keyof Settings>
+    implements RequestHandler<SettingsGetRequest<T>, SettingsGetResponse<T>>
+{
+    getType(): RequestType {
+        return RequestType.SETTINGS_GET;
+    }
+
+    async handleRequest(
+        request: SettingsGetRequest<T>,
+        sender: chrome.runtime.MessageSender
+    ): Promise<SettingsGetResponse<T>> {
+        const value = await GetSetting(request.name);
+
+        return {value};
+    }
+}
+
+export async function Get<T extends keyof Settings>(name: T): Promise<Settings[T]> {
+    const resp = await ClientSend(new SettingsGetHandler<T>(), {name});
+    return resp.value;
+}
+
+export const SettingsGet = new SettingsGetHandler();

src/lib/bridge/handlers/settings_get.ts

@@ -0,0 +1,27 @@
+import {RequestHandler} from '../types';
+import {gStore} from '../../storage/store';
+import {ClientSend} from '../client';
+import {DynamicStorageKey, StorageKey, StorageRow} from '../../storage/keys';
+import {RequestType} from './types';
+import {SetSetting, Settings} from '../../../settings';
+
+interface SettingsSetRequest<T extends keyof Settings> {
+    name: T;
+    value: Settings[T];
+}
+
+class SettingsSetHandler<T extends keyof Settings> implements RequestHandler<SettingsSetRequest<T>, void> {
+    getType(): RequestType {
+        return RequestType.SETTINGS_SET;
+    }
+
+    async handleRequest(request: SettingsSetRequest<T>, sender: chrome.runtime.MessageSender): Promise<void> {
+        await SetSetting(request.name, request.value);
+    }
+}
+
+export async function Set<T extends keyof Settings>(name: T, value: Settings[T]): Promise<void> {
+    await ClientSend(new SettingsSetHandler<T>(), {name, value});
+}
+
+export const SettingsSet = new SettingsSetHandler();

src/lib/bridge/handlers/settings_set.ts

@@ -11,4 +11,6 @@ export enum RequestType {
     FETCH_SKIN_MODEL,
     FETCH_EXTENSION_FILE,
     OPEN_OPTIONS_PAGE,
+    SETTINGS_GET,
+    SETTINGS_SET,
 }

src/lib/bridge/handlers/types.ts

@@ -11,8 +11,7 @@ import {getMarketInspectLink} from './helpers';
 import {rgAsset, ListingData} from '../../types/steam';
 import {AppId, ContextId} from '../../types/steam_constants';
 import {isSkin} from '../../utils/skin';
-import {Get} from '../../bridge/handlers/storage_get';
-import {SETTINGS} from '../../storage/keys';
+import {Get} from '../../bridge/handlers/settings_get';
 
 enum Showing {
     NONE,
@@ -82,9 +81,7 @@ export class SkinViewer extends FloatElement {
     async connectedCallback() {
         super.connectedCallback();
 
-        const settings = await Get(SETTINGS);
-
-        this.isEnabled = !!settings && settings.market['3d-screenshot-buttons'];
+        this.isEnabled = await Get('3d-screenshot-buttons');
     }
 
     loadingIfApplicable(text: string, type: Showing) {

src/lib/components/market/skin_viewer.ts

@@ -1,7 +1,7 @@
 /**
  * Keys for use as the raw "key" in local/sync storage for a row
  */
-import {SettingsType} from '../../settings';
+import {StoredSettings} from '../../settings';
 import {SerializedFilter} from '../filter/types';
 
 export enum StorageKey {
@@ -47,4 +47,4 @@ export const PAGE_SIZE = newRow<number>(StorageKey.PAGE_SIZE);
 // Dynamic prefixes should be the market hash name of the item
 export const DYNAMIC_ITEM_FILTERS = newDynamicRow<SerializedFilter[]>(StorageKey.ITEM_FILTERS);
 export const GLOBAL_FILTERS = newRow<SerializedFilter[]>(StorageKey.GLOBAL_FILTERS);
-export const SETTINGS = newRow<SettingsType>(StorageKey.SETTINGS);
+export const SETTINGS = newRow<StoredSettings>(StorageKey.SETTINGS);