flopobot_v2/examples/modal.js

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');
});