refactor: add config store (@fehmer)

frontend/src/ts/components/pages/AboutPage.tsx

@@ -4,13 +4,13 @@ import { Button } from "../common/Button";
 import { showModal } from "../../stores/modals";
 import AsyncContent from "../common/AsyncContent";
 import { getActivePage } from "../../signals/core";
-import { getAds } from "../../signals/config";
 import { getContributorsList, getSupportersList } from "../../utils/json-data";
 import Ape from "../../ape";
 import { intervalToDuration } from "date-fns";
 import { getNumberWithMagnitude, numberWithSpaces } from "../../utils/numbers";
 import { ChartJs } from "../common/ChartJs";
 import { getThemeColors } from "../../signals/theme";
+import { getConfig } from "../../signals/config";
 
 export function AboutPage(): JSXElement {
   const isOpen = (): boolean => getActivePage() === "about";
@@ -235,7 +235,7 @@ export function AboutPage(): JSXElement {
           </dd>
         </dl>
       </div>
-      <Show when={getAds() === "sellout"}>
+      <Show when={getConfig.ads === "sellout"}>
         <div id="ad-about-1-wrapper" class="ad full-width advertisement ad-h">
           <div class="icon">
             <i class="fas fa-ad"></i>
@@ -364,7 +364,7 @@ export function AboutPage(): JSXElement {
           themes and more
         </p>
       </div>
-      <Show when={getAds() === "sellout"}>
+      <Show when={getConfig.ads === "sellout"}>
         <div id="ad-about-2-wrapper" class="ad full-width advertisement ad-h">
           <div class="icon">
             <i class="fas fa-ad"></i>

frontend/src/ts/config.ts

@@ -353,6 +353,7 @@ export async function applyConfigFromJson(json: string): Promise<void> {
 const { promise: configLoadPromise, resolve: loadDone } =
   promiseWithResolvers();
 
+export const getConfig = (): Config => config;
 export { configLoadPromise };
 export default config;
 export const __testing = {

frontend/src/ts/signals/config.ts

@@ -1,13 +1,31 @@
-import { createSignal } from "solid-js";
 import { subscribe } from "../observables/config-event";
-import { Ads } from "@monkeytype/schemas/configs";
+import {
+  Config as ConfigType,
+  ConfigKey,
+  ConfigValue,
+} from "@monkeytype/schemas/configs";
+import { createStore } from "solid-js/store";
+import { getDefaultConfig } from "../constants/default-config";
+import * as Config from "../config";
 
-export const [getAds, setAds] = createSignal<Ads>("off");
+const [getConfig, setConfigStore] = createStore<ConfigType>(getDefaultConfig());
+export { getConfig };
 
-//populate selected config events to the core signals
-//this will get replaced once the config is converted to a signal/store
+// Function eventually will set the store directly
+export function setSetConfig(key: ConfigKey, value: ConfigValue): void {
+  Config.setConfig(key, value);
+}
+
+let fullConfigChange = false;
 subscribe(({ key, newValue }) => {
-  if (key === "ads") {
-    setAds(newValue);
+  if (key === "fullConfigChange") {
+    fullConfigChange = true;
+  } else if (key === "fullConfigChangeFinished") {
+    fullConfigChange = false;
+    setConfigStore(Config.getConfig());
+  } else if (fullConfigChange) {
+    return;
+  } else {
+    setConfigStore(key, newValue);
   }
 });