abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 09:25:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change invite rendering logic.

Browse Source 
Handle link warnings on embeds.
Remove "EDIT!!" 🙏🙏🙏
This commit is contained in:
Paul
2021-09-03 13:04:37 +01:00
parent 571b30243c
commit 2ccc0b7b5e
7 changed files with 219 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/components/common/messaging/embed/EmbedInvite.tsx
View File

@@ -1,8 +1,9 @@
import styled from "styled-components";
import { autorun } from "mobx";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import { RetrievedInvite } from "revolt-api/types/Invites";
import { Message } from "revolt.js/dist/maps/Messages";
import styled from "styled-components";
import { useContext, useEffect, useState } from "preact/hooks";
@@ -10,8 +11,6 @@ import { defer } from "../../../../lib/defer";
import { dispatch } from "../../../../redux";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import {
AppContext,
ClientStatus,
@@ -21,10 +20,8 @@ import { takeError } from "../../../../context/revoltjs/util";
import ServerIcon from "../../../../components/common/ServerIcon";
import Button from "../../../../components/ui/Button";
import Overline from "../../../ui/Overline";
import Preloader from "../../../ui/Preloader";
const EmbedInviteBase = styled.div`
width: 400px;
height: 80px;
@@ -35,22 +32,25 @@ const EmbedInviteBase = styled.div`
padding: 0 12px;
margin-top: 2px;
`;
const EmbedInviteDetails = styled.div`
flex-grow: 1;
padding-left: 12px;
`;
const EmbedInviteName = styled.div`
font-weight: bold;
`;
const EmbedInviteMemberCount = styled.div`
font-size: 0.8em;
`;
type Props = {
code: string
}
code: string;
};
export default function EmbedInvite(props: Props) {
export function EmbedInvite(props: Props) {
const history = useHistory();
const client = useContext(AppContext);
const status = useContext(StatusContext);
@@ -72,90 +72,120 @@ export default function EmbedInvite(props: Props) {
.catch((err) => setError(takeError(err)));
}
}, [client, code, invite, status]);
if (typeof invite === "undefined") {
return error ? (
<EmbedInviteBase>
<ServerIcon
size={55}
/>
<ServerIcon size={55} />
<EmbedInviteDetails>
<EmbedInviteName>
Invalid invite!
</EmbedInviteName>
<EmbedInviteName>Invalid invite!</EmbedInviteName>
</EmbedInviteDetails>
</EmbedInviteBase>
) : (
<EmbedInviteBase>
<Preloader type="ring" />
</EmbedInviteBase>
)
);
}
return <EmbedInviteBase>
<ServerIcon
attachment={invite.server_icon}
server_name={invite.server_name}
size={55}
/>
<EmbedInviteDetails>
<EmbedInviteName>
{invite.server_name}
</EmbedInviteName>
<EmbedInviteMemberCount>
{invite.member_count} members
</EmbedInviteMemberCount>
</EmbedInviteDetails>
{processing ? (
<div>
<Preloader type="ring" />
</div>
) : (
<Button onClick={async () => {
try {
setProcessing(true);
if (invite.type === "Server") {
if (
client.servers.get(invite.server_id)
) {
history.push(
`/server/${invite.server_id}/channel/${invite.channel_id}`,
);
}
const dispose = autorun(() => {
const server = client.servers.get(
invite.server_id,
);
defer(() => {
if (server) {
dispatch({
type: "UNREADS_MARK_MULTIPLE_READ",
channels:
server.channel_ids,
});
return (
<EmbedInviteBase>
<ServerIcon
attachment={invite.server_icon}
server_name={invite.server_name}
size={55}
/>
<EmbedInviteDetails>
<EmbedInviteName>{invite.server_name}</EmbedInviteName>
<EmbedInviteMemberCount>
{invite.member_count} members
</EmbedInviteMemberCount>
</EmbedInviteDetails>
{processing ? (
<div>
<Preloader type="ring" />
</div>
) : (
<Button
onClick={async () => {
try {
setProcessing(true);
if (invite.type === "Server") {
if (client.servers.get(invite.server_id)) {
history.push(
`/server/${server._id}/channel/${invite.channel_id}`,
`/server/${invite.server_id}/channel/${invite.channel_id}`,
);
}
});
dispose();
});
}
const dispose = autorun(() => {
const server = client.servers.get(
invite.server_id,
);
await client.joinInvite(code);
setProcessing(false);
} catch (err) {
setError(takeError(err));
setProcessing(false);
}
}}>
{client.servers.get(invite.server_id) ? "Joined" : "Join"}
</Button>
)}
</EmbedInviteBase>
defer(() => {
if (server) {
dispatch({
type: "UNREADS_MARK_MULTIPLE_READ",
channels: server.channel_ids,
});
history.push(
`/server/${server._id}/channel/${invite.channel_id}`,
);
}
});
dispose();
});
}
await client.joinInvite(code);
setProcessing(false);
} catch (err) {
setError(takeError(err));
setProcessing(false);
}
}}>
{client.servers.get(invite.server_id) ? "Joined" : "Join"}
</Button>
)}
</EmbedInviteBase>
);
}
const INVITE_PATHS = [
`${location.hostname}/invite`,
"app.revolt.chat/invite",
"nightly.revolt.chat/invite",
"local.revolt.chat/invite",
"rvlt.gg",
];
const RE_INVITE = new RegExp(
`(?:${INVITE_PATHS.map((x) => x.replaceAll(".", "\\.")).join(
"|",
)})/([A-Za-z0-9]*)`,
"g",
);
export default observer(({ message }: { message: Message }) => {
if (typeof message.content !== "string") return null;
const matches = [...message.content.matchAll(RE_INVITE)];
if (matches.length > 0) {
const entries = [
...new Set(matches.slice(0, 5).map((x) => x[1])),
].slice(0, 5);
return (
<>
{entries.map((entry) => (
<EmbedInvite key={entry} code={entry} />
))}
</>
);
}
return null;
});