step007 - load user data and update card template with user data - please also note the refactoring

Author: Schalk Neethling

index.html

@@ -31,17 +31,17 @@ <h2 class="user-card-title"></h2>
                 <ul class="user-card-social">
                     <li>
                         <a class="icon icon-social-bsky" href="" target="_blank" rel="noopener noreferrer">
-                            <span class="visually-hidden">Follow @employee on Bluesky</span>
+                            <span class="visually-hidden">Follow @employee on @platform</span>
                         </a>
                     </li>
                     <li>
                         <a class="icon icon-social-linkedin" href="" target="_blank" rel="noopener noreferrer">
-                            <span class="visually-hidden">Follow @employee on LinkedIn</span>
+                            <span class="visually-hidden">Follow @employee on @platform</span>
                         </a>
                     </li>
                     <li>
                         <a class="icon icon-social-mastodon" href="" target="_blank" rel="noopener noreferrer">
-                            <span class="visually-hidden">Follow @employee on Mastodon</span>
+                            <span class="visually-hidden">Follow @employee on @platform</span>
                         </a>
                     </li>
                 </ul>

js/nimbus-team.js

@@ -1,30 +1,102 @@
 class NimbusTeam extends HTMLElement {
   static #selectors = {
     UserCardTmpl: "nimbus-team-user-card-tmpl",
+    UserCardAvatar: ".user-card-avatar",
+    UserCardEmail: ".user-card-email a",
+    UserCardSocial: {
+      bluesky: ".icon-social-bsky",
+      linkedin: ".icon-social-linkedin",
+      mastodon: ".icon-social-mastodon",
+    },
+    UserCardPhone: ".user-card-phone a",
+    UserCardRole: ".user-card-role",
+    UserCardTitle: ".user-card-title",
   };
 
   #shadow;
 
+  #users;
+
   constructor() {
     super();
     this.#shadow = this.attachShadow({ mode: "open" });
     this.#loadCSS();
   }
 
   connectedCallback() {
-    const listContainer = document.createElement("ul");
+    this.#render();
+  }
+
+  async #render() {
     const template = document.getElementById(
       NimbusTeam.#selectors.UserCardTmpl
     );
 
-    if (template) {
-      const content = template.content.cloneNode(true);
-
-      listContainer.classList.add("card-list");
-      listContainer.appendChild(content);
+    if (!template) {
+      return;
+    }
 
-      this.#shadow.appendChild(listContainer);
+    if (!this.#users) {
+      await this.#loadUsers();
     }
+
+    const listContainer = document.createElement("ul");
+    listContainer.classList.add("card-list");
+
+    this.#users.forEach((user) => {
+      const userCard = template.content.cloneNode(true);
+      const email = userCard.querySelector(NimbusTeam.#selectors.UserCardEmail);
+      const phone = userCard.querySelector(NimbusTeam.#selectors.UserCardPhone);
+
+      const bluesky = userCard.querySelector(
+        NimbusTeam.#selectors.UserCardSocial.bluesky
+      );
+      const linkedin = userCard.querySelector(
+        NimbusTeam.#selectors.UserCardSocial.linkedin
+      );
+      const mastodon = userCard.querySelector(
+        NimbusTeam.#selectors.UserCardSocial.mastodon
+      );
+
+      // Because all social icons have the same accessible text content
+      // we can use any of them to get the unprocessed text content.
+      const accText = bluesky.querySelector("span").textContent;
+
+      userCard.querySelector(
+        NimbusTeam.#selectors.UserCardTitle
+      ).textContent = `${user.firstName} ${user.lastName}`;
+
+      userCard.querySelector(NimbusTeam.#selectors.UserCardAvatar).src =
+        user.avatarURL;
+
+      userCard.querySelector(NimbusTeam.#selectors.UserCardRole).textContent =
+        user.role;
+
+      email.textContent = user.email;
+      email.href = `mailto:${user.email}`;
+
+      phone.textContent = user.telephone;
+      phone.href = `tel:${user.telephone}`;
+
+      bluesky.href = user.bluesky;
+      bluesky.querySelector("span").textContent = accText
+        .replace("@employee", user.firstName)
+        .replace("@platform", "Bluesky");
+
+      linkedin.href = user.linkedin;
+      linkedin.querySelector("span").textContent = accText
+        .replace("@employee", user.firstName)
+        .replace("@platform", "LinkedIn");
+
+      mastodon.href = user.mastodon;
+      mastodon.querySelector("span").textContent = accText
+        .replace("@employee", user.firstName)
+        .replace("@platform", "Mastodon");
+
+      listContainer.appendChild(userCard);
+    });
+
+    this.#shadow.appendChild(listContainer);
   }
 
   /**
@@ -46,6 +118,16 @@ class NimbusTeam extends HTMLElement {
       this.#shadow.appendChild(style);
     }
   }
+
+  async #loadUsers() {
+    const response = await fetch(
+      "https://fictionalfolks.netlify.app/.netlify/functions/users?count=1"
+    );
+
+    if (response.ok) {
+      this.#users = await response.json();
+    }
+  }
 }
 
 customElements.define("nimbus-team", NimbusTeam);