[nextgen] working prototype

commands/message/dev/test.js

@@ -26,6 +26,16 @@ module.exports = {
           createEmbed("default", context, { description: "page 2. this has a conditional button."})
         ].map((p, index)=>page(p, {}, { key: `t_${index}` })),
         interactive: {
+          always_active_button: {
+            label: "single sub page",
+            inline: true,
+            visible: true,
+            resolvePage: ()=>{
+              return [
+                createEmbed("success", context, "smiley")
+              ].map((p)=>page(p))
+            }
+          },
           conditional_button: {
             // Button Label
             label: "Conditional",
@@ -36,9 +46,10 @@ module.exports = {
               console.log(page.getState("t_1"));
               return (page.getState("key") === "t_1")
             },
-            resolvePage: (page) => {
+            resolvePage: (pg) => {
               return [
-                createEmbed("default", context, { description: "this is a conditional sub page"})
+                createEmbed("default", context, { description: "this is a conditional sub page"}),
+                createEmbed("default", context, { description: "this is a conditional sub page two"})
               ].map((p)=>page(p));
             }
           },
@@ -56,9 +67,13 @@ module.exports = {
                 description: "-# Subpage Loading :)",
               })
             },
-            resolvePage: (page) => {
+            resolvePage: async (pg) => {
+              console.log("resolving page")
               return [
-                createEmbed("default", context, { description: "this is a conditional sub page"})
+                createEmbed("default", context, { description: "this is a dynamic sub page " + Math.random()}),
+                createEmbed("default", context, { description: "this is a dynamic sub page " + Math.random()}),
+                createEmbed("default", context, { description: "this is a dynamic sub page " + Math.random()}),
+                createEmbed("default", context, { description: "this is a dynamic sub page " + Math.random()})
               ].map((p)=>page(p));
             }
           }

labscore/cardstack/DynamicCardStack.js

