frontend/15-promises/fetch/scripts/main.js

const endpointContainer = document.getElementById('endpoint-container');
const getEndpointsBtn = document.getElementById('get-endpoints-btn');
const resultContainer = document.getElementById('resultContainer');
const detailsContainer = document.getElementById('detailsContainer');

function getEndpoints() {
    fetch('https://swapi.co/api/')
        .then(function(response) {
            if (response.ok) {
                return response.json();
            }
            return Promise.reject('Oh ow');
            // throw new Error('Oh ow');
        })
        .then(function(jsonResponse) {
            addBtns(jsonResponse);
        })
        .catch(function(error) {
            console.log(error);
        });
}

function addBtns(response) {
    const btnHtml = Object.keys(response).reduce(function(html, responseKey) {
        return (
            html +
            '<button data-url="' +
            response[responseKey] +
            '">' +
            responseKey +
            '</button>'
        );
    }, '');

    endpointContainer.innerHTML = btnHtml;
}

function makeRequest(event) {
    if (event.target.matches('button')) {
        let btn = event.target;
        btn.disabled = true;
        let btnText = btn.innerHTML;
        btn.innerHTML = 'loading...';

        fetch(event.target.dataset.url)
            .then(function(response) {
                if (response.ok) {
                    return response.json();
                }
                return Promise.reject(new Error('Request failed'));
            })
            .then(function(jsonResponse) {
                btn.innerHTML = btnText;
                btn.disabled = false;
                console.log(jsonResponse);
                resultContainer.innerHTML = printElements(jsonResponse.results);
            })
            .catch(function(error) {
                console.log(event.target);
                btn.innerHTML = 'Dikke fail...';
                btn.disabled = false;
            });
    }
}

function printElements(list) {
    return list.reduce(function(html, listItem) {
        return `
        ${html}
        <article>
            <p>${listItem.name ? listItem.name : listItem.title} </p>
            <button data-url="${listItem.url}">Show details </button>
        </article>
        `;
    }, '');
}

function printDetails(list) {
    // let newString = '';
    // Object.keys(list).map(function(item) {
    //     newString += list[item] + ' ';
    // });
    // detailsContainer.innerHTML = newString;

    return Object.keys(list).reduce(function(html, detailKey) {
        debugger;
        return `
        ${html}
        <p>
        <strong>${detailKey}:</strong>
        ${details[detailKey]}
        </p>
        `;
    }, '');
}

function requestDetails(event) {
    if (event.target.matches('button')) {
        let btn = event.target;
        btn.disabled = true;
        let btnText = btn.innerHTML;
        btn.innerHTML = 'loading...';

        fetch(event.target.dataset.url)
            .then(function(response) {
                if (response.ok) {
                    return response.json();
                }
                return Promise.reject(new Error('Request failed'));
            })
            .then(function(jsonResponse) {
                btn.innerHTML = btnText;
                btn.disabled = false;
                detailsContainer.innerHTML = printDetails(jsonResponse);
            })
            .catch(function(error) {
                console.log(event.target);
                btn.innerHTML = 'Dikke fail...';
                btn.disabled = false;
            });
    }
}

getEndpointsBtn.addEventListener('click', getEndpoints);
endpointContainer.addEventListener('click', makeRequest);
resultContainer.addEventListener('click', requestDetails);