blog

async function attachEvents() {

    const endPoints = {
        posts: 'http://localhost:3030/jsonstore/blog/posts',
        comments: 'http://localhost:3030/jsonstore/blog/comments'
    }
    const elUl = document.getElementById('post-comments');
    const elP = document.getElementById('post-body');
    const elH1 = document.getElementById('post-title');
    const selectMenu = document.getElementById('posts');
    const loadBtn = document.getElementById('btnLoadPosts');
    loadBtn.addEventListener('click', load);
    const viewBtn = document.getElementById('btnViewPost');
    viewBtn.addEventListener('click', view);
    let data;

    async function load(event) {
        let loadResponse = await fetch(endPoints.posts);
        let dataPosts = await loadResponse.json();
        data = dataPosts;

        for (let el of Object.values(dataPosts)) {
            let title = '';
            for (let i = 0; i < el.title.length; i++) {
                title += el.title[i];
            }
            let elOption = document.createElement('option');
            elOption.value = `${el.id}`;
            elOption.textContent = title;
            selectMenu.appendChild(elOption);
        }
    }

    async function view(event) {
        let viewData = await getPatch(endPoints.comments)

            elUl.innerHTML = '';
        let selectedPost = selectMenu.value;
       let text=selectMenu.options[selectMenu.selectedIndex].text


        let post=Object.values(data).find(el=>el.title===text)
        let comments=Object.values(viewData).filter(c=>c.postId===selectedPost)

        elH1.textContent =text;
        elP.textContent = post.body;
        for (const el of comments) {
                let elLi = document.createElement('li');
                elLi.setAttribute('id', `${el.id}`);
                elLi.textContent = el.text;
                elUl.appendChild(elLi);
        }
    }

}

async function getPatch(url){
    const response= await fetch(url)
    return response.json()
}
attachEvents();