Code Organization

Hello eager developers. I want to take some time to talk about Code organization and how a well placed comment that describes your functions can really make a difference in readability of your code.

Take the example below for instance:

function fetchUser(userName) {
    fetch(`https://api.github.com/users/${userName}`, {
        method: "GET",
        header: {
            "Content-Type": "Application/json",
            Accept: "application/vnd.github.v3+json"
        }
    })
    .then(resp => resp.json())
    .then(data => addUser(data)) 

This function serves a primary purpose. Ask yourself what that purpose is and how can you organize this function with other functions? Well lets take a look at another function who's primary purpose is similar:

function fetchRepos(userName) {
    fetch(`https://api.github.com/users/${userName}/repos`)
    .then(resp => resp.json())
    .then(data => {
        console.log(data);
        addRepos(data)
    })
}

To put these functions into perspective the first function is taking in a userName and fetching a json object that matches that userName. The second function is doing the same but returning an object of repositories for the userName provided. This userName is provided by a <button></button>.

Now that we understand the functions a little better, how can we organize them together? Well their functions are both fetching data from an API. So lets group them with a comment "API fetch functions":

// API fetch functions

function fetchUser(userName) {
    fetch(`https://api.github.com/users/${userName}`, {
        method: "GET",
        header: {
            "Content-Type": "Application/json",
            Accept: "application/vnd.github.v3+json"
        }
    })
    .then(resp => resp.json())
    .then(data => addUser(data)) 
}

function fetchRepos(userName) {
    fetch(`https://api.github.com/users/${userName}/repos`)
    .then(resp => resp.json())
    .then(data => {
        console.log(data);
        addRepos(data)
    })
}

Now when I come back to this js file I can clearly see that these two functions are fetching data from the API and then sending that data to go do something. Instead of taking that data and doing something with it within the fetch functions it is better to send it off to another function that is organized under a different comment. See below:

// Dom Manipulation Functions

function addUser (userObj) {
    let userCard = document.createElement("li")
    let userContainer = document.querySelector("#user-list")
    userCard.id = userObj.login
    userCard.innerHTML = `
        <img src="${userObj.avatar_url}">
        <h4>UserName : ${userObj.login}</h4>
        <h5>Profile Link: ${userObj.html_url}</h5>
        <button class="${userObj.login}">Obtain Repos</button>
    `
    userContainer.appendChild(userCard)
    let userBtn = document.querySelector(`.${userObj.login}`)
    userBtn.addEventListener("click", handleBtn)
}

function addRepos(repoObj) {
    let repoArr=[...repoObj]
    repoArr.forEach((repo) => {
        let repoList = document.querySelector("#repos-list")
        let repoName = document.createElement("li")
        repoName.innerHTML = `${repo.name}`
        repoList.appendChild(repoName)
    })
}

This separation of responsibility for the functions allows us as developers to better describe a functions purpose. This way when an issue arises we can go back to our code and have an easier time pinpointing where that issue is coming from. This also helps with testing. If you know exactly which function is causing an issue a few well placed console.log() can really help solve the problem and verify that your return is what you think it will be.

And here is the full js file so you can see how organization really helps with readability.

document.addEventListener("DOMContentLoaded", () => {

document.querySelector("#github-form").addEventListener("submit", handleSubmit)


})

// Handle Event Functions
function handleSubmit(event) {
    event.preventDefault()
    let githubUserName = event.target.search.value
    fetchUser(githubUserName)
}

function handleBtn(event) {
    let btnClass = event.target.classList.value
    fetchRepos(btnClass)
}

// API fetch functions

function fetchUser(userName) {
    fetch(`https://api.github.com/users/${userName}`, {
        method: "GET",
        header: {
            "Content-Type": "Application/json",
            Accept: "application/vnd.github.v3+json"
        }
    })
    .then(resp => resp.json())
    .then(data => addUser(data)) 
}

function fetchRepos(userName) {
    fetch(`https://api.github.com/users/${userName}/repos`)
    .then(resp => resp.json())
    .then(data => {
        console.log(data);
        addRepos(data)
    })
}

// Dom Manipulation Functions

function addUser (userObj) {
    let userCard = document.createElement("li")
    let userContainer = document.querySelector("#user-list")
    userCard.id = userObj.login
    userCard.innerHTML = `
        <img src="${userObj.avatar_url}">
        <h4>UserName : ${userObj.login}</h4>
        <h5>Profile Link: ${userObj.html_url}</h5>
        <button class="${userObj.login}">Obtain Repos</button>
    `
    userContainer.appendChild(userCard)
    let userBtn = document.querySelector(`.${userObj.login}`)
    userBtn.addEventListener("click", handleBtn)
}

function addRepos(repoObj) {
    let repoArr=[...repoObj]
    repoArr.forEach((repo) => {
        let repoList = document.querySelector("#repos-list")
        let repoName = document.createElement("li")
        repoName.innerHTML = `${repo.name}`
        repoList.appendChild(repoName)
    })
}

Thank you! Have a great day!