crowd-funder-for-time-pwa/src/components/ActivityListItem.vue

<template>
  <li>
    <!-- Last viewed separator -->
    <div
      v-if="record.jwtId == lastViewedClaimId"
      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>

    <div
      class="flex items-center justify-between gap-2 text-lg bg-slate-200 border border-slate-300 border-b-0 rounded-t-md px-3 sm:px-4 py-1 sm:py-2"
    >
      <div class="flex items-center gap-2">
        <router-link
          v-if="record.issuerDid && !isHiddenDid(record.issuerDid)"
          :to="{
            path: '/did/' + encodeURIComponent(record.issuerDid),
          }"
          title="More details about this person"
        >
          <EntityIcon
            :entity-id="record.issuerDid"
            class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
          />
        </router-link>
        <font-awesome
          v-else-if="isHiddenDid(record.issuerDid)"
          icon="eye-slash"
          class="text-slate-400 !size-[2rem] cursor-pointer"
          @click="notifyHiddenPerson"
        />
        <font-awesome
          v-else
          icon="person-circle-question"
          class="text-slate-400 !size-[2rem] cursor-pointer"
          @click="notifyUnknownPerson"
        />

        <div>
          <h3 v-if="record.issuer.known" class="font-semibold leading-tight">
            {{ record.issuer.displayName }}
          </h3>
          <p class="ms-auto text-xs text-slate-500 italic">
            {{ friendlyDate }}
          </p>
        </div>
      </div>

      <a
        class="cursor-pointer"
        data-testid="circle-info-link"
        @click="emitLoadClaim(record.jwtId)"
      >
        <font-awesome icon="circle-info" class="fa-fw text-slate-500" />
      </a>
    </div>

    <div class="bg-slate-100 rounded-b-md border border-slate-300 p-3 sm:p-4">
      <!-- Record Image -->
      <div
        v-if="record.image"
        class="bg-cover mb-2 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
        :style="`background-image: url(${record.image});`"
      >
        <a
          class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
          @click="emitViewImage(record.image)"
        >
          <img
            class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
            :src="record.image"
            alt="Activity image"
          />
        </a>
      </div>

      <!-- Emoji Section -->
      <div
        v-if="hasEmojis || isRegistered"
        class="float-right ml-3 mb-1 bg-white rounded border border-slate-300 px-1.5 py-0.5 max-w-[240px]"
      >
        <div class="flex items-center justify-between gap-1">
          <!-- Existing Emojis Display -->
          <div v-if="hasEmojis" class="flex flex-wrap gap-1">
            <button
              v-for="(count, emoji) in record.emojiCount"
              :key="emoji"
              class="inline-flex items-center gap-0.5 px-1 py-0.5 text-xs bg-slate-50 hover:bg-slate-100 rounded border border-slate-200 transition-colors cursor-pointer"
              :class="{
                'bg-blue-50 border-blue-200': isUserEmojiWithoutLoading(emoji),
                'opacity-75 cursor-wait': loadingEmojis,
              }"
              :title="
                loadingEmojis
                  ? 'Loading...'
                  : !emojisOnActivity?.isResolved
                    ? 'Click to load your emojis'
                    : isUserEmojiWithoutLoading(emoji)
                      ? 'Click to remove your emoji'
                      : 'Click to add this emoji'
              "
              :disabled="!isRegistered"
              @click="toggleThisEmoji(emoji)"
            >
              <!-- Show spinner when loading -->
              <div v-if="loadingEmojis" class="animate-spin text-xs">
                <font-awesome icon="spinner" class="fa-spin" />
              </div>
              <span v-else class="text-sm leading-none">{{ emoji }}</span>
              <span class="text-xs text-slate-600 font-medium leading-none">{{
                count
              }}</span>
            </button>
          </div>

          <!-- Add Emoji Button -->
          <button
            v-if="isRegistered"
            class="inline-flex px-1 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded border border-slate-300 transition-colors items-center justify-center ml-2 ml-auto"
            :title="showEmojiPicker ? 'Close emoji picker' : 'Add emoji'"
            @click="toggleEmojiPicker"
          >
            <span class="px-2 text-sm leading-none">{{
              showEmojiPicker ? "x" : "😊"
            }}</span>
          </button>
        </div>

        <!-- Emoji Picker (placeholder for now) -->
        <div
          v-if="showEmojiPicker"
          class="mt-1 p-1.5 bg-slate-50 rounded border border-slate-300"
        >
          <!-- Temporary emoji buttons for testing -->
          <div class="flex flex-wrap gap-3 mt-1">
            <button
              v-for="emoji in QUICK_EMOJIS"
              :key="emoji"
              class="p-0.5 hover:bg-slate-200 rounded text-base transition-opacity"
              :class="{
                'opacity-75 cursor-wait': loadingEmojis,
              }"
              :disabled="loadingEmojis"
              @click="toggleThisEmoji(emoji)"
            >
              <!-- Show spinner when loading -->
              <div v-if="loadingEmojis" class="animate-spin text-sm">⟳</div>
              <span v-else>{{ emoji }}</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Description -->
      <p class="font-medium">
        <a class="block cursor-pointer" @click="emitLoadClaim(record.jwtId)">
          <vue-markdown
            :source="truncatedDescription"
            class="markdown-content"
          />
        </a>
      </p>

      <div
        class="clear-right relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
      >
        <!-- Source -->
        <div
          class="w-[7rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
        >
          <div class="relative w-fit mx-auto">
            <div>
              <!-- Project Icon -->
              <div v-if="record.providerPlanName">
                <router-link
                  :to="{
                    path:
                      '/project/' +
                      encodeURIComponent(record.providerPlanHandleId || ''),
                  }"
                  title="View project details"
                >
                  <ProjectIcon
                    :entity-id="record.providerPlanHandleId || ''"
                    :icon-size="48"
                    class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
                  />
                </router-link>
              </div>
              <!-- Identicon for DIDs -->
              <div v-else-if="record.agentDid">
                <router-link
                  v-if="!isHiddenDid(record.agentDid)"
                  :to="{
                    path: '/did/' + encodeURIComponent(record.agentDid),
                  }"
                  title="More details about this person"
                >
                  <EntityIcon
                    :entity-id="record.agentDid"
                    :profile-image-url="record.issuer.profileImageUrl"
                    class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
                  />
                </router-link>
                <font-awesome
                  v-else
                  icon="eye-slash"
                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
                  @click="notifyHiddenPerson"
                />
              </div>
              <!-- Unknown Person -->
              <div v-else>
                <font-awesome
                  icon="person-circle-question"
                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
                  @click="notifyUnknownPerson"
                />
              </div>
            </div>
          </div>
          <div
            v-if="record.providerPlanName || record.giver.known"
            class="text-xs mt-2 truncate"
          >
            <font-awesome
              :icon="record.providerPlanName ? 'users' : 'user'"
              class="fa-fw text-slate-400"
            />
            {{ record.providerPlanName || record.giver.displayName }}
          </div>
        </div>

        <!-- Arrow -->
        <div
          class="absolute inset-x-[7rem] sm:inset-x-[12rem] mx-2 top-1/2 -translate-y-1/2"
        >
          <div
            class="text-sm text-center leading-none font-semibold pe-2 sm:pe-4"
          >
            {{ fetchAmount }}
          </div>

          <div class="flex items-center">
            <hr
              class="grow border-t-[18px] sm:border-t-[24px] border-slate-300"
            />

            <div
              class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[25px] border-t-transparent border-b-[20px] sm:border-b-[25px] border-b-transparent border-s-[27px] sm:border-s-[34px] border-e-0"
            ></div>
          </div>
        </div>

        <!-- Destination -->
        <div
          class="w-[7rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
        >
          <div class="relative w-fit mx-auto">
            <div>
              <!-- Project Icon -->
              <div v-if="record.recipientProjectName">
                <router-link
                  :to="{
                    path:
                      '/project/' +
                      encodeURIComponent(record.fulfillsPlanHandleId || ''),
                  }"
                  title="View project details"
                >
                  <ProjectIcon
                    :entity-id="record.fulfillsPlanHandleId || ''"
                    :icon-size="48"
                    class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
                  />
                </router-link>
              </div>
              <!-- Identicon for DIDs -->
              <div v-else-if="record.recipientDid">
                <router-link
                  v-if="!isHiddenDid(record.recipientDid)"
                  :to="{
                    path: '/did/' + encodeURIComponent(record.recipientDid),
                  }"
                  title="More details about this person"
                >
                  <EntityIcon
                    :entity-id="record.recipientDid"
                    :profile-image-url="record.receiver.profileImageUrl"
                    class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
                  />
                </router-link>
                <font-awesome
                  v-else
                  icon="eye-slash"
                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
                  @click="notifyHiddenPerson"
                />
              </div>
              <!-- Unknown Person -->
              <div v-else>
                <font-awesome
                  icon="person-circle-question"
                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
                  @click="notifyUnknownPerson"
                />
              </div>
            </div>
          </div>
          <div
            v-if="record.recipientProjectName || record.receiver.known"
            class="text-xs mt-2 truncate"
          >
            <font-awesome
              :icon="record.recipientProjectName ? 'users' : 'user'"
              class="fa-fw text-slate-400"
            />
            {{ record.recipientProjectName || record.receiver.displayName }}
          </div>
        </div>
      </div>
    </div>
  </li>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
