feat: refactors and finished navbar component

todo/src/components/navbar.js

@@ -30,11 +30,11 @@ function projectButtons(projects) {
             
             
             if (e.name === 'default') {
-                iTag.classList.add('fas', 'fa-home');
+                iTag.classList.add('fas', 'fa-home', 'itag');
             } else {
                 let closeSpan = document.createElement('span');
                 let closeITag = document.createElement('i')
-                iTag.classList.add('fas', 'fa-tasks');
+                iTag.classList.add('fas', 'fa-tasks', 'itag');
                 closeITag.classList.add('fa', 'fa-trash');
                 closeSpan.classList.add('project-delete-btn');
                 closeSpan.appendChild(closeITag);
@@ -56,9 +56,14 @@ function projectButtons(projects) {
 }
 
 function addProject() {
-    let btn = document.createElement('button');
+    const btn = document.createElement('button');
+    const iTag = document.createElement('i');
+    const span = document.createElement('span');
+    iTag.classList.add('fas', 'fa-plus', 'itag');
     btn.classList.add('btn','add-project-btn');
-    btn.textContent = 'New Project';
+    span.textContent = 'New Project';
+    btn.appendChild(iTag);
+    btn.appendChild(span);
     return btn;
 
 }

todo/src/components/todo.js

@@ -1,5 +1,5 @@
 function createTodo(title, description, dueDate, pomodoros) {
-    let _todo = {
+    const newTodo = {
         title: title,
         description: description,
         dueDate: dueDate,
@@ -7,7 +7,7 @@ function createTodo(title, description, dueDate, pomodoros) {
         completed: false
     }
 
-    return _todo;
+    return newTodo;
 }
 
 function createProject(name) {
@@ -107,17 +107,3 @@ class todoHandler {
 }
 
 export {  todoHandler };
-
-
-
-// let todos = todoHandler();
-// todos.addTodo('default', 'test', 'some stuff', 'today', 5);
-// todos.addProject('chores');
-// todos.addTodo('default', 'test default 2', 'some stuff', 'today', 5);
-// todos.addTodo('chores', 'choretest', 'some stuff', 'today', 5);
-// console.log(todos.getTodos());
-// todos.delProject('de');
-// todos.editTodo('default', 'test', 'stuffing', 'tomorrow', 4);
-// console.log(todos.getTodos());
-// todos.deleteTodo('chores', 'choretest');
-// console.log(todos.getTodos());

todo/src/components/todoComponent.js

@@ -1,4 +1,4 @@
-import { updateDisplay } from "..";
+import { setActiveProject, updateDisplay } from "..";
 import { save } from "./storage";
 
 function todoTableComponent(todos) {
@@ -91,14 +91,38 @@ function deleteProject(proj) {
 
     deleteButtons.forEach(e => {
         e.addEventListener('click', element => {
+            // prevent this click from bubbling into button clicks
+            element.stopPropagation();
             let projectName = element.target.parentNode.parentNode.dataset.projectName; 
             proj.delProject(projectName);
+            setActiveProject('default');
             save(proj.getEverything());
+            // Always load default project after deleting 
             updateDisplay();
             });
     });
 
 }
 
+function getTodoFromActiveProject() {
+    const projectBtns = document.querySelectorAll('.project-btn');
+    let projectName;
 
-export { projectComponent, todoTableComponent, addProject, deleteProject };
+    const setProjectName = name => { 
+        projectName = name.target.closest('.project-btn').dataset.projectName; 
+        
+        if (projectName) {
+            setActiveProject(projectName);
+            updateDisplay();
+        } else {
+            return;
+        }         
+    };
+
+    if (projectBtns) {
+        projectBtns.forEach(btn => btn.addEventListener('click', setProjectName));
+    }
+}
+
+
+export { getTodoFromActiveProject, projectComponent, todoTableComponent, addProject, deleteProject };

todo/src/index.js

@@ -1,27 +1,18 @@
-import { addProject, deleteProject, projectComponent, todoTableComponent } from "./components/todoComponent";
+import { addProject, deleteProject, projectComponent, todoTableComponent, getTodoFromActiveProject } from "./components/todoComponent";
 import { navbar } from "./components/navbar";
-import { todoHandler } from "./components/todo";
+import { todoHandler as todoManager } from "./components/todo";
 import { save, load } from "./components/storage";
 import './style.css';
 
-let todos; 
-let data = load();
+const data = load();
+let todos = data ? new todoManager(JSON.parse(data)) : new todoManager();
 
-// if there's local data save it in the array 
-if (data) {
-    let jsonData = JSON.parse(data);
-    todos = new todoHandler(jsonData);
-} else {
-    todos = new todoHandler();
+let activeProject;
+
+function setActiveProject(value) {
+   activeProject = value; 
 }
 
-let selectedProject = todos.getTodosFromProject('default');
-console.table(todos.getEverything());
-// starter test data to remove
-// todos.addProject('job');
-// todos.addTodo('default', 'test default 3', 'some stuff', 'today', 5);
-// todos.addTodo('job', 'default 5', 'some stuff', 'today', 5);
-
 function fontAwesome() {
     let script = document.createElement('script');
     script.src = 'https://kit.fontawesome.com/24f16b96cf.js';
@@ -34,7 +25,6 @@ function website() {
     const div = document.createElement('div');
     div.classList.add('container');
     document.body.appendChild(div);
-    
     updateDisplay();
 }
 
@@ -44,16 +34,19 @@ function updateDisplay() {
    
     // ensure grabbing latest projects
     let projects = todos.getProjects(); 
+    let currentActiveProject = activeProject || 'default';
+    let todosToRender = todos.getTodosFromProject(currentActiveProject);
 
     const _navbar = navbar(projects);
-    const _todos = todoTableComponent(selectedProject);
     const _addProject = projectComponent();
+    const _todos = todoTableComponent(todosToRender);
 
     _navbar.appendChild(_addProject);
     div.appendChild(_navbar);
     div.appendChild(_todos);
 
     document.body.appendChild(div);
+    getTodoFromActiveProject();
     addProject(todos);
     deleteProject(todos);
 }
@@ -62,4 +55,4 @@ fontAwesome();
 website();
 save(todos.getEverything());
 
-export { updateDisplay };
+export { setActiveProject, updateDisplay };

todo/src/style.css

@@ -11,6 +11,10 @@ html {
     line-height: 1.5;
 }
 
+table {
+    width: 100%;
+}
+
 button {
     padding: 10px 20px;
     margin: 10px;
@@ -82,3 +86,13 @@ button {
     width: 100%;
     margin: 10px 0;
 }
+
+.itag {
+    float: left;
+}
+
+/* TODOS */
+
+.todos {
+    flex: 1;
+}