diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx index 095db5da..7c008cb6 100644 --- a/src/components/common/messaging/Message.tsx +++ b/src/components/common/messaging/Message.tsx @@ -24,6 +24,7 @@ import MessageBase, { import Attachment from "./attachments/Attachment"; import { MessageReply } from "./attachments/MessageReply"; import Embed from "./embed/Embed"; +import EmbedInvite from "./embed/EmbedInvite"; interface Props { attachContext?: boolean; @@ -36,6 +37,7 @@ interface Props { hideReply?: boolean; } + const Message = observer( ({ highlight, @@ -142,6 +144,22 @@ const Message = observer( )} {replacement ?? } + {(() => { + if (content.includes(".revolt.chat/invite/") || content.includes("rvlt.gg/")) { + const inviteRegex = /(?:(?:app|nightly)\.revolt\.chat\/invite|rvlt.gg)\/([A-Za-z0-9]*)/g; + if (inviteRegex.test(content)) { + let results = []; + let match; + inviteRegex.lastIndex = 0; + while ((match = inviteRegex.exec(content)) !== null) { + if (!results.includes(match[1])) { + results.push(match[1]); + } + } + return results.map(code => ); + } + } + })()} {queued?.error && ( )} diff --git a/src/components/common/messaging/embed/EmbedInvite.tsx b/src/components/common/messaging/embed/EmbedInvite.tsx new file mode 100644 index 00000000..48bc59c2 --- /dev/null +++ b/src/components/common/messaging/embed/EmbedInvite.tsx @@ -0,0 +1,141 @@ +import styled from "styled-components"; + +import { autorun } from "mobx"; +import { useHistory } from "react-router-dom"; + +import { useContext, useEffect, useState } from "preact/hooks"; + +import { defer } from "../../../../lib/defer"; + +import { dispatch } from "../../../../redux"; + +import { useClient } from "../../../../context/revoltjs/RevoltClient"; + +import { + AppContext, + ClientStatus, + StatusContext, +} from "../../../../context/revoltjs/RevoltClient"; +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; + background-color: var(--secondary-background); + border-radius: 6px; + display: flex; + align-items: center; + 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; +`; + + +export default function EmbedInvite(props) { + const history = useHistory(); + const client = useContext(AppContext); + const status = useContext(StatusContext); + const code = props.code; + const [processing, setProcessing] = useState(false); + const [error, setError] = useState(undefined); + const [invite, setInvite] = useState( + undefined, + ); + + useEffect(() => { + if ( + typeof invite === "undefined" && + (status === ClientStatus.ONLINE || status === ClientStatus.READY) + ) { + client + .fetchInvite(code) + .then((data) => setInvite(data)) + .catch((err) => setError(takeError(err))); + } + }, [client, code, invite, status]); + + if (typeof invite === "undefined") { + return + {error ? ( + + ) : ( + + )} + + } + + return + + + + {invite.server_name} + + + {invite.member_count} members + + + + +}