Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

JavaScript
1

Tell us what’s happening:

I have exactly one failing test in build-an-fcc-forum-leaderboard (test 33). There seems to be an issue with the following line (part of a template string).

<td><div class="avatar-container">${avatars(posters, users)}</div></td>

Since the avatars() function is already tested in tests 20-24 and other <td> elements return successive checks, I am unsure why this is happening. Here is the description of the failing test.

Test 33: The second td element of each table row from the string returned by showLatestPosts should contain the images returned by the avatars function called with posters and users as arguments, nested within a div element with the class of avatar-container .

Your code so far

const forumLatest =
  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
const avatarUrl = 'https://sea1.discourse-cdn.com/freecodecamp';

const allCategories = {
  299: { category: 'Career Advice', className: 'career' },
  409: { category: 'Project Feedback', className: 'feedback' },
  417: { category: 'freeCodeCamp Support', className: 'support' },
  421: { category: 'JavaScript', className: 'javascript' },
  423: { category: 'HTML - CSS', className: 'html-css' },
  424: { category: 'Python', className: 'python' },
  432: { category: 'You Can Do This!', className: 'motivation' },
  560: { category: 'Backend Development', className: 'backend' }
};

function timeAgo(timestamp) {
  const then = new Date(timestamp);
  const now = new Date();
  const diffMS = now - then;
  const diffS = diffMS/1000;
  const diffM = diffS/60;
  const diffH = diffM/60;
  const diffD = diffH/24;
  if (diffM < 60) {
    return Math.floor(diffM)+ "m ago"
  }
  if (diffH < 24) {
    return Math.floor(diffH)+ "h ago"
  }
  return Math.floor(diffD)+ "d ago"
}

function viewCount(views) {
  return views >= 1000 ? 
     Math.floor(views/1000) + "k" :
     views
}

function forumCategory(id) {
  const isValid = (id in allCategories);
  const category = allCategories[id] || {};
  if (!isValid) {
    category.className = "general"
    category.category = "General"
  }
  return `<a class="category ${category.className}" href="${forumCategoryUrl}${category.className}/${id}">
    ${category.category}
  </a>`
}

function avatars(posters, users) {
  const posterIds = posters.map(poster => poster.user_id)
  return users.filter(user => posterIds.includes(user.id)).map(user => {
    let src = user.avatar_template.replace("{size}", 30);
    if (/^\/user_avatar/.test(src)) {
      src = `${avatarUrl}${src}`
    }
    return `<img alt="${user.name}" src="${src}"/>`
  }).join("")
}

function showLatestPosts({users, topic_list}) {
  const htmlString = topic_list.topics.map(topic => {
    const {id, slug, title, category_id, posters, posts_count, views, bumped_at} = topic;
    return`<tr>
      <td>
        <a class="post-title" href="${forumTopicUrl}${slug}/${id}">${title}</a>
        ${forumCategory(category_id)}
      </td>
      <td>
        <div class="avatar-container">${avatars(posters, users)}</div>
      </td>
      <td>${posts_count - 1}</td>
      <td>${views}</td>
      <td>${timeAgo(bumped_at)}</td>
    </tr>`
  }).join("\n")
  document.getElementById("posts-container").innerHTML = htmlString
  return htmlString;
}

async function fetchData() {
  try {
    const data = await fetch('https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json')
    const json = await data.json()
    showLatestPosts(json)
  } catch(err) {
    console.log(err)
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Build an fCC Forum Leaderboard - Build an fCC Forum Leaderboard

2

I just got the test to pass. It turns out the way I “joined” the users to the posters re-arranged ordering of the posters. So instead of users.filter().map() I am now using posters.map() to include the images in the right order.

function avatars(posters, users) {
  return posters.map(poster => {
    const user = users.filter(user => user.id === poster.user_id)[0]
    let src = user.avatar_template.replace("{size}", 30);
    if (/^\/user_avatar/.test(src)) {
      src = `${avatarUrl}${src}`
    }
    return `<img alt="${user.name}" src="${src}"/>`
  }).join("")
}