add recipient description to offers in user's list

src/libs/endorserServer.ts

@@ -267,10 +267,6 @@ export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
 // See https://github.com/trentlarson/endorser-ch/blob/0cb626f803028e7d9c67f095858a9fc8542e3dbd/server/api/services/util.js#L6
 const HIDDEN_DID = "did:none:HIDDEN";
 
-const planCache: LRUCache<string, PlanSummaryRecord> = new LRUCache({
-  max: 500,
-});
-
 export function isDid(did: string) {
   return did.startsWith("did:");
 }
@@ -507,6 +503,10 @@ export async function getHeaders(did?: string) {
   return headers;
 }
 
+const planCache: LRUCache<string, PlanSummaryRecord> = new LRUCache({
+  max: 500,
+});
+
 /**
  * @param handleId nullable, in which case "undefined" will be returned
  * @param requesterDid optional, in which case no private info will be returned

src/views/ProjectsView.vue

@@ -109,6 +109,19 @@
             </div>
 
             <div>
+              <div>
+                To
+                {{
+                  offer.fulfillsPlanHandleId
+                    ? projectNameFromHandleId[offer.fulfillsPlanHandleId]
+                    : didInfo(
+                        offer.recipientDid,
+                        activeDid,
+                        allMyDids,
+                        allContacts,
+                      )
+                }}
+              </div>
               <div>
                 {{ offer.objectDescription }}
               </div>
@@ -244,11 +257,14 @@ import QuickNav from "@/components/QuickNav.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import {
+  didInfo,
   getHeaders,
+  getPlanFromCache,
   OfferSummaryRecord,
   PlanData,
 } from "@/libs/endorserServer";
 import EntityIcon from "@/components/EntityIcon.vue";
+import { Contact } from "@/db/tables/contacts";
 
 @Component({
   components: { EntityIcon, InfiniteScroll, QuickNav, ProjectIcon, TopMessage },
@@ -263,16 +279,19 @@ export default class ProjectsView extends Vue {
   }
 
   activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: Array<string> = [];
   apiServer = "";
   projects: PlanData[] = [];
   isLoading = false;
   isRegistered = false;
-  numAccounts = 0;
   offers: OfferSummaryRecord[] = [];
+  projectNameFromHandleId: Record<string, string> = {}; // mapping from handleId to description
   showOffers = true;
   showProjects = false;
 
   libsUtil = libsUtil;
+  didInfo = didInfo;
 
   async mounted() {
     try {
@@ -282,9 +301,13 @@ export default class ProjectsView extends Vue {
       this.apiServer = (settings?.apiServer as string) || "";
       this.isRegistered = !!settings?.isRegistered;
 
+      this.allContacts = await db.contacts.toArray();
+
       await accountsDB.open();
-      this.numAccounts = await accountsDB.accounts.count();
-      if (this.numAccounts === 0) {
+      const allAccounts = await accountsDB.accounts.toArray();
+      this.allMyDids = allAccounts.map((acc) => acc.did);
+
+      if (allAccounts.length === 0) {
         console.error("No accounts found.");
         this.errNote("You need an identifier to load your projects.");
       } else {
@@ -343,10 +366,7 @@ export default class ProjectsView extends Vue {
   async loadMoreProjectData(payload: boolean) {
     if (this.projects.length > 0 && payload) {
       const latestProject = this.projects[this.projects.length - 1];
-      await this.loadProjects(
-        this.activeDid,
-        `beforeId=${latestProject.rowid}`,
-      );
+      await this.loadProjects(`beforeId=${latestProject.rowid}`);
     }
   }
 
@@ -355,7 +375,7 @@ export default class ProjectsView extends Vue {
    * @param issuerDid of the user
    * @param urlExtra additional url parameters in a string
    **/
-  async loadProjects(activeDid?: string, urlExtra: string = "") {
+  async loadProjects(urlExtra: string = "") {
     const url = `${this.apiServer}/api/v2/report/plansByIssuer?${urlExtra}`;
     await this.projectDataLoader(url);
   }
@@ -402,7 +422,31 @@ export default class ProjectsView extends Vue {
       this.isLoading = true;
       const resp = await this.axios.get(url, { headers } as AxiosRequestConfig);
       if (resp.status === 200 && resp.data.data) {
-        this.offers = this.offers.concat(resp.data.data);
+        // add one-by-one as they retrieve project names, potentially from the server
+        for (const offer of resp.data.data) {
+          if (offer.fulfillsPlanHandleId) {
+            const project = await getPlanFromCache(
+              offer.fulfillsPlanHandleId,
+              this.axios,
+              this.apiServer,
+              this.activeDid,
+            );
+            const projectName = project?.name as string;
+            console.log(
+              "now have name for",
+              offer.fulfillsPlanHandleId,
+              projectName,
+            );
+            this.projectNameFromHandleId[offer.fulfillsPlanHandleId] =
+              projectName;
+            console.log(
+              "now have a real name for",
+              offer.fulfillsPlanHandleId,
+              this.projectNameFromHandleId[offer.fulfillsPlanHandleId],
+            );
+          }
+          this.offers = this.offers.concat([offer]);
+        }
       } else {
         console.error(
           "Bad server response & data for offers:",