fix unconfirmed give display, and add alert on success

project.yaml

@@ -13,6 +13,7 @@
 
 - contacts v1 :
   - test confirmed vs unconfirmed amounts
+  - allow to confirm received gives
   - remove 'copy' until it works
   - switch to prod server
   - 01 show gives with confirmations

src/views/ContactsView.vue

@@ -91,7 +91,7 @@
         >
           {{
             showGiveTotals
-              ? "Totals"
+              ? "Total"
               : showGiveConfirmed
               ? "Confirmed"
               : "Unconfirmed"
@@ -176,7 +176,7 @@
                 </button>
               </div>
               <div class="tooltip px-2">
-                by:
+                from:
                 {{
                   /* eslint-disable prettier/prettier */
                   this.showGiveTotals
@@ -354,7 +354,7 @@ export default class ContactsView extends Vue {
         Authorization: "Bearer " + token,
       };
       const resp = await this.axios.get(url, { headers });
-      console.log("All your gifts:", resp.data);
+      console.log("All gifts you've given:", resp.data);
       if (resp.status === 200) {
         const contactDescriptions: Record<string, string> = {};
         const contactConfirmed: Record<string, number> = {};
@@ -371,16 +371,27 @@ export default class ContactsView extends Vue {
               contactUnconfirmed[recipDid] = prevAmount + give.amount;
             }
             const prevDesc = contactDescriptions[recipDid] || "";
-            // Since many make the tooltip too big, we'll just use the latest;
+            // Since many make the tooltip too big, we'll just use the latest.
             contactDescriptions[recipDid] = give.description || prevDesc;
           }
         }
         //console.log("Done retrieving gives", contactConfirmed);
         this.givenByMeDescriptions = contactDescriptions;
         this.givenByMeConfirmed = contactConfirmed;
+        this.givenByMeUnconfirmed = contactUnconfirmed;
+      } else {
+        console.log(
+          "Got bad response status & data of",
+          resp.status,
+          resp.data
+        );
+        this.alertTitle = "Error With Server";
+        this.alertMessage =
+          "Got an error retrieving your given time from the server.";
+        this.isAlertVisible = true;
       }
     } catch (error) {
-      this.alertTitle = "Error from Server";
+      this.alertTitle = "Error With Server";
       this.alertMessage = error as string;
       this.isAlertVisible = true;
     }
@@ -413,16 +424,27 @@ export default class ContactsView extends Vue {
               contactUnconfirmed[give.agentDid] = prevAmount + give.amount;
             }
             const prevDesc = contactDescriptions[give.agentDid] || "";
-            // Since many make the tooltip too big, we'll just use the latest;
+            // Since many make the tooltip too big, we'll just use the latest.
             contactDescriptions[give.agentDid] = give.description || prevDesc;
           }
         }
         //console.log("Done retrieving receipts", contactConfirmed);
         this.givenToMeDescriptions = contactDescriptions;
         this.givenToMeConfirmed = contactConfirmed;
+        this.givenToMeUnconfirmed = contactUnconfirmed;
+      } else {
+        console.log(
+          "Got bad response status & data of",
+          resp.status,
+          resp.data
+        );
+        this.alertTitle = "Error With Server";
+        this.alertMessage =
+          "Got an error retrieving your received time from the server.";
+        this.isAlertVisible = true;
       }
     } catch (error) {
-      this.alertTitle = "Error from Server";
+      this.alertTitle = "Error With Server";
       this.alertMessage = error as string;
       this.isAlertVisible = true;
     }
@@ -518,7 +540,7 @@ export default class ContactsView extends Vue {
             userMessage = error as string;
           }
           // Now set that error for the user to see.
-          this.alertTitle = "Error with Server";
+          this.alertTitle = "Error With Server";
           this.alertMessage = userMessage;
           this.isAlertVisible = true;
         }
@@ -548,7 +570,7 @@ export default class ContactsView extends Vue {
         contact.seesMe = visibility;
         db.contacts.update(contact.did, { seesMe: visibility });
       } else {
-        this.alertTitle = "Error from Server";
+        this.alertTitle = "Error With Server";
         console.log("Bad response setting visibility: ", resp.data);
         if (resp.data.error?.message) {
           this.alertMessage = resp.data.error?.message;
@@ -558,7 +580,7 @@ export default class ContactsView extends Vue {
         this.isAlertVisible = true;
       }
     } catch (err) {
-      this.alertTitle = "Error from Server";
+      this.alertTitle = "Error With Server";
       this.alertMessage = err as string;
       this.isAlertVisible = true;
     }
@@ -594,7 +616,7 @@ export default class ContactsView extends Vue {
           "see your activity.";
         this.isAlertVisible = true;
       } else {
-        this.alertTitle = "Error from Server";
+        this.alertTitle = "Error With Server";
         if (resp.data.error?.message) {
           this.alertMessage = resp.data.error?.message;
         } else {
@@ -603,7 +625,7 @@ export default class ContactsView extends Vue {
         this.isAlertVisible = true;
       }
     } catch (err) {
-      this.alertTitle = "Error from Server";
+      this.alertTitle = "Error With Server";
       this.alertMessage = err as string;
       this.isAlertVisible = true;
     }
@@ -726,8 +748,9 @@ 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.alertTitle = "";
+          this.alertTitle = "Done";
-          this.alertMessage = "";
+          this.alertMessage = "Successfully logged time to the server.";
+          this.isAlertVisible = true;
           if (fromDid === identity.did) {
             this.givenByMeConfirmed[toDid] =
               this.givenByMeConfirmed[toDid] + amount;
@@ -755,26 +778,13 @@ export default class ContactsView extends Vue {
           userMessage = error as string;
         }
         // Now set that error for the user to see.
-        this.alertTitle = "Error with Server";
+        this.alertTitle = "Error With Server";
         this.alertMessage = userMessage;
         this.isAlertVisible = true;
       }
     }
   }
 
-  public selectedGiveTotal(
-    contactGivesConfirmed: Record<string, number>,
-    contactGivesUnconfirmed: Record<string, number>,
-    did: string
-  ) {
-    /* eslint-disable prettier/prettier */
-    this.showGiveTotals
-      ? ((contactGivesConfirmed[did] || 0) + (contactGivesUnconfirmed[did] || 0))
-      : this.showGiveConfirmed
-        ? (contactGivesConfirmed[did] || 0)
-        : (contactGivesUnconfirmed[did] || 0);
-    /* eslint-enable prettier/prettier */
-  }
   public toggleShowGiveTotals() {
     if (this.showGiveTotals) {
       this.showGiveTotals = false;
@@ -817,7 +827,7 @@ export default class ContactsView extends Vue {
 
   public showGiveAmountsClassNames() {
     return {
-      "bg-slate-900": this.showGiveTotals,
+      "bg-slate-500": this.showGiveTotals,
       "bg-green-600": !this.showGiveTotals && this.showGiveConfirmed,
       "bg-yellow-600": !this.showGiveTotals && !this.showGiveConfirmed,
     };