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

src/components/navigation/LeftSidebar.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Route, Switch } from "react-router";
+import { useLocation } from "react-router-dom";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
@@ -13,8 +14,10 @@ import ServerSidebar from "./left/ServerSidebar";
 
 export default observer(() => {
     const layout = useApplicationState().layout;
+    const { pathname } = useLocation();
     const isOpen =
-        isTouchscreenDevice || layout.getSectionState(SIDEBAR_CHANNELS, true);
+        !pathname.startsWith("/discover") &&
+        (isTouchscreenDevice || layout.getSectionState(SIDEBAR_CHANNELS, true));
 
     return (
         <SidebarBase>

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,4 +1,4 @@
-import { Plus, LinkExternal } from "@styled-icons/boxicons-regular";
+import { Plus } from "@styled-icons/boxicons-regular";
 import { Cog, Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, useHistory, useLocation, useParams } from "react-router-dom";
@@ -249,7 +249,9 @@ export default observer(() => {
     ).length;
 
     const homeActive =
-        typeof server === "undefined" && !path.startsWith("/invite");
+        typeof server === "undefined" &&
+        !path.startsWith("/invite") &&
+        !path.startsWith("/discover");
 
     return (
         <ServersBase>
@@ -386,7 +388,7 @@ export default observer(() => {
                         </div>
                     </Tooltip>
                 </ServerCircle>
-                {/*<ServerCircle>
+                <ServerCircle>
                     <Tooltip
                         content={
                             <div
@@ -395,22 +397,21 @@ export default observer(() => {
                                     alignItems: "center",
                                     gap: "4px",
                                 }}>
-                                <div>Discover Public Servers</div>
+                                <div>Discover Revolt</div>
                             </div>
                         }
                         placement="right">
                         <div className="circle">
                             <IconButton>
-                                <a
-                                    href="#"
-                                    target="_blank"
-                                    rel="noreferrer">
-                                    <Compass size={32} />
-                                </a>
+                                <Link to="/discover">
+                                    <a>
+                                        <Compass size={32} />
+                                    </a>
+                                </Link>
                             </IconButton>
                         </div>
                     </Tooltip>
-                    </ServerCircle>*/}
+                </ServerCircle>
             </ServerList>
             <PaintCounter small />
             {!isTouchscreenDevice && (

src/mobx/stores/Layout.ts

@@ -27,7 +27,7 @@ export default class Layout implements Store, Persistent<Data> {
      * The last 'major section' that the user had open.
      * This is either the home tab or a channel ID (for a server channel).
      */
-    private lastSection: "home" | string;
+    private lastSection: "home" | "discover" | string;
 
     /**
      * The last path the user had open in the home tab.
@@ -143,9 +143,19 @@ export default class Layout implements Store, Persistent<Data> {
      * @returns Last path
      */
     @computed getLastPath() {
-        return this.lastSection === "home"
-            ? this.lastHomePath
-            : this.getLastOpened(this.lastSection);
+        return this.lastSection === "discover"
+            ? "/discover"
+            : this.lastSection === "home"
+            ? this.lastHomePath!
+            : this.getLastOpened(this.lastSection)!;
+    }
+
+    /**
+     * Set the last opened section.
+     * @param section Section name
+     */
+    @action setLastSection(section: string) {
+        this.lastSection = section;
     }
 
     /**

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 && (