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

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,
-    };
-});