feat(mobx): add experiments store

src/mobx/State.ts

@@ -5,6 +5,7 @@ import { useContext } from "preact/hooks";
 
 import Auth from "./stores/Auth";
 import Draft from "./stores/Draft";
+import Experiments from "./stores/Experiments";
 import LocaleOptions from "./stores/LocaleOptions";
 
 interface StoreDefinition {
@@ -22,6 +23,7 @@ export default class State {
     auth: Auth;
     draft: Draft;
     locale: LocaleOptions;
+    experiments: Experiments;
 
     /**
      * Construct new State.
@@ -30,6 +32,7 @@ export default class State {
         this.auth = new Auth();
         this.draft = new Draft();
         this.locale = new LocaleOptions();
+        this.experiments = new Experiments();
 
         makeAutoObservable(this);
     }

src/mobx/stores/Experiments.ts

@@ -10,7 +10,7 @@ export type Experiment = "dummy" | "theme_shop";
 /**
  * Currently active experiments.
  */
-export const AVAILABLE_EXPERIMENTS: Experiment[] = ["theme_shop"];
+export const AVAILABLE_EXPERIMENTS: Experiment[] = ["dummy", "theme_shop"];
 
 /**
  * Definitions for experiments listed by {@link Experiment}.
@@ -84,6 +84,19 @@ export default class Experiments implements Persistent<Data> {
         this.enabled.delete(experiment);
     }
 
+    /**
+     * Set the state of an experiment.
+     * @param key Experiment
+     * @param enabled Whether this experiment is enabled.
+     */
+    @computed setEnabled(key: Experiment, enabled: boolean): void {
+        if (enabled) {
+            this.enable(key);
+        } else {
+            this.disable(key);
+        }
+    }
+
     /**
      * Reset and disable all experiments.
      */

src/pages/settings/Settings.tsx

@@ -18,6 +18,7 @@ import {
     Speaker,
     Store,
 } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Route, Switch, useHistory } from "react-router-dom";
 import { LIBRARY_VERSION } from "revolt.js";
 
@@ -25,7 +26,7 @@ import styles from "./Settings.module.scss";
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 
-import { isExperimentEnabled } from "../../redux/reducers/experiments";
+import { useApplicationState } from "../../mobx/State";
 
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
 import {
@@ -53,10 +54,11 @@ import { Sessions } from "./panes/Sessions";
 import { Sync } from "./panes/Sync";
 import { ThemeShop } from "./panes/ThemeShop";
 
-export default function Settings() {
+export default observer(() => {
     const history = useHistory();
     const client = useContext(AppContext);
     const operations = useContext(OperationsContext);
+    const experiments = useApplicationState().experiments;
 
     function switchPage(to?: string) {
         if (to) {
@@ -127,14 +129,14 @@ export default function Settings() {
                     title: <Text id="app.settings.pages.experiments.title" />,
                 },
                 {
-                    divider: !isExperimentEnabled("theme_shop"),
+                    divider: !experiments.isEnabled("theme_shop"),
                     category: "revolt",
                     id: "bots",
                     icon: <Bot size={20} />,
                     title: <Text id="app.settings.pages.bots.title" />,
                 },
                 {
-                    hidden: !isExperimentEnabled("theme_shop"),
+                    hidden: !experiments.isEnabled("theme_shop"),
                     divider: true,
                     id: "theme_shop",
                     icon: <Store size={20} />,
@@ -180,7 +182,7 @@ export default function Settings() {
                     <Route path="/settings/bots">
                         <MyBots />
                     </Route>
-                    {isExperimentEnabled("theme_shop") && (
+                    {experiments.isEnabled("theme_shop") && (
                         <Route path="/settings/theme_shop">
                             <ThemeShop />
                         </Route>
@@ -260,4 +262,4 @@ export default function Settings() {
             }
         />
     );
-}
+});

src/pages/settings/panes/Experiments.tsx

@@ -1,22 +1,19 @@
+import { observer } from "mobx-react-lite";
+
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 
-import { dispatch } from "../../../redux";
+import { useApplicationState } from "../../../mobx/State";
-import { connectState } from "../../../redux/connector";
 import {
     AVAILABLE_EXPERIMENTS,
-    ExperimentOptions,
     EXPERIMENTS,
-    isExperimentEnabled,
+} from "../../../mobx/stores/Experiments";
-} from "../../../redux/reducers/experiments";
 
 import Checkbox from "../../../components/ui/Checkbox";
 
-interface Props {
+export const ExperimentsPage = observer(() => {
-    options?: ExperimentOptions;
+    const experiments = useApplicationState().experiments;
-}
 
-export function Component(props: Props) {
     return (
         <div className={styles.experiments}>
             <h3>
@@ -25,15 +22,8 @@ export function Component(props: Props) {
             {AVAILABLE_EXPERIMENTS.map((key) => (
                 <Checkbox
                     key={key}
-                    checked={isExperimentEnabled(key, props.options)}
+                    checked={experiments.isEnabled(key)}
-                    onChange={(enabled) =>
+                    onChange={(enabled) => experiments.setEnabled(key, enabled)}
-                        dispatch({
-                            type: enabled
-                                ? "EXPERIMENTS_ENABLE"
-                                : "EXPERIMENTS_DISABLE",
-                            key,
-                        })
-                    }
                     description={EXPERIMENTS[key].description}>
                     {EXPERIMENTS[key].title}
                 </Checkbox>
@@ -45,10 +35,4 @@ export function Component(props: Props) {
             )}
         </div>
     );
-}
-
-export const ExperimentsPage = connectState(Component, (state) => {
-    return {
-        options: state.experiments,
-    };
 });