08. Book Library

function attachEvents() {
  let url = 'http://localhost:3030/jsonstore/collections/books'
  let loadBtn = document.getElementById('loadBooks');
  let table = document.querySelector('table tbody');
  let form = document.getElementById('form');
  let submitBtn = document.querySelector('#form > button')

  loadBtn.addEventListener('click', loadAllBooks);
  submitBtn.addEventListener('click', createNewBook)

  let details = {};
  let idSearch = [];

  function loadAllBooks(e) {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        for (obj in data) {
          let author = data[obj]['author']
          let title = data[obj]['title']

          details[author] = obj;

          let newBookTr = document.createElement('tr');

          let authorTd = document.createElement('td');
          authorTd.textContent = author;

          let titleTd = document.createElement('td');
          titleTd.textContent = title;

          let btnsTd = document.createElement('td');
          let editBtn = document.createElement('button');
          editBtn.textContent = 'Edit';
          let deleteBtn = document.createElement('button');
          deleteBtn.textContent = 'Delete';
          btnsTd.appendChild(editBtn);
          btnsTd.appendChild(deleteBtn);

          newBookTr.appendChild(authorTd);
          newBookTr.appendChild(titleTd);
          newBookTr.appendChild(btnsTd);

          table.appendChild(newBookTr);

          editBtn.addEventListener('click', editBook);
          deleteBtn.addEventListener('click', deleteBook);

        }
      })

  }

  function editBook(event) {
    let data = event.currentTarget.parentNode.parentNode;
    let author = data.children[0].textContent;
    let title = data.children[1].textContent;
    idSearch.push(author, title)

    //FORM
    let h3 = document.createElement('h3');
    h3.textContent = 'Edit FORM';

    let titleLabel = document.createElement('label');
    titleLabel.textContent = 'TITLE';

    let inputTitle = document.createElement('input');
    inputTitle.setAttribute('type', 'text');
    inputTitle.setAttribute('name', 'title');
    inputTitle.value = title;

    let authorLabel = document.createElement('label');
    authorLabel.textContent = 'AUTHOR';

    let inputAuthor = document.createElement('input');
    inputAuthor.setAttribute('type', 'text');
    inputAuthor.setAttribute('name', 'author');
    inputAuthor.value = author;

    let saveBtn = document.createElement('button');
    saveBtn.textContent = 'SAVE'
    //ENDFORM
    form.innerHTML = ''
    form.appendChild(h3)
    form.appendChild(titleLabel)
    form.appendChild(inputTitle)
    form.appendChild(authorLabel)
    form.appendChild(inputAuthor)
    form.appendChild(saveBtn)

    saveBtn.addEventListener('click', function editBookInfo(event) {
      let changedTitle = form.children[2].value;
      let changedAuthor = form.children[4].value;
      let id = details[idSearch[0]];

      let putUrl = `http://localhost:3030/jsonstore/collections/books/${id}`
      fetch(putUrl, {
        method: "PUT",
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({
          'author': changedAuthor,
          'title': changedTitle
        })
      })
      document.location.reload()

    })

  }

  function deleteBook(event) {
    let currentAuthor = event.target.parentNode.parentNode.children[0].textContent;
    let id = details[currentAuthor];

    let delUrl = `http://localhost:3030/jsonstore/collections/books/${id}`
    fetch(delUrl, {
      method: "DELETE",
      headers: {
        'content-type': 'application/json'
      },
    })
    document.location.reload()
  }


  function createNewBook(e) {
    let title = e.target.parentNode.children[2].value
    let author = e.target.parentNode.children[4].value
    if (title === '' || author === '') {
      return;
    }
    let putUrl = `http://localhost:3030/jsonstore/collections/books/`
    fetch(putUrl, {
      method: "POST",
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        'author': author,
        'title': title
      })
    })
    document.location.reload()

  }

}

attachEvents();