feat(mobx): refactor and remove (react-)redux

src/pages/settings/panes/Audio.tsx

@@ -6,8 +6,6 @@ import { TextReact } from "../../../lib/i18n";
 import { stopPropagation } from "../../../lib/stopPropagation";
 import { voiceState } from "../../../lib/vortex/VoiceState";
 
-import { connectState } from "../../../redux/connector";
-
 import Button from "../../../components/ui/Button";
 import ComboBox from "../../../components/ui/ComboBox";
 import Overline from "../../../components/ui/Overline";
@@ -17,7 +15,7 @@ const constraints = { audio: true };
 
 // TODO: do not rewrite this code until voice is rewritten!
 
-export function Component() {
+export function Audio() {
     const [mediaStream, setMediaStream] = useState<MediaStream | undefined>(
         undefined,
     );
@@ -163,7 +161,3 @@ function changeAudioDevice(deviceId: string, deviceType: string) {
         window.localStorage.setItem("audioOutputDevice", deviceId);
     }
 }
-
-export const Audio = connectState(Component, () => {
-    return;
-});

src/pages/settings/panes/Languages.tsx

@@ -4,12 +4,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useMemo } from "preact/hooks";
 
-import PaintCounter from "../../../lib/PaintCounter";
-
 import { useApplicationState } from "../../../mobx/State";
-import LocaleOptions from "../../../mobx/stores/LocaleOptions";
-import { dispatch } from "../../../redux";
-import { connectState } from "../../../redux/connector";
 
 import {
     Language,

src/pages/settings/panes/Notifications.tsx

@@ -5,23 +5,16 @@ import { useContext, useEffect, useState } from "preact/hooks";
 import { urlBase64ToUint8Array } from "../../../lib/conversion";
 
 import { useApplicationState } from "../../../mobx/State";
-import { dispatch } from "../../../redux";
-import { connectState } from "../../../redux/connector";
-import { NotificationOptions } from "../../../redux/reducers/settings";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import Checkbox from "../../../components/ui/Checkbox";
 
-interface Props {
-    options?: NotificationOptions;
-}
-
-export function Component({ options }: Props) {
+export function Notifications() {
     const client = useContext(AppContext);
     const { openScreen } = useIntermediate();
-    const sounds = useApplicationState().settings.sounds;
+    const settings = useApplicationState().settings;
     const [pushEnabled, setPushEnabled] = useState<undefined | boolean>(
         undefined,
     );
@@ -43,7 +36,7 @@ export function Component({ options }: Props) {
             </h3>
             <Checkbox
                 disabled={!("Notification" in window)}
-                checked={options?.desktopEnabled ?? false}
+                checked={settings.get("notifications:desktop", false)!}
                 description={
                     <Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
                 }
@@ -51,6 +44,7 @@ export function Component({ options }: Props) {
                     if (desktopEnabled) {
                         const permission =
                             await Notification.requestPermission();
+
                         if (permission !== "granted") {
                             return openScreen({
                                 id: "error",
@@ -59,10 +53,7 @@ export function Component({ options }: Props) {
                         }
                     }
 
-                    dispatch({
-                        type: "SETTINGS_SET_NOTIFICATION_OPTIONS",
-                        options: { desktopEnabled },
-                    });
+                    settings.set("notifications:desktop", desktopEnabled);
                 }}>
                 <Text id="app.settings.pages.notifications.enable_desktop" />
             </Checkbox>
@@ -115,20 +106,16 @@ export function Component({ options }: Props) {
             <h3>
                 <Text id="app.settings.pages.notifications.sounds" />
             </h3>
-            {sounds.getState().map(({ id, enabled }) => (
+            {settings.sounds.getState().map(({ id, enabled }) => (
                 <Checkbox
                     key={id}
                     checked={enabled}
-                    onChange={(enabled) => sounds.setEnabled(id, enabled)}>
+                    onChange={(enabled) =>
+                        settings.sounds.setEnabled(id, enabled)
+                    }>
                     <Text id={`app.settings.pages.notifications.sound.${id}`} />
                 </Checkbox>
             ))}
         </div>
     );
 }
-
-export const Notifications = connectState(Component, (state) => {
-    return {
-        options: state.settings.notification,
-    };
-});

src/pages/settings/panes/Sync.tsx

@@ -1,17 +1,16 @@
+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 { SyncKeys, SyncOptions } from "../../../redux/reducers/sync";
+import { useApplicationState } from "../../../mobx/State";
+import { SyncKeys } from "../../../mobx/stores/Sync";
 
 import Checkbox from "../../../components/ui/Checkbox";
 
-interface Props {
-    options?: SyncOptions;
-}
+export const Sync = observer(() => {
+    const sync = useApplicationState().sync;
 
-export function Component(props: Props) {
     return (
         <div className={styles.notifications}>
             <h3>
@@ -27,31 +26,16 @@ export function Component(props: Props) {
             ).map(([key, title]) => (
                 <Checkbox
                     key={key}
-                    checked={
-                        (props.options?.disabled ?? []).indexOf(key) === -1
-                    }
+                    checked={sync.isEnabled(key)}
                     description={
                         <Text
                             id={`app.settings.pages.sync.descriptions.${key}`}
                         />
                     }
-                    onChange={(enabled) =>
-                        dispatch({
-                            type: enabled
-                                ? "SYNC_ENABLE_KEY"
-                                : "SYNC_DISABLE_KEY",
-                            key,
-                        })
-                    }>
+                    onChange={() => sync.toggle(key)}>
                     <Text id={`app.settings.pages.${title}`} />
                 </Checkbox>
             ))}
         </div>
     );
-}
-
-export const Sync = connectState(Component, (state) => {
-    return {
-        options: state.sync,
-    };
 });

src/pages/settings/panes/ThemeShop.tsx

@@ -3,9 +3,8 @@ import styled from "styled-components";
 import { useEffect, useState } from "preact/hooks";
 
 import { useApplicationState } from "../../../mobx/State";
-import { dispatch } from "../../../redux";
 
-import { Theme, generateVariables, ThemeOptions } from "../../../context/Theme";
+import { Theme, generateVariables } from "../../../context/Theme";
 
 import Tip from "../../../components/ui/Tip";
 import previewPath from "../assets/preview.svg";