feat: implement useClient from client controller

src/components/common/AutoComplete.tsx

@@ -3,9 +3,8 @@ import styled, { css } from "styled-components/macro";
 
 import { StateUpdater, useState } from "preact/hooks";
 
-import { useClient } from "../../context/revoltjs/RevoltClient";
-
 import { emojiDictionary } from "../../assets/emojis";
+import { useClient } from "../../controllers/client/ClientController";
 import ChannelIcon from "./ChannelIcon";
 import Emoji from "./Emoji";
 import UserIcon from "./user/UserIcon";

src/components/common/ChannelIcon.tsx

@@ -2,12 +2,9 @@ import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js";
 
-import { useContext } from "preact/hooks";
-
-import { AppContext } from "../../context/revoltjs/RevoltClient";
-
 import fallback from "./assets/group.png";
 
+import { useClient } from "../../controllers/client/ClientController";
 import { ImageIconBase, IconBaseProps } from "./IconBase";
 
 interface Props extends IconBaseProps<Channel> {
@@ -22,7 +19,7 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useContext(AppContext);
+        const client = useClient();
 
         const {
             size,

src/components/common/ServerIcon.tsx

@@ -4,8 +4,7 @@ import styled from "styled-components/macro";
 
 import { useContext } from "preact/hooks";
 
-import { AppContext } from "../../context/revoltjs/RevoltClient";
-
+import { useClient } from "../../controllers/client/ClientController";
 import { IconBaseProps, ImageIconBase } from "./IconBase";
 
 interface Props extends IconBaseProps<Server> {
@@ -34,7 +33,7 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useContext(AppContext);
+        const client = useClient();
 
         const { target, attachment, size, animate, server_name, ...imgProps } =
             props;

src/components/common/messaging/Message.tsx

@@ -14,8 +14,8 @@ import { QueuedMessage } from "../../../mobx/stores/MessageQueue";
 
 import { I18nError } from "../../../context/Locale";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import Markdown from "../../markdown/Markdown";
 import UserIcon from "../user/UserIcon";
 import { Username } from "../user/UserShort";
@@ -52,7 +52,7 @@ const Message = observer(
         queued,
         hideReply,
     }: Props) => {
-        const client = useClient();
+        const client = message.client;
         const user = message.author;
 
         const { openScreen } = useIntermediate();

src/components/common/messaging/MessageBox.tsx

@@ -29,9 +29,9 @@ import {
     grabFiles,
     uploadFile,
 } from "../../../context/revoltjs/FileUploads";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { takeError } from "../../../context/revoltjs/util";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 import AutoComplete, { useAutoComplete } from "../AutoComplete";
 import { PermissionTooltip } from "../Tooltip";
@@ -148,7 +148,7 @@ export default observer(({ channel }: Props) => {
     });
     const [typing, setTyping] = useState<boolean | number>(false);
     const [replies, setReplies] = useState<Reply[]>([]);
-    const client = useContext(AppContext);
+    const client = useClient();
     const translate = useTranslation();
 
     const renderer = getRenderer(channel);

src/components/common/messaging/attachments/Attachment.tsx

@@ -3,10 +3,9 @@ import { API } from "revolt.js";
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
 import { useTriggerEvents } from "preact-context-menu";
-import { useContext, useState } from "preact/hooks";
-
-import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+import { useState } from "preact/hooks";
 
+import { useClient } from "../../../../controllers/client/ClientController";
 import AttachmentActions from "./AttachmentActions";
 import { SizedGrid } from "./Grid";
 import ImageFile from "./ImageFile";
@@ -21,7 +20,7 @@ interface Props {
 const MAX_ATTACHMENT_WIDTH = 480;
 
 export default function Attachment({ attachment, hasContent }: Props) {
-    const client = useContext(AppContext);
+    const client = useClient();
     const { filename, metadata } = attachment;
     const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
 

src/components/common/messaging/attachments/AttachmentActions.tsx

@@ -15,14 +15,14 @@ import { IconButton } from "@revoltchat/ui";
 
 import { determineFileSize } from "../../../../lib/fileSize";
 
-import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+import { useClient } from "../../../../controllers/client/ClientController";
 
 interface Props {
     attachment: API.File;
 }
 
 export default function AttachmentActions({ attachment }: Props) {
-    const client = useContext(AppContext);
+    const client = useClient();
     const { filename, metadata, size } = attachment;
 
     const url = client.generateFileURL(attachment);

src/components/common/messaging/attachments/ImageFile.tsx

@@ -5,7 +5,8 @@ import classNames from "classnames";
 import { useContext, useState } from "preact/hooks";
 
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
-import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+
+import { useClient } from "../../../../controllers/client/ClientController";
 
 enum ImageLoadingState {
     Loading,
@@ -19,7 +20,7 @@ type Props = JSX.HTMLAttributes<HTMLImageElement> & {
 
 export default function ImageFile({ attachment, ...props }: Props) {
     const [loading, setLoading] = useState(ImageLoadingState.Loading);
-    const client = useContext(AppContext);
+    const client = useClient();
     const { openScreen } = useIntermediate();
     const url = client.generateFileURL(attachment)!;
 

src/components/common/messaging/attachments/TextFile.tsx

@@ -3,15 +3,13 @@ import { API } from "revolt.js";
 
 import styles from "./Attachment.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { Button, Preloader } from "@revoltchat/ui";
 
 import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
-import {
-    AppContext,
-    StatusContext,
-} from "../../../../context/revoltjs/RevoltClient";
+
+import { useClient } from "../../../../controllers/client/ClientController";
 
 interface Props {
     attachment: API.File;
@@ -23,9 +21,8 @@ export default function TextFile({ attachment }: Props) {
     const [gated, setGated] = useState(attachment.size > 100_000);
     const [content, setContent] = useState<undefined | string>(undefined);
     const [loading, setLoading] = useState(false);
-    const status = useContext(StatusContext);
-    const client = useContext(AppContext);
 
+    const client = useClient();
     const url = client.generateFileURL(attachment)!;
 
     useEffect(() => {
@@ -56,7 +53,7 @@ export default function TextFile({ attachment }: Props) {
                     setLoading(false);
                 });
         }
-    }, [content, loading, gated, status, attachment._id, attachment.size, url]);
+    }, [content, loading, gated, attachment._id, attachment.size, url]);
 
     return (
         <div

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

@@ -7,7 +7,6 @@ import {
     Notification,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Permission } from "revolt.js";
 import { Message as MessageObject } from "revolt.js";
 import styled from "styled-components";
 
@@ -24,8 +23,8 @@ import {
     Screen,
     useIntermediate,
 } from "../../../../context/intermediate/Intermediate";
-import { useClient } from "../../../../context/revoltjs/RevoltClient";
 
+import { useClient } from "../../../../controllers/client/ClientController";
 import Tooltip from "../../../common/Tooltip";
 
 interface Props {
@@ -88,7 +87,7 @@ const Divider = styled.div`
 `;
 
 export const MessageOverlayBar = observer(({ message, queued }: Props) => {
-    const client = useClient();
+    const client = message.client;
     const { openScreen, writeClipboard } = useIntermediate();
     const isAuthor = message.author_id === client.user!._id;
 

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

@@ -5,8 +5,8 @@ import classNames from "classnames";
 import { useContext } from "preact/hooks";
 
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
-import { useClient } from "../../../../context/revoltjs/RevoltClient";
 
+import { useClient } from "../../../../controllers/client/ClientController";
 import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
 import Markdown from "../../../markdown/Markdown";
 import Attachment from "../attachments/Attachment";

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

@@ -1,5 +1,4 @@
 import { Group } from "@styled-icons/boxicons-solid";
-import { reaction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { Message, API } from "revolt.js";
@@ -12,14 +11,13 @@ import { Button, Category, Preloader } from "@revoltchat/ui";
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 
 import { I18nError } from "../../../../context/Locale";
-import {
-    AppContext,
-    ClientStatus,
-    StatusContext,
-} from "../../../../context/revoltjs/RevoltClient";
 import { takeError } from "../../../../context/revoltjs/util";
 
 import ServerIcon from "../../../../components/common/ServerIcon";
+import {
+    useClient,
+    useSession,
+} from "../../../../controllers/client/ClientController";
 
 const EmbedInviteBase = styled.div`
     width: 400px;
@@ -78,8 +76,8 @@ type Props = {
 
 export function EmbedInvite({ code }: Props) {
     const history = useHistory();
-    const client = useContext(AppContext);
-    const status = useContext(StatusContext);
+    const session = useSession()!;
+    const client = session.client!;
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
     const [joinError, setJoinError] = useState<string | undefined>(undefined);
@@ -90,7 +88,7 @@ export function EmbedInvite({ code }: Props) {
     useEffect(() => {
         if (
             typeof invite === "undefined" &&
-            (status === ClientStatus.ONLINE || status === ClientStatus.READY)
+            (session.state === "Online" || session.state === "Ready")
         ) {
             client
                 .fetchInvite(code)
@@ -99,7 +97,7 @@ export function EmbedInvite({ code }: Props) {
                 )
                 .catch((err) => setError(takeError(err)));
         }
-    }, [client, code, invite, status]);
+    }, [client, code, invite, session.state]);
 
     if (typeof invite === "undefined") {
         return error ? (

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

@@ -4,7 +4,8 @@ import { API } from "revolt.js";
 import styles from "./Embed.module.scss";
 
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
-import { useClient } from "../../../../context/revoltjs/RevoltClient";
+
+import { useClient } from "../../../../controllers/client/ClientController";
 
 interface Props {
     embed: API.Embed;

src/components/common/user/UserIcon.tsx

@@ -6,10 +6,9 @@ import styled, { css } from "styled-components/macro";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import { useClient } from "../../../context/revoltjs/RevoltClient";
-
 import fallback from "../assets/user.png";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import IconBase, { IconBaseProps } from "../IconBase";
 
 type VoiceStatus = "muted" | "deaf";
@@ -56,7 +55,7 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useApplicationState().client!;
+        const client = useClient();
 
         const {
             target,

src/components/common/user/UserShort.tsx

@@ -9,8 +9,8 @@ import { Text } from "preact-i18n";
 import { internalEmit } from "../../../lib/eventEmitter";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import UserIcon from "./UserIcon";
 
 const BotBadge = styled.div`

src/components/markdown/Renderer.tsx

@@ -15,9 +15,9 @@ import { determineLink } from "../../lib/links";
 
 import { dayjs } from "../../context/Locale";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
 
 import { emojiDictionary } from "../../assets/emojis";
+import { useClient } from "../../controllers/client/ClientController";
 import { generateEmoji } from "../common/Emoji";
 import { MarkdownProps } from "./Markdown";
 import Prism from "./prism";
@@ -118,7 +118,7 @@ const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
 const RE_TIME = /<t:([0-9]+):(\w)>/g;
 
 export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
-    const client = useContext(AppContext);
+    const client = useClient();
     const { openLink } = useIntermediate();
 
     if (typeof content === "undefined") return null;

src/components/navigation/BottomNavigation.tsx

@@ -9,8 +9,7 @@ import ConditionalLink from "../../lib/ConditionalLink";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { useClient } from "../../context/revoltjs/RevoltClient";
-
+import { useClient } from "../../controllers/client/ClientController";
 import UserIcon from "../common/user/UserIcon";
 
 const Base = styled.div`

src/components/navigation/items/ConnectionStatus.tsx

@@ -1,45 +1,43 @@
+import { observer } from "mobx-react-lite";
+
 import { Text } from "preact-i18n";
-import { useContext } from "preact/hooks";
 
 import { Banner } from "@revoltchat/ui";
 
-import {
-    ClientStatus,
-    StatusContext,
-    useClient,
-} from "../../../context/revoltjs/RevoltClient";
+import { useSession } from "../../../controllers/client/ClientController";
 
-export default function ConnectionStatus() {
-    const status = useContext(StatusContext);
-    const client = useClient();
+function ConnectionStatus() {
+    const session = useSession()!;
 
-    if (status === ClientStatus.OFFLINE) {
+    if (session.state === "Offline") {
         return (
             <Banner>
                 <Text id="app.special.status.offline" />
             </Banner>
         );
-    } else if (status === ClientStatus.DISCONNECTED) {
+    } else if (session.state === "Disconnected") {
         return (
             <Banner>
                 <Text id="app.special.status.disconnected" /> <br />
-                <a onClick={() => client.websocket.connect()}>
+                <a
+                    onClick={() =>
+                        session.emit({
+                            action: "RETRY",
+                        })
+                    }>
                     <Text id="app.special.status.reconnect" />
                 </a>
             </Banner>
         );
-    } else if (status === ClientStatus.CONNECTING) {
-        return (
-            <Banner>
-                <Text id="app.special.status.connecting" />
-            </Banner>
-        );
-    } else if (status === ClientStatus.RECONNECTING) {
+    } else if (session.state === "Connecting") {
         return (
             <Banner>
                 <Text id="app.special.status.reconnecting" />
             </Banner>
         );
     }
+
     return null;
 }
+
+export default observer(ConnectionStatus);

src/components/navigation/left/HomeSidebar.tsx

@@ -21,10 +21,10 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { useApplicationState } from "../../../mobx/State";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import placeholderSVG from "../items/placeholder.svg";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import ButtonItem, { ChannelButton } from "../items/ButtonItem";
 import ConnectionStatus from "../items/ConnectionStatus";
@@ -46,7 +46,7 @@ const Navbar = styled.div`
 
 export default observer(() => {
     const { pathname } = useLocation();
-    const client = useContext(AppContext);
+    const client = useClient();
     const state = useApplicationState();
     const { channel: channel_id } = useParams<{ channel: string }>();
     const { openScreen } = useIntermediate();

src/components/navigation/left/ServerListSidebar.tsx

@@ -8,7 +8,8 @@ import { ServerList } from "@revoltchat/ui";
 import { useApplicationState } from "../../../mobx/State";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
+
+import { useClient } from "../../../controllers/client/ClientController";
 
 /**
  * Server list sidebar shim component

src/components/navigation/left/ServerSidebar.tsx

@@ -14,8 +14,7 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import { useClient } from "../../../context/revoltjs/RevoltClient";
-
+import { useClient } from "../../../controllers/client/ClientController";
 import CollapsibleSection from "../../common/CollapsibleSection";
 import ServerHeader from "../../common/ServerHeader";
 import { ChannelButton } from "../items/ButtonItem";

src/components/navigation/right/MemberSidebar.tsx

@@ -4,14 +4,12 @@ import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
 import { Channel, Server, User, API } from "revolt.js";
 
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import {
-    ClientStatus,
-    StatusContext,
+    useSession,
     useClient,
-} from "../../../context/revoltjs/RevoltClient";
-
+} from "../../../controllers/client/ClientController";
 import { GenericSidebarBase } from "../SidebarBase";
 import MemberList, { MemberListGroup } from "./MemberList";
 
@@ -205,18 +203,18 @@ function shouldSkipOffline(id: string) {
 
 export const ServerMemberSidebar = observer(
     ({ channel }: { channel: Channel }) => {
-        const client = useClient();
-        const status = useContext(StatusContext);
+        const session = useSession()!;
+        const client = session.client!;
 
         useEffect(() => {
             const server_id = channel.server_id!;
-            if (status === ClientStatus.ONLINE && !FETCHED.has(server_id)) {
+            if (session.state === "Online" && !FETCHED.has(server_id)) {
                 FETCHED.add(server_id);
                 channel
                     .server!.syncMembers(shouldSkipOffline(server_id))
                     .catch(() => FETCHED.delete(server_id));
             }
-        }, [status, channel]);
+        }, [session.state, channel]);
 
         const entries = useEntries(
             channel,

src/components/navigation/right/Search.tsx

@@ -7,8 +7,7 @@ import { useEffect, useState } from "preact/hooks";
 
 import { Button, Category, Error, InputBox, Preloader } from "@revoltchat/ui";
 
-import { useClient } from "../../../context/revoltjs/RevoltClient";
-
+import { useClient } from "../../../controllers/client/ClientController";
 import Message from "../../common/messaging/Message";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 

src/components/settings/account/AccountManagement.tsx

@@ -2,19 +2,16 @@ import { Block } from "@styled-icons/boxicons-regular";
 import { Trash } from "@styled-icons/boxicons-solid";
 
 import { Text } from "preact-i18n";
-import { useContext } from "preact/hooks";
 
 import { CategoryButton } from "@revoltchat/ui";
 
 import {
-    LogOutContext,
+    clientController,
     useClient,
-} from "../../../context/revoltjs/RevoltClient";
-
+} from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 
 export default function AccountManagement() {
-    const logOut = useContext(LogOutContext);
     const client = useClient();
 
     const callback = (route: "disable" | "delete") => () =>
@@ -27,7 +24,7 @@ export default function AccountManagement() {
                             "X-MFA-Ticket": ticket.token,
                         },
                     })
-                    .then(() => logOut(true)),
+                    .then(clientController.logoutCurrent),
         );
 
     return (

src/components/settings/account/EditAccount.tsx

@@ -3,7 +3,7 @@ import { Envelope, Key, Pencil } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import {
     AccountDetail,
@@ -12,27 +12,22 @@ import {
     HiddenValue,
 } from "@revoltchat/ui";
 
-import {
-    ClientStatus,
-    StatusContext,
-    useClient,
-} from "../../../context/revoltjs/RevoltClient";
-
+import { useSession } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 
 export default observer(() => {
-    const client = useClient();
-    const status = useContext(StatusContext);
+    const session = useSession()!;
+    const client = session.client!;
 
     const [email, setEmail] = useState("...");
 
     useEffect(() => {
-        if (email === "..." && status === ClientStatus.ONLINE) {
+        if (email === "..." && session.state === "Online") {
             client.api
                 .get("/auth/account/")
                 .then((account) => setEmail(account.email));
         }
-    }, [client, email, status]);
+    }, [client, email, session.state]);
 
     return (
         <>

src/components/settings/account/MultiFactorAuthentication.tsx

@@ -3,17 +3,13 @@ import { Lock } from "@styled-icons/boxicons-solid";
 import { API } from "revolt.js";
 
 import { Text } from "preact-i18n";
-import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 
 import { Category, CategoryButton, Error, Tip } from "@revoltchat/ui";
 
-import {
-    ClientStatus,
-    StatusContext,
-    useClient,
-} from "../../../context/revoltjs/RevoltClient";
 import { takeError } from "../../../context/revoltjs/util";
 
+import { useSession } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 
 /**
@@ -34,8 +30,8 @@ export function toConfig(token: string) {
  */
 export default function MultiFactorAuthentication() {
     // Pull in prerequisites
-    const client = useClient();
-    const status = useContext(StatusContext);
+    const session = useSession()!;
+    const client = session.client!;
 
     // Keep track of MFA state
     const [mfa, setMFA] = useState<API.MultiFactorStatus>();
@@ -43,13 +39,13 @@ export default function MultiFactorAuthentication() {
 
     // Fetch the current MFA status on account
     useEffect(() => {
-        if (!mfa && status === ClientStatus.ONLINE) {
-            client.api
+        if (!mfa && session.state === "Online") {
+            client!.api
                 .get("/auth/mfa/")
                 .then(setMFA)
                 .catch((err) => setError(takeError(err)));
         }
-    }, [client, mfa, status]);
+    }, [mfa, client, session.state]);
 
     // Action called when recovery code button is pressed
     const recoveryAction = useCallback(async () => {