From 1b644d450d8d34d149439375270d1d2106517200 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 25 Dec 2021 20:43:54 +0000
Subject: [PATCH] fix: allow invite screen to properly load while signed out

---
 src/components/common/ServerIcon.tsx |  4 +++-
 src/lib/FakeClient.tsx               | 13 +++++++++++++
 src/pages/app.tsx                    |  5 ++++-
 src/pages/invite/Invite.tsx          | 10 +++++-----
 4 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/FakeClient.tsx

diff --git a/src/components/common/ServerIcon.tsx b/src/components/common/ServerIcon.tsx
index 19503319..e8f4f0e6 100644
--- a/src/components/common/ServerIcon.tsx
+++ b/src/components/common/ServerIcon.tsx
@@ -51,7 +51,9 @@ export default observer(
                     {name
                         .split(" ")
                         .map((x) => x[0])
-                        .filter((x) => typeof x !== "undefined")}
+                        .filter((x) => typeof x !== "undefined")
+                        .join("")
+                        .substring(0, 3)}
                 </ServerText>
             );
         }
diff --git a/src/lib/FakeClient.tsx b/src/lib/FakeClient.tsx
new file mode 100644
index 00000000..2eb95126
--- /dev/null
+++ b/src/lib/FakeClient.tsx
@@ -0,0 +1,13 @@
+import { useMemo } from "preact/hooks";
+
+import { useApplicationState } from "../mobx/State";
+
+import { AppContext } from "../context/revoltjs/RevoltClient";
+
+import { Children } from "../types/Preact";
+
+export default function FakeClient({ children }: { children: Children }) {
+    const config = useApplicationState().config;
+    const client = useMemo(() => config.createClient(), []);
+    return <AppContext.Provider value={client}>{children}</AppContext.Provider>;
+}
diff --git a/src/pages/app.tsx b/src/pages/app.tsx
index ab11eb89..17dcaae1 100644
--- a/src/pages/app.tsx
+++ b/src/pages/app.tsx
@@ -3,6 +3,7 @@ import { Route, Switch } from "react-router-dom";
 import { lazy, Suspense } from "preact/compat";
 
 import ErrorBoundary from "../lib/ErrorBoundary";
+import FakeClient from "../lib/FakeClient";
 
 import Context from "../context";
 import { CheckAuth } from "../context/revoltjs/CheckAuth";
@@ -31,7 +32,9 @@ export function App() {
                             <Login />
                         </Route>
                         <Route path="/invite/:code">
-                            <Invite />
+                            <FakeClient>
+                                <Invite />
+                            </FakeClient>
                         </Route>
                         <Route path="/login">
                             <CheckAuth>
diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx
index daba4967..6ba91bf3 100644
--- a/src/pages/invite/Invite.tsx
+++ b/src/pages/invite/Invite.tsx
@@ -10,6 +10,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
 import { defer } from "../../lib/defer";
 import { TextReact } from "../../lib/i18n";
 
+import { useApplicationState } from "../../mobx/State";
+
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
 import {
     AppContext,
@@ -27,6 +29,7 @@ import Preloader from "../../components/ui/Preloader";
 export default function Invite() {
     const history = useHistory();
     const client = useContext(AppContext);
+
     const status = useContext(StatusContext);
     const { code } = useParams<{ code: string }>();
     const [processing, setProcessing] = useState(false);
@@ -36,10 +39,7 @@ export default function Invite() {
     );
 
     useEffect(() => {
-        if (
-            typeof invite === "undefined" &&
-            (status === ClientStatus.ONLINE || status === ClientStatus.READY)
-        ) {
+        if (typeof invite === "undefined") {
             client
                 .fetchInvite(code)
                 .then((data) => setInvite(data))
@@ -91,7 +91,7 @@ export default function Invite() {
             className={styles.invite}
             style={{
                 backgroundImage: invite.server_banner
-                    ? `url('${client.generateFileURL(invite.server_banner)}')`
+                    ? `url('${client?.generateFileURL(invite.server_banner)}')`
                     : undefined,
             }}>
             <div className={styles.leave}>