fix: Fix select menu UI update (closes #49) and refactor

Author: actionbrk

src/commands/activity/activity.ts

@@ -26,6 +26,9 @@ const chartJSNodeCanvas = new ChartJSNodeCanvas({
   },
 });
 
+const ACTIVITY_PERIOD_ID = "activity-period";
+const ACTIVITY_ROLLING_ID = "activity-rolling";
+
 const ActivityCommand: Command = {
   data: new SlashCommandBuilder()
     .setName("activity")
@@ -55,7 +58,7 @@ const ActivityCommand: Command = {
 
     const fileBuffer = await plotTrend(guildId, userLocale, serverName, botName, channel);
 
-    const trendPeriodSelect = new StringSelectMenuBuilder().setCustomId("activity-period").setOptions([
+    const trendPeriodSelect = new StringSelectMenuBuilder().setCustomId(ACTIVITY_PERIOD_ID).setOptions([
       {
         label: translations.responses?.sinceTheBeginning?.[userLocale] ?? "Since the beginning",
         value: "0",
@@ -81,7 +84,7 @@ const ActivityCommand: Command = {
       },
     ]);
 
-    const rollingMeanSelect = new StringSelectMenuBuilder().setCustomId("activity-rolling").setOptions([
+    const rollingMeanSelect = new StringSelectMenuBuilder().setCustomId(ACTIVITY_ROLLING_ID).setOptions([
       {
         label: translations.responses?.rolling14Days?.[userLocale] ?? "Average over 14 days",
         value: "14",
@@ -131,26 +134,29 @@ const ActivityCommand: Command = {
     let rolling = 14;
 
     collector.on("collect", async (i) => {
-      if (i.customId === "activity-period") {
+      if (i.customId === ACTIVITY_PERIOD_ID) {
         period = parseInt(i.values[0] ?? "0");
-      } else if (i.customId === "activity-rolling") {
+      } else if (i.customId === ACTIVITY_ROLLING_ID) {
         rolling = parseInt(i.values[0] ?? "14");
       }
       logger.debug("Period: %d, Rolling: %d", period, rolling);
 
-      const selectedPeriodOption = trendPeriodSelect.options.find((option) => option.data.value === i.values[0]);
-      const selectedRollingOption = rollingMeanSelect.options.find((option) => option.data.value === i.values[0]);
-      if (selectedPeriodOption) {
-        trendPeriodSelect.options.forEach((option) => {
-          option.setDefault(false);
-        });
-        selectedPeriodOption.setDefault(true);
-      }
-      if (selectedRollingOption) {
-        rollingMeanSelect.options.forEach((option) => {
-          option.setDefault(false);
-        });
-        selectedRollingOption.setDefault(true);
+      if (i.customId === ACTIVITY_PERIOD_ID) {
+        const selectedPeriodOption = trendPeriodSelect.options.find((option) => option.data.value === i.values[0]);
+        if (selectedPeriodOption) {
+          trendPeriodSelect.options.forEach((option) => {
+            option.setDefault(false);
+          });
+          selectedPeriodOption.setDefault(true);
+        }
+      } else if (i.customId === ACTIVITY_ROLLING_ID) {
+        const selectedRollingOption = rollingMeanSelect.options.find((option) => option.data.value === i.values[0]);
+        if (selectedRollingOption) {
+          rollingMeanSelect.options.forEach((option) => {
+            option.setDefault(false);
+          });
+          selectedRollingOption.setDefault(true);
+        }
       }
 
       const deferUpdatePromise = i.update({ content: "", components: components });

src/commands/activity/trend.ts

@@ -26,6 +26,9 @@ const chartJSNodeCanvas = new ChartJSNodeCanvas({
   },
 });
 
+const TREND_PERIOD_ID = "trend-period";
+const TREND_ROLLING_ID = "trend-rolling";
+
 const TrendCommand: Command = {
   data: new SlashCommandBuilder()
     .setName("trend")
@@ -54,7 +57,7 @@ const TrendCommand: Command = {
 
     const fileBuffer = await plotTrend(guildId, term, userLocale, serverName, botName);
 
-    const trendPeriodSelect = new StringSelectMenuBuilder().setCustomId("trend-period").setOptions([
+    const trendPeriodSelect = new StringSelectMenuBuilder().setCustomId(TREND_PERIOD_ID).setOptions([
       {
         label: translations.responses?.sinceTheBeginning?.[userLocale] ?? "Since the beginning",
         value: "0",
@@ -80,7 +83,7 @@ const TrendCommand: Command = {
       },
     ]);
 
-    const rollingMeanSelect = new StringSelectMenuBuilder().setCustomId("trend-rolling").setOptions([
+    const rollingMeanSelect = new StringSelectMenuBuilder().setCustomId(TREND_ROLLING_ID).setOptions([
       {
         label: translations.responses?.rolling14Days?.[userLocale] ?? "Average over 14 days",
         value: "14",
@@ -130,26 +133,29 @@ const TrendCommand: Command = {
     let rolling = 14;
 
     collector.on("collect", async (i) => {
-      if (i.customId === "trend-period") {
+      if (i.customId === TREND_PERIOD_ID) {
         period = parseInt(i.values[0] ?? "0");
-      } else if (i.customId === "trend-rolling") {
+      } else if (i.customId === TREND_ROLLING_ID) {
         rolling = parseInt(i.values[0] ?? "14");
       }
       logger.debug("Period: %d, Rolling: %d", period, rolling);
 
-      const selectedPeriodOption = trendPeriodSelect.options.find((option) => option.data.value === i.values[0]);
-      const selectedRollingOption = rollingMeanSelect.options.find((option) => option.data.value === i.values[0]);
-      if (selectedPeriodOption) {
-        trendPeriodSelect.options.forEach((option) => {
-          option.setDefault(false);
-        });
-        selectedPeriodOption.setDefault(true);
-      }
-      if (selectedRollingOption) {
-        rollingMeanSelect.options.forEach((option) => {
-          option.setDefault(false);
-        });
-        selectedRollingOption.setDefault(true);
+      if (i.customId === TREND_PERIOD_ID) {
+        const selectedPeriodOption = trendPeriodSelect.options.find((option) => option.data.value === i.values[0]);
+        if (selectedPeriodOption) {
+          trendPeriodSelect.options.forEach((option) => {
+            option.setDefault(false);
+          });
+          selectedPeriodOption.setDefault(true);
+        }
+      } else if (i.customId === TREND_ROLLING_ID) {
+        const selectedRollingOption = rollingMeanSelect.options.find((option) => option.data.value === i.values[0]);
+        if (selectedRollingOption) {
+          rollingMeanSelect.options.forEach((option) => {
+            option.setDefault(false);
+          });
+          selectedRollingOption.setDefault(true);
+        }
       }
 
       const deferUpdatePromise = i.update({ content: "", components: components });

src/locales/fr.json

@@ -38,7 +38,7 @@
       "description": "Visualisez le nombre de messages postés par jour.",
       "options": {
         "channel": {
-          "name": "channel",
+          "name": "salon",
           "description": "Salon dans lequel compter."
         }
       },