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

<template>
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24">
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
      Time Safari
    </h1>

    <div class="mb-8">
      <h1 class="text-2xl">Quick Action</h1>
      <p>Choose a contact to whom to show appreciation:</p>
      <!-- similar contact selection code is in multiple places -->
      <div class="px-4">
        <button
          v-for="contact in allContacts"
          :key="contact.did"
          @click="openDialog(contact)"
          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
        >
          {{ contact.name }}
        </button>
        <span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
        <button @click="openDialog()" class="text-blue-500">
          someone not specified
        </button>
      </div>
    </div>

    <GiftedDialog
      ref="customDialog"
      @dialog-result="handleDialogResult"
      message="Received from"
    >
    </GiftedDialog>

    <div>
      <h1 class="text-2xl">Latest Activity</h1>
      <span :class="{ hidden: isHiddenSpinner }">
        <fa icon="spinner" class="fa-spin-pulse"></fa>
        Loading&hellip;
      </span>
      <ul>
        <li
          class="border-b border-slate-300 py-2"
          v-for="record in feedData"
          :key="record.jwtId"
        >
          <div
            class="border-b border-dashed border-slate-400 text-orange-400 py-2 mb-2 font-bold uppercase text-sm"
            v-if="record.jwtId == feedLastViewedId"
          >
            You've seen all claims below:
          </div>
          <div class="flex">
            <fa
              icon="gift"
              class="fa-fw flex-none pt-1 pr-2 text-slate-500"
            ></fa>
            <!-- icon values: "coins" = money; "clock" = time; "gift" = others -->
            <span class="">{{ this.giveDescription(record) }}</span>
          </div>
        </li>
      </ul>
    </div>
  </section>
  <AlertMessage
    :alertTitle="alertTitle"
    :alertMessage="alertMessage"
  ></AlertMessage>
</template>

<script lang="ts">
import * as R from "ramda";
import { Options, Vue } from "vue-class-component";

import GiftedDialog from "@/components/GiftedDialog.vue";
import { db, accountsDB } from "@/db";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto";
import { createAndSubmitGive, didInfo } 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";

@Options({
  components: { GiftedDialog, AlertMessage, QuickNav },
})
export default class HomeView extends Vue {
  activeDid = "";
  allAccounts: Array<Account> = [];
  allContacts: Array<Contact> = [];
  apiServer = "";
  feedAllLoaded = false;
  feedData = [];
  feedPreviousOldestId = null;
  feedLastViewedId = null;
  isHiddenSpinner = true;
  alertTitle = "";
  alertMessage = "";

  // 'created' hook runs when the Vue instance is first created
  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.";
    }
  }

  updateAllFeed = async () => {
    this.isHiddenSpinner = false;

    await this.retrieveClaims(this.apiServer, null, this.feedPreviousOldestId)
      .then(async (results) => {
        if (results.data.length > 0) {
          this.feedData = this.feedData.concat(results.data);
          //console.log("Feed data:", this.feedData);
          this.feedAllLoaded = results.hitLimit;
          this.feedPreviousOldestId =
            results.data[results.data.length - 1].jwtId;
          if (
            this.feedLastViewedId == null ||
            this.feedLastViewedId < results.data[0].jwtId
          ) {
            // save it to storage
            await db.open();
            db.settings.update(MASTER_SETTINGS_KEY, {
              lastViewedClaimId: results.data[0].jwtId,
            });
            // but not for this page because we need to remember what it was before
          }
        }
      })
      .catch((e) => {
        console.log("Error with feed load:", e);
        this.alertMessage =
          e.userMessage || "There was an error retrieving feed data.";
        this.alertTitle = "Error";
      });

    this.isHiddenSpinner = true;
  };

  retrieveClaims = async (endorserApiServer, identifier, beforeId) => {
    //const afterQuery = afterId == null ? "" : "&afterId=" + afterId;
    const beforeQuery = beforeId == null ? "" : "&beforeId=" + beforeId;
    const headers = { "Content-Type": "application/json" };
    if (this.activeDid) {
      const account = R.find(
        (acc) => acc.did === this.activeDid,
        this.allAccounts
      );
      const identity = JSON.parse(account?.identity || "null");
      if (!identity) {
        throw new Error("No identity found.");
      }
      const token = await accessToken(identity);
      headers["Authorization"] = "Bearer " + token;
    } else {
      // it's OK without auth... we just won't get any identifiers
    }
    return fetch(this.apiServer + "/api/v2/report/gives?" + beforeQuery, {
      method: "GET",
      headers: headers,
    })
      .then(async (response) => {
        if (response.status !== 200) {
          const details = await response.text();
          throw details;
        }
        return response.json();
      })
      .then((results) => {
        if (results.data) {
          return results;
        } else {
          throw JSON.stringify(results);
        }
      });
  };

  giveDescription(giveRecord) {
    let claim = giveRecord.fullClaim;
    if (claim.claim) {
      // it's probably a Verified Credential
      claim = claim.claim;
    }

    // agent.did is for legacy data, before March 2023
    const giverDid =
      claim.agent?.identifier || claim.agent?.did || giveRecord.issuer;
    const giverInfo = didInfo(
      giverDid,
      this.activeDid,
      this.allAccounts,
      this.allContacts
    );
    const gaveAmount = claim.object?.amountOfThisGood
      ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
      : claim.description || "something unknown";
    // recipient.did is for legacy data, before March 2023
    const gaveRecipientId = claim.recipient?.identifier || claim.recipient?.did;
    const gaveRecipientInfo = gaveRecipientId
      ? " to " +
        didInfo(
          gaveRecipientId,
          this.activeDid,
          this.allAccounts,
          this.allContacts
        )
      : "";
    return giverInfo + " gave " + gaveAmount + gaveRecipientInfo;
  }

  displayAmount(code, amt) {
    return "" + amt + " " + this.currencyShortWordForCode(code, amt === 1);
  }

  currencyShortWordForCode(unitCode, single) {
    return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
  }

  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
   */
  recordGive(giverDid, description, hours) {
    if (!this.activeDid) {
      this.alertTitle = "Error";
      this.alertMessage =
        "You must select an identity before you can record a give.";
      return;
    }
    if (!description && !hours) {
      this.alertTitle = "Error";
      this.alertMessage =
        "You must enter a description or some number of hours.";
      return;
    }
    const account = R.find(
      (acc) => acc.did === this.activeDid,
      this.allAccounts
    );
    //console.log("about to parse from", this.activeDid, account?.identity);
    const identity = JSON.parse(account?.identity || "null");
    if (!identity) {
      throw new Error("No identity found.");
    }
    createAndSubmitGive(
      this.axios,
      this.apiServer,
      identity,
      giverDid,
      this.activeDid,
      description,
      hours
    )
      .then((result) => {
        if (result.status != 201 || result.data?.error) {
          console.log("Error with give result:", result);
          this.alertTitle = "Error";
          this.alertMessage =
            result.data?.error?.message ||
            "There was an error recording the give.";
        } else {
          this.alertTitle = "Success";
          this.alertMessage = "That gift was recorded.";
          //this.updateAllFeed(); // full update is overkill but we should show something
        }
      })
      .catch((e) => {
        // axios throws errors on 400 responses
        console.log("Error with give caught:", e);
        this.alertTitle = "Error";
        this.alertMessage =
          e.userMessage ||
          e.response?.data?.error?.message ||
          "There was an error recording the give.";
      });
  }
}
</script>