import VueMarkdown from "vue-markdown-render";

import { logger } from "../utils/logger";
import {
  createAndSubmitClaim,
  getHeaders,
  isHiddenDid,
} from "../libs/endorserServer";
import EntityIcon from "./EntityIcon.vue";
import ProjectIcon from "./ProjectIcon.vue";
import { createNotifyHelpers, NotifyFunction, TIMEOUTS } from "@/utils/notify";
import {
  NOTIFY_PERSON_HIDDEN,
  NOTIFY_UNKNOWN_PERSON,
} from "@/constants/notifications";
import { EmojiSummaryRecord, GenericVerifiableCredential } from "@/interfaces";
import { GiveRecordWithContactInfo } from "@/interfaces/give";
import { PromiseTracker } from "@/libs/util";

@Component({
  components: {
    EntityIcon,
    ProjectIcon,
    VueMarkdown,
  },
})
export default class ActivityListItem extends Vue {
  readonly QUICK_EMOJIS = ["👍", "👏", "❤️", "🎉", "😊", "😆", "🔥"];

  @Prop() record!: GiveRecordWithContactInfo;
  @Prop() lastViewedClaimId?: string;
  @Prop() isRegistered!: boolean;
  @Prop() activeDid!: string;
  @Prop() apiServer!: string;

