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

src/components/common/AgeGate.tsx

@@ -6,7 +6,8 @@ import styled from "styled-components";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { dispatch, getState } from "../../redux";
+import { useApplicationState } from "../../mobx/State";
+import { SECTION_NSFW } from "../../mobx/stores/Layout";
 
 import Button from "../ui/Button";
 import Checkbox from "../ui/Checkbox";
@@ -49,9 +50,7 @@ type Props = {
 
 export default observer((props: Props) => {
     const history = useHistory();
-    const [consent, setConsent] = useState(
-        getState().sectionToggle["nsfw"] ?? false,
-    );
+    const layout = useApplicationState().layout;
     const [ageGate, setAgeGate] = useState(false);
 
     if (ageGate || !props.gated) {
@@ -81,26 +80,19 @@ export default observer((props: Props) => {
             </span>
 
             <Checkbox
-                checked={consent}
-                onChange={(v) => {
-                    setConsent(v);
-                    if (v) {
-                        dispatch({
-                            type: "SECTION_TOGGLE_SET",
-                            id: "nsfw",
-                            state: true,
-                        });
-                    } else {
-                        dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
-                    }
-                }}>
+                checked={layout.getSectionState(SECTION_NSFW, false)}
+                onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}>
                 <Text id="app.main.channel.nsfw.confirm" />
             </Checkbox>
             <div className="actions">
                 <Button contrast onClick={() => history.goBack()}>
                     <Text id="app.special.modals.actions.back" />
                 </Button>
-                <Button contrast onClick={() => consent && setAgeGate(true)}>
+                <Button
+                    contrast
+                    onClick={() =>
+                        layout.getSectionState(SECTION_NSFW) && setAgeGate(true)
+                    }>
                     <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
                 </Button>
             </div>

src/components/common/messaging/Message.tsx

@@ -7,7 +7,7 @@ import { useState } from "preact/hooks";
 
 import { internalEmit } from "../../../lib/eventEmitter";
 
-import { QueuedMessage } from "../../../redux/reducers/queue";
+import { QueuedMessage } from "../../../mobx/stores/MessageQueue";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";

src/components/common/messaging/MessageBox.tsx

@@ -21,7 +21,7 @@ import {
 } from "../../../lib/renderer/Singleton";
 
 import { useApplicationState } from "../../../mobx/State";
-import { Reply } from "../../../redux/reducers/queue";
+import { Reply } from "../../../mobx/stores/MessageQueue";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import {
@@ -111,7 +111,7 @@ const Action = styled.div`
 const RE_SED = new RegExp("^s/([^])*/([^])*$");
 
 // ! FIXME: add to app config and load from app config
-export const CAN_UPLOAD_AT_ONCE = 4;
+export const CAN_UPLOAD_AT_ONCE = 5;
 
 export default observer(({ channel }: Props) => {
     const state = useApplicationState();

src/components/common/messaging/bars/ReplyBar.tsx

@@ -10,8 +10,9 @@ import { StateUpdater, useEffect } from "preact/hooks";
 
 import { internalSubscribe } from "../../../../lib/eventEmitter";
 
-import { dispatch, getState } from "../../../../redux";
-import { Reply } from "../../../../redux/reducers/queue";
+import { useApplicationState } from "../../../../mobx/State";
+import { SECTION_MENTION } from "../../../../mobx/stores/Layout";
+import { Reply } from "../../../../mobx/stores/MessageQueue";
 
 import IconButton from "../../../ui/IconButton";
 
@@ -81,6 +82,7 @@ const Base = styled.div`
 const MAX_REPLIES = 5;
 export default observer(({ channel, replies, setReplies }: Props) => {
     const client = channel.client;
+    const layout = useApplicationState().layout;
 
     // Event listener for adding new messages to reply bar.
     useEffect(() => {
@@ -99,7 +101,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                     mention:
                         message.author_id === client.user!._id
                             ? false
-                            : getState().sectionToggle.mention ?? false,
+                            : layout.getSectionState("SECTION_MENTION", false),
                 },
             ]);
         });
@@ -181,11 +183,11 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                             }),
                                         );
 
-                                        dispatch({
-                                            type: "SECTION_TOGGLE_SET",
-                                            id: "mention",
+                                        layout.setSectionState(
+                                            SECTION_MENTION,
                                             state,
-                                        });
+                                            false,
+                                        );
                                     }}>
                                     <span class="toggle">
                                         <At size={15} />

src/components/common/messaging/embed/EmbedInvite.tsx

@@ -10,8 +10,6 @@ import { useContext, useEffect, useState } from "preact/hooks";
 import { defer } from "../../../../lib/defer";
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 
-import { dispatch } from "../../../../redux";
-
 import {
     AppContext,
     ClientStatus,
@@ -33,7 +31,7 @@ const EmbedInviteBase = styled.div`
     align-items: center;
     padding: 0 12px;
     margin-top: 2px;
-    ${() => 
+    ${() =>
         isTouchscreenDevice &&
         css`
             flex-wrap: wrap;
@@ -44,19 +42,17 @@ const EmbedInviteBase = styled.div`
             > button {
                 width: 100%;
             }
-        `
-    }
+        `}
 `;
 
 const EmbedInviteDetails = styled.div`
     flex-grow: 1;
     padding-left: 12px;
-    ${() => 
+    ${() =>
         isTouchscreenDevice &&
         css`
             width: calc(100% - 55px);
-        `
-    }
+        `}
 `;
 
 const EmbedInviteName = styled.div`
