feat: implement useClient from client controller

src/context/intermediate/modals/Input.tsx

@@ -6,8 +6,8 @@ import { useContext, useState } from "preact/hooks";
 
 import { Category, InputBox, Modal } from "@revoltchat/ui";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import { I18nError } from "../../Locale";
-import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 
 interface Props {
@@ -89,7 +89,7 @@ type SpecialProps = { onClose: () => void } & (
 
 export function SpecialInputModal(props: SpecialProps) {
     const history = useHistory();
-    const client = useContext(AppContext);
+    const client = useClient();
 
     const { onClose } = props;
     switch (props.type) {

src/context/intermediate/modals/Prompt.tsx

@@ -5,7 +5,7 @@ import { ulid } from "ulid";
 
 import styles from "./Prompt.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { Category, Modal, InputBox, Radio } from "@revoltchat/ui";
 import type { Action } from "@revoltchat/ui/esm/components/design/atoms/display/Modal";
@@ -14,8 +14,8 @@ import { TextReact } from "../../../lib/i18n";
 
 import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
+import { useClient } from "../../../controllers/client/ClientController";
 import { I18nError } from "../../Locale";
-import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 import { useIntermediate } from "../Intermediate";
 
@@ -81,7 +81,7 @@ type SpecialProps = { onClose: () => void } & (
 );
 
 export const SpecialPromptModal = observer((props: SpecialProps) => {
-    const client = useContext(AppContext);
+    const client = useClient();
     const history = useHistory();
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<undefined | string>(undefined);

src/context/intermediate/popovers/CreateBot.tsx

@@ -2,13 +2,13 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { API } from "revolt.js";
 
 import { Text } from "preact-i18n";
-import { useContext, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 
 import { Category, Modal } from "@revoltchat/ui";
 
+import { useClient } from "../../../controllers/client/ClientController";
 import FormField from "../../../pages/login/FormField";
 import { I18nError } from "../../Locale";
-import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 
 interface Props {
@@ -21,7 +21,7 @@ interface FormInputs {
 }
 
 export function CreateBotModal({ onClose, onCreate }: Props) {
-    const client = useContext(AppContext);
+    const client = useClient();
     const { handleSubmit, register, errors } = useForm<FormInputs>();
     const [error, setError] = useState<string | undefined>(undefined);
 

src/context/intermediate/popovers/ImageViewer.tsx

@@ -7,7 +7,7 @@ import { Modal } from "@revoltchat/ui";
 
 import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";
 import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
-import { useClient } from "../../revoltjs/RevoltClient";
+import { useClient } from "../../../controllers/client/ClientController";
 
 interface Props {
     onClose: () => void;

src/context/intermediate/popovers/UserPicker.tsx

@@ -5,7 +5,7 @@ import { useState } from "preact/hooks";
 import { Modal } from "@revoltchat/ui";
 
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
-import { useClient } from "../../revoltjs/RevoltClient";
+import { useClient } from "../../../controllers/client/ClientController";
 
 interface Props {
     omit?: string[];

src/context/intermediate/popovers/UserProfile.tsx

@@ -34,11 +34,7 @@ import UserIcon from "../../../components/common/user/UserIcon";
 import { Username } from "../../../components/common/user/UserShort";
 import UserStatus from "../../../components/common/user/UserStatus";
 import Markdown from "../../../components/markdown/Markdown";
-import {
-    ClientStatus,
-    StatusContext,
-    useClient,
-} from "../../revoltjs/RevoltClient";
+import { useSession } from "../../../controllers/client/ClientController";
 import { useIntermediate } from "../Intermediate";
 
 interface Props {
@@ -63,8 +59,8 @@ export const UserProfile = observer(
         >();
 
         const history = useHistory();
-        const client = useClient();
-        const status = useContext(StatusContext);
+        const session = useSession()!;
+        const client = session.client!;
         const [tab, setTab] = useState("profile");
 
         const user = client.users.get(user_id);
@@ -101,32 +97,26 @@ export const UserProfile = observer(
 
         useEffect(() => {
             if (dummy) return;
-            if (
-                status === ClientStatus.ONLINE &&
-                typeof mutual === "undefined"
-            ) {
+            if (session.state === "Online" && typeof mutual === "undefined") {
                 setMutual(null);
                 user.fetchMutual().then(setMutual);
             }
-        }, [mutual, status, dummy, user]);
+        }, [mutual, session.state, dummy, user]);
 
         useEffect(() => {
             if (dummy) return;
-            if (
-                status === ClientStatus.ONLINE &&
-                typeof profile === "undefined"
-            ) {
+            if (session.state === "Online" && typeof profile === "undefined") {
                 setProfile(null);
 
                 if (user.permission & UserPermission.ViewProfile) {
                     user.fetchProfile().then(setProfile).catch(noop);
                 }
             }
-        }, [profile, status, dummy, user]);
+        }, [profile, session.state, dummy, user]);
 
         useEffect(() => {
             if (
-                status === ClientStatus.ONLINE &&
+                session.state === "Online" &&
                 user.bot &&
                 typeof isPublicBot === "undefined"
             ) {
@@ -136,7 +126,7 @@ export const UserProfile = observer(
                     .then(() => setIsPublicBot(true))
                     .catch(noop);
             }
-        }, [isPublicBot, status, user, client.bots]);
+        }, [isPublicBot, session.state, user, client.bots]);
 
         const backgroundURL =
             profile &&

src/context/revoltjs/CheckAuth.tsx

@@ -1,8 +1,6 @@
 import { Redirect } from "react-router-dom";
 
-import { useApplicationState } from "../../mobx/State";
-
-import { useClient } from "./RevoltClient";
+import { useSession } from "../../controllers/client/ClientController";
 
 interface Props {
     auth?: boolean;
@@ -12,14 +10,12 @@ interface Props {
 }
 
 export const CheckAuth = (props: Props) => {
-    const auth = useApplicationState().auth;
-    const client = useClient();
-    const ready = auth.isLoggedIn() && !!client?.user;
+    const session = useSession();
 
-    if (props.auth && !ready) {
+    if (props.auth && !session?.ready) {
         if (props.blockRender) return null;
         return <Redirect to="/login" />;
-    } else if (!props.auth && ready) {
+    } else if (!props.auth && session?.ready) {
         if (props.blockRender) return null;
         return <Redirect to="/" />;
     }

src/context/revoltjs/FileUploads.tsx

@@ -5,17 +5,15 @@ import Axios, { AxiosRequestConfig } from "axios";
 import styles from "./FileUploads.module.scss";
 import classNames from "classnames";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { IconButton, Preloader } from "@revoltchat/ui";
 
 import { determineFileSize } from "../../lib/fileSize";
 
-import { useApplicationState } from "../../mobx/State";
-
+import { useClient } from "../../controllers/client/ClientController";
 import { modalController } from "../../controllers/modals/ModalController";
 import { useIntermediate } from "../intermediate/Intermediate";
-import { AppContext } from "./RevoltClient";
 import { takeError } from "./util";
 
 type BehaviourType =
@@ -115,7 +113,7 @@ export function grabFiles(
 export function FileUploader(props: Props) {
     const { fileType, maxFileSize, remove } = props;
     const { openScreen } = useIntermediate();
-    const client = useApplicationState().client!;
+    const client = useClient();
 
     const [uploading, setUploading] = useState(false);
 

src/context/revoltjs/Notifications.tsx

@@ -2,13 +2,13 @@ import { Route, Switch, useHistory, useParams } from "react-router-dom";
 import { Message, User } from "revolt.js";
 import { decodeTime } from "ulid";
 
-import { useCallback, useContext, useEffect } from "preact/hooks";
+import { useCallback, useEffect } from "preact/hooks";
 
 import { useTranslation } from "../../lib/i18n";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { AppContext } from "./RevoltClient";
+import { useClient } from "../../controllers/client/ClientController";
 
 const notifications: { [key: string]: Notification } = {};
 
@@ -30,7 +30,7 @@ function Notifier() {
     const notifs = state.notifications;
     const showNotification = state.settings.get("notifications:desktop");
 
-    const client = useContext(AppContext);
+    const client = useClient();
     const { guild: guild_id, channel: channel_id } = useParams<{
         guild: string;
         channel: string;

src/context/revoltjs/RequiresOnline.tsx

@@ -2,11 +2,10 @@ import { WifiOff } from "@styled-icons/boxicons-regular";
 import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
-import { useContext } from "preact/hooks";
 
 import { Preloader } from "@revoltchat/ui";
 
-import { ClientStatus, StatusContext } from "./RevoltClient";
+import { useSession } from "../../controllers/client/ClientController";
 
 interface Props {
     children: Children;
@@ -29,10 +28,12 @@ const Base = styled.div`
 `;
 
 export default function RequiresOnline(props: Props) {
-    const status = useContext(StatusContext);
+    const session = useSession();
 
-    if (status === ClientStatus.CONNECTING) return <Preloader type="ring" />;
-    if (status !== ClientStatus.ONLINE && status !== ClientStatus.READY)
+    if (!session || session.state === "Connecting")
+        return <Preloader type="ring" />;
+
+    if (!(session.state === "Online" || session.state === "Ready"))
         return (
             <Base>
                 <WifiOff size={16} />

src/context/revoltjs/RevoltClient.tsx

@@ -1,113 +1,27 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { observer } from "mobx-react-lite";
-import { Client } from "revolt.js";
 
-import { createContext } from "preact";
-import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 
 import { Preloader } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../mobx/State";
 
 import { clientController } from "../../controllers/client/ClientController";
-import { modalController } from "../../controllers/modals/ModalController";
-import { registerEvents } from "./events";
-import { takeError } from "./util";
-
-export enum ClientStatus {
-    READY,
-    LOADING,
-    OFFLINE,
-    DISCONNECTED,
-    CONNECTING,
-    RECONNECTING,
-    ONLINE,
-}
-
-export interface ClientOperations {
-    logout: (shouldRequest?: boolean) => Promise<void>;
-}
-
-export const AppContext = createContext<Client>(null!);
-export const StatusContext = createContext<ClientStatus>(null!);
-export const LogOutContext = createContext<(avoidReq?: boolean) => void>(null!);
 
 type Props = {
     children: Children;
 };
 
 export default observer(({ children }: Props) => {
-    // const state = useApplicationState();
-    /*const [client, setClient] = useState<Client>(null!);
-    const [status, setStatus] = useState(ClientStatus.LOADING);
-    const [loaded, setLoaded] = useState(false);
-
-    const logout = useCallback(
-        (avoidReq?: boolean) => {
-            setLoaded(false);
-            client.logout(avoidReq);
-        },
-        [client],
-    );
-
-    useEffect(() => {
-        if (navigator.onLine) {
-            state.config.createClient().api.get("/").then(state.config.set);
-        }
-    }, []);
-
-    useEffect(() => {
-        if (state.auth.isLoggedIn()) {
-            setLoaded(false);
-            const client = state.config.createClient();
-            setClient(client);
-
-            client
-                .useExistingSession(state.auth.getSession()!)
-                .catch((err) => {
-                    const error = takeError(err);
-                    if (error === "Forbidden" || error === "Unauthorized") {
-                        client.logout(true);
-                        modalController.push({ type: "signed_out" });
-                    } else {
-                        setStatus(ClientStatus.DISCONNECTED);
-                        modalController.push({
-                            type: "error",
-                            error,
-                        });
-                    }
-                })
-                .finally(() => setLoaded(true));
-        } else {
-            setStatus(ClientStatus.READY);
-            setLoaded(true);
-        }
-    }, [state.auth.getSession()]);
-
-    useEffect(() => registerEvents(state, setStatus, client), [client]);
-
-    if (!loaded || status === ClientStatus.LOADING) {
-        return <Preloader type="spinner" />;
-    }*/
-
     const session = clientController.getActiveSession();
-    if (!session?.ready) {
-        return <Preloader type="spinner" />;
+    if (session) {
+        if (!session.ready) return <Preloader type="spinner" />;
+
+        const client = session.client!;
+        const state = useApplicationState();
+        useEffect(() => state.registerListeners(client), [state, client]);
     }
 
-    const client = session.client!;
-    const state = useApplicationState();
-    useEffect(() => state.registerListeners(client), [state, client]);
-
-    return (
-        <AppContext.Provider value={session.client!}>
-            <StatusContext.Provider value={ClientStatus.ONLINE}>
-                <LogOutContext.Provider value={() => void {}}>
-                    {children}
-                </LogOutContext.Provider>
-            </StatusContext.Provider>
-        </AppContext.Provider>
-    );
+    return <>{children}</>;
 });
-
-export const useClient = () => useContext(AppContext);

src/context/revoltjs/StateMonitor.tsx

@@ -1,39 +0,0 @@
-/**
- * This file monitors the message cache to delete any queued messages that have already sent.
- */
-import { Message } from "revolt.js";
-
-import { useContext, useEffect } from "preact/hooks";
-
-import { useApplicationState } from "../../mobx/State";
-
-import { setGlobalEmojiPack } from "../../components/common/Emoji";
-
-import { AppContext } from "./RevoltClient";
-
-export default function StateMonitor() {
-    const client = useContext(AppContext);
-    const state = useApplicationState();
-
-    useEffect(() => {
-        function add(msg: Message) {
-            if (!msg.nonce) return;
-            if (
-                !state.queue.get(msg.channel_id).find((x) => x.id === msg.nonce)
-            )
-                return;
-            state.queue.remove(msg.nonce);
-        }
-
-        client.addListener("message", add);
-        return () => client.removeListener("message", add);
-    }, [client]);
-
-    // Set global emoji pack.
-    useEffect(() => {
-        const v = state.settings.get("appearance:emoji");
-        v && setGlobalEmojiPack(v);
-    }, [state.settings.get("appearance:emoji")]);
-
-    return null;
-}

src/context/revoltjs/SyncManager.tsx

@@ -9,7 +9,7 @@ import { reportError } from "../../lib/ErrorBoundary";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { useClient } from "./RevoltClient";
+import { useClient } from "../../controllers/client/ClientController";
 
 export default function SyncManager() {
     const client = useClient();

src/context/revoltjs/events.ts

@@ -1,15 +1,6 @@
-import { Client, Server } from "revolt.js";
+export const _ = "";
 
-import { StateUpdater } from "preact/hooks";
-
-import { deleteRenderer } from "../../lib/renderer/Singleton";
-
-import State from "../../mobx/State";
-
-import { resetMemberSidebarFetched } from "../../components/navigation/right/MemberSidebar";
-import { ClientStatus } from "./RevoltClient";
-
-export function registerEvents(
+/*export function registerEvents(
     state: State,
     setStatus: StateUpdater<ClientStatus>,
     client: Client,
@@ -86,4 +77,4 @@ export function registerEvents(
         window.removeEventListener("online", online);
         window.removeEventListener("offline", offline);
     };
-}
+}*/