diff --git a/components-jsx/ActionRow.tsx b/components-jsx/ActionRow.tsx index 2b1f2d5..b7907a1 100644 --- a/components-jsx/ActionRow.tsx +++ b/components-jsx/ActionRow.tsx @@ -2,12 +2,12 @@ import { ComponentTypes, MessageActionRow, MessageActionRowComponent } from "oce import { childrenToArray } from "./utils"; -export type ActionRowProps = Omit & { children?: MessageActionRowComponent | MessageActionRowComponent[] }; +export type ActionRowProps = Omit & { children: MessageActionRowComponent | MessageActionRowComponent[]; }; -export function ActionRow(props: ActionRowProps): MessageActionRow { +export function ActionRow({ children, ...props }: ActionRowProps): MessageActionRow { return { type: ComponentTypes.ACTION_ROW, - components: childrenToArray(props.children), + components: childrenToArray(children), ...props }; } diff --git a/components-jsx/Button.tsx b/components-jsx/Button.tsx index db3c083..b16cfaf 100644 --- a/components-jsx/Button.tsx +++ b/components-jsx/Button.tsx @@ -5,7 +5,7 @@ import { childrenToString } from "./utils"; export { ButtonStyles } from "oceanic.js"; type Button = Omit | Omit; -export type ButtonProps = Button & { children?: any; }; +export type ButtonProps = Button & { children?: string; }; export function Button({ children, ...props }: ButtonProps): ButtonComponent { return { diff --git a/components-jsx/ComponentMessage.tsx b/components-jsx/ComponentMessage.tsx index c1b4380..f9a7dd0 100644 --- a/components-jsx/ComponentMessage.tsx +++ b/components-jsx/ComponentMessage.tsx @@ -3,7 +3,7 @@ import { CreateMessageOptions, EditMessageOptions, MessageComponent, MessageFlag import { childrenToArray } from "./utils"; type MessageOptions = CreateMessageOptions | EditMessageOptions; -export type ComponentMessageProps = MessageOptions & { children?: MessageComponent[]; }; +export type ComponentMessageProps = MessageOptions & { children: MessageComponent[]; }; export function ComponentMessage({ children, flags, ...props }: ComponentMessageProps): MessageOptions { return { diff --git a/components-jsx/Container.tsx b/components-jsx/Container.tsx index 1a80d58..913757d 100644 --- a/components-jsx/Container.tsx +++ b/components-jsx/Container.tsx @@ -2,7 +2,7 @@ import { ComponentTypes, ContainerComponent } from "oceanic.js"; import { childrenToArray } from "./utils"; -export type ContainerProps = Omit & { children?: ContainerComponent["components"] }; +export type ContainerProps = Omit & { children: ContainerComponent["components"]; }; export function Container({ children, ...props }: ContainerProps): ContainerComponent { return { diff --git a/components-jsx/Divider.tsx b/components-jsx/Divider.tsx new file mode 100644 index 0000000..320a248 --- /dev/null +++ b/components-jsx/Divider.tsx @@ -0,0 +1,5 @@ +import { Separator } from "./Separator"; + +export function Divider() { + return ; +} diff --git a/components-jsx/JSX.d.ts b/components-jsx/JSX.d.ts new file mode 100644 index 0000000..91bb0f6 --- /dev/null +++ b/components-jsx/JSX.d.ts @@ -0,0 +1,5 @@ +declare namespace JSX { + interface ElementChildrenAttribute { + children: {}; + } +} diff --git a/components-jsx/MediaGallery.tsx b/components-jsx/MediaGallery.tsx index 4082ee6..4104e5a 100644 --- a/components-jsx/MediaGallery.tsx +++ b/components-jsx/MediaGallery.tsx @@ -2,12 +2,12 @@ import { ComponentTypes, MediaGalleryComponent } from "oceanic.js"; import { childrenToArray } from "./utils"; -export type MediaGalleryProps = Omit & { children: MediaGalleryComponent["items"] }; +export type MediaGalleryProps = Omit & { children: MediaGalleryComponent["items"]; }; -export function MediaGallery(props: MediaGalleryProps): MediaGalleryComponent { +export function MediaGallery({ children, ...props }: MediaGalleryProps): MediaGalleryComponent { return { type: ComponentTypes.MEDIA_GALLERY, - items: childrenToArray(props.children), + items: childrenToArray(children), ...props }; } diff --git a/components-jsx/Section.tsx b/components-jsx/Section.tsx index 3c511fd..c746c7e 100644 --- a/components-jsx/Section.tsx +++ b/components-jsx/Section.tsx @@ -3,14 +3,14 @@ import { ButtonComponent, ComponentTypes, SectionComponent, TextDisplayComponent import { childrenToArray } from "./utils"; export interface SectionProps { - children: TextDisplayComponent[] + children: TextDisplayComponent[]; accessory: ThumbnailComponent | ButtonComponent; } -export function Section(props: SectionProps): SectionComponent { +export function Section({ children, ...props }: SectionProps): SectionComponent { return { type: ComponentTypes.SECTION, - components: childrenToArray(props.children), + components: childrenToArray(children), ...props }; } diff --git a/components-jsx/StringSelect.tsx b/components-jsx/StringSelect.tsx index abfb08d..f07dc5c 100644 --- a/components-jsx/StringSelect.tsx +++ b/components-jsx/StringSelect.tsx @@ -2,12 +2,12 @@ import { ComponentTypes, StringSelectMenu } from "oceanic.js"; import { childrenToArray } from "./utils"; -export type StringSelectProps = Omit & { children: StringSelectMenu["options"] }; +export type StringSelectProps = Omit & { children: StringSelectMenu["options"]; }; -export function StringSelect(props: StringSelectProps): StringSelectMenu { +export function StringSelect({ children, ...props }: StringSelectProps): StringSelectMenu { return { type: ComponentTypes.STRING_SELECT, - options: childrenToArray(props.children), + options: childrenToArray(children), ...props }; } diff --git a/components-jsx/TextDisplay.tsx b/components-jsx/TextDisplay.tsx index 27a6a25..029be66 100644 --- a/components-jsx/TextDisplay.tsx +++ b/components-jsx/TextDisplay.tsx @@ -3,12 +3,12 @@ import { ComponentTypes, TextDisplayComponent } from "oceanic.js"; import { childrenToString } from "./utils"; export interface TextDisplayProps { - children?: any; + children: any; id?: number; } export function TextDisplay({ children, id }: TextDisplayProps): TextDisplayComponent { - children = childrenToString("TextDisplay", children); + children = childrenToString("TextDisplay", children)!; if (!children) { throw new Error("TextDisplay requires at least one child"); } diff --git a/components-jsx/Thumbnail.tsx b/components-jsx/Thumbnail.tsx index cecc7e1..eb40075 100644 --- a/components-jsx/Thumbnail.tsx +++ b/components-jsx/Thumbnail.tsx @@ -1,11 +1,11 @@ import { ComponentTypes, ThumbnailComponent } from "oceanic.js"; -export type ThumbnailProps = Omit & { children: ThumbnailComponent["media"] }; +export type ThumbnailProps = Omit & { children: ThumbnailComponent["media"]; }; -export function Thumbnail(props: ThumbnailProps): ThumbnailComponent { +export function Thumbnail({ children, ...props }: ThumbnailProps): ThumbnailComponent { return { type: ComponentTypes.THUMBNAIL, - media: props.children, + media: children, ...props }; } diff --git a/components-jsx/br.tsx b/components-jsx/br.tsx new file mode 100644 index 0000000..2ae4f7c --- /dev/null +++ b/components-jsx/br.tsx @@ -0,0 +1,9 @@ +import { TextDisplay } from "./TextDisplay"; + +export function br() { + return ( + <> + {"\n"} + + ); +} diff --git a/components-jsx/index.ts b/components-jsx/index.ts index 5d3941e..0a72757 100644 --- a/components-jsx/index.ts +++ b/components-jsx/index.ts @@ -1,7 +1,9 @@ export * from "./ActionRow"; +export * from "./br"; export * from "./Button"; export * from "./ComponentMessage"; export * from "./Container"; +export * from "./Divider"; export * from "./File"; export * from "./MediaGallery"; export * from "./MediaGalleryItem"; diff --git a/components-jsx/runtime.ts b/components-jsx/runtime.ts index ba1246f..5b998b5 100644 --- a/components-jsx/runtime.ts +++ b/components-jsx/runtime.ts @@ -1,6 +1,8 @@ export const Fragment = Symbol("ComponentsJsx.Fragment"); -export function createElement(type: typeof Fragment | ((props: any) => any), props: any, ...children: any[]) { +type FunctionComponent = (props: any) => any; + +export function createElement(type: typeof Fragment | FunctionComponent, props: any, ...children: any[]) { if (type === Fragment) { return children; } diff --git a/components-jsx/utils.ts b/components-jsx/utils.ts index cb203af..0df7aca 100644 --- a/components-jsx/utils.ts +++ b/components-jsx/utils.ts @@ -7,7 +7,7 @@ export function filterChildren(children: any[]) { export function childrenToString(name: string, children: any) { if (Array.isArray(children)) { - return filterChildren(children).join("\n"); + return filterChildren(children).join(""); } if (typeof children === "string") { return children; diff --git a/src/components/User.tsx b/src/components/User.tsx new file mode 100644 index 0000000..5fbbe04 --- /dev/null +++ b/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 ( +
+ } + > + ### User + + {user.globalName || user.username} +
+ -# @{user.username} + +
+ ); +} diff --git a/src/cv2.ts b/src/cv2.ts deleted file mode 100644 index 5fe62c9..0000000 --- a/src/cv2.ts +++ /dev/null @@ -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 { - 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; -} diff --git a/src/joinRequestHandler.ts b/src/joinRequestHandler.tsx similarity index 65% rename from src/joinRequestHandler.ts rename to src/joinRequestHandler.tsx index caa6c8f..91bb1a4 100644 --- a/src/joinRequestHandler.ts +++ b/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" - } + + Placeholder + ); 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" - } - ] - } - ] - } + + + + ## Join request withdrawn + + + + + ### Application + {application ? ( + User has applied + ) : ( + + User hasn't applied + + )} + + ); break; }