feat: implement useClient from client controller

src/pages/Open.tsx

@@ -2,25 +2,20 @@
 import { useHistory, useParams } from "react-router-dom";
 
 import { Text } from "preact-i18n";
-import { useContext, useEffect } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 
 import { Header } from "@revoltchat/ui";
 
-import {
-    AppContext,
-    ClientStatus,
-    StatusContext,
-} from "../context/revoltjs/RevoltClient";
-
+import { useSession } from "../controllers/client/ClientController";
 import { modalController } from "../controllers/modals/ModalController";
 
 export default function Open() {
     const history = useHistory();
-    const client = useContext(AppContext);
-    const status = useContext(StatusContext);
+    const session = useSession()!;
+    const client = session.client!;
     const { id } = useParams<{ id: string }>();
 
-    if (status !== ClientStatus.ONLINE) {
+    if (session.state !== "Online") {
         return (
             <Header palette="primary">
                 <Text id="general.loading" />

src/pages/RevoltApp.tsx

@@ -9,7 +9,6 @@ import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
 
 import Popovers from "../context/intermediate/Popovers";
 import Notifications from "../context/revoltjs/Notifications";
-import StateMonitor from "../context/revoltjs/StateMonitor";
 
 import { Titlebar } from "../components/native/Titlebar";
 import BottomNavigation from "../components/navigation/BottomNavigation";
@@ -235,7 +234,6 @@ export default function App() {
                     <ContextMenus />
                     <Popovers />
                     <Notifications />
-                    <StateMonitor />
                 </OverlappingPanels>
             </AppContainer>
         </>

src/pages/app.tsx

@@ -5,7 +5,6 @@ import { lazy, Suspense } from "preact/compat";
 import { Masks, Preloader } from "@revoltchat/ui";
 
 import ErrorBoundary from "../lib/ErrorBoundary";
-import FakeClient from "../lib/FakeClient";
 
 import Context from "../context";
 import { CheckAuth } from "../context/revoltjs/CheckAuth";
@@ -36,9 +35,7 @@ export function App() {
                         </Route>
                         <Route path="/invite/:code">
                             <CheckAuth blockRender>
-                                <FakeClient>
-                                    <Invite />
-                                </FakeClient>
+                                <Invite />
                             </CheckAuth>
                             <CheckAuth auth blockRender>
                                 <Invite />

src/pages/channels/Channel.tsx

@@ -16,8 +16,6 @@ import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useApplicationState } from "../../mobx/State";
 import { SIDEBAR_MEMBERS } from "../../mobx/stores/Layout";
 
-import { useClient } from "../../context/revoltjs/RevoltClient";
-
 import AgeGate from "../../components/common/AgeGate";
 import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
@@ -25,6 +23,7 @@ import NewMessages from "../../components/common/messaging/bars/NewMessages";
 import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
 import RightSidebar from "../../components/navigation/RightSidebar";
 import { PageHeader } from "../../components/ui/Header";
+import { useClient } from "../../controllers/client/ClientController";
 import ChannelHeader from "./ChannelHeader";
 import { MessageArea } from "./messaging/MessageArea";
 import VoiceHeader from "./voice/VoiceHeader";

src/pages/channels/messaging/MessageArea.tsx

@@ -25,11 +25,8 @@ import { ScrollState } from "../../../lib/renderer/types";
 
 import { IntermediateContext } from "../../../context/intermediate/Intermediate";
 import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
-import {
-    ClientStatus,
-    StatusContext,
-} from "../../../context/revoltjs/RevoltClient";
 
+import { useSession } from "../../../controllers/client/ClientController";
 import ConversationStart from "./ConversationStart";
 import MessageRenderer from "./MessageRenderer";
 
@@ -65,7 +62,7 @@ export const MESSAGE_AREA_PADDING = 82;
 
 export const MessageArea = observer(({ last_id, channel }: Props) => {
     const history = useHistory();
-    const status = useContext(StatusContext);
+    const session = useSession()!;
     const { focusTaken } = useContext(IntermediateContext);
 
     // ? Required data for message links.
@@ -213,8 +210,8 @@ export const MessageArea = observer(({ last_id, channel }: Props) => {
 
     // ? If we are waiting for network, try again.
     useEffect(() => {
-        switch (status) {
-            case ClientStatus.ONLINE:
+        switch (session.state) {
+            case "Online":
                 if (renderer.state === "WAITING_FOR_NETWORK") {
                     renderer.init();
                 } else {
@@ -222,13 +219,13 @@ export const MessageArea = observer(({ last_id, channel }: Props) => {
                 }
 
                 break;
-            case ClientStatus.OFFLINE:
-            case ClientStatus.DISCONNECTED:
-            case ClientStatus.CONNECTING:
+            case "Offline":
+            case "Disconnected":
+            case "Connecting":
                 renderer.markStale();
                 break;
         }
-    }, [renderer, status]);
+    }, [renderer, session.state]);
 
     // ? When the container is scrolled.
     // ? Also handle StayAtBottom

src/pages/channels/messaging/MessageRenderer.tsx

@@ -3,9 +3,7 @@ import { X } from "@styled-icons/boxicons-regular";
 import dayjs from "dayjs";
 import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
-import { API } from "revolt.js";
-import { Message as MessageI } from "revolt.js";
-import { Nullable } from "revolt.js";
+import { API, Message as MessageI, Nullable } from "revolt.js";
 import styled from "styled-components/macro";
 import { decodeTime } from "ulid";
 
@@ -20,10 +18,10 @@ import { ChannelRenderer } from "../../../lib/renderer/Singleton";
 import { useApplicationState } from "../../../mobx/State";
 
 import RequiresOnline from "../../../context/revoltjs/RequiresOnline";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../../components/common/messaging/Message";
 import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
+import { useClient } from "../../../controllers/client/ClientController";
 import ConversationStart from "./ConversationStart";
 import MessageEditor from "./MessageEditor";
 

src/pages/channels/voice/VoiceHeader.tsx

@@ -17,10 +17,10 @@ import { Button } from "@revoltchat/ui";
 import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
+import { useClient } from "../../../controllers/client/ClientController";
 
 interface Props {
     id: string;

src/pages/developer/Developer.tsx

@@ -1,18 +1,17 @@
 import { Wrench } from "@styled-icons/boxicons-solid";
 
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import PaintCounter from "../../lib/PaintCounter";
 import { TextReact } from "../../lib/i18n";
 
-import { AppContext } from "../../context/revoltjs/RevoltClient";
-
 import { PageHeader } from "../../components/ui/Header";
+import { useClient } from "../../controllers/client/ClientController";
 
 export default function Developer() {
     // const voice = useContext(VoiceContext);
 
-    const client = useContext(AppContext);
+    const client = useClient();
     const userPermission = client.user!.permission;
     const [ping, setPing] = useState<undefined | number>(client.websocket.ping);
     const [crash, setCrash] = useState(false);

src/pages/friends/Friends.tsx

@@ -13,12 +13,12 @@ import { TextReact } from "../../lib/i18n";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import CollapsibleSection from "../../components/common/CollapsibleSection";
 import Tooltip from "../../components/common/Tooltip";
 import UserIcon from "../../components/common/user/UserIcon";
 import { PageHeader } from "../../components/ui/Header";
+import { useClient } from "../../controllers/client/ClientController";
 import { modalController } from "../../controllers/modals/ModalController";
 import { Friend } from "./Friend";
 

src/pages/home/Home.tsx

@@ -15,7 +15,7 @@ import styled from "styled-components/macro";
 import styles from "./Home.module.scss";
 import "./snow.scss";
 import { Text } from "preact-i18n";
-import { useContext, useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
 
 import { CategoryButton } from "@revoltchat/ui";
 
@@ -24,11 +24,11 @@ import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useApplicationState } from "../../mobx/State";
 
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
 
 import wideSVG from "/assets/wide.svg";
 
 import { PageHeader } from "../../components/ui/Header";
+import { useClient } from "../../controllers/client/ClientController";
 
 const Overlay = styled.div`
     display: grid;
@@ -45,7 +45,7 @@ const Overlay = styled.div`
 
 export default observer(() => {
     const { openScreen } = useIntermediate();
-    const client = useContext(AppContext);
+    const client = useClient();
     const state = useApplicationState();
 
     const seasonalTheme = state.settings.get("appearance:seasonal", true);

src/pages/invite/Invite.tsx

@@ -1,11 +1,10 @@
 import { ArrowBack } from "@styled-icons/boxicons-regular";
-import { autorun } from "mobx";
 import { Redirect, useHistory, useParams } from "react-router-dom";
 import { API } from "revolt.js";
 
 import styles from "./Invite.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { Button, Category, Error, Preloader } from "@revoltchat/ui";
 
@@ -14,23 +13,22 @@ import { TextReact } from "../../lib/i18n";
 import { useApplicationState } from "../../mobx/State";
 
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
-import {
-    AppContext,
-    ClientStatus,
-    StatusContext,
-} from "../../context/revoltjs/RevoltClient";
 import { takeError } from "../../context/revoltjs/util";
 
 import ServerIcon from "../../components/common/ServerIcon";
 import UserIcon from "../../components/common/user/UserIcon";
+import {
+    useClient,
+    useSession,
+} from "../../controllers/client/ClientController";
 
 export default function Invite() {
     const history = useHistory();
-    const client = useContext(AppContext);
+    const session = useSession();
+    const client = useClient();
 
     const layout = useApplicationState().layout;
 
-    const status = useContext(StatusContext);
     const { code } = useParams<{ code: string }>();
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
@@ -45,7 +43,7 @@ export default function Invite() {
                 .then((data) => setInvite(data))
                 .catch((err) => setError(takeError(err)));
         }
-    }, [client, code, invite, status]);
+    }, [code, invite]);
 
     if (code === undefined) return <Redirect to={layout.getLastPath()} />;
 
@@ -154,7 +152,7 @@ export default function Invite() {
                         <Button
                             palette="secondary"
                             onClick={async () => {
-                                if (status === ClientStatus.READY) {
+                                if (!session) {
                                     return history.push("/");
                                 }
 
@@ -172,7 +170,7 @@ export default function Invite() {
                                     setProcessing(false);
                                 }
                             }}>
-                            {status === ClientStatus.READY ? (
+                            {!session ? (
                                 <Text id="app.special.invite.login" />
                             ) : (
                                 <Text id="app.special.invite.accept" />

src/pages/invite/InviteBot.tsx

@@ -6,10 +6,9 @@ import { useEffect, useState } from "preact/hooks";
 
 import { Button, Category, ComboBox, Preloader, Tip } from "@revoltchat/ui";
 
-import { useClient } from "../../context/revoltjs/RevoltClient";
-
 import UserIcon from "../../components/common/user/UserIcon";
 import Markdown from "../../components/markdown/Markdown";
+import { useClient } from "../../controllers/client/ClientController";
 
 const BotInfo = styled.div`
     gap: 12px;

src/pages/login/ConfirmDelete.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from "preact/hooks";
 
 import { Modal, Preloader } from "@revoltchat/ui";
 
-import { useApplicationState } from "../../mobx/State";
+import { useApi } from "../../controllers/client/ClientController";
 
 const Centre = styled.div`
     display: flex;
@@ -14,15 +14,12 @@ const Centre = styled.div`
 `;
 
 export default function ConfirmDelete() {
-    const state = useApplicationState();
+    const api = useApi();
     const [deleted, setDeleted] = useState(true);
     const { token } = useParams<{ token: string }>();
 
     useEffect(() => {
-        state.config
-            .createClient()
-            .api.put("/auth/account/delete", { token })
-            .then(() => setDeleted(true));
+        api.put("/auth/account/delete", { token }).then(() => setDeleted(true));
     }, []);
 
     return (

src/pages/login/forms/FormReset.tsx

@@ -1,22 +1,16 @@
 import { useHistory, useParams } from "react-router-dom";
 
-import { useContext } from "preact/hooks";
-
-import { useApplicationState } from "../../../mobx/State";
-
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-
+import { useApi } from "../../../controllers/client/ClientController";
 import { Form } from "./Form";
 
 export function FormSendReset() {
-    const config = useApplicationState().config;
-    const client = config.createClient();
+    const api = useApi();
 
     return (
         <Form
             page="send_reset"
             callback={async (data) => {
-                await client.api.post("/auth/account/reset_password", data);
+                await api.post("/auth/account/reset_password", data);
             }}
         />
     );
@@ -24,15 +18,14 @@ export function FormSendReset() {
 
 export function FormReset() {
     const { token } = useParams<{ token: string }>();
-    const config = useApplicationState().config;
-    const client = config.createClient();
     const history = useHistory();
+    const api = useApi();
 
     return (
         <Form
             page="reset"
             callback={async (data) => {
-                await client.api.patch("/auth/account/reset_password", {
+                await api.patch("/auth/account/reset_password", {
                     token,
                     ...data,
                 });

src/pages/login/forms/FormVerify.tsx

@@ -4,22 +4,20 @@ import { useEffect, useState } from "preact/hooks";
 
 import { Category, Preloader } from "@revoltchat/ui";
 
-import { useApplicationState } from "../../../mobx/State";
-
 import { I18nError } from "../../../context/Locale";
 import { takeError } from "../../../context/revoltjs/util";
 
+import { useApi } from "../../../controllers/client/ClientController";
 import { Form } from "./Form";
 
 export function FormResend() {
-    const config = useApplicationState().config;
-    const client = config.createClient();
+    const api = useApi();
 
     return (
         <Form
             page="resend"
             callback={async (data) => {
-                await client.api.post("/auth/account/reverify", data);
+                await api.post("/auth/account/reverify", data);
             }}
         />
     );
@@ -28,13 +26,11 @@ export function FormResend() {
 export function FormVerify() {
     const [error, setError] = useState<undefined | string>(undefined);
     const { token } = useParams<{ token: string }>();
-    const config = useApplicationState().config;
-    const client = config.createClient();
     const history = useHistory();
+    const api = useApi();
 
     useEffect(() => {
-        client.api
-            .post(`/auth/account/verify/${token as ""}`)
+        api.post(`/auth/account/verify/${token as ""}`)
             .then(() => history.push("/login"))
             .catch((err) => setError(takeError(err)));
         // eslint-disable-next-line

src/pages/settings/ChannelSettings.tsx

@@ -4,9 +4,9 @@ import { Route, Switch, useHistory, useParams } from "react-router-dom";
 
 import { Text } from "preact-i18n";
 
-import { useClient } from "../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../context/revoltjs/util";
 
+import { useClient } from "../../controllers/client/ClientController";
 import { GenericSettings } from "./GenericSettings";
 import Overview from "./channel/Overview";
 import Permissions from "./channel/Permissions";

src/pages/settings/ServerSettings.tsx

@@ -17,9 +17,9 @@ import { LineDivider } from "@revoltchat/ui";
 
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
-import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import ButtonItem from "../../components/navigation/items/ButtonItem";
+import { useClient } from "../../controllers/client/ClientController";
 import { GenericSettings } from "./GenericSettings";
 import { Bans } from "./server/Bans";
 import { Categories } from "./server/Categories";

src/pages/settings/Settings.tsx

@@ -28,7 +28,6 @@ import styled from "styled-components/macro";
 import styles from "./Settings.module.scss";
 import { openContextMenu } from "preact-context-menu";
 import { Text } from "preact-i18n";
-import { useContext } from "preact/hooks";
 
 import { LineDivider } from "@revoltchat/ui";
 
@@ -36,12 +35,15 @@ import { useApplicationState } from "../../mobx/State";
 
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
-import { AppContext, LogOutContext } from "../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../../components/common/user/UserIcon";
 import { Username } from "../../components/common/user/UserShort";
 import UserStatus from "../../components/common/user/UserStatus";
 import ButtonItem from "../../components/navigation/items/ButtonItem";
+import {
+    useClient,
+    clientController,
+} from "../../controllers/client/ClientController";
 import { modalController } from "../../controllers/modals/ModalController";
 import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
 import { APP_VERSION } from "../../version";
@@ -118,8 +120,7 @@ const AccountHeader = styled.div`
 
 export default observer(() => {
     const history = useHistory();
-    const client = useContext(AppContext);
-    const logout = useContext(LogOutContext);
+    const client = useClient();
     const { openScreen } = useIntermediate();
     const experiments = useApplicationState().experiments;
 
@@ -288,7 +289,7 @@ export default observer(() => {
                     </a>
                     <LineDivider compact />
                     <ButtonItem
-                        onClick={() => logout()}
+                        onClick={clientController.logoutCurrent}
                         className={styles.logOut}
                         compact>
                         <LogOut size={20} />

src/pages/settings/panes/MyBots.tsx

@@ -3,8 +3,7 @@ import { Key, Clipboard, Globe, Plus } from "@styled-icons/boxicons-regular";
 import { LockAlt, HelpCircle } from "@styled-icons/boxicons-solid";
 import type { AxiosError } from "axios";
 import { observer } from "mobx-react-lite";
-import { API } from "revolt.js";
-import { User } from "revolt.js";
+import { API, User } from "revolt.js";
 import styled from "styled-components/macro";
 
 import styles from "./Panes.module.scss";
@@ -26,7 +25,6 @@ import { stopPropagation } from "../../../lib/stopPropagation";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
-import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import AutoComplete, {
     useAutoComplete,
@@ -34,6 +32,7 @@ import AutoComplete, {
 import CollapsibleSection from "../../../components/common/CollapsibleSection";
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
+import { useClient } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 
 interface Data {

src/pages/settings/panes/Notifications.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { Checkbox, Column } from "@revoltchat/ui";
 
@@ -10,12 +10,11 @@ import { urlBase64ToUint8Array } from "../../../lib/conversion";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-
+import { useClient } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 
 export const Notifications = observer(() => {
-    const client = useContext(AppContext);
+    const client = useClient();
     const settings = useApplicationState().settings;
     const [pushEnabled, setPushEnabled] = useState<undefined | boolean>(
         undefined,

src/pages/settings/panes/Profile.tsx

@@ -14,20 +14,16 @@ import { useTranslation } from "../../../lib/i18n";
 
 import { UserProfile } from "../../../context/intermediate/popovers/UserProfile";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
-import {
-    ClientStatus,
-    StatusContext,
-    useClient,
-} from "../../../context/revoltjs/RevoltClient";
 
 import AutoComplete, {
     useAutoComplete,
 } from "../../../components/common/AutoComplete";
+import { useSession } from "../../../controllers/client/ClientController";
 
 export const Profile = observer(() => {
-    const status = useContext(StatusContext);
     const translate = useTranslation();
-    const client = useClient();
+    const session = useSession()!;
+    const client = session.client!;
     const history = useHistory();
 
     const [profile, setProfile] = useState<undefined | API.UserProfile>(
@@ -43,10 +39,10 @@ export const Profile = observer(() => {
     }, [client.user, setProfile]);
 
     useEffect(() => {
-        if (profile === undefined && status === ClientStatus.ONLINE) {
+        if (profile === undefined && session.state === "Online") {
             refreshProfile();
         }
-    }, [profile, status, refreshProfile]);
+    }, [profile, session.state, refreshProfile]);
 
     const [changed, setChanged] = useState(false);
     function setContent(content?: string) {

src/pages/settings/panes/Sessions.tsx

@@ -16,7 +16,7 @@ import { decodeTime } from "ulid";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import {
     Button,
@@ -27,14 +27,14 @@ import {
 } from "@revoltchat/ui";
 
 import { dayjs } from "../../../context/Locale";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 
 dayjs.extend(relativeTime);
 
 export function Sessions() {
-    const client = useContext(AppContext);
+    const client = useClient();
     const deviceId =
         typeof client.session === "object" ? client.session._id : undefined;