feat: implement useClient from client controller

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);
     };
-}
+}*/