08. Book Library - HTTP and REST - Exercises

// 08. Book Library
// HTTP and REST - Exercises
// https://judge.softuni.org/Contests/Compete/Index/3798#7

function attachEvents() {
  const baseUrl = `http://localhost:3030/jsonstore/collections/books/`;
  const loadAllBtn = document.getElementById('loadBooks');
  const tbodyElement = document.querySelector('body > table > tbody');

  const inputsElements = document.querySelectorAll('input');
  const titleInputElement = inputsElements[0];
  const authorInputElement = inputsElements[1];
  const submitBtn = document.querySelector('#form button');
  const formElement = document.getElementById('form');

  submitBtn.addEventListener('click', addBook)
  loadAllBtn.addEventListener('click', loadAllBooks);

  // Load All books!
  function loadAllBooks(event) {
    event?.preventDefault();
    tbodyElement.innerHTML = '';
    fetch(baseUrl)
      .then(res => res.json())
      .then(data => {
        for (let index in data) {
          let title = data[index]['title'];
          let author = data[index]['author'];
          let id = index;

          let newTr = document.createElement('tr');
          newTr.id = id;
          newTr.innerHTML = `
          <td>${title}</td>
          <td>${author}</td>
          <td>
            <button>Edit</button>
            <button>Delete</button>
          </td>`
          tbodyElement.appendChild(newTr);
        }
      }).then(() => {
        Array.from(tbodyElement.querySelectorAll('button')).forEach(btn => {
          if (btn.textContent == 'Edit') {
            btn.addEventListener('click', editBook);
          } else {
            btn.addEventListener('click', deleteBook);
          }
        })
      }

      )
  }

  // Add book!
  function addBook(e) {
    if (!titleInputElement.value || !authorInputElement.value) {
      alert('Missing information!')
      return;
    }
    let bookObj = {
      author: authorInputElement.value,
      title: titleInputElement.value,
    }

    const headers = {
      method: 'POST',
      body: JSON.stringify(bookObj),
    }

    fetch(baseUrl, headers)
      .then(() => loadAllBooks())
      .then(() => titleInputElement.value = '',
        authorInputElement.value = '');
  }

  //Edit book.
  function editBook(e) {
    let book = e.target.parentNode.parentNode;
    let id = book.id;
    let title = book.children[0].textContent;
    let author = book.children[1].textContent;
    titleInputElement.value = title;
    authorInputElement.value = author;

    formElement.children[0].textContent = 'Edit FORM';
    submitBtn.removeEventListener('click', addBook)
    submitBtn.textContent = 'Save';

    // Update book -> Innner function to use the ID!
    submitBtn.addEventListener('click', function updateBook() {
      let putUrl = baseUrl + `${id}`;
      let editedBookObj = {
        "author": authorInputElement.value,
        "title": titleInputElement.value,
      }
      const headers = { method: 'PUT', body: JSON.stringify(editedBookObj) };

      fetch(putUrl, headers)
        .then(() => loadAllBooks(),
          titleInputElement.value = '',
          authorInputElement.value = '',
          formElement.children[0].textContent = 'FORM',
          submitBtn.removeEventListener('click', updateBook),
          submitBtn.addEventListener('click', addBook),
        );

    });

  }

  // Delete book.
  function deleteBook(e) {
    const id = e.target.parentNode.parentNode.id;
    const delUrl = baseUrl + `${id}`;
    const headers = { method: 'DELETE' };

    fetch(delUrl, headers)
      .then(() => loadAllBooks());
  }

}

attachEvents();