get profile data using axios

main.js

// Replace with
import Search from './modules/Search'
import Profile from './modules/Profile'

if (Boolean(document.querySelector('.header-search-icon'))) {
  new Search()
}

if (Boolean(document.querySelector('.profile-nav'))) {
  new Profile()
}

Profile.js

// Add brand new file
import axios from 'axios'

export default class Profile {

  constructor() {
    this.profileNav = document.querySelector('.profile-nav')
    this.profileContent = document.getElementById('profileContent')
    this.username = document.getElementById('username').textContent
    this.events()
    document.querySelector('.profile-nav-link.active').click()
  }

  events() {
    this.profileNav.addEventListener('click', e => {
      if (e.target.tagName !== 'A') return
      e.preventDefault()
      this.switchTab(e.target)
      const resource = e.target.getAttribute('data-resource')
      const options = {
        url: e.target.getAttribute('data-url'),
        callback: resource === 'posts' ? 'renderPosts' : 'renderFollowers',
        message: `No ${resource} yet`,
        resource,
      }
      this.fetchData(options)
    })
  }

  fetchData(options) {
    axios
      .get(options.url)
      .then(({ data }) => {
        if (data.length) {
          this[options.callback](data)
          this.updateCount(options.resource, data.length)
        } else {
          this.renderMessage(options.message)
        }
      })
      .catch(err => alert(err.message))
  }

  renderMessage(msg) {
    const html = `<em>${msg}</em>`

    this.updateProfileContent(html)
  }

  updateCount(resource, count) {
    document.getElementById(`${resource}Count`).textContent = count
  }

  updateProfileContent(html) {
    this.profileContent.innerHTML = html
  }

  switchTab(target) {
    const children = [].slice.call(target.parentNode.children)
    children.find(el => el.classList.contains('active')).classList.remove('active')
    target.classList.add('active')
  }

  renderPosts(data) {
    const html =
      `<div class="list-group">
        ${data.map(post => {
          const date = new Date(post.created_at)
          return `
          <a href="/posts/${post._id}" class="list-group-item list-group-item-action">
            <img class="avatar-tiny" src="https://gravatar.com/avatar/${post.author.avatar}">
            <strong>${post.title}</strong> on ${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}
          </a>`
        }).join('')}
      </div>`

    this.updateProfileContent(html)
  }

  renderFollowers(data) {
    const html =
      `<div class="list-group">
        ${data.map(user =>`
          <a href="/users/${user.username}" class="list-group-item list-group-item-action">
            <img class="avatar-tiny" src="https://gravatar.com/avatar/${user.avatar}">
            <strong>${user.username}</strong>
          </a>`
      ).join('')}
      </div>`

    this.updateProfileContent(html)
  }
}

profileViewScreen.ejs

<%/* Replace with */%>
<%- include('../includes/header') %>

<div class="container py-md-5 container--narrow">

  <%- include('../includes/flash') %>

  <h2>
    <img class="avatar-small" src="<%= avatar %>">
    <span id="username"><%= username %></span>
    <% if (user.username !== username) {
      if (isFollowing) { %>
      <form class="ml-2 d-inline" action="/unfollow/<%= username %>" method="POST">
        <button class="btn btn-danger btn-sm">Unfollow <i class="fas fa-user-times"></i></button>
      </form>
      <% } else { %>
      <form class="ml-2 d-inline" action="/follow/<%= username %>" method="POST">
        <button class="btn btn-primary btn-sm">Follow <i class="fas fa-user-plus"></i></button>
      </form>
      <% }
    } %>
  </h2>

  <div class="profile-nav nav nav-tabs pt-2 mb-4">
    <a href="#" class="profile-nav-link nav-item nav-link active" data-resource="posts" data-url="/users/<%= username %>/posts">Posts: <span id="postsCount"><%= postsCount %></span></a>
    <a href="#" class="profile-nav-link nav-item nav-link" data-resource="followers" data-url="/users/<%= username %>/followers">Followers: <span id="followersCount"><%= followersCount %></span></a></a>
    <a href="#" class="profile-nav-link nav-item nav-link" data-resource="following" data-url="/users/<%= username %>/following">Following: <span id="followingCount"><%= followingCount %></span></a></a>
  </div>

  <div id="profileContent"></div>
</div>

<%- include('../includes/footer') %>

router.js

// Add three endpoints to your file
router.get('/users/:username/posts', UserController.checkIfExists, UserController.sharedProfileData, UserController.getPosts)
router.get('/users/:username/followers', UserController.checkIfExists, UserController.sharedProfileData, UserController.getFollowers)
router.get('/users/:username/following', UserController.checkIfExists, UserController.sharedProfileData, UserController.getFollowing)

UserController.js

// Add three methods to your file
exports.getPosts = async (req, res) => {
  try {
    const posts = await Post.findByAuthorId(req.user._id)
    res.json(posts)
  } catch {
    res.json({ error: 'Something went wrong' })
  }
}

exports.getFollowers = async (req, res) => {
  try {
    const followers = await Follow.getFollowersById(req.user._id)
    res.json(followers)
  } catch {
    res.json({error: 'Something went wrong'})
  }
}

exports.getFollowing = async (req, res) => {
  try {
    const following = await Follow.getFollowingById(req.user._id)
    res.json(following)
  } catch {
    res.json({ error: 'Something went wrong' })
  }
}