refactor: actor-profile to include distributed-outbox as a child comp…

…onent and rename classes
hyphacoop · Mar 19, 2024 · 1f8fcd9 · 1f8fcd9
1 parent e06f250
commit 1f8fcd9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/actor-profile.css b/actor-profile.css
@@ -1,9 +1,9 @@
-.actor-profile {
+.profile {
   text-align: center;
   margin-top: 20px;
 }
 
-.actor-container {
+.profile-container {
   margin-bottom: 10px;
 }
 
@@ -14,7 +14,7 @@
   margin-bottom: 16px;
 }
 
-.actor-icon {
+.profile-icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
@@ -23,12 +23,12 @@
   margin-bottom: 8px;
 }
 
-.actor-details {
+.profile-details {
   display: flex;
   flex-direction: column;
 }
 
-.actor-name {
+.profile-name {
   color: var(--rdp-text-color);
   font-weight: bold;
 }

diff --git a/actor-profile.js b/actor-profile.js
@@ -21,9 +21,6 @@ class ActorProfile extends HTMLElement {
     if (actorInfo) {
       this.renderActorProfile(actorInfo);
       this.updateFollowButtonState();
-      // Update distributed-outbox URL based on fetched actorInfo
-      const distributedOutbox = document.querySelector("distributed-outbox");
-      distributedOutbox.setAttribute("url", actorInfo.outbox);
     }
   }
 
@@ -32,31 +29,31 @@ class ActorProfile extends HTMLElement {
     this.innerHTML = "";
 
     const profileContainer = document.createElement("div");
-    profileContainer.classList.add("actor-profile");
+    profileContainer.classList.add("profile");
 
     // Create a container for the actor icon and name, to center them
     const actorContainer = document.createElement("div");
-    actorContainer.classList.add("actor-container");
+    actorContainer.classList.add("profile-container");
 
     // Handle both single icon object and array of icons
-    let iconUrl = './assets/profile.png'; // Default profile image path
+    let iconUrl = "./assets/profile.png"; // Default profile image path
     if (actorInfo.icon) {
       if (Array.isArray(actorInfo.icon) && actorInfo.icon.length > 0) {
         iconUrl = actorInfo.icon[0].url;
       } else if (actorInfo.icon.url) {
         iconUrl = actorInfo.icon.url;
       }
     }
-  
+
     const img = document.createElement("img");
-    img.classList.add("actor-icon");
+    img.classList.add("profile-icon");
     img.src = iconUrl;
     img.alt = actorInfo.name ? actorInfo.name : "Actor icon";
     actorContainer.appendChild(img); // Append to the actor container
 
     if (actorInfo.name) {
       const pName = document.createElement("div");
-      pName.classList.add("actor-name");
+      pName.classList.add("profile-name");
       pName.textContent = actorInfo.name;
       actorContainer.appendChild(pName); // Append to the actor container
     }
@@ -70,8 +67,18 @@ class ActorProfile extends HTMLElement {
     followButton.textContent = "Follow";
     profileContainer.appendChild(followButton);
 
+    // Create the distributed-outbox component and append it to the profile container
+    const distributedOutbox = document.createElement("distributed-outbox");
+    profileContainer.appendChild(distributedOutbox);
+
     // Append the profile container to the main component
     this.appendChild(profileContainer);
+
+    // Update distributed-outbox URL based on fetched actorInfo
+    this.querySelector("distributed-outbox").setAttribute(
+      "url",
+      actorInfo.outbox
+    );
   }
 
   async updateFollowButtonState() {