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

src/pages/channels/Channel.tsx

@@ -7,11 +7,12 @@ import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
-import { dispatch, getState } from "../../redux";
+import { useApplicationState } from "../../mobx/State";
+import { SIDEBAR_MEMBERS } from "../../mobx/stores/Layout";
 
 import { useClient } from "../../context/revoltjs/RevoltClient";
 
@@ -83,15 +84,8 @@ export function Channel({ id }: { id: string }) {
     return <TextChannel channel={channel} />;
 }
 
-const MEMBERS_SIDEBAR_KEY = "sidebar_members";
-const CHANNELS_SIDEBAR_KEY = "sidebar_channels";
 const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
-    const [showMembers, setMembers] = useState(
-        getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
-    );
-    const [showChannels, setChannels] = useState(
-        getState().sectionToggle[CHANNELS_SIDEBAR_KEY] ?? true,
-    );
+    const layout = useApplicationState().layout;
 
     // Mark channel as read.
     useEffect(() => {
@@ -121,45 +115,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                     channel.nsfw
                 )
             }>
-            <ChannelHeader
-                channel={channel}
-                toggleSidebar={() => {
-                    setMembers(!showMembers);
-
-                    if (showMembers) {
-                        dispatch({
-                            type: "SECTION_TOGGLE_SET",
-                            id: MEMBERS_SIDEBAR_KEY,
-                            state: false,
-                        });
-                    } else {
-                        dispatch({
-                            type: "SECTION_TOGGLE_UNSET",
-                            id: MEMBERS_SIDEBAR_KEY,
-                        });
-                    }
-                }}
-                toggleChannelSidebar={() => {
-                    if (isTouchscreenDevice) {
-                        return;
-                    }
-
-                    setChannels(!showChannels);
-
-                    if (showChannels) {
-                        dispatch({
-                            type: "SECTION_TOGGLE_SET",
-                            id: CHANNELS_SIDEBAR_KEY,
-                            state: false,
-                        });
-                    } else {
-                        dispatch({
-                            type: "SECTION_TOGGLE_UNSET",
-                            id: CHANNELS_SIDEBAR_KEY,
-                        });
-                    }
-                }}
-            />
+            <ChannelHeader channel={channel} />
             <ChannelMain>
                 <ChannelContent>
                     <VoiceHeader id={channel._id} />
@@ -168,7 +124,10 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                     <JumpToBottom channel={channel} />
                     <MessageBox channel={channel} />
                 </ChannelContent>
-                {!isTouchscreenDevice && showMembers && <RightSidebar />}
+                {!isTouchscreenDevice &&
+                    layout.getSectionState(SIDEBAR_MEMBERS, true) && (
+                        <RightSidebar />
+                    )}
             </ChannelMain>
         </AgeGate>
     );

src/pages/channels/ChannelHeader.tsx

@@ -1,4 +1,4 @@
-import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
+import { At, Hash } from "@styled-icons/boxicons-regular";
 import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js/dist/maps/Channels";
@@ -7,6 +7,9 @@ import styled, { css } from "styled-components";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
+import { useApplicationState } from "../../mobx/State";
+import { SIDEBAR_MEMBERS } from "../../mobx/stores/Layout";
+
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import { getChannelName } from "../../context/revoltjs/util";
 
@@ -69,14 +72,16 @@ const IconConainer = styled.div`
     cursor: pointer;
     color: var(--secondary-foreground);
 
-    ${!isTouchscreenDevice && css`
+    ${!isTouchscreenDevice &&
+    css`
         &:hover {
             color: var(--foreground);
         }
     `}
-`
+`;
 
-export default observer(({ channel, toggleSidebar, toggleChannelSidebar }: ChannelHeaderProps) => {
+export default observer(({ channel }: ChannelHeaderProps) => {
+    const layout = useApplicationState().layout;
     const { openScreen } = useIntermediate();
 
     const name = getChannelName(channel);
@@ -100,7 +105,12 @@ export default observer(({ channel, toggleSidebar, toggleChannelSidebar }: Chann
     return (
         <Header placement="primary">
             <HamburgerAction />
-            <IconConainer onClick={toggleChannelSidebar}>{icon}</IconConainer>
+            <IconConainer
+                onClick={() =>
+                    layout.toggleSectionState(SIDEBAR_MEMBERS, true)
+                }>
+                {icon}
+            </IconConainer>
             <Info>
                 <span className="name">{name}</span>
                 {isTouchscreenDevice &&
@@ -143,7 +153,7 @@ export default observer(({ channel, toggleSidebar, toggleChannelSidebar }: Chann
                         </>
                     )}
             </Info>
-            <HeaderActions channel={channel} toggleSidebar={toggleSidebar} />
+            <HeaderActions channel={channel} />
         </Header>
     );
 });

src/pages/channels/actions/HeaderActions.tsx

@@ -14,6 +14,9 @@ import { internalEmit } from "../../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
 
+import { useApplicationState } from "../../../mobx/State";
+import { SIDEBAR_MEMBERS } from "../../../mobx/stores/Layout";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import UpdateIndicator from "../../../components/common/UpdateIndicator";
@@ -21,10 +24,8 @@ import IconButton from "../../../components/ui/IconButton";
 
 import { ChannelHeaderProps } from "../ChannelHeader";
 
-export default function HeaderActions({
-    channel,
-    toggleSidebar,
-}: ChannelHeaderProps) {
+export default function HeaderActions({ channel }: ChannelHeaderProps) {
+    const layout = useApplicationState().layout;
     const { openScreen } = useIntermediate();
     const history = useHistory();
 
@@ -40,7 +41,7 @@ export default function HeaderActions({
         if (isTouchscreenDevice) {
             openRightSidebar();
         } else {
-            toggleSidebar?.();
+            layout.toggleSectionState(SIDEBAR_MEMBERS, true);
         }
     }
 

src/pages/channels/messaging/MessageRenderer.tsx

@@ -10,15 +10,12 @@ import styled from "styled-components";
 import { decodeTime } from "ulid";
 
 import { Text } from "preact-i18n";
-import { memo } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
 import { internalSubscribe, internalEmit } from "../../../lib/eventEmitter";
 import { ChannelRenderer } from "../../../lib/renderer/Singleton";
 
 import { useApplicationState } from "../../../mobx/State";
-import { connectState } from "../../../redux/connector";
-import { QueuedMessage } from "../../../redux/reducers/queue";
 
 import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
 import { useClient } from "../../../context/revoltjs/RevoltClient";