  isHiddenDid = isHiddenDid;
  notify!: ReturnType<typeof createNotifyHelpers>;
  $notify!: NotifyFunction;

  // Emoji-related data
  showEmojiPicker = false;
  loadingEmojis = false; // Track if emojis are currently loading

  emojisOnActivity: PromiseTracker<EmojiSummaryRecord[]> | null = null; // load this only when needed

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

  notifyHiddenPerson() {
    this.notify.warning(NOTIFY_PERSON_HIDDEN.message, TIMEOUTS.STANDARD);
  }

  notifyUnknownPerson() {
    this.notify.warning(NOTIFY_UNKNOWN_PERSON.message, TIMEOUTS.STANDARD);
  }

  get fetchAmount(): string {
    const claim = this.record.fullClaim;

    const amount = claim.object?.amountOfThisGood
      ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
      : "";

    return amount;
  }

  get description(): string {
    const claim = this.record.fullClaim;

    return `${claim?.description || ""}`;
  }

  get truncatedDescription(): string {
    const desc = this.description;
    if (desc.length <= 300) {
      return desc;
    }
    return desc.substring(0, 300) + "...";
  }

  private displayAmount(code: string, amt: number) {
    return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
  }

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

  // Emit methods using @Emit decorator
  @Emit("viewImage")
  emitViewImage(imageUrl: string) {
    return imageUrl;
  }

  @Emit("loadClaim")
  emitLoadClaim(jwtId: string) {
    return jwtId;
  }

  get friendlyDate(): string {
    const date = new Date(this.record.issuedAt);
    return date.toLocaleDateString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  }

  // Emoji-related computed properties and methods
  get hasEmojis(): boolean {
    return Object.keys(this.record.emojiCount).length > 0;
  }

  triggerUserEmojiLoad(): PromiseTracker<EmojiSummaryRecord[]> {
    if (!this.emojisOnActivity) {
      const promise = new Promise<EmojiSummaryRecord[]>((resolve) => {
        (async () => {
          this.axios
            .get(
              `${this.apiServer}/api/v2/report/emoji?parentHandleId=${encodeURIComponent(this.record.handleId)}`,
              { headers: await getHeaders(this.activeDid) },
            )
            .then((response) => {
              const userEmojiRecords = response.data.data.filter(
                (e: EmojiSummaryRecord) => e.issuerDid === this.activeDid,
              );
              resolve(userEmojiRecords);
            })
            .catch((error) => {
              logger.error("Error loading user emojis:", error);
              resolve([]);
            });
        })();
      });

      this.emojisOnActivity = new PromiseTracker(promise);
    }
    return this.emojisOnActivity;
  }

