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>