feat(mobx): migrate audio settings

src/context/Settings.tsx

@@ -1,61 +0,0 @@
-// This code is more or less redundant, but settings has so little state
-// updates that I can't be asked to pass everything through props each
-// time when I can just use the Context API.
-//
-// Replace references to SettingsContext with connectState in the future
-// if it does cause problems though.
-//
-// This now also supports Audio stuff.
-import defaultsDeep from "lodash.defaultsdeep";
-
-import { createContext } from "preact";
-import { useMemo } from "preact/hooks";
-
-import { connectState } from "../redux/connector";
-import {
-    DEFAULT_SOUNDS,
-    Settings,
-    SoundOptions,
-} from "../redux/reducers/settings";
-
-import { playSound, Sounds } from "../assets/sounds/Audio";
-import { Children } from "../types/Preact";
-
-export const SettingsContext = createContext<Settings>({});
-export const SoundContext = createContext<(sound: Sounds) => void>(null!);
-
-interface Props {
-    children?: Children;
-    settings: Settings;
-}
-
-function SettingsProvider({ settings, children }: Props) {
-    const play = useMemo(() => {
-        const enabled: SoundOptions = defaultsDeep(
-            settings.notification?.sounds ?? {},
-            DEFAULT_SOUNDS,
-        );
-        return (sound: Sounds) => {
-            if (enabled[sound]) {
-                playSound(sound);
-            }
-        };
-    }, [settings.notification]);
-
-    return (
-        <SettingsContext.Provider value={settings}>
-            <SoundContext.Provider value={play}>
-                {children}
-            </SoundContext.Provider>
-        </SettingsContext.Provider>
-    );
-}
-
-export default connectState<Omit<Props, "settings">>(
-    SettingsProvider,
-    (state) => {
-        return {
-            settings: state.settings,
-        };
-    },
-);

src/context/index.tsx

@@ -4,7 +4,6 @@ import State from "../redux/State";
 
 import { Children } from "../types/Preact";
 import Locale from "./Locale";
-import Settings from "./Settings";
 import Theme from "./Theme";
 import Intermediate from "./intermediate/Intermediate";
 import Client from "./revoltjs/RevoltClient";
@@ -17,13 +16,11 @@ export default function Context({ children }: { children: Children }) {
     return (
         <Router basename={import.meta.env.BASE_URL}>
             <State>
-                <Settings>
-                    <Locale>
-                        <Intermediate>
-                            <Client>{children}</Client>
-                        </Intermediate>
-                    </Locale>
-                </Settings>
+                <Locale>
+                    <Intermediate>
+                        <Client>{children}</Client>
+                    </Intermediate>
+                </Locale>
                 <Theme />
             </State>
         </Router>

src/context/revoltjs/Notifications.tsx

@@ -9,21 +9,9 @@ import { useCallback, useContext, useEffect } from "preact/hooks";
 import { useTranslation } from "../../lib/i18n";
 
 import { useApplicationState } from "../../mobx/State";
-import { connectState } from "../../redux/connector";
-import {
-    getNotificationState,
-    Notifications,
-    shouldNotify,
-} from "../../redux/reducers/notifications";
-import { NotificationOptions } from "../../redux/reducers/settings";
 
-import { SoundContext } from "../Settings";
 import { AppContext } from "./RevoltClient";
 
-interface Props {
-    options?: NotificationOptions;
-}
-
 const notifications: { [key: string]: Notification } = {};
 
 async function createNotification(
@@ -38,10 +26,11 @@ async function createNotification(
     }
 }
 
-function Notifier({ options }: Props) {
+function Notifier() {
     const translate = useTranslation();
-    const showNotification = options?.desktopEnabled ?? false;
-    const notifs = useApplicationState().notifications;
+    const state = useApplicationState();
+    const notifs = state.notifications;
+    const showNotification = state.settings.get("notifications:desktop");
 
     const client = useContext(AppContext);
     const { guild: guild_id, channel: channel_id } = useParams<{
@@ -49,14 +38,13 @@ function Notifier({ options }: Props) {
         channel: string;
     }>();
     const history = useHistory();
-    const playSound = useContext(SoundContext);
 
     const message = useCallback(
         async (msg: Message) => {
             if (msg.channel_id === channel_id && document.hasFocus()) return;
             if (!notifs.shouldNotify(msg)) return;
 
-            playSound("message");
+            state.settings.sounds.playSound("message");
             if (!showNotification) return;
 
             let title;
@@ -209,7 +197,7 @@ function Notifier({ options }: Props) {
             channel_id,
             client,
             notifs,
-            playSound,
+            state,
         ],
     );
 
@@ -257,7 +245,7 @@ function Notifier({ options }: Props) {
         };
     }, [
         client,
-        playSound,
+        state,
         guild_id,
         channel_id,
         showNotification,
@@ -285,27 +273,17 @@ function Notifier({ options }: Props) {
     return null;
 }
 
-const NotifierComponent = connectState(
-    Notifier,
-    (state) => {
-        return {
-            options: state.settings.notification,
-        };
-    },
-    true,
-);
-
 export default function NotificationsComponent() {
     return (
         <Switch>
             <Route path="/server/:server/channel/:channel">
-                <NotifierComponent />
+                <Notifier />
             </Route>
             <Route path="/channel/:channel">
-                <NotifierComponent />
+                <Notifier />
             </Route>
             <Route path="/">
-                <NotifierComponent />
+                <Notifier />
             </Route>
         </Switch>
     );