for-legacy-web/src/controllers/modals/components/CreateInvite.tsx

93 lines
2.5 KiB
TypeScript

import styled from "styled-components";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { ModalForm } from "@revoltchat/ui";
import { noopAsync } from "../../../lib/js";
import { takeError } from "../../client/jsx/error";
import { modalController } from "../ModalController";
import { ModalProps } from "../types";
import { IS_REVOLT } from "../../../version";
/**
* Code block which displays invite
*/
const Invite = styled.div`
display: flex;
flex-direction: column;
code {
padding: 1em;
user-select: all;
font-size: 1.4em;
text-align: center;
font-family: var(--monospace-font);
}
`;
/**
* Create invite modal
*/
export default function CreateInvite({
target,
...props
}: ModalProps<"create_invite">) {
const [processing, setProcessing] = useState(false);
const [code, setCode] = useState("abcdef");
const [url, setUrl] = useState("abcdef");
// Generate an invite code
useEffect(() => {
setProcessing(true);
target
.createInvite()
.then((res) => {
setUrl(res.url || "default_url");
setCode(res._id || "default_code");
})
.catch((err) =>
modalController.push({ type: "error", error: takeError(err) }),
)
.finally(() => setProcessing(false));
}, [target]);
return (
<ModalForm
{...props}
title={<Text id={`app.context_menu.create_invite`} />}
schema={{
message: "custom",
}}
data={{
message: {
element: processing ? (
<Text id="app.special.modals.prompt.create_invite_generate" />
) : (
<Invite>
<Text id="app.special.modals.prompt.create_invite_created" />
<code style="font-size:14px">{url}</code>
</Invite>
),
},
}}
callback={noopAsync}
submit={{
children: <Text id="app.special.modals.actions.ok" />,
}}
actions={[
{
children: <Text id="app.context_menu.copy_link" />,
onClick: () =>
modalController.writeText(
`${url}`
),
},
]}
/>
);
}