"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("");
  }
};

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;
}

export { ui };

@@ -324,16 +324,276 @@
 in(%22%22);%0A
+  %7D,%0A%0A  renderUsers(users) %7B%0A    let elements = users.map( (user) =%3E %7B%0A      let %7B name, avatar %7D = user;%0A%0A      return userTemplate(name, avatar);%0A    %7D);%0A%0A    let target = document.querySelector(%22.sidebar-content%22);%0A    target.innerHTML = elements.join(%22%22);%0A
   %7D%0A%7D;%0A%0A
@@ -941,16 +941,58 @@
 ate;%0A%7D%0A%0A
+function userTemplate(name, avatar) %7B%0A%0A%7D%0A%0A
 export %7B

Add renderUsers, userTemplate methods