From 1e57b19a6144085d0e754ba998887e3050d10cf2 Mon Sep 17 00:00:00 2001
From: Siwoo Jeon <me@migan.co.kr>
Date: Sun, 10 Nov 2024 20:42:28 +0900
Subject: [PATCH] feat: Add cancel button and remove cancel option by select
 menu

---
 src/commands/deleteLearn.ts                   | 21 ++++++++-----
 src/interaction-handlers/deleteLearn.ts       | 12 -------
 src/interaction-handlers/deleteLearnCancel.ts | 31 +++++++++++++++++++
 3 files changed, 44 insertions(+), 20 deletions(-)
 create mode 100644 src/interaction-handlers/deleteLearnCancel.ts

diff --git a/src/commands/deleteLearn.ts b/src/commands/deleteLearn.ts
index 9a08e87..b0a36cd 100644
--- a/src/commands/deleteLearn.ts
+++ b/src/commands/deleteLearn.ts
@@ -6,6 +6,7 @@ import {
   ComponentType,
   codeBlock,
   Message,
+  ButtonStyle,
 } from 'discord.js'
 import {
   DetailedDescriptionCommandObject,
@@ -100,14 +101,18 @@ export default class DeleteLearnCommand extends Command {
               type: ComponentType.StringSelect,
               customId: `${CUSTOM_ID}@${user.id}`,
               placeholder: '지울 데이터를 선택해ㅈ주세요',
-              options: [
-                ...options,
-                {
-                  label: '❌ 취소',
-                  description: '아무것도 삭제하지 않아요.',
-                  value: `${CUSTOM_ID}-cancel`,
-                },
-              ],
+              options,
+            },
+          ],
+        },
+        {
+          type: ComponentType.ActionRow,
+          components: [
+            {
+              type: ComponentType.Button,
+              customId: `${CUSTOM_ID}-cancel`,
+              label: '취소',
+              style: ButtonStyle.Danger,
             },
           ],
         },
diff --git a/src/interaction-handlers/deleteLearn.ts b/src/interaction-handlers/deleteLearn.ts
index ebb8af9..ceaf9b8 100644
--- a/src/interaction-handlers/deleteLearn.ts
+++ b/src/interaction-handlers/deleteLearn.ts
@@ -31,18 +31,6 @@ export default class DeleteLearnHandler extends InteractionHandler {
     const db = this.container.database
     const decimalRegexp = /^[0-9]/g
 
-    if (id === 'cancel')
-      return await interaction.editReply({
-        embeds: [
-          {
-            title: '삭제',
-            description: '아무것도 삭제하지 않았어요.',
-            color: this.container.embedColors.fail,
-          },
-        ],
-        components: [],
-      })
-
     const itemId = interaction.component.options.map(item =>
       item.value.endsWith(`${id}`) ? item.label.match(decimalRegexp)![0] : null,
     )
diff --git a/src/interaction-handlers/deleteLearnCancel.ts b/src/interaction-handlers/deleteLearnCancel.ts
new file mode 100644
index 0000000..5a6a648
--- /dev/null
+++ b/src/interaction-handlers/deleteLearnCancel.ts
@@ -0,0 +1,31 @@
+import { ApplyOptions } from '@sapphire/decorators'
+import {
+  InteractionHandler,
+  InteractionHandlerTypes,
+} from '@sapphire/framework'
+import { ButtonInteraction } from 'discord.js'
+
+@ApplyOptions<InteractionHandler.Options>({
+  interactionHandlerType: InteractionHandlerTypes.Button,
+})
+export default class DeleteLearnCancelHandler extends InteractionHandler {
+  private _CUSTOM_ID = 'maa$deleteLearn'
+
+  public async parse(interaction: ButtonInteraction) {
+    if (interaction.customId !== `${this._CUSTOM_ID}-cancel`) return this.none()
+    return this.some()
+  }
+
+  public async run(interaction: ButtonInteraction) {
+    return await interaction.update({
+      embeds: [
+        {
+          title: '삭제',
+          description: '아무것도 삭제하지 않았어요.',
+          color: this.container.embedColors.fail,
+        },
+      ],
+      components: [],
+    })
+  }
+}