cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-21 22:50:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Paul Makles 2022-01-10 00:57:00 +00:00
parent 56925b3ea2
commit abecd0ec11
7 changed files with 172 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/navigation/LeftSidebar.tsx
View file

@ -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>

23
src/components/navigation/left/ServerListSidebar.tsx
View file

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

18
src/mobx/stores/Layout.ts
View file

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

10
src/pages/RevoltApp.tsx
View file

@ -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} />

109
src/pages/discover/Discover.tsx Normal file
View file

@ -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>
);
}

25
src/pages/home/Home.tsx
View file

@ -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",

15
src/pages/invite/Invite.tsx
View file

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