feat: add a description for time gifts (and refactor errors)

src/views/ContactsView.vue

@@ -49,10 +49,6 @@
       My Contacts
     </h1>
 
-    <div>
-      {{ errorMessage }}
-    </div>
-
     <!-- New Contact -->
     <div class="mb-4 flex">
       <input
@@ -78,6 +74,13 @@
           placeholder="1"
           v-model="hourInput"
         />
+        <br />
+        <input
+          class="border border rounded border-slate-400 w-48"
+          type="text"
+          placeholder="Description"
+          v-model="hourDescriptionInput"
+        />
       </div>
     </div>
 
@@ -144,8 +147,9 @@ export interface GiveVerifiableCredential {
   "@context": string;
   "@type": string;
   agent: { identifier: string };
-  recipient: { identifier: string };
+  description?: string;
   object: { amountOfThisGood: number; unitCode: string };
+  recipient: { identifier: string };
 }
 
 @Options({
@@ -158,9 +162,9 @@ export default class ContactsView extends Vue {
   givenByMeTotals: Record<string, number> = {};
   // { "did:...": amount } entry for each contact
   givenToMeTotals: Record<string, number> = {};
+  hourDescriptionInput = "";
   hourInput = "0";
   identity: IIdentifier | null = null;
-  errorMessage = "";
   showGiveTotals = false;
 
   // 'created' hook runs when the Vue instance is first created
@@ -231,7 +235,9 @@ export default class ContactsView extends Vue {
         this.givenByMeTotals = contactTotals;
       }
     } catch (error) {
-      this.errorMessage = "" + error;
+      this.alertTitle = "Error from Server";
+      this.alertMessage = error as string;
+      this.isAlertVisible = true;
     }
 
     // load all the time I have received
@@ -259,7 +265,9 @@ export default class ContactsView extends Vue {
         this.givenToMeTotals = contactTotals;
       }
     } catch (error) {
-      this.errorMessage = "" + error;
+      this.alertTitle = "Error from Server";
+      this.alertMessage = error as string;
+      this.isAlertVisible = true;
     }
   }
 
@@ -275,20 +283,25 @@ export default class ContactsView extends Vue {
   }
 
   async onClickAddGive(fromDid: string, toDid: string): Promise<void> {
-    if (!this.hourInput) {
+    if (!this.isNumeric(this.hourInput)) {
-      this.errorMessage = "Giving 0 hours does nothing.";
+      this.alertTitle = "Input Error";
-    } else if (!this.isNumeric(this.hourInput)) {
+      this.alertMessage =
-      this.errorMessage =
         "This is not a valid number of hours: " + this.hourInput;
+      this.isAlertVisible = true;
+    } else if (!parseFloat(this.hourInput)) {
+      this.alertTitle = "Input Error";
+      this.alertMessage = "Giving 0 hours does nothing.";
+      this.isAlertVisible = true;
     } else if (!this.identity) {
-      this.errorMessage = "No identity is available.";
+      this.alertTitle = "Status Error";
+      this.alertMessage = "No identity is available.";
+      this.isAlertVisible = true;
     } else {
-      this.errorMessage = "";
       let toFrom;
       if (fromDid == this.identity?.did) {
-        toFrom = "to " + this.nameForDid(this.contacts, toDid);
+        toFrom = "from you to " + this.nameForDid(this.contacts, toDid);
       } else {
-        toFrom = "from " + this.nameForDid(this.contacts, fromDid);
+        toFrom = "from " + this.nameForDid(this.contacts, fromDid) + " to you";
       }
       if (
         confirm(
@@ -303,7 +316,8 @@ export default class ContactsView extends Vue {
           this.identity,
           fromDid,
           toDid,
-          parseFloat(this.hourInput)
+          parseFloat(this.hourInput),
+          this.hourDescriptionInput
         );
       }
     }
@@ -313,16 +327,20 @@ export default class ContactsView extends Vue {
     identity: IIdentifier,
     fromDid: string,
     toDid: string,
-    amount: number
+    amount: number,
+    description: string
   ): Promise<void> {
     // Make a claim
     const vcClaim: GiveVerifiableCredential = {
       "@context": "https://schema.org",
       "@type": "GiveAction",
       agent: { identifier: fromDid },
-      recipient: { identifier: toDid },
       object: { amountOfThisGood: amount, unitCode: "HUR" },
+      recipient: { identifier: toDid },
     };
+    if (description) {
+      vcClaim.description = description;
+    }
     // Make a payload for the claim
     const vcPayload = {
       vc: {
@@ -359,18 +377,17 @@ export default class ContactsView extends Vue {
         const resp = await this.axios.post(url, payload, { headers });
         //console.log("Got resp data:", resp.data);
         if (resp.data?.success?.handleId) {
-          this.errorMessage = "";
           this.alertTitle = "";
           this.alertMessage = "";
           if (fromDid === identity.did) {
             this.givenByMeTotals[toDid] = this.givenByMeTotals[toDid] + amount;
-            // do this to update the UI
+            // do this to update the UI (is there a better way?)
             // eslint-disable-next-line no-self-assign
             this.givenByMeTotals = this.givenByMeTotals;
           } else {
             this.givenToMeTotals[fromDid] =
               this.givenToMeTotals[fromDid] + amount;
-            // do this to update the UI
+            // do this to update the UI (is there a better way?)
             // eslint-disable-next-line no-self-assign
             this.givenToMeTotals = this.givenToMeTotals;
           }
@@ -379,21 +396,18 @@ export default class ContactsView extends Vue {
         let userMessage = "There was an error. See logs for more info.";
         const serverError = error as AxiosError;
         if (serverError) {
-          this.isAlertVisible = true;
           if (serverError.message) {
-            this.alertTitle = "User Message";
+            userMessage = serverError.message; // Info for the user
-            userMessage = serverError.message; // This is info for the user.
-            this.alertMessage = userMessage;
           } else {
-            this.alertTitle = "Server Message";
+            userMessage = JSON.stringify(serverError.toJSON());
-            this.alertMessage = JSON.stringify(serverError.toJSON());
           }
         } else {
-          this.alertTitle = "Claim Error";
+          userMessage = error as string;
-          this.alertMessage = error as string;
         }
         // Now set that error for the user to see.
-        this.errorMessage = userMessage;
+        this.alertTitle = "Error with Server";
+        this.alertMessage = userMessage;
+        this.isAlertVisible = true;
       }
     }
   }