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

<template>
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Sub View Heading -->
    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Offers to Your Projects
      </h1>

      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>

      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>

    <div v-if="newOffersToUserProjects.length === 0">
      <p>Nobody has given any offers to your projects.</p>
      <p class="mt-2">
        Maybe there are already some projects you can help on the
        <router-link to="/discover" class="text-blue-500">
          Discover page <font-awesome icon="search" />
        </router-link>
      </p>
      <p class="mt-2">
        You can announce more of your own on
        <router-link to="/contacts" class="text-blue-500">
          Your Ideas page <font-awesome icon="hand" />
        </router-link>
      </p>
    </div>

    <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
      <ul data-testId="listRecentOffersToUserProjects">
        <li
          v-for="offer in newOffersToUserProjects"
          :key="offer.jwtId"
          class="mt-4 relative group"
        >
          <!-- Last viewed separator -->
          <div
            v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
          >
            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
              You've already seen all the following
            </span>
          </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>
          to
          <span>{{ offer.planName }}</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 EntityIcon from "../components/EntityIcon.vue";
import GiftedDialog from "../components/GiftedDialog.vue";
import InfiniteScroll from "../components/InfiniteScroll.vue";
import QuickNav from "../components/QuickNav.vue";
import { NotificationIface } from "../constants/app";
import { Contact } from "../db/tables/contacts";
import { Router } from "vue-router";
import { OfferToPlanSummaryRecord } from "../interfaces";
import {
  didInfo,
  displayAmount,
  getNewOffersToUserProjects,
} from "../libs/endorserServer";
import { retrieveAccountDids } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
@Component({
  components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },
  mixins: [PlatformServiceMixin],
})
export default class RecentOffersToUserView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  $router!: Router;

  notify!: ReturnType<typeof createNotifyHelpers>;
  activeDid = "";
  allContacts: Array<Contact> = [];
  allMyDids: string[] = [];
  apiServer = "";
  lastAckedOfferToUserProjectsJwtId = "";
  newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
  newOffersToUserProjectsAtEnd = false;

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

  async created() {
    this.notify = createNotifyHelpers(this.$notify);

    try {
      const settings = await this.$accountSettings();
      this.apiServer = settings.apiServer || "";

      // Get activeDid from active_identity table (single source of truth)
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const activeIdentity = await (this as any).$getActiveIdentity();
      this.activeDid = activeIdentity.activeDid || "";

      this.lastAckedOfferToUserProjectsJwtId =
        settings.lastAckedOfferToUserProjectsJwtId || "";

      this.allContacts = await this.$getAllContacts();

      this.allMyDids = await retrieveAccountDids();

      const offersToUserProjectsData = await getNewOffersToUserProjects(
        this.axios,
        this.apiServer,
        this.activeDid,
        undefined,
        undefined,
      );
      this.newOffersToUserProjects = offersToUserProjectsData.data;
      this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;

      // Mark offers as read after data is loaded
      if (this.newOffersToUserProjects.length > 0) {
        await this.$updateSettings({
          lastAckedOfferToUserProjectsJwtId:
            this.newOffersToUserProjects[0].jwtId,
        });
      }

      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
      this.notify.error(
        err.message || "There was an error retrieving your activity.",
        TIMEOUTS.LONG,
      );
    }
  }

  async loadMoreOffersToUserProjects() {
    if (this.newOffersToUserProjectsAtEnd) {
      return;
    }
    const offersToUserProjectsData = await getNewOffersToUserProjects(
      this.axios,
      this.apiServer,
      this.activeDid,
      undefined,
      this.newOffersToUserProjects[this.newOffersToUserProjects.length - 1]
        .jwtId,
    );
    this.newOffersToUserProjects.push(...offersToUserProjectsData.data);
    this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
  }
}
</script>