From 23789d4ecdd82df0c1e9a6df9d3531717ae38fdf Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Sat, 5 Jul 2025 05:38:20 +0000
Subject: [PATCH] Fix JavaScript runtime errors for undefined name property
 access

- Add null checks to prevent "Cannot read properties of undefined (reading 'name')" errors
- Fix ProjectCard, MembersList, ProjectsView, DiscoverView, ProjectViewView components
- Add null validation in DIDView.claimDescription() and ClaimReportCertificateView.drawCanvas()
- Add missing databaseUtil import in MembersList component
- Use meaningful fallback text for undefined names ("Unnamed Project", "Unnamed Member")
- Resolves template rendering crashes when entities lack name properties
---
 src/components/InfiniteScroll.vue        | 26 ++++----
 src/components/MembersList.vue           | 77 +++++++++++++++---------
 src/components/ProjectCard.vue           |  2 +-
 src/views/ClaimReportCertificateView.vue |  4 ++
 src/views/DIDView.vue                    | 15 ++++-
 src/views/DiscoverView.vue               |  4 +-
 src/views/ProjectViewView.vue            |  4 +-
 src/views/ProjectsView.vue               |  4 +-
 8 files changed, 90 insertions(+), 46 deletions(-)

diff --git a/src/components/InfiniteScroll.vue b/src/components/InfiniteScroll.vue
index 15bd964c..4efb7fc9 100644
--- a/src/components/InfiniteScroll.vue
+++ b/src/components/InfiniteScroll.vue
@@ -60,17 +60,21 @@ export default class InfiniteScroll extends Vue {
    * Used internally by Vue's lifecycle system
    */
   updated() {
-    if (!this.observer) {
-      const options = {
-        root: null,
-        rootMargin: `0px 0px ${this.distance}px 0px`,
-        threshold: 1.0,
-      };
-      this.observer = new IntersectionObserver(
-        this.handleIntersection,
-        options,
-      );
-      this.observer.observe(this.$refs.sentinel as HTMLElement);
+    if (!this.observer && this.$refs.sentinel) {
+      const sentinelElement = this.$refs.sentinel as HTMLElement;
+      // Ensure we have a valid HTMLElement before observing
+      if (sentinelElement instanceof HTMLElement) {
+        const options = {
+          root: null,
+          rootMargin: `0px 0px ${this.distance}px 0px`,
+          threshold: 1.0,
+        };
+        this.observer = new IntersectionObserver(
+          this.handleIntersection,
+          options,
+        );
+        this.observer.observe(sentinelElement);
+      }
     }
   }
 
diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue
index cb5449b3..589216d8 100644
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -66,7 +66,7 @@
          changes the password 
          -->
         <button
-          class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+          class="btn-action-refresh"
           title="Refresh members list"
           @click="fetchMembers"
         >
@@ -80,13 +80,15 @@
       >
         <div class="flex items-center justify-between">
           <div class="flex items-center">
-            <h3 class="text-lg font-medium">{{ member.name }}</h3>
+            <h3 class="text-lg font-medium">
+              {{ member.name || "Unnamed Member" }}
+            </h3>
             <div
               v-if="!getContactFor(member.did) && member.did !== activeDid"
               class="flex justify-end"
             >
               <button
-                class="ml-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors"
+                class="btn-add-contact"
                 title="Add as contact"
                 @click="addAsContact(member)"
               >
@@ -95,7 +97,7 @@
             </div>
             <button
               v-if="member.did !== activeDid"
-              class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
+              class="btn-info-contact"
               title="Contact info"
               @click="
                 informAboutAddingContact(
@@ -114,7 +116,7 @@
               class="flex items-center"
             >
               <button
-                class="mr-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+                class="btn-admission"
                 :title="
                   member.member.admitted ? 'Remove member' : 'Admit member'
                 "
@@ -126,7 +128,7 @@
                 />
               </button>
               <button
-                class="mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
+                class="btn-info-admission"
                 title="Admission info"
                 @click="informAboutAdmission()"
               >
@@ -141,7 +143,7 @@
       </div>
       <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
         <button
-          class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+          class="btn-action-refresh"
           title="Refresh members list"
           @click="fetchMembers"
         >
@@ -168,10 +170,10 @@ import {
 } from "../libs/endorserServer";
 import { decryptMessage } from "../libs/crypto";
 import { Contact } from "../db/tables/contacts";
-import * as databaseUtil from "../db/databaseUtil";
 import * as libsUtil from "../libs/util";
 import { NotificationIface } from "../constants/app";
-import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import * as databaseUtil from "../db/databaseUtil";
 
 interface Member {
   admitted: boolean;
@@ -186,7 +188,9 @@ interface DecryptedMember {
   isRegistered: boolean;
 }
 
-@Component
+@Component({
+  mixins: [PlatformServiceMixin],
+})
 export default class MembersList extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
@@ -353,13 +357,7 @@ export default class MembersList extends Vue {
   }
 
   async loadContacts() {
-    const platformService = PlatformServiceFactory.getInstance();
-    const result = await platformService.dbQuery("SELECT * FROM contacts");
-    if (result) {
-      this.contacts = databaseUtil.mapQueryResultToValues(
-        result,
-      ) as unknown as Contact[];
-    }
+    this.contacts = await this.$getAllContacts();
   }
 
   getContactFor(did: string): Contact | undefined {
@@ -443,11 +441,7 @@ export default class MembersList extends Vue {
           if (result.success) {
             decrMember.isRegistered = true;
             if (oldContact) {
-              const platformService = PlatformServiceFactory.getInstance();
-              await platformService.dbExec(
-                "UPDATE contacts SET registered = ? WHERE did = ?",
-                [true, decrMember.did],
-              );
+              await this.$updateContact(decrMember.did, { registered: true });
               oldContact.registered = true;
             }
             this.$notify(
@@ -500,11 +494,7 @@ export default class MembersList extends Vue {
         name: member.name,
       };
 
-      const platformService = PlatformServiceFactory.getInstance();
-      await platformService.dbExec(
-        "INSERT INTO contacts (did, name) VALUES (?, ?)",
-        [member.did, member.name],
-      );
+      await this.$insertContact(newContact);
       this.contacts.push(newContact);
 
       this.$notify(
@@ -535,3 +525,36 @@ export default class MembersList extends Vue {
   }
 }
 </script>
+
+<style scoped>
+/* Button Classes */
+.btn-action-refresh {
+  @apply w-8 h-8 flex items-center justify-center rounded-full 
+    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
+    transition-colors;
+}
+
+.btn-add-contact {
+  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
+    bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
+    transition-colors;
+}
+
+.btn-info-contact {
+  @apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+    transition-colors;
+}
+
+.btn-admission {
+  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
+    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
+    transition-colors;
+}
+
+.btn-info-admission {
+  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+    transition-colors;
+}
+</style>
diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index 4bd41667..7f09eda8 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -15,7 +15,7 @@ issuer information. * * @author Matthew Raymer */
     <h3
       class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
     >
-      {{ project.name }}
+      {{ project.name || "Unnamed Project" }}
     </h3>
 
     <div class="text-xs text-slate-500 truncate">
diff --git a/src/views/ClaimReportCertificateView.vue b/src/views/ClaimReportCertificateView.vue
index bffb0e8c..11610464 100644
--- a/src/views/ClaimReportCertificateView.vue
+++ b/src/views/ClaimReportCertificateView.vue
@@ -70,6 +70,10 @@ export default class ClaimReportCertificateView extends Vue {
   }
 
   async drawCanvas(claimData: GenericCredWrapper<GenericVerifiableCredential>) {
+    if (!claimData || !claimData.claim) {
+      return;
+    }
+
     const platformService = PlatformServiceFactory.getInstance();
     const dbAllContacts = await platformService.dbQuery(
       "SELECT * FROM contacts",
diff --git a/src/views/DIDView.vue b/src/views/DIDView.vue
index f4bdc21d..e0e47868 100644
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -406,11 +406,17 @@ export default class DIDView extends Vue {
       "SELECT * FROM contacts WHERE did = ?",
       [this.viewingDid],
     );
-    this.contactFromDid = databaseUtil.mapQueryResultToValues(
+    const contacts = databaseUtil.mapQueryResultToValues(
       dbContacts,
-    )[0] as unknown as Contact;
-    if (this.contactFromDid) {
+    ) as unknown as Contact[];
+
+    // Safely check if contact exists before assigning
+    if (contacts && contacts.length > 0) {
+      this.contactFromDid = contacts[0];
       this.contactYaml = yaml.dump(this.contactFromDid);
+    } else {
+      this.contactFromDid = undefined;
+      this.contactYaml = "";
     }
   }
 
@@ -705,6 +711,9 @@ export default class DIDView extends Vue {
    * @returns Description string or empty string
    */
   claimDescription(claim: GenericVerifiableCredential) {
+    if (!claim || !claim.claim) {
+      return "";
+    }
     const claimData = claim.claim as { name?: string; description?: string };
     return claimData.name || claimData.description || "";
   }
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 6cc0c398..1964ec0b 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -232,7 +232,9 @@
               </div>
 
               <div class="grow">
-                <h2 class="text-base font-semibold">{{ project.name }}</h2>
+                <h2 class="text-base font-semibold">
+                  {{ project.name || "Unnamed Project" }}
+                </h2>
                 <div class="text-sm">
                   <font-awesome
                     icon="user"
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 03a5a482..a6ec8442 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -183,7 +183,7 @@
                 class="text-blue-500"
                 @click="onClickLoadProject(plan.handleId)"
               >
-                {{ plan.name }}
+                {{ plan.name || "Unnamed Project" }}
               </button>
             </div>
             <div v-if="fulfillersToHitLimit" class="text-center">
@@ -207,7 +207,7 @@
               class="text-blue-500"
               @click="onClickLoadProject(fulfilledByThis.handleId)"
             >
-              {{ fulfilledByThis.name }}
+              {{ fulfilledByThis.name || "Unnamed Project" }}
             </button>
           </div>
         </div>
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index ccdfab67..f5762307 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -252,7 +252,9 @@
             </div>
 
             <div class="grow overflow-hidden">
-              <h2 class="text-base font-semibold">{{ project.name }}</h2>
+              <h2 class="text-base font-semibold">
+                {{ project.name || "Unnamed Project" }}
+              </h2>
               <div class="text-sm truncate">
                 {{ project.description }}
               </div>