Skip to content

Commit 0cb592a

Browse files
anthonydiscordanthonydiscord
authored
Update examples to use components v2 (#83)
* Update dependencies * Update docs links * Use components v2 in examples * Update interaction link * Fix text display fields * Update app.js to match tutorial
1 parent 91d959a commit 0cb592a

File tree

7 files changed

+271
-169
lines changed

7 files changed

+271
-169
lines changed

‎app.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,14 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), async fun
4646
return res.send({
4747
type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
4848
data: {
49-
// Fetches a random emoji to send from a helper function
50-
content: `hello world ${getRandomEmoji()}`,
49+
flags: InteractionResponseFlags.IS_COMPONENTS_V2,
50+
components: [
51+
{
52+
type: MessageComponentTypes.TEXT_DISPLAY,
53+
// Fetches a random emoji to send from a helper function
54+
content: `hello world ${getRandomEmoji()}`
55+
}
56+
]
5157
},
5258
});
5359
}

‎examples/app.js‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,14 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), async fun
4747
return res.send({
4848
type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
4949
data: {
50-
// Fetches a random emoji to send from a helper function
51-
content: `hello world ${getRandomEmoji()}`,
50+
flags: InteractionResponseFlags.IS_COMPONENTS_V2,
51+
components: [
52+
{
53+
type: MessageComponentTypes.TEXT_DISPLAY,
54+
// Fetches a random emoji to send from a helper function
55+
content: `hello world ${getRandomEmoji()}`
56+
}
57+
]
5258
},
5359
});
5460
}
@@ -71,9 +77,13 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), async fun
7177
return res.send({
7278
type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
7379
data: {
74-
// Fetches a random emoji to send from a helper function
75-
content: `Rock papers scissors challenge from <@${userId}>`,
80+
flags: InteractionResponseFlags.IS_COMPONENTS_V2,
7681
components: [
82+
{
83+
type: MessageComponentTypes.TEXT_DISPLAY,
84+
// Fetches a random emoji to send from a helper function
85+
content: `Rock papers scissors challenge from <@${userId}>`,
86+
},
7787
{
7888
type: MessageComponentTypes.ACTION_ROW,
7989
components: [
@@ -97,7 +107,7 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), async fun
97107

98108
/**
99109
* Handle requests from interactive components
100-
* See https://discord.com/developers/docs/interactions/message-components#responding-to-a-component-interaction
110+
* See https://discord.com/developers/docs/components/using-message-components#using-message-components-with-interactions
101111
*/
102112
if (type === InteractionType.MESSAGE_COMPONENT) {
103113
// custom_id set in payload when sending message component
@@ -112,10 +122,13 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), async fun
112122
await res.send({
113123
type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
114124
data: {
115-
content: 'What is your object of choice?',
116125
// Indicates it'll be an ephemeral message
117-
flags: InteractionResponseFlags.EPHEMERAL,
126+
flags: InteractionResponseFlags.EPHEMERAL | InteractionResponseFlags.IS_COMPONENTS_V2,
118127
components: [
128+
{
129+
type: MessageComponentTypes.TEXT_DISPLAY,
130+
content: 'What is your object of choice?',
131+
},
119132
{
120133
type: MessageComponentTypes.ACTION_ROW,
121134
components: [
@@ -161,14 +174,26 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), async fun
161174
// Send results
162175
await res.send({
163176
type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
164-
data: { content: resultStr },
177+
data: {
178+
flags: InteractionResponseFlags.IS_COMPONENTS_V2,
179+
components: [
180+
{
181+
type: MessageComponentTypes.TEXT_DISPLAY,
182+
content: resultStr
183+
}
184+
]
185+
},
165186
});
166187
// Update ephemeral message
167188
await DiscordRequest(endpoint, {
168189
method: 'PATCH',
169190
body: {
170-
content: 'Nice choice ' + getRandomEmoji(),
171-
components: [],
191+
components: [
192+
{
193+
type: MessageComponentTypes.TEXT_DISPLAY,
194+
content: 'Nice choice ' + getRandomEmoji()
195+
}
196+
],
172197
},
173198
});
174199
} catch (err) {

‎examples/button.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,13 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), function
2424
return res.send({
2525
type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
2626
data: {
27-
content: 'A message with a button',
27+
flags: InteractionResponseFlags.IS_COMPONENTS_V2,
2828
// Buttons are inside of action rows
2929
components: [
30+
{
31+
type: MessageComponentTypes.TEXT_DISPLAY,
32+
content: 'A message with a button',
33+
},
3034
{
3135
type: MessageComponentTypes.ACTION_ROW,
3236
components: [

‎examples/modal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), function
3131
type: MessageComponentTypes.ACTION_ROW,
3232
components: [
3333
{
34-
// See https://discord.com/developers/docs/interactions/message-components#text-inputs-text-input-structure
34+
// See https://discord.com/developers/docs/components/reference#text-input
3535
type: MessageComponentTypes.INPUT_TEXT,
3636
custom_id: 'my_text',
3737
style: 1,

‎examples/selectMenu.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,21 @@ app.post('/interactions', verifyKeyMiddleware(process.env.PUBLIC_KEY), function
2323
return res.send({
2424
type: InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
2525
data: {
26-
content: 'A message with a button',
26+
flags: InteractionResponseFlags.IS_COMPONENTS_V2,
2727
// Selects are inside of action rows
2828
components: [
29+
{
30+
type: MessageComponentTypes.TEXT_DISPLAY,
31+
content: 'What is your object of choice?',
32+
},
2933
{
3034
type: MessageComponentTypes.ACTION_ROW,
3135
components: [
3236
{
3337
type: MessageComponentTypes.STRING_SELECT,
3438
// Value for your app to identify the select menu interactions
3539
custom_id: 'my_select',
36-
// Select options - see https://discord.com/developers/docs/interactions/message-components#select-menu-object-select-option-structure
40+
// Select options - see https://discord.com/developers/docs/components/reference#string-select
3741
options: [
3842
{
3943
label: 'Option #1',

‎game.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export function getShuffledOptions() {
9191

9292
for (let c of allChoices) {
9393
// Formatted for select menus
94-
// https://discord.com/developers/docs/interactions/message-components#select-menu-object-select-option-structure
94+
// https://discord.com/developers/docs/components/reference#string-select-select-option-structure
9595
options.push({
9696
label: capitalize(c),
9797
value: c.toLowerCase(),

0 commit comments

Comments
 (0)