"use strict";

// src/ui.js

import xss from "xss-filters";

let ui = {
  renderPosts(posts) {
    let elements = posts.map( (post) => {
      let { title, lastReply } = post;

      return articleTemplate(title, lastReply);
    });

    let target = document.querySelector(".container");
    target.innerHTML = elements.join("");
  },

  renderUsers(users) {
    let elements = users.map( (user) => {
      let { name, avatar } = user;

      return userTemplate(name, avatar);
    });

    let target = document.querySelector(".sidebar-content");
    target.innerHTML = elements.join("");
  }
};

function articleTemplate(title, lastReply) {
  let safeTitle = xss.inHTMLData(title);
  let safeLastReply = xss.inHTMLData(lastReply);

  let template = `
    <article class="post">
      <h2 class="post-title">
        ${safeTitle}
      </h2>
      <p class="post-meta">
        ${safeLastReply}
      </p>
    </article>`;

  return template;
}

function userTemplate(name, avatar) {

}

export { ui };

@@ -979,16 +979,323 @@
 atar) %7B%0A
+  let safeName = xss.inHTMLData(name);%0A  let safeAvatar = xss.inHTMLData(avatar);%0A%0A  let template = %60%0A    %3Cdiv class=%22active-avatar%22%3E%0A      %3Cimg width=%2254%22 src=%22./assets/images/$%7BsafeAvatar%7D%22 alt=%22$%7BsafeName%7D%22/%3E%0A      %3Ch5 class=%22post-author%22%3E%0A        $%7BsafeName%7D%0A      %3C/h5%3E%0A    %3C/div%3E%60;%0A%0A  return template;
 %0A%7D%0A%0Aexpo

Edit userTemplate method