  /**
   *
   * @param emoji - The emoji to check.
   * @returns True if the emoji is in the user's emojis, false otherwise.
   *
   * @note This method is quick and synchronous, and can check resolved emojis
   * without triggering a server request. Returns false if emojis haven't been loaded yet.
   */
  isUserEmojiWithoutLoading(emoji: string): boolean {
    if (this.emojisOnActivity?.isResolved && this.emojisOnActivity.value) {
      return this.emojisOnActivity.value.some(
        (record) => record.text === emoji,
      );
    }
    return false;
  }

  async toggleEmojiPicker() {
    this.triggerUserEmojiLoad(); // trigger it, but don't wait for it to complete
    this.showEmojiPicker = !this.showEmojiPicker;
  }

  async toggleThisEmoji(emoji: string) {
    // Start loading indicator
    this.loadingEmojis = true;
    this.showEmojiPicker = false; // always close the picker when an emoji is clicked

    try {
      this.triggerUserEmojiLoad(); // trigger just in case

      const userEmojiList = await this.emojisOnActivity!.promise; // must wait now that they've chosen

      const userHasEmoji: boolean = userEmojiList.some(
        (record) => record.text === emoji,
      );

      if (userHasEmoji) {
        this.$notify(
          {
            group: "modal",
            type: "confirm",
            title: "Remove Emoji",
            text: `Do you want to remove your ${emoji} ?`,
            yesText: "Remove",
            onYes: async () => {
              await this.removeEmoji(emoji);
            },
          },
          TIMEOUTS.MODAL,
        );
      } else {
        // User doesn't have this emoji, add it
        await this.submitEmoji(emoji);
      }
    } finally {
      // Remove loading indicator
      this.loadingEmojis = false;
    }
  }

  async submitEmoji(emoji: string) {
    try {
      // Create an Emoji claim and send to the server
      const emojiClaim: GenericVerifiableCredential = {
        "@context": "https://endorser.ch",
        "@type": "Emoji",
        text: emoji,
        parentItem: { lastClaimId: this.record.jwtId },
      };
      const claim = await createAndSubmitClaim(
        emojiClaim,
        this.activeDid,
        this.apiServer,
        this.axios,
      );
      if (claim.success && !claim.embeddedRecordError) {
        // Update emoji count
        this.record.emojiCount[emoji] =
          (this.record.emojiCount[emoji] || 0) + 1;

        // Create a new emoji record (we'll get the actual jwtId from the server response later)
        const newEmojiRecord: EmojiSummaryRecord = {
          issuerDid: this.activeDid,
          jwtId: claim.claimId || "",
          text: emoji,
          parentHandleId: this.record.jwtId,
        };

        // Update user emojis list by creating a new promise with the updated data
        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
        this.triggerUserEmojiLoad();
        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
        this.emojisOnActivity = new PromiseTracker(
          Promise.resolve([...currentEmojis, newEmojiRecord]),
        );
      } else {
        this.notify.error("Failed to add emoji.", TIMEOUTS.STANDARD);
      }
    } catch (error) {
      logger.error("Error submitting emoji:", error);
      this.notify.error("Got error adding emoji.", TIMEOUTS.STANDARD);
    }
  }

  async removeEmoji(emoji: string) {
    try {
      // Create an Emoji claim and send to the server
      const emojiClaim: GenericVerifiableCredential = {
        "@context": "https://endorser.ch",
        "@type": "Emoji",
        text: emoji,
        parentItem: { lastClaimId: this.record.jwtId },
      };
      const claim = await createAndSubmitClaim(
        emojiClaim,
        this.activeDid,
        this.apiServer,
        this.axios,
      );
      if (claim.success && !claim.embeddedRecordError) {
        // Update emoji count
        const newCount = Math.max(0, (this.record.emojiCount[emoji] || 0) - 1);
        if (newCount === 0) {
          delete this.record.emojiCount[emoji];
        } else {
          this.record.emojiCount[emoji] = newCount;
        }

        // Update user emojis list by creating a new promise with the updated data
        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
        this.triggerUserEmojiLoad();
        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
        this.emojisOnActivity = new PromiseTracker(
          Promise.resolve(
            currentEmojis.filter(
              (record) =>
                record.issuerDid === this.activeDid && record.text !== emoji,
            ),
          ),
        );
      } else {
        this.notify.error("Failed to remove emoji.", TIMEOUTS.STANDARD);
      }
    } catch (error) {
      logger.error("Error removing emoji:", error);
      this.notify.error("Got error removing emoji.", TIMEOUTS.STANDARD);
    }
  }
}
</script>