diff --git a/src/mobx/State.ts b/src/mobx/State.ts index 752f2cdf..0b36de10 100644 --- a/src/mobx/State.ts +++ b/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); } diff --git a/src/mobx/stores/Experiments.ts b/src/mobx/stores/Experiments.ts index d3058c44..685a2a0b 100644 --- a/src/mobx/stores/Experiments.ts +++ b/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 { 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. */ diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 594421d9..d11b281b 100644 --- a/src/pages/settings/Settings.tsx +++ b/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: , }, { - divider: !isExperimentEnabled("theme_shop"), + divider: !experiments.isEnabled("theme_shop"), category: "revolt", id: "bots", icon: , title: , }, { - hidden: !isExperimentEnabled("theme_shop"), + hidden: !experiments.isEnabled("theme_shop"), divider: true, id: "theme_shop", icon: , @@ -180,7 +182,7 @@ export default function Settings() { - {isExperimentEnabled("theme_shop") && ( + {experiments.isEnabled("theme_shop") && ( @@ -260,4 +262,4 @@ export default function Settings() { } /> ); -} +}); diff --git a/src/pages/settings/panes/Experiments.tsx b/src/pages/settings/panes/Experiments.tsx index 7e50c892..b91e756f 100644 --- a/src/pages/settings/panes/Experiments.tsx +++ b/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 (

@@ -25,15 +22,8 @@ export function Component(props: Props) { {AVAILABLE_EXPERIMENTS.map((key) => ( - 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} @@ -45,10 +35,4 @@ export function Component(props: Props) { )}

); -} - -export const ExperimentsPage = connectState(Component, (state) => { - return { - options: state.experiments, - }; });