Add modals example

README.md

@@ -88,6 +88,7 @@ On the **General Information** tab, there will be an **Interactions Endpoint URL
 Click **Save Changes**, and your app should be ready to run 🚀
 
 ## Other resources
-- Join the **[Discord Developers server](https://discord.gg/discord-developers)** to ask questions about the API, attend events hosted by the Discord API team, and interact with other devs.
 - Read **[the documentation](https://discord.com/developers/docs/intro)** for in-depth information about API features.
+- Browse the `examples/` folder in this project for smaller, feature-specific code examples
+- Join the **[Discord Developers server](https://discord.gg/discord-developers)** to ask questions about the API, attend events hosted by the Discord API team, and interact with other devs.
 - Check out **[community resources](https://discord.com/developers/docs/topics/community-resources#community-resources)** for language-specific tools maintained by community members.

app.js

@@ -1,5 +1,5 @@
 import 'dotenv/config'
-import express from 'express'
+import express, { json } from 'express'
 import axios from 'axios';
 import { InteractionType, InteractionResponseType } from 'discord-interactions';
 import { VerifyDiscordRequest, getRandomEmoji, ComponentType, ButtonStyle, DiscordAPI } from './utils.js';
@@ -25,6 +25,7 @@ let activeGames = {};
 app.post('/interactions', function (req, res) {
     // Interaction type and data
     let { type, id, data } = req.body;
+    console.log(type);
 
     /**
      * Handle verification requests

examples/modal.js

@@ -0,0 +1,85 @@
+import 'dotenv/config'
+import express from 'express'
+import { InteractionType, InteractionResponseType } from 'discord-interactions';
+import { VerifyDiscordRequest } from './utils.js';
+import { ComponentType } from '../utils.js';
+
+// Create and configure express app
+const app = express();
+app.use(express.json({verify: VerifyDiscordRequest(process.env.PUBLIC_KEY)}));
+
+app.post('/interactions', function (req, res) {
+    // Interaction type and data
+    let { type, data } = req.body;
+    /**
+     * Handle slash command requests
+     */
+    if (type === InteractionType.APPLICATION_COMMAND){
+        // Slash command with name of "test"
+        if (data.name === "test") {
+            // Send a modal as response
+            return res.send({
+                "type": InteractionResponseType.APPLICATION_MODAL,
+                "data": { 
+                    "custom_id": "my_modal",
+                    "title": "Modal title",
+                    "components": [
+                        {
+                            // Text inputs must be inside of an action component
+                            "type": ComponentType.ACTION,
+                            "components": [
+                                {
+                                    // See https://discord.com/developers/docs/interactions/message-components#text-inputs-text-input-structure
+                                    "type": ComponentType.INPUT,
+                                    "custom_id": "my_text",
+                                    "style": 1,
+                                    "label": "Type some text"
+                                }
+                            ]
+                        },
+                        {
+                            "type": ComponentType.ACTION,
+                            "components": [
+                                {
+                                    "type": ComponentType.INPUT,
+                                    "custom_id": "my_longer_text",
+                                    // Bigger text box for input
+                                    "style": 2,
+                                    "label": "Type some (longer) text"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            });
+        }
+    }
+
+    /**
+     * Handle modal submissions
+     */
+     if (type === InteractionType.APPLICATION_MODAL_SUBMIT) {
+        // custom_id of modal
+        let modalId = data.custom_id;
+        // user ID of member who filled out modal
+        let userId = req.body.member.user.id;
+
+        if (modalId === 'my_modal') {
+            let modalValues = '';
+            // Get value of text inputs
+            for (let action of data.components) {
+                let inputComponent = action.components[0];
+                modalValues += `${inputComponent.custom_id}: ${inputComponent.value}\n`
+            }
+            
+            return res.send({
+                "type": InteractionResponseType.CHANNEL_MESSAGE_WITH_SOURCE,
+                "data": { "content": `<@${userId}> typed the following (in a modal):\n\n${modalValues}` }
+            })
+        }
+    }
+});
+
+app.listen(3000, () => {
+    console.log('Listening on port 3000');
+});