task-web/assets/js/user.js

const url = "https://task-api.fstropii.com";
const localhostUrl = "http://localhost:8000";
const logoutBtn = document.querySelector('.nav-logout');
const changeEmailBtn = document.querySelector('#change-email-btn');
const addTaskBtn = document.querySelector('.add-task-button');

logoutBtn.addEventListener("click", function() {
  document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
  window.location.href = '/';
});

// modals

changeEmailBtn.addEventListener("click", function() {
  const emailModal = document.querySelector('.email-modal');
  const closeEmailModalBtn = document.querySelector('.close-email-modal');
  emailModal.classList.add('visible');

  closeEmailModalBtn.addEventListener("click", function() {
    emailModal.classList.remove("visible");
  });
});

addTaskBtn.addEventListener("click", function() {
  const taskModal = document.querySelector('.add-task-modal');
  const closeTaskModalBtn = document.querySelector('.close-task-modal');
  const submitTaskBtn = document.querySelector('.submit-add-task-btn');
  taskModal.classList.add('visible');

  closeTaskModalBtn.addEventListener('click', function() {
    taskModal.classList.remove("visible");
  });

  submitTaskBtn.addEventListener("click", function() {
    const taskName = document.querySelector('.add-task-modal-name-input').value;
    const taskDescription = document.querySelector('.add-task-modal-description-input').value;

    const newTaskPromise = newTask(taskName, taskDescription, token);
    newTaskPromise.then((res) => res.json()).then((json => {
      window.location.reload();
    }))
  })
});

// Check if the user is logged in
const getCookie = (returnType) => {
  let decodedCookie = decodeURIComponent(document.cookie);
  if (decodedCookie == "") {
    return;
  }

  let ca = decodedCookie.split(',');

  const token = ca[0].split("token=")[1];
  const type = ca[1].split("type=")[1];
  const expiresDay = ca[2].split("expires=")[1];
  const expiresDate = ca[3]
  const expires = `${expiresDay}${expiresDate}`
  
  if (returnType == "token") {
    return token;
  } else if (returnType == "type") {
    return type
  } else if (returnType == "expires") {
    return expires;
  }

  return null;
}

const token = getCookie("token");

if (token == undefined) {
  // no user
  window.location.href = '/';
}

const setTooltip = (type, message) => {
  tooltip.classList.add(type);
  tooltip.classList.add('visible');
  tooltip.innerText = message
  tooltip.style.display = "block";
}


// loading user tasks
const loadUserTasks = () => {
  const tasksPromise = getUserTasks(token);
  tasksPromise.then((res) => res.json()).then((json => {
    const tasks = json.tasks
    if (json.tasks == null) {
      return;
    }

    for (let i = 0; i < tasks.length; i++) {
      createTaskItem(tasks[i]['title'], tasks[i]['is_completed'], i);
    }

    const checkboxes = document.querySelectorAll('.checkbox');

    for (let j = 0; j < checkboxes.length; j++) {
      checkboxes[j].addEventListener("click", function() {
        setTooltip("info", `Updating task '${tasks[j]['title']}'`);
        const updateTaskPromise = updateTask(token, tasks[j]['title'], tasks[j]['description'], checkboxes[j].checked);
        updateTaskPromise.then((res => {
          setTooltip("success", `Task '${tasks[j]['title']}' updated!`);
        }));
      });
    }

    const userTasks = document.querySelectorAll('.user-task');
    for (let j = 0; j < userTasks.length; j++) {
      userTasks[j].addEventListener("click", function() {
        const taskTitle = tasks[j]['title'];
        const taskDescription = tasks[j]['description'];
        const taskCompletedStatus = tasks[j]['is_completed'];
        const taskModal = document.querySelector('.task-modal');
        const taskModalTitle = document.querySelector('.task-modal-title');
        const taskModalDescription = document.querySelector('.task-modal-description');
        const taskModalCompletedStatus = document.querySelector('.task-modal-completed-status');
        const closeTaskModal = document.querySelector('.close-edit-task-modal');
        taskModalTitle.innerHTML = taskTitle;
        taskModalDescription.placeholder = taskDescription;
        taskModalCompletedStatus.innerHTML = taskCompletedStatus ? "yes" : "no";
        taskModal.classList.add('visible');

        closeTaskModal.addEventListener("click", function() {
          taskModal.classList.remove('visible');
        });


      })
    }
  }));
}

const getUserTasks = (userToken) => {
  const res = fetch(`${url}/users/me`, {
    headers: {Authorization: `Bearer ${userToken}`}
  });

  return res;
}

const createTaskItem = (title, isCompleted, index) => {
  const userTasksDiv = document.querySelector('.user-tasks');
  const taskItemDiv = document.createElement('div');
  taskItemDiv.className = 'task-item';

  const taskCheckbox = document.createElement('input');
  taskCheckbox.className = `checkbox-${index} checkbox`;
  taskCheckbox.type = 'checkbox';

  if (isCompleted == true) {
    taskCheckbox.checked = true;
  }

  const taskLabel = document.createElement('li');
  taskLabel.innerHTML = title;
  taskLabel.className = `task-${index} user-task`;


  taskItemDiv.appendChild(taskCheckbox);
  taskItemDiv.appendChild(taskLabel);
  userTasksDiv.appendChild(taskItemDiv);
}

const updateTask = (userToken, taskTitle, taskDescription, completedStatus) => {
  const body = JSON.stringify({
    "title": taskTitle,
    "description": taskDescription,
    "is_completed": completedStatus
  });

  const res = fetch(`${url}/user/update-tasks`, {
    method: "PATCH",
    headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"},
    body: body
  });

  return res;
}

const newTask = (title, description, userToken) => {
  const res = fetch(`${url}/user/update-tasks`, {
    method: "PATCH",
    headers: {Authorization: `Bearer ${userToken}`, "Content-Type": "application/json"},
    body: JSON.stringify({
      "title": title,
      "description": description,
      "is_completed": false
    })
  });

  return res;
}

loadUserTasks();