@@ -42,10 +42,12 @@ class DynamicCardStack {
     this.buttons = options.buttons || ["previous","next"]
     this.interactive_components = options.interactive || {};
     this.index = options.startingIndex || 0;
+    this.rootIndex = this.index;
     this.loopPages = options.loop || true;
 
     this.pageState = [];
     this.subcategoryState = SUBCATEGORY_STATE_TYPES.SINGLE_PAGE;
+    this.currentSelectedSubcategory = null;
 
     console.log("now spawning")
     this._spawn();
@@ -86,7 +88,7 @@ class DynamicCardStack {
     try{
       this._createDynamicCardStack(this.context.client);
       
-      this.activeCardStack = Object.assign([], this.cards);
+      this.activeCardStack = [...this.cards];
 
       // Resolve page state before
       let i = 0;
@@ -99,18 +101,18 @@ class DynamicCardStack {
       }
 
       // Create internal component listener
-      const listener = new Components({
+      this.listener = new Components({
         timeout: this.expires,
         run: this._handleInteraction.bind(this),
+        onError: (e)=>{
+          console.log(e)
+        }
       })
 
-      //listener.components = this._renderComponents();
-
-      this._renderInitialComponents(listener)
 
       return this._edit({
         ...this.getCurrentCard(),
-        components: listener
+        components: this.listener
       }, true);
     }catch(e){
       console.log(e)
@@ -127,6 +129,7 @@ class DynamicCardStack {
       if(this.loopPages) this.index = 0;
     }
 
+    if(this.currentSelectedSubcategory == null) this.rootIndex = this.index;
     console.log("new index: " + this.index)
     return Object.assign(this.getPageByIndex(this.index), { components: this._renderComponents() });
   }
@@ -137,6 +140,8 @@ class DynamicCardStack {
       if(this.loopPages) this.index = this.activeCardStack.length - 1;
       else this.index = 0;
     }
+
+    if(this.currentSelectedSubcategory == null) this.rootIndex = this.index;
     return Object.assign(this.getPageByIndex(this.index), { components: this._renderComponents() });
   }
 
@@ -148,12 +153,12 @@ class DynamicCardStack {
    * Edits the cardstack message.
    * Automatically applies and rerenders components.
    * @param {Message} cardContent Card Content
-   * @param {boolean} customComponents Don't use - Meant for _spawn()
    */
-  async _edit(cardContent, customComponents = false){
+  async _edit(cardContent){
     let message = Object.assign({}, cardContent);
 
-    if(!customComponents) message.components = this._renderComponents();
+    this.listener.components = this._renderComponents();
+    message.components = this.listener;
 
     if(message["_meta"]) delete message["_meta"];
 
@@ -187,40 +192,30 @@ class DynamicCardStack {
    * @param {String} key 
    */
   getState(key){
-    if(!this.pageState[this.getPageIndex()]) return null;
+    if(!this.pageState[this.rootIndex]) return null;
-    return this.pageState[this.getPageIndex()][key];
+    return this.pageState[this.rootIndex][key];
   }
 
   getAllState(){
     return this.pageState;
   }
 
-  /**
-   * Component Helper
-   * @param {Components} listener 
-   */
-  _renderInitialComponents(listener){
-    // First Row always starts with built-in components
-    listener.components = this._renderComponents();
-
-    console.log(listener)
-    console.log(JSON.stringify(listener))
-  }
-
   /**
    * Renders components and button states
    */
-  _renderComponents(){
+  _renderComponents(disabled = false){
     let nComponents = new ComponentActionRow({})
     let nComponentsSecondary = new ComponentActionRow({})
 
     // First Row always starts with built-in components
     for(const b of this.buttons){
+      console.log("len: " + this.activeCardStack.length)
+      console.log(this.activeCardStack)
       let btn = {
         type: MessageComponentTypes.BUTTON,
         customId: b,
         style: 2,
-        disabled: (this.subcategoryState !== SUBCATEGORY_STATE_TYPES.SINGLE_PAGE),
+        disabled: this.activeCardStack.length === 1 || disabled || (this.subcategoryState !== SUBCATEGORY_STATE_TYPES.SINGLE_PAGE),
         emoji: iconAsEmojiObject(DEFAULT_BUTTON_ICON_MAPPINGS[b])
       }
 
@@ -238,7 +233,8 @@ class DynamicCardStack {
       let component = {
         type: MessageComponentTypes.BUTTON,
         customId: b,
-        style: button.style || 2
+        style: button.style || 2,
+        disabled: disabled
       }
 
       if(button.label){
@@ -288,18 +284,50 @@ class DynamicCardStack {
 
     // interactive buttons
     if(this.interactive_components[ctx.data.customId]){
-      if(this.currentSelectedSubcategory === ctx.data.customId) this.currentSelectedSubcategory = null;
+      if(this.currentSelectedSubcategory === ctx.data.customId){
+        console.log("restoring state")
+        this.activeCardStack = [...this.cards];
+        this.index = this.rootIndex;
+        this.currentSelectedSubcategory = null;
+
+        return await ctx.respond({
+          type: InteractionCallbackTypes.UPDATE_MESSAGE,
+          data: Object.assign(this.currentPage(), { components: this._renderComponents(false)})
+        })
+      }
       else this.currentSelectedSubcategory = ctx.data.customId;
 
+      this.cachedIndex = this.index;
+
       let processingEmbed = page(createEmbed("default", ctx, {
         "description": "looading..."
       }))
 
       if(this.interactive_components[ctx.data.customId].renderLoadingState) processingEmbed = page(this.interactive_components[ctx.data.customId].renderLoadingState(this));
-      return ctx.respond({
+      await ctx.respond({
         type: InteractionCallbackTypes.UPDATE_MESSAGE,
-        data: Object.assign(processingEmbed, { components: this._renderComponents()})
+        data: Object.assign(processingEmbed, { components: this._renderComponents(true)})
       })
+
+      console.log("resolve trigger")
+      try{
+        this.activeCardStack = await this.interactive_components[ctx.data.customId].resolvePage(this);
+      } catch(e){
+        console.log("resolve failed:")
+        console.log(e)
+      }
+      console.log("resolve post")
+      // TODO: allow overriding index
+      this.index = 0;
+
+      console.log("stack resolved")
+
+      setTimeout(()=>{
+        console.log(this.activeCardStack)
+        return this._edit(Object.assign(this.currentPage(), {components:this.listener}), true)
+      }, 1500)
+
+      return;
     }
 
     console.error("Unknown button was triggered on stack: " + ctx.data.customId);