@@ -74,11 +70,10 @@ type Props = {
     code: string;
 };
 
-export function EmbedInvite(props: Props) {
+export function EmbedInvite({ code }: Props) {
     const history = useHistory();
     const client = useContext(AppContext);
     const status = useContext(StatusContext);
-    const code = props.code;
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
     const [joinError, setJoinError] = useState<string | undefined>(undefined);
@@ -124,7 +119,8 @@ export function EmbedInvite(props: Props) {
                 <EmbedInviteDetails>
                     <EmbedInviteName>{invite.server_name}</EmbedInviteName>
                     <EmbedInviteMemberCount>
-                        {invite.member_count.toLocaleString()} {invite.member_count === 1 ? "member" : "members"}
+                        {invite.member_count.toLocaleString()}{" "}
+                        {invite.member_count === 1 ? "member" : "members"}
                     </EmbedInviteMemberCount>
                 </EmbedInviteDetails>
                 {processing ? (
@@ -151,10 +147,9 @@ export function EmbedInvite(props: Props) {
 
                                         defer(() => {
                                             if (server) {
-                                                dispatch({
-                                                    type: "UNREADS_MARK_MULTIPLE_READ",
-                                                    channels: server.channel_ids,
-                                                });
+                                                client.unreads!.markMultipleRead(
+                                                    server.channel_ids,
+                                                );
 
                                                 history.push(
                                                     `/server/${server._id}/channel/${invite.channel_id}`,
@@ -172,7 +167,9 @@ export function EmbedInvite(props: Props) {
                                 setProcessing(false);
                             }
                         }}>
-                        {client.servers.get(invite.server_id) ? "Joined" : "Join"}
+                        {client.servers.get(invite.server_id)
+                            ? "Joined"
+                            : "Join"}
                     </Button>
                 )}
             </EmbedInviteBase>

src/components/navigation/LeftSidebar.tsx

@@ -1,14 +1,16 @@
 import { Route, Switch } from "react-router";
 
+import { useApplicationState } from "../../mobx/State";
+import { SIDEBAR_CHANNELS } from "../../mobx/stores/Layout";
+
 import SidebarBase from "./SidebarBase";
 import HomeSidebar from "./left/HomeSidebar";
 import ServerListSidebar from "./left/ServerListSidebar";
 import ServerSidebar from "./left/ServerSidebar";
-import { useSelector } from "react-redux";
-import { State } from "../../redux";
 
 export default function LeftSidebar() {
-    const isOpen = useSelector((state: State) => state.sectionToggle['sidebar_channels'] ?? true)
+    const layout = useApplicationState().layout;
+    const isOpen = layout.getSectionState(SIDEBAR_CHANNELS, true);
 
     return (
         <SidebarBase>

src/components/navigation/left/ServerSidebar.tsx

@@ -11,7 +11,6 @@ import { internalEmit } from "../../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../../mobx/State";
-import { connectState } from "../../../redux/connector";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 

src/components/navigation/left/common.ts

@@ -1,79 +0,0 @@
-import { reaction } from "mobx";
-import { Channel } from "revolt.js/dist/maps/Channels";
-
-import { useLayoutEffect } from "preact/hooks";
-
-import { dispatch } from "../../../redux";
-import { Unreads } from "../../../redux/reducers/unreads";
-
-type UnreadProps = {
-    channel: Channel;
-    unreads: Unreads;
-};
-
-export function useUnreads({ channel, unreads }: UnreadProps) {
-    // const firstLoad = useRef(true);
-    useLayoutEffect(() => {
-        function checkUnread(target: Channel) {
-            if (!target) return;
-            if (target._id !== channel._id) return;
-            if (
-                target.channel_type === "SavedMessages" ||
-                target.channel_type === "VoiceChannel"
-            )
-                return;
-
-            const unread = unreads[channel._id]?.last_id;
-            if (target.last_message_id) {
-                if (
-                    !unread ||
-                    (unread && target.last_message_id.localeCompare(unread) > 0)
-                ) {
-                    dispatch({
-                        type: "UNREADS_MARK_READ",
-                        channel: channel._id,
-                        message: target.last_message_id,
-                    });
-
-                    channel.ack(target.last_message_id);
-                }
-            }
-        }
-
-        checkUnread(channel);
-        return reaction(
-            () => channel.last_message,
-            () => checkUnread(channel),
-        );
-    }, [channel, unreads]);
-}
-
-export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
-    const last_message_id = channel.last_message_id;
-
-    let unread: "mention" | "unread" | undefined;
-    let alertCount: undefined | number;
-    if (last_message_id && unreads) {
-        const u = unreads[channel._id];
-        if (u) {
-            if (u.mentions && u.mentions.length > 0) {
-                alertCount = u.mentions.length;
-                unread = "mention";
-            } else if (
-                u.last_id &&
-                (last_message_id as string).localeCompare(u.last_id) > 0
-            ) {
-                unread = "unread";
-            }
-        } else {
-            unread = "unread";
-        }
-    }
-
-    return {
-        channel,
-        timestamp: last_message_id ?? channel._id,
-        unread,
-        alertCount,
-    };
-}

src/components/ui/Modal.tsx

@@ -167,7 +167,7 @@ export default function Modal(props: Props) {
     isModalClosing = animateClose;
     const onClose = useCallback(() => {
         setAnimateClose(true);
-        setTimeout(() => props.onClose?.(), 2e2);
+        setTimeout(() => props.onClose!(), 2e2);
     }, [setAnimateClose, props]);
 
     useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);