Archive button sends to backend via grpc

src/templates/CharacterArchiver.hbs

@@ -1,7 +1,7 @@
 <div>
   <div class="details">
     Hello There {{this.potato}}
-    <input/>
+    <input class="character-handle" value="{{this.handle}}"/>
   </div>
   <div class="available-versions">
     Avaiable Versions Go Here

src/ts/apps/CharacterArchiver.ts

@@ -1,6 +1,6 @@
 import { id as moduleId } from "../../module.json";
 import { CharacterManagerClient } from "../../proto/character.client";
-import { GetCharacterRequest } from '../../proto/character'
+import { Character, CreateCharacterRequest } from '../../proto/character'
 import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport'
 
 
@@ -16,7 +16,11 @@ export class CharacterArchiver extends Application {
     }),
   );
 
-  thingy: any;
+  data = {
+    potato: "po tato potato",
+    reads: {},
+    handle: "default"
+  }
 
   constructor(characterId: string) {
     super()
@@ -35,10 +39,7 @@ export class CharacterArchiver extends Application {
   }
 
   override getData() {
-    return {
+    return this.data;
-      potato: "potato tato po tato",
-      reads: this.thingy
-    };
   }
 
 
@@ -47,21 +48,43 @@ export class CharacterArchiver extends Application {
     super.activateListeners(html);
     html
       .find("button.archive-button")
-      .on("click", this._archiveButton.bind(this));
+      .on("click", this.archiveButton.bind(this));
+
+    console.log(html.find(".character-handle"));
+
+    html
+      .find(".character-handle")
+      .on("change", this.handleChange.bind(this));
   }
 
-  private async _archiveButton() {
+  private async archiveButton() {
 
     console.log("Potato");
-    let request = GetCharacterRequest.fromJson({
+
-    })
+    let characterMsg: Character = Character.fromJson({
-    console.log("Potato");
+      playerName: "iamBadgers",
-    await this.client.getCharacter(request).then((res: any) => {
+      characterName: this.character!.name,
-      console.log(res)
+      characterAlias: [],
-      this.thingy = res.response;
+      version: "",
-      console.log(res);
+      sourceTable: "",
-      this.render(true);
+      json: JSON.stringify(this.character!.toJSON())
-    })
+
+    });
+
+    let request: CreateCharacterRequest = {
+      characterData: characterMsg
+    };
+
+    console.log("HERE: " + JSON.stringify(request));
+
+    this.client.createCharacter(request);
   }
 
-}
+  private async handleChange(e: Event) {
+    console.log(e.target);
+    const target = e.target as HTMLTextAreaElement;
+    this.data.handle = target.value;
+    console.log(this.data.handle);
+  }
+
+}