crowd-funder-from-jason/src/views/RecentOffersToUserView.vue

<template>
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div id="ViewBreadcrumb" class="mb-8">
      <h1 class="text-lg text-center font-light relative px-7">
        <!-- Back -->
        <font-awesome
          icon="chevron-left"
          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        />
        Offers to You
      </h1>
    </div>

    <div v-if="newOffersToUser.length === 0">
      <p>Nobody has given you an offer.</p>
      <p class="mt-2">
        You can start the cycle on the
        <router-link to="/contacts" class="text-blue-500">
          Contacts page <font-awesome icon="users" />
        </router-link>
        with an "Offer" directly to someone. Hopefully you'll find a common
        interest!
      </p>
    </div>
    <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
      <ul
        data-testId="listRecentOffersToUser"
        class="border-t border-slate-300"
      >
        <li
          v-for="offer in newOffersToUser"
          :key="offer.jwtId"
          class="mt-4 relative group"
        >
          <div
            v-if="offer.jwtId == lastAckedOfferToUserJwtId"
            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
          >
            You've already seen all the following
          </div>

          <span>{{
            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
          }}</span>
          offered
          <span v-if="offer.objectDescription">{{
            offer.objectDescription
          }}</span
          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
          <span v-if="offer.amount">{{
            displayAmount(offer.unit, offer.amount)
          }}</span>
          <router-link
            :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
            class="text-blue-500"
          >
            <font-awesome
              icon="file-lines"
              class="pl-2 text-blue-500 cursor-pointer"
            />
          </router-link>
        </li>
      </ul>
    </InfiniteScroll>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router";
import GiftedDialog from "../components/GiftedDialog.vue";
import EntityIcon from "../components/EntityIcon.vue";
import InfiniteScroll from "../components/InfiniteScroll.vue";
import QuickNav from "../components/QuickNav.vue";
import { NotificationIface } from "../constants/app";
import * as databaseUtil from "../db/databaseUtil";
import { db, retrieveSettingsForActiveAccount } from "../db/index";
import { Contact } from "../db/tables/contacts";
import { OfferSummaryRecord } from "../interfaces";
import {
  didInfo,
  displayAmount,
  getNewOffersToUser,
} from "../libs/endorserServer";
import { retrieveAccountDids } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
@Component({
  components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },
})
export default class RecentOffersToUserView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  $router!: Router;
  activeDid = "";
  allContacts: Array<Contact> = [];
  allMyDids: string[] = [];
  apiServer = "";
  lastAckedOfferToUserJwtId = "";
  newOffersToUser: Array<OfferSummaryRecord> = [];
  newOffersToUserAtEnd = false;

  showOffersDetails = false;
  showOffersToUserProjectsDetails = false;
  didInfo = didInfo;
  displayAmount = displayAmount;

  async created() {
    try {
      const settings = await databaseUtil.retrieveSettingsForActiveAccount();
      this.apiServer = settings.apiServer || "";
      this.activeDid = settings.activeDid || "";
      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";

      const contactQueryResult =
        await PlatformServiceFactory.getInstance().dbQuery(
          "SELECT * FROM contacts",
        );
      this.allContacts = databaseUtil.mapQueryResultToValues(
        contactQueryResult,
      ) as unknown as Contact[];

      this.allMyDids = await retrieveAccountDids();

      const offersToUserData = await getNewOffersToUser(
        this.axios,
        this.apiServer,
        this.activeDid,
        undefined,
        undefined,
      );
      this.newOffersToUser = offersToUserData.data;
      this.newOffersToUserAtEnd = !offersToUserData.hitLimit;

      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: err.message || "There was an error retrieving your activity.",
        },
        5000,
      );
    }
  }

  async loadMoreOffersToUser() {
    if (this.newOffersToUserAtEnd) {
      return;
    }
    const offersToUserData = await getNewOffersToUser(
      this.axios,
      this.apiServer,
      this.activeDid,
      undefined,
      this.newOffersToUser[this.newOffersToUser.length - 1].jwtId,
    );
    this.newOffersToUser.push(...offersToUserData.data);
    this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
  }
}
</script>