From abecd0ec110104a4351c49b6ea3e3ac445ffc065 Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Mon, 10 Jan 2022 00:57:00 +0000 Subject: [PATCH] feat: add Revolt discover (note: has CORS issues) --- src/components/navigation/LeftSidebar.tsx | 5 +- .../navigation/left/ServerListSidebar.tsx | 23 ++-- src/mobx/stores/Layout.ts | 18 ++- src/pages/RevoltApp.tsx | 10 +- src/pages/discover/Discover.tsx | 109 ++++++++++++++++++ src/pages/home/Home.tsx | 25 ++-- src/pages/invite/Invite.tsx | 15 ++- 7 files changed, 172 insertions(+), 33 deletions(-) create mode 100644 src/pages/discover/Discover.tsx diff --git a/src/components/navigation/LeftSidebar.tsx b/src/components/navigation/LeftSidebar.tsx index ff329841..9e818064 100644 --- a/src/components/navigation/LeftSidebar.tsx +++ b/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 ( diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index 9ba4eb60..9fa91548 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/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 ( @@ -386,7 +388,7 @@ export default observer(() => { - {/* + { alignItems: "center", gap: "4px", }}> -
Discover Public Servers
+
Discover Revolt
} placement="right">
- - - + + + + +
- */} + {!isTouchscreenDevice && ( diff --git a/src/mobx/stores/Layout.ts b/src/mobx/stores/Layout.ts index 1c572333..a4fd1454 100644 --- a/src/mobx/stores/Layout.ts +++ b/src/mobx/stores/Layout.ts @@ -27,7 +27,7 @@ export default class Layout implements Store, Persistent { * 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 { * @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; } /** diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 6c98b269..5282a44f 100644 --- a/src/pages/RevoltApp.tsx +++ b/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: , - 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() { /> + + diff --git a/src/pages/discover/Discover.tsx b/src/pages/discover/Discover.tsx new file mode 100644 index 00000000..697386dd --- /dev/null +++ b/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 ( + + {isTouchscreenDevice && ( +
+ history.push(layout.getLastPath())}> + + + + Discover +
+ )} + {!loaded && ( + + + + )} + setLoaded(true)} + src="https://rvlt.gg/discover/servers?embedded=true" + /> + + ); +} diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 22e70269..da3266b0 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -103,19 +103,18 @@ export default observer(() => { Create a group - {/* - } - description={ - "Find a community based on your hobbies or interests." - }> - Join a community - - */} + + + } + description={ + "Find a community based on your hobbies or interests." + }> + Join a community + + + {client.servers.get( "01F7ZSBSFHQ8TA81725KQCSDDP", diff --git a/src/pages/invite/Invite.tsx b/src/pages/invite/Invite.tsx index 6ba91bf3..b55dce37 100644 --- a/src/pages/invite/Invite.tsx +++ b/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 ; + if (code === undefined) return ; if (typeof invite === "undefined") { return ( @@ -72,7 +74,11 @@ export default function Invite() { @@ -95,7 +101,10 @@ export default function Invite() { : undefined, }}>
- history.push("/")} /> + history.push(layout.getLastPath())} + />
{!processing && (