Messing with displaying the available versions

src/templates/CharacterArchiver.hbs

@@ -5,7 +5,9 @@
   </div>
   <div class="available-versions">
     Avaiable Versions Go Here
-    {{this.reads}}
+    {{#each this.reads}}
+      <div>{{this.characterName}} {{this.playerName}} {{this.sourceTable}} {{this.version}}</div>
+    {{/each}}
   </div>
   <button class="archive-button">Archive</button>
 </div>

src/ts/apps/CharacterArchiver.ts

@@ -3,6 +3,11 @@ import { CharacterManagerClient } from "../../proto/character.client";
 import { Character, CreateCharacterRequest } from '../../proto/character'
 import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport'
 
+interface CharacterArchiverData {
+    potato: string;
+    reads: Character[];
+    playerHandle: string;
+}
 
 export class CharacterArchiver extends Application {
   
@@ -16,10 +21,10 @@ export class CharacterArchiver extends Application {
     }),
   );
 
-  data = {
+  data: CharacterArchiverData = {
     potato: "po tato potato",
-    reads: {},
+    reads: [],
-    handle: "default"
+    playerHandle: "default"
   }
 
   constructor(characterId: string) {
@@ -38,20 +43,21 @@ export class CharacterArchiver extends Application {
     return options;
   }
 
-  override getData() {
+  override async getData() {
-    return this.data;
+    return this.loadArchiveList().then((characters) => {
+      this.data.reads = characters;
+      return this.data;
+    })
   }
 
 
   override activateListeners(html: JQuery<HTMLElement>): void {
-    console.log("activating listeners");
     super.activateListeners(html);
+
     html
       .find("button.archive-button")
       .on("click", this.archiveButton.bind(this));
 
-    console.log(html.find(".character-handle"));
-
     html
       .find(".character-handle")
       .on("input", this.handleChange.bind(this));
@@ -66,9 +72,8 @@ export class CharacterArchiver extends Application {
       characterName: this.character!.name,
       characterAlias: [],
       version: "",
-      sourceTable: "",
+      sourceTable: "BADGERS",
       json: JSON.stringify(this.character!.toJSON())
-
     });
 
     let request: CreateCharacterRequest = {
@@ -84,12 +89,20 @@ export class CharacterArchiver extends Application {
 
   private async handleChange(e: Event) {
     clearTimeout(this.timeout);
-    this.timeout = setTimeout(() => {
+    this.timeout = setTimeout(async () => {
       console.log(e.target);
       const target = e.target as HTMLTextAreaElement;
-      this.data.handle = target.value;
+      this.data.playerHandle = target.value;
-      console.log(this.data.handle);
+      console.log(this.data.playerHandle);
+      console.log(await this.loadArchiveList());
     }, 500);
   }
 
-}
+  private async loadArchiveList(): Promise<Character[]> {
+    return this.client.listCharacters({
+      playerName: "iamBadgers",
+      characterName: this.character!.name || ""
+    }).response
+      .then((response) => response.characters);
+  }
+};