crowd-funder-for-time-pwa/src/views/ContactGiftingView.vue

<template>
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24">
    <div class="mb-8">
      <h2 class="text-xl font-bold">Quick Action</h2>
      <p class="mb-4">Show appreciation to a contact:</p>

      <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
        <li @click="openDialog()">
          <div class="mb-1">
            <fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
          </div>
          <h3
            class="text-xs font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
          >
            Anonymous
          </h3>
        </li>
        <li
          v-for="contact in allContacts"
          :key="contact.did"
          @click="openDialog(contact)"
        >
          <div class="mb-1">
            <fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
          </div>
          <h3
            class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
          >
            {{ contact.name || "(no name)" }}
          </h3>
        </li>
      </ul>
    </div>

    <GiftedDialog
      ref="customDialog"
      @dialog-result="handleDialogResult"
      message="Received from"
    >
    </GiftedDialog>
    <AlertMessage
      :alertTitle="alertTitle"
      :alertMessage="alertMessage"
    ></AlertMessage>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import GiftedDialog from "@/components/GiftedDialog.vue";
import { db, accountsDB } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto";
import { createAndSubmitGive } from "@/libs/endorserServer";
import { Account } from "@/db/tables/accounts";
import { Contact } from "@/db/tables/contacts";
import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav";

@Component({
  components: { GiftedDialog, AlertMessage, QuickNav },
})
export default class HomeView extends Vue {
  activeDid = "";
  allAccounts: Array<Account> = [];
  allContacts: Array<Contact> = [];
  apiServer = "";
  isHiddenSpinner = true;
  alertTitle = "";
  alertMessage = "";
  accounts: AccountsSchema;
  numAccounts = 0;

  async beforeCreate() {
    accountsDB.open();
    this.accounts = accountsDB.accounts;
    this.numAccounts = await this.accounts.count();
  }

  public async getIdentity(activeDid) {
    await accountsDB.open();
    const account = await accountsDB.accounts
      .where("did")
      .equals(activeDid)
      .first();
    const identity = JSON.parse(account?.identity || "null");

    if (!identity) {
      throw new Error(
        "Attempted to load Give records with no identity available.",
      );
    }
    return identity;
  }

  public async getHeaders(identity) {
    const token = await accessToken(identity);
    const headers = {
      "Content-Type": "application/json",
      Authorization: "Bearer " + token,
    };
    return headers;
  }

  async created() {
    try {
      await accountsDB.open();
      this.allAccounts = await accountsDB.accounts.toArray();
      await db.open();
      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
      this.apiServer = settings?.apiServer || "";
      this.activeDid = settings?.activeDid || "";
      this.allContacts = await db.contacts.toArray();
      this.feedLastViewedId = settings?.lastViewedClaimId;
      this.updateAllFeed();
    } catch (err) {
      this.alertTitle = "Error";
      this.alertMessage =
        err.userMessage ||
        "There was an error retrieving the latest sweet, sweet action.";
    }
  }

  public async buildHeaders() {
    const headers = { "Content-Type": "application/json" };

    if (this.activeDid) {
      await accountsDB.open();
      const allAccounts = await accountsDB.accounts.toArray();
      const account = allAccounts.find((acc) => acc.did === this.activeDid);
      const identity = JSON.parse(account?.identity || "null");

      if (!identity) {
        throw new Error(
          "An ID is chosen but there are no keys for it so it cannot be used to talk with the service.",
        );
      }

      headers["Authorization"] = "Bearer " + (await accessToken(identity));
    } else {
      // it's OK without auth... we just won't get any identifiers
    }
    return headers;
  }

  openDialog(giver) {
    this.$refs.customDialog.open(giver);
  }

  handleDialogResult(result) {
    if (result.action === "confirm") {
      return new Promise((resolve) => {
        this.recordGive(result.contact?.did, result.description, result.hours);
        resolve();
      });
    } else {
      // action was "cancel" so do nothing
    }
  }

  /**
   *
   * @param giverDid may be null
   * @param description may be an empty string
   * @param hours may be 0
   */
  public async recordGive(giverDid, description, hours) {
    if (!this.activeDid) {
      this.setAlert(
        "Error",
        "You must select an identity before you can record a give.",
      );
      return;
    }

    if (!description && !hours) {
      this.setAlert(
        "Error",
        "You must enter a description or some number of hours.",
      );
      return;
    }

    try {
      const identity = await this.getIdentity(this.activeDid);
      const result = await createAndSubmitGive(
        this.axios,
        this.apiServer,
        identity,
        giverDid,
        this.activeDid,
        description,
        hours,
      );

      if (isGiveCreationError(result)) {
        const errorMessage = getGiveCreationErrorMessage(result);
        console.log("Error with give result:", result);
        this.setAlert(
          "Error",
          errorMessage || "There was an error recording the give.",
        );
      } else {
        this.setAlert("Success", "That gift was recorded.");
      }
    } catch (error) {
      console.log("Error with give caught:", error);
      this.setAlert(
        "Error",
        getGiveErrorMessage(error) || "There was an error recording the give.",
      );
    }
  }

  private setAlert(title, message) {
    this.alertTitle = title;
    this.alertMessage = message;
  }

  // Helper functions for readability

  isGiveCreationError(result) {
    return result.status !== 201 || result.data?.error;
  }

  getGiveCreationErrorMessage(result) {
    return result.data?.error?.message;
  }

  getGiveErrorMessage(error) {
    return error.userMessage || error.response?.data?.error?.message;
  }
}
</script>