Full user task loading in user page v0.0.8

assets/js/sign-in.js

@@ -20,11 +20,6 @@ const setTooltip = (type, message) => {
   tooltip.style.display = "block";
 }
 
-const removeTooltip = () => {
-  tooltip.classList.remove('visible');
-  tooltip.style.display = "none";
-}
-
 const signIn = async (username, password) => {
   const res = fetch(`${url}/user/login`, {
     method: "POST",

assets/js/user.js

@@ -1,3 +1,6 @@
+const url = "https://task-api.fstropii.com";
+const localhostUrl = "http://localhost:8000";
+
 // Check if the user is logged in
 const getCookie = (returnType) => {
   let decodedCookie = decodeURIComponent(document.cookie);
@@ -31,4 +34,91 @@ if (token == undefined) {
   window.location.href = '/';
 }
 
-console.log('user token');
+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++) {
+      const taskItemDiv = document.createElement('div');
+      taskItemDiv.className = 'task-item';
+
+      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 getUserTasks = (userToken) => {
+  const res = fetch(`${localhostUrl}/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}`;
+
+
+  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
+  });
+
+  console.log(body);
+  console.log(taskDescription);
+  const res = fetch(`${localhostUrl}/user/update-tasks`, {
+    method: "PATCH",
+    headers: {Authorization: `Bearer ${userToken}`, "Content-type": "application/json"},
+    body: body
+  });
+
+  return res;
+}
+
+loadUserTasks();

assets/pages/user.html

@@ -27,19 +27,10 @@
         </div>
         <div class="right-grid">
           <h2>User Tasks</h2>
-
+          <div id='tooltip' class="tooltip" style="display: none;"></div>
           <div class="user-tasks">
-            <div class="task-item">
-              <input type="checkbox" />
-              <li>Do Work</li>
-            </div>
-            <div class="task-item">
-              <input type="checkbox" />
-              <li>Finish API</li>
-            </div>
-
-            <button id="add-task-button" class="add-task-button">Add a task</button>
           </div>
+          <button id="add-task-button" class="add-task-button">Add a task</button>
         </div>
       </div>
     </section>