change paths for cardstack types

commands/interaction/slash/search/anime.js

@@ -1,17 +1,18 @@
 const { anime, animeSupplemental} = require('#api');
 const { PERMISSION_GROUPS, OMNI_ANIME_FORMAT_TYPES, COLORS_HEX} = require('#constants');
 
-const { createDynamicCardStack } = require("#cardstack");
+const { createDynamicCardStack } = require("#cardstack/index");
+const { ResolveCallbackTypes } = require("#cardstack/constants");
 
 const { hexToDecimalColor } = require("#utils/color");
-const { createEmbed, formatPaginationEmbeds, page } = require('#utils/embed');
+const { createEmbed, page } = require('#utils/embed');
 const { acknowledge } = require('#utils/interactions');
 const { smallPill, link, pill, stringwrapPreserveWords, timestamp, TIMESTAMP_FLAGS} = require('#utils/markdown');
 const { editOrReply } = require('#utils/message');
 const { InteractionContextTypes, ApplicationIntegrationTypes, ApplicationCommandOptionTypes } = require('detritus-client/lib/constants');
 const { STATIC_ASSETS } = require("#utils/statics");
 
-function renderAnimeResultsPage(context, res){
+function renderAnimeResultsPage(context, res, includeSupplementalData = true){
   let result = createEmbed("default", context, {
     author: {
       name: res.title,
@@ -31,6 +32,7 @@ function renderAnimeResultsPage(context, res){
 
   // Render Description
   if(res.subtitle) result.description += `-# ${res.subtitle}\n\n`;
+  if(res.type !== "ANIME") result.description += pill(OMNI_ANIME_FORMAT_TYPES[res.type]) + "   "
   if(res.subtype) result.description += pill(OMNI_ANIME_FORMAT_TYPES[res.subtype]) + "   "
   if(res.genres) result.description += res.genres.map((r)=>smallPill(r)).join("   ") + "\n\n";
   if(res.description) result.description += stringwrapPreserveWords(res.description, 600);
@@ -60,18 +62,18 @@ function renderAnimeResultsPage(context, res){
     })
   }
 
-  return page(result, {}, {
+  return page(result, {}, includeSupplementalData ? {
     // Supplemental keys are provided by the backend,
     // allow for fetching extra data related to results.
     episodes_key: res.supplemental.episodes,
     characters_key: res.supplemental.characters,
+    related_key: res.supplemental.related,
     name: res.title,
     color: hexToDecimalColor(res.color || COLORS_HEX.embed),
     cover: res.cover
-  });
+  } : {});
 }
 
-
 module.exports = {
   name: 'anime',
   description: 'Search for Anime.',
@@ -116,7 +118,7 @@ module.exports = {
       if(!pages.length) return editOrReply(context, createEmbed("warning", context, `No results found.`))
 
       createDynamicCardStack(context, {
-        cards: formatPaginationEmbeds(pages),
+        cards: pages,
         interactive: {
           episodes_button: {
             label: "Episodes",
@@ -162,7 +164,15 @@ module.exports = {
                 return page(card)
               })
 
-              return formatPaginationEmbeds(cards);
+              return {
+                type: ResolveCallbackTypes.SUBSTACK,
+                cards: cards.length >= 1 ? cards : [
+                  // This happens if the episode metadata resolver fails.
+                  page(createEmbed("defaultNoFooter", context, {
+                    description: `-# ${pg.getState("name")} › **Episodes**\n## Episodes Unavailable\n\nWe're unable to display episode details for this content.`
+                  }))
+                ],
+              };
             }
           },
           characters_button: {
@@ -200,7 +210,37 @@ module.exports = {
                 return page(card)
               })
 
-              return formatPaginationEmbeds(cards);
+              return {
+                type: ResolveCallbackTypes.SUBSTACK,
+                cards: cards
+              };
+            }
+          },
+          related_button: {
+            label: "Related",
+            inline: false,
+            visible: true,
+            condition: (page) => {
+              return (page.getState("related_key") !== null)
+            },
+            renderLoadingState: (pg) => {
+              return createEmbed("default", context, {
+                description: `-# ${pg.getState("name")} › **Related Content**`,
+                image: {
+                  url: STATIC_ASSETS.card_skeleton
+                },
+                color: pg.getState("color")
+              })
+            },
+            resolvePage: async (pg) => {
+              let episodes = await animeSupplemental(context, pg.getState("related_key"));
+
+              let cards = episodes.response.body.relations.map((e) => renderAnimeResultsPage(context, e, false))
+
+              return {
+                type: ResolveCallbackTypes.SUBSTACK,
+                cards: cards
+              };
             }
           }
         }

commands/message/dev/test.js

@@ -1,8 +1,8 @@
 const { createEmbed, page } = require("#utils/embed");
 const { acknowledge } = require("#utils/interactions");
 
-const { DynamicCardStack } = require("../../../labscore/cardstack/DynamicCardStack");
+const {createDynamicCardStack} = require("#cardstack/index");
-const {CARD_STACK_CONSTANTS} = require("#cardstack");
+const {ResolveCallbackTypes} = require("#cardstack/constants");
 
 module.exports = {
   label: "text",
@@ -16,12 +16,12 @@ module.exports = {
   },
   onBefore: context => context.user.isClientOwner,
   onCancel: ()=>{},
-  run: async (context, args) => {
+  run: async (context) => {
     await acknowledge(context);
 
     try{
       // This will create a new dynamic card stack
-      new DynamicCardStack(context, {
+      createDynamicCardStack(context, {
         cards: [
           createEmbed("default", context, { description: "page 1"}),
           createEmbed("default", context, { description: "page 2. this has a conditional button."})
@@ -37,7 +37,7 @@ module.exports = {
             disableCache: true,
             resolvePage: ()=>{
               return {
-                type: CARD_STACK_CONSTANTS.RESOLVE_CALLBACK_TYPES.SUBSTACK,
+                type: ResolveCallbackTypes.SUBSTACK,
                 cards: [
                   createEmbed("success", context, "smiley")
                 ].map((p)=>page(p))
@@ -52,9 +52,9 @@ module.exports = {
             visible: (page) => {
               return (page.getState("key") === "t_1")
             },
-            resolvePage: (pg) => {
+            resolvePage: () => {
               return {
-                type: CARD_STACK_CONSTANTS.RESOLVE_CALLBACK_TYPES.SUBSTACK,
+                type: ResolveCallbackTypes.SUBSTACK,
                 cards: [
                   createEmbed("default", context, { description: "this is a conditional sub page"}),
                   createEmbed("default", context, { description: "this is a conditional sub page two"})
@@ -72,15 +72,15 @@ module.exports = {
             inline: false,
             visible: true,
             // Renders the loading state card
-            renderLoadingState: (page) => {
+            renderLoadingState: () => {
               return createEmbed("default", context, {
                 description: "-# replacing papa card",
               })
             },
-            resolvePage: async (pg) => {
+            resolvePage: async () => {
               console.log("resolving page")
               return {
-                type: CARD_STACK_CONSTANTS.RESOLVE_CALLBACK_TYPES.REPLACE_PARENT_CARD,
+                type: ResolveCallbackTypes.REPLACE_PARENT_CARD,
                 card: page(createEmbed("default", context, { description: "this is the new over lord " + new Date()}), {}, {
                   key: Date.now()
                 })

commands/message/search/anime.js

@@ -1,7 +1,8 @@
 const { anime, animeSupplemental} = require('#api');
 const { PERMISSION_GROUPS, OMNI_ANIME_FORMAT_TYPES, COLORS_HEX} = require('#constants');
 
-const { createDynamicCardStack, CARD_STACK_CONSTANTS } = require("#cardstack");
+const { createDynamicCardStack } = require("#cardstack/index");
+const { ResolveCallbackTypes } = require("#cardstack/constants");
 
 const { hexToDecimalColor } = require("#utils/color");
 const { createEmbed, page } = require('#utils/embed');
@@ -153,7 +154,7 @@ module.exports = {
               })
 
               return {
-                type: CARD_STACK_CONSTANTS.RESOLVE_CALLBACK_TYPES.SUBSTACK,
+                type: ResolveCallbackTypes.SUBSTACK,
                 cards: cards.length >= 1 ? cards : [
                   // This happens if the episode metadata resolver fails.
                   page(createEmbed("defaultNoFooter", context, {
@@ -199,7 +200,7 @@ module.exports = {
               })
 
               return {
-                type: CARD_STACK_CONSTANTS.RESOLVE_CALLBACK_TYPES.SUBSTACK,
+                type: ResolveCallbackTypes.SUBSTACK,
                 cards: cards
               };
             }
@@ -226,7 +227,7 @@ module.exports = {
               let cards = episodes.response.body.relations.map((e) => renderAnimeResultsPage(context, e, false))
 
               return {
-                type: CARD_STACK_CONSTANTS.RESOLVE_CALLBACK_TYPES.SUBSTACK,
+                type: ResolveCallbackTypes.SUBSTACK,
                 cards: cards
               };
             }

labscore/cardstack/constants.js

@@ -1,12 +1,12 @@
 
-module.exports.BUILT_IN_BUTTON_TYPES = Object.freeze({
+module.exports.BuiltInButtonTypes = Object.freeze({
   NEXT_PAGE: "next",
   PREVIOUS_PAGE: "previous"
 })
 
 module.exports.DEFAULT_BUTTON_ICON_MAPPINGS = Object.freeze({
-  [this.BUILT_IN_BUTTON_TYPES.NEXT_PAGE]: "button_chevron_right",
+  [this.BuiltInButtonTypes.NEXT_PAGE]: "button_chevron_right",
-  [this.BUILT_IN_BUTTON_TYPES.PREVIOUS_PAGE]: "button_chevron_left"
+  [this.BuiltInButtonTypes.PREVIOUS_PAGE]: "button_chevron_left"
 });
 
 module.exports.STACK_CACHE_KEYS = Object.freeze({
@@ -23,7 +23,7 @@ module.exports.STACK_CACHE_KEYS = Object.freeze({
  * - `REPLACE_ROOT_STACK` - Replaces the root stack
  *    - This callback type will also unselect the button
  */
-module.exports.RESOLVE_CALLBACK_TYPES = Object.freeze({
+module.exports.ResolveCallbackTypes = Object.freeze({
   SUBSTACK: 0,
   REPLACE_PARENT_CARD: 1,
   REPLACE_STACK: 2,

labscore/cardstack/index.js

@@ -1,8 +1,8 @@
-const { DynamicCardStack } = require("./DynamicCardStack");
+const { DynamicCardStack } = require("./stack");
 
 module.exports = {
   createDynamicCardStack: (context, options)=>{
     return new DynamicCardStack(context, options)
   },
-  CARD_STACK_CONSTANTS: require("./Constants"),
+  CARD_STACK_CONSTANTS: require("./constants"),
 }

labscore/cardstack/stack.js

@@ -1,3 +1,5 @@
+const {DISCORD_INVITES} = require("#constants");
+
 const { createEmbed, page } = require("#utils/embed");
 const { iconAsEmojiObject, icon, link, codeblock } = require("#utils/markdown");
 const { editOrReply } = require("#utils/message");
@@ -7,8 +9,8 @@ const { Context } = require("detritus-client/lib/command");
 const { MessageComponentTypes, InteractionCallbackTypes } = require("detritus-client/lib/constants");
 const { Message } = require("detritus-client/lib/structures");
 const { ComponentContext, Components, ComponentActionRow} = require("detritus-client/lib/utils");
-const {DISCORD_INVITES} = require("#constants");
+
-const {DEFAULT_BUTTON_ICON_MAPPINGS, STACK_CACHE_KEYS, BUILT_IN_BUTTON_TYPES, RESOLVE_CALLBACK_TYPES} = require("./Constants");
+const {DEFAULT_BUTTON_ICON_MAPPINGS, STACK_CACHE_KEYS, BuiltInButtonTypes, ResolveCallbackTypes} = require("./constants");
 
 /**
  * Stores all active card stacks
@@ -442,7 +444,7 @@ class DynamicCardStack {
     //this.lastInteraction = Date.now();
 
     // Built-in Buttons
-    if(Object.values(BUILT_IN_BUTTON_TYPES).includes(ctx.data.customId)){
+    if(Object.values(BuiltInButtonTypes).includes(ctx.data.customId)){
       switch(ctx.data.customId){
         case "next":
           return ctx.respond({
@@ -516,7 +518,7 @@ class DynamicCardStack {
           // Compute the active cardstack.
           let resolvedNewStack = await this.interactive_components[ctx.data.customId].resolvePage(this);
 
-          if(!Object.values(RESOLVE_CALLBACK_TYPES).includes(resolvedNewStack.type))
+          if(!Object.values(ResolveCallbackTypes).includes(resolvedNewStack.type))
             throw new Error(`Invalid Stack Resolve Type (${resolvedNewStack.type})`);
 
           switch(resolvedNewStack.type){
@@ -527,7 +529,7 @@ class DynamicCardStack {
              * with a new, separate card stack to
              * page through.
              */
-            case RESOLVE_CALLBACK_TYPES.SUBSTACK:
+            case ResolveCallbackTypes.SUBSTACK:
               this.activeCardStack = resolvedNewStack.cards;
               this.index = resolvedNewStack.index || 0;
 
@@ -552,7 +554,7 @@ class DynamicCardStack {
              * Re-resolves all page state.
              * Unselects the button.
              */
-            case RESOLVE_CALLBACK_TYPES.REPLACE_PARENT_CARD:
+            case ResolveCallbackTypes.REPLACE_PARENT_CARD:
               this.cards[this.rootIndex] = resolvedNewStack.card;
               this.activeCardStack = [...this.cards];
               this.updatePageState();
@@ -568,7 +570,7 @@ class DynamicCardStack {
              * Re-resolves all page state.
              * Unselects the button.
              */
-            case RESOLVE_CALLBACK_TYPES.REPLACE_STACK:
+            case ResolveCallbackTypes.REPLACE_STACK:
               this.activeCardStack = resolvedNewStack.cards;
               this.updatePageState();
               this.index = resolvedNewStack.index || this.rootIndex;

package.json

@@ -19,7 +19,7 @@
   },
   "imports": {
     "#api": "./labscore/api/index.js",
-    "#cardstack": "./labscore/cardstack/index.js",
+    "#cardstack/*": "./labscore/cardstack/*.js",
     "#client": "./labscore/client.js",
     "#constants": "./labscore/constants.js",
     "#logging": "./labscore/logging.js",