feat: add Revolt discover (note: has CORS issues)

src/pages/RevoltApp.tsx

@@ -19,6 +19,7 @@ import RightSidebar from "../components/navigation/RightSidebar";
 import Open from "./Open";
 import Channel from "./channels/Channel";
 import Developer from "./developer/Developer";
+import Discover from "./discover/Discover";
 import Friends from "./friends/Friends";
 import Home from "./home/Home";
 import InviteBot from "./invite/InviteBot";
@@ -82,6 +83,7 @@ export default function App() {
         path === "/" || path === "/settings" || path.startsWith("/friends");
     const inChannel = path.includes("/channel");
     const inServer = path.includes("/server");
+    const inDiscover = path.startsWith("/discover");
     const inSpecial =
         (path.startsWith("/friends") && isTouchscreenDevice) ||
         path.startsWith("/invite") ||
@@ -116,7 +118,11 @@ export default function App() {
                     }
                     bottomNav={{
                         component: <BottomNavigation />,
-                        showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,
+                        showIf: inDiscover
+                            ? 0
+                            : fixedBottomNav
+                            ? ShowIf.Always
+                            : ShowIf.Left,
                         height: 50,
                     }}
                     docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
@@ -172,6 +178,8 @@ export default function App() {
                             />
                             <Route path="/settings" component={Settings} />
 
+                            <Route path="/discover" component={Discover} />
+
                             <Route path="/dev" component={Developer} />
                             <Route path="/friends" component={Friends} />
                             <Route path="/open/:id" component={Open} />

src/pages/discover/Discover.tsx

@@ -0,0 +1,109 @@
+import { LeftArrowAlt } from "@styled-icons/boxicons-regular";
+import { Compass } from "@styled-icons/boxicons-solid";
+import { useHistory } from "react-router-dom";
+import styled, { css } from "styled-components";
+
+import { useEffect, useState } from "preact/hooks";
+
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
+import { useApplicationState } from "../../mobx/State";
+
+import { useIntermediate } from "../../context/intermediate/Intermediate";
+
+import Header from "../../components/ui/Header";
+import IconButton from "../../components/ui/IconButton";
+import Preloader from "../../components/ui/Preloader";
+
+const Container = styled.div`
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    ${() =>
+        isTouchscreenDevice
+            ? css`
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                  height: 100%;
+                  position: fixed;
+                  background: var(--background);
+              `
+            : css`
+                  background: var(--secondary-background);
+              `}
+`;
+
+const Frame = styled.iframe<{ loaded: boolean }>`
+    border: 0;
+
+    ${(props) =>
+        props.loaded
+            ? css`
+                  flex-grow: 1;
+              `
+            : css`
+                  display: none;
+              `}
+`;
+
+const Loader = styled.div`
+    flex-grow: 1;
+`;
+
+export default function Discover() {
+    const layout = useApplicationState().layout;
+    const { openLink } = useIntermediate();
+    const history = useHistory();
+
+    const [loaded, setLoaded] = useState(false);
+
+    useEffect(() => layout.setLastSection("discover"), []);
+
+    useEffect(() => {
+        function onMessage(message: MessageEvent) {
+            let data = JSON.parse(message.data);
+            if (data.source === "discover") {
+                switch (data.type) {
+                    case "navigate": {
+                        openLink(data.url);
+                        break;
+                    }
+                }
+            }
+        }
+
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    });
+
+    return (
+        <Container>
+            {isTouchscreenDevice && (
+                <Header placement="primary">
+                    <IconButton
+                        onClick={() => history.push(layout.getLastPath())}>
+                        <LeftArrowAlt
+                            size={27}
+                            style={{ marginInlineEnd: "8px" }}
+                        />
+                    </IconButton>
+                    <Compass size={27} />
+                    Discover
+                </Header>
+            )}
+            {!loaded && (
+                <Loader>
+                    <Preloader type="ring" />
+                </Loader>
+            )}
+            <Frame
+                loaded={loaded}
+                crossOrigin="anonymous"
+                onLoad={() => setLoaded(true)}
+                src="https://rvlt.gg/discover/servers?embedded=true"
+            />
+        </Container>
+    );
+}

src/pages/home/Home.tsx

@@ -103,19 +103,18 @@ export default observer(() => {
                                     Create a group
                                 </CategoryButton>
                             </Link>
-                            {/*<a
-                                href="#"
-                                target="_blank"
-                                rel="noreferrer">
-                                <CategoryButton
-                                    action="external"
-                                    icon={<Compass size={32} />}
-                                    description={
-                                        "Find a community based on your hobbies or interests."
-                                    }>
-                                    Join a community
-                                </CategoryButton>
-                                </a>*/}
+                            <Link to="/discover">
+                                <a>
+                                    <CategoryButton
+                                        action="chevron"
+                                        icon={<Compass size={32} />}
+                                        description={
+                                            "Find a community based on your hobbies or interests."
+                                        }>
+                                        Join a community
+                                    </CategoryButton>
+                                </a>
+                            </Link>
 
                             {client.servers.get(
                                 "01F7ZSBSFHQ8TA81725KQCSDDP",

src/pages/invite/Invite.tsx

@@ -30,6 +30,8 @@ export default function Invite() {
     const history = useHistory();
     const client = useContext(AppContext);
 
+    const layout = useApplicationState().layout;
+
     const status = useContext(StatusContext);
     const { code } = useParams<{ code: string }>();
     const [processing, setProcessing] = useState(false);
@@ -47,7 +49,7 @@ export default function Invite() {
         }
     }, [client, code, invite, status]);
 
-    if (code === undefined) return <Redirect to="/" />;
+    if (code === undefined) return <Redirect to={layout.getLastPath()} />;
 
     if (typeof invite === "undefined") {
         return (
@@ -72,7 +74,11 @@ export default function Invite() {
                                     <Button contrast>
                                         <ArrowBack
                                             size={32}
-                                            onClick={() => history.push("/")}
+                                            onClick={() =>
+                                                history.push(
+                                                    layout.getLastPath(),
+                                                )
+                                            }
                                         />
                                     </Button>
                                 </div>
@@ -95,7 +101,10 @@ export default function Invite() {
                     : undefined,
             }}>
             <div className={styles.leave}>
-                <ArrowBack size={32} onClick={() => history.push("/")} />
+                <ArrowBack
+                    size={32}
+                    onClick={() => history.push(layout.getLastPath())}
+                />
             </div>
 
             {!processing && (