feat(mobx): add experiments store

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 { connectState } from "../../../redux/connector";
+import { useApplicationState } from "../../../mobx/State";
 import {
     AVAILABLE_EXPERIMENTS,
-    ExperimentOptions,
     EXPERIMENTS,
-    isExperimentEnabled,
-} from "../../../redux/reducers/experiments";
+} from "../../../mobx/stores/Experiments";
 
 import Checkbox from "../../../components/ui/Checkbox";
 
-interface Props {
-    options?: ExperimentOptions;
-}
+export const ExperimentsPage = observer(() => {
+    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)}
-                    onChange={(enabled) =>
-                        dispatch({
-                            type: enabled
-                                ? "EXPERIMENTS_ENABLE"
-                                : "EXPERIMENTS_DISABLE",
-                            key,
-                        })
-                    }
+                    checked={experiments.isEnabled(key)}
+                    onChange={(enabled) => experiments.setEnabled(key, enabled)}
                     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,
-    };
 });