migrate to cv2 jsx

src/components/User.tsx

@@ -0,0 +1,24 @@
+import { Section } from "components-jsx/Section";
+import { client } from "..";
+import { Thumbnail } from "components-jsx/Thumbnail";
+import { TextDisplay } from "components-jsx/TextDisplay";
+import { br } from "components-jsx/br";
+
+export async function User(props: { id: string }) {
+	const user = await client.rest.users.get(props.id);
+
+	return (
+		<Section
+			accessory={
+				<Thumbnail children={{ url: user.avatarURL("png", 128) }} />
+			}
+		>
+			<TextDisplay>### User</TextDisplay>
+			<TextDisplay>
+				{user.globalName || user.username}
+				<br />
+				-# @{user.username}
+			</TextDisplay>
+		</Section>
+	);
+}

src/cv2.ts

@@ -1,68 +0,0 @@
-import {
-	AnyMessageComponent,
-	Component,
-	ComponentTypes,
-	FileComponent,
-	MediaGalleryComponent,
-	MessageActionRow,
-	SectionComponent,
-	SeparatorComponent,
-	TextDisplayComponent
-} from "oceanic.js";
-import { client } from ".";
-
-export const Divider: SeparatorComponent = {
-	type: ComponentTypes.SEPARATOR,
-	divider: true
-};
-export const Header = (
-	title: string,
-	level: 1 | 2 | 3
-): TextDisplayComponent => {
-	return {
-		type: ComponentTypes.TEXT_DISPLAY,
-		content: `${"#".repeat(level)} ${title}`
-	};
-};
-
-export async function generateUserComponent(
-	id: string
-): Promise<SectionComponent> {
-	const user = await client.rest.users.get(id);
-	return {
-		type: ComponentTypes.SECTION,
-		components: [
-			Header("User", 3),
-			{
-				type: ComponentTypes.TEXT_DISPLAY,
-				content: `${user.globalName || user.username}\n-# @${
-					user.username
-				}`
-			}
-		],
-		accessory: {
-			type: ComponentTypes.THUMBNAIL,
-			media: {
-				url: user.avatarURL("png", 128)
-			}
-		}
-	};
-}
-export function generateList(
-	elements: {
-		[key: string]: string;
-	},
-	title?: string
-): TextDisplayComponent[] {
-	let working: TextDisplayComponent[] = [];
-
-	if (title) working.push(Header(title, 3));
-	for (const key of Object.keys(elements)) {
-		working.push({
-			type: ComponentTypes.TEXT_DISPLAY,
-			content: `**${key}**\n-# ${elements[key].replaceAll("\n", "\n-# ")}`
-		});
-	}
-
-	return working;
-}

src/joinRequestHandler.tsx

@@ -1,9 +1,19 @@
 import { ComponentTypes, MessageFlags, Shard } from "oceanic.js";
 import { client } from ".";
 import { Constants } from "./Constants";
-import { Header, Divider, generateUserComponent } from "./cv2";
 import { db } from "./database";
+import {
+	ActionRow,
+	Button,
+	ComponentMessage,
+	Container,
+	Divider,
+	Section,
+	Separator,
+	TextDisplay
+} from "~/components";
 import { selfappReq } from "./selfappReq";
+import { User } from "./components/User";
 
 export async function setupJoinRequestHandler(shard: Shard) {
 	shard.ws?.on("message", async (d) => {
@@ -18,9 +28,9 @@ export async function setupJoinRequestHandler(shard: Shard) {
 							const pendingMsg =
 								await client.rest.channels.createMessage(
 									Constants.PENDING_CHANNEL_ID,
-									{
-										content: "Placeholder"
-									}
+									<ComponentMessage>
+										<TextDisplay>Placeholder</TextDisplay>
+									</ComponentMessage>
 								);
 							await db.run(
 								"INSERT INTO applications (id, user_id, status, message_id, channel_id) VALUES (?, ?, 0, ?, ?)",
@@ -52,34 +62,24 @@ export async function setupJoinRequestHandler(shard: Shard) {
 					}
 					await client.rest.channels.createMessage(
 						Constants.REJECTION_CHANNEL_ID,
-						{
-							flags: MessageFlags.IS_COMPONENTS_V2,
-							components: [
-								{
-									type: ComponentTypes.CONTAINER,
-									accentColor: 0xffaaaa,
-									components: [
-										Header("Join request withdrawn", 2),
-										Divider,
-										await generateUserComponent(
-											applicationData.user_id
-										),
-										Divider,
-										Header("Application", 3),
-										application
-											? {
-													type: ComponentTypes.TEXT_DISPLAY,
-													content: "User has applied"
-											  }
-											: {
-													type: ComponentTypes.TEXT_DISPLAY,
-													content:
-														"User has never applied"
-											  }
-									]
-								}
-							]
-						}
+						<ComponentMessage>
+							<Container accentColor={0xffaaaa}>
+								<TextDisplay>
+									## Join request withdrawn
+								</TextDisplay>
+								<Divider />
+								<User id={applicationData.user_id} />
+								<Divider />
+								<TextDisplay>### Application</TextDisplay>
+								{application ? (
+									<TextDisplay>User has applied</TextDisplay>
+								) : (
+									<TextDisplay>
+										User hasn't applied
+									</TextDisplay>
+								)}
+							</Container>
+						</ComponentMessage>
 					);
 					break;
 				}