cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-10 01:03:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

invite embed tweaks

Browse source
This commit is contained in:
TaiAurori 2021-09-21 14:02:38 -04:00
parent ce0749d9e8
commit 3d5c7ab9ce
1 changed files with 86 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
src/components/common/messaging/embed/EmbedInvite.tsx
View file

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { RetrievedInvite } from "revolt-api/types/Invites"; import { RetrievedInvite } from "revolt-api/types/Invites";
import { Message } from "revolt.js/dist/maps/Messages"; import { Message } from "revolt.js/dist/maps/Messages";
import styled from "styled-components"; import styled, { css } from "styled-components";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
@ -21,7 +21,8 @@ import { takeError } from "../../../../context/revoltjs/util";
import ServerIcon from "../../../../components/common/ServerIcon"; import ServerIcon from "../../../../components/common/ServerIcon";
import Button from "../../../../components/ui/Button"; import Button from "../../../../components/ui/Button";
import Preloader from "../../../ui/Preloader"; import Preloader from "../../../ui/Preloader";
import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
import Overline from "../../../ui/Overline";
const EmbedInviteBase = styled.div` const EmbedInviteBase = styled.div`
width: 400px; width: 400px;
height: 80px; height: 80px;
@ -31,15 +32,37 @@ const EmbedInviteBase = styled.div`
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
margin-top: 2px; margin-top: 2px;
${() =>
isTouchscreenDevice &&
css`
flex-wrap: wrap;
height: 130px;
padding-top: 8px;
padding-bottom: 10px;
width: 100%;
> button {
width: 100%;
}
`
}
`; `;
const EmbedInviteDetails = styled.div` const EmbedInviteDetails = styled.div`
flex-grow: 1; flex-grow: 1;
padding-left: 12px; padding-left: 12px;
${() =>
isTouchscreenDevice &&
css`
width: calc(100% - 55px);
`
}
`; `;
const EmbedInviteName = styled.div` const EmbedInviteName = styled.div`
font-weight: bold; font-weight: bold;
line-height: 1rem;
max-height: 2rem;
overflow: hidden;
`; `;
const EmbedInviteMemberCount = styled.div` const EmbedInviteMemberCount = styled.div`
@ -57,6 +80,7 @@ export function EmbedInvite(props: Props) {
const code = props.code; const code = props.code;
const [processing, setProcessing] = useState(false); const [processing, setProcessing] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const [joinError, setJoinError] = useState<string | undefined>(undefined);
const [invite, setInvite] = useState<RetrievedInvite | undefined>( const [invite, setInvite] = useState<RetrievedInvite | undefined>(
undefined, undefined,
); );
@ -89,68 +113,70 @@ export function EmbedInvite(props: Props) {
} }
return ( return (
<EmbedInviteBase> <>
<ServerIcon <EmbedInviteBase>
attachment={invite.server_icon} <ServerIcon
server_name={invite.server_name} attachment={invite.server_icon}
size={55} server_name={invite.server_name}
/> size={55}
<EmbedInviteDetails> />
<EmbedInviteName>{invite.server_name}</EmbedInviteName> <EmbedInviteDetails>
<EmbedInviteMemberCount> <EmbedInviteName>{invite.server_name}</EmbedInviteName>
{invite.member_count.toLocaleString()} members <EmbedInviteMemberCount>
</EmbedInviteMemberCount> {invite.member_count.toLocaleString()} members
</EmbedInviteDetails> </EmbedInviteMemberCount>
{processing ? ( </EmbedInviteDetails>
<div> {processing ? (
<Preloader type="ring" /> <div>
</div> <Preloader type="ring" />
) : ( </div>
<Button ) : (
onClick={async () => { <Button
try { onClick={async () => {
setProcessing(true); try {
setProcessing(true);
if (invite.type === "Server") { if (invite.type === "Server") {
if (client.servers.get(invite.server_id)) { if (client.servers.get(invite.server_id)) {
history.push( history.push(
`/server/${invite.server_id}/channel/${invite.channel_id}`, `/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,
});
history.push(
`/server/${server._id}/channel/${invite.channel_id}`,
);
}
});
dispose();
});
} }
const dispose = autorun(() => { await client.joinInvite(code);
const server = client.servers.get( } catch (err) {
invite.server_id, setJoinError(takeError(err));
); setProcessing(false);
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); {client.servers.get(invite.server_id) ? "Joined" : "Join"}
setProcessing(false); </Button>
} catch (err) { )}
setError(takeError(err)); </EmbedInviteBase>
setProcessing(false); {joinError && <Overline type="error" error={joinError} />}
} </>
}}>
{client.servers.get(invite.server_id) ? "Joined" : "Join"}
</Button>
)}
</EmbedInviteBase>
); );
} }