refactor(FINAL): TODO: REVERT TO OLD COMMIT TO FIX TAG BUG

src/components/navbar.ts

@@ -1,4 +1,4 @@
-import { createElement } from "@utils";
+import { createElement, generateLine } from "@utils";
 import hamburger from "@assets/hamburger.svg";
 import logo from "@assets/logo.svg";
 import clients from "@assets/clients.svg";
@@ -21,15 +21,16 @@ export const generateNavbar = () => {
 
   const rightDiv = createElement("div", { class: ["nav__right"] });
 
-  const workspaceP = createElement("p", { class: ["nav__user-workspace"] }, "19-uca-004's workspace");
+  const workspaceUser = createElement("p", { class: ["nav__user-workspace"] }, "19-uca-004's workspace");
   const upgradeLink = createElement("a", { class: ["nav__btn-upgrade"] }, "upgrade");
 
-  rightDiv.appendChild(workspaceP);
+  rightDiv.appendChild(workspaceUser);
   rightDiv.appendChild(upgradeLink);
 
-  const lineDiv1 = createElement("div", { class: ["nav__line"] });
-  const lineDiv2 = createElement("div", { class: ["nav__line"] });
-  const lineDiv3 = createElement("div", { class: ["nav__line"] });
+  const lineDiv1 = generateLine();
+  const lineDiv2 = generateLine();
+  const lineDiv3 = generateLine();
+
   const helpDiv = createElement("a", { href: "#", class: ["nav__help"] });
   const helpImg = createElement("img", { src: help, alt: "Clockify" });
   const notificationLink = createElement("a", { href: "#", class: ["nav__notification"] });

src/components/projectPicker/projectPicker.ts

@@ -14,7 +14,10 @@ export const initializeProjectPicker = (textElement: HTMLElement, ID?: number) =
   entryToBeModifiedID = ID;
 
   newProjectButton.addEventListener("click", () => {
-    if(Store.projectFilter==='') return generateToast(`Type something first to create a new project`, false);
+    if (Store.projectFilter === "") {
+      return generateToast(`Type something first to create a new project`, false);
+    }
+
     __updateProjectStatus(textToBeModified);
     generateToast(`Project ${Store.activeProject} was created successfully.`, true);
   });
@@ -60,7 +63,7 @@ export const renderProjectList = () => {
 
   // Loop through all the projects and attach them to the list.
   if (filteredProjects.length > 0) {
-    filteredProjects.map((name: string) => {
+    filteredProjects.forEach((name: string) => {
       projectList.append(createElement("li", { class: ["project-picker__list--link"] }, name));
     });
   }
@@ -73,6 +76,7 @@ export const renderProjectList = () => {
 
     Store.activeProject = target.textContent ?? "DEV messed up 😬";
     Store.projectFilter = "";
+
     __updateProjectStatus(textToBeModified, false);
     generateToast(`Project ${Store.activeProject} is selected.`, true);
   });

src/components/recorder/generateRecorder.ts

@@ -2,7 +2,7 @@ import clockIcon from "@assets/clock-blue.svg";
 import listIcon from "@assets/list-blue.svg";
 import tagGray from "@assets/tag-gray.svg";
 
-import { createElement, createProjectPlusIcon } from "@utils";
+import { createElement, createProjectPlusIcon, generateLine } from "@utils";
 
 export const generateTimeTrackerRecorder = () => {
   const timerTracker = createElement("div", {
@@ -30,12 +30,12 @@ export const generateTimeTrackerRecorder = () => {
   projectBtn.insertBefore(projectBtnText, projectBtn.nextSibling);
   //
   //
-  const line1 = createElement("div", { class: ["line"] });
-  const line2 = createElement("div", { class: ["line"] });
-  const line3 = createElement("div", { class: ["line"] });
+  const line1 = generateLine();
+  const line2 = generateLine();
+  const line3 = generateLine();
   //
   //
-  const tagImg = createElement("img", { src: tagGray, alt: "" });
+  const tagImg = createElement("img", { src: tagGray, alt: "Tag Button" });
   const tagBtn = createElement("button", { class: ["timetracker-recorder__tags-button"] });
   tagBtn.appendChild(tagImg);
   //
@@ -59,7 +59,6 @@ export const generateTimeTrackerRecorder = () => {
   //
   //
   //
-
   const toggleMode = createElement("div", { class: ["timetracker-recorder__togglemode"] });
   toggleMode.append(generateToggleMode());
 

src/components/recorder/helper_PROJECT.ts

@@ -14,9 +14,6 @@ export const removeProjectPicker = (): void => {
 
 export const handlePPClick = (e: MouseEvent, text: HTMLElement, id?: number) => {
   const ex = $("project-picker");
-
-  // if (ex) document.body.style.background = "pink";
-
   const target = e.target as HTMLElement;
 
   if (target.offsetParent?.contains(ex)) return ex.remove();
@@ -56,8 +53,6 @@ export const handlePPBlur = (e: FocusEvent) => {
   const isChild = (e.currentTarget as HTMLButtonElement).contains(e.relatedTarget as Node);
   if (isChild) return;
 
-  // console.log("Running Blur");
-
   const picker = $("project-picker");
 
   if (picker) {

src/components/recorder/helper_STOPWATCH.ts

@@ -34,7 +34,7 @@ export const findTimeElapsed = () => {
   const hrs2secs = Store.timer[0] * 3600;
   const mins2secs = Store.timer[1] * 60;
   const secs = Store.timer[2];
-  return (hrs2secs + mins2secs + secs) * 1000; // ms
+  return (hrs2secs + mins2secs + secs) * 1000; // total ms
 };
 
 const startStopwatch = (start: number) => {
@@ -62,8 +62,6 @@ export const handleStopwatch = () => {
   const start = performance.now();
   const X = $("timetracker-recorder__togglemode");
 
-  // if (Store.isTimerStarted && Store.activeProject === "") return;
-
   Store.isTimerStarted = !Store.isTimerStarted;
 
   // If timer is started and running...
@@ -78,8 +76,7 @@ export const handleStopwatch = () => {
 
   // If timer is stopped...
   if (!Store.isTimerStarted) {
-    // console.log("123456", Store.activeProject);
-
+    //
     if (!Store.activeProject) {
       Store.isTimerStarted = !Store.isTimerStarted;
       generateToast("Project name is empty", false);

src/components/recorder/helper_TAG.ts

@@ -5,13 +5,11 @@ import { generateTagPicker, initializeTagFilter, renderTag_BLUE, renderTagList }
 
 export const handleTPClick = (e: MouseEvent, id?: number) => {
   const ex = $("tag__picker");
-
   const target = e.target as HTMLElement;
   const { firstChild } = e.currentTarget as Node;
 
   const entryTags = firstChild?.nodeName === "IMG" ? [] : firstChild?.textContent?.split(", ");
   Store.activeTags = entryTags ?? [];
-  // console.log(Store.activeTags);
 
   if (target.offsetParent?.contains(ex)) return ex.remove();
 
@@ -25,12 +23,15 @@ export const handleTPClick = (e: MouseEvent, id?: number) => {
   (e.currentTarget as HTMLElement).append(picker);
   initializeTagFilter(e.currentTarget as HTMLElement, id);
   renderTagList();
+
   const tagInput = $("tag__picker__input") as HTMLInputElement;
   // FIX:
   // tagInput.focus();
 
   picker.addEventListener("click", stopPropagation);
   picker.addEventListener("keyup", stopSpacePropagation);
+
+  // FIX:
   e.stopPropagation();
   document.addEventListener("click", removeTagPicker);
 };
@@ -39,8 +40,6 @@ export const handleTPBlur = (e: FocusEvent) => {
   const isChild = (e.currentTarget as HTMLButtonElement).contains(e.relatedTarget as Node);
   if (isChild) return;
 
-  // console.log("TP BLURRRR");
-
   removeTagPicker();
 };
 

src/components/sidebar.ts

@@ -22,6 +22,7 @@ const generateText = (text: string) => createElement("span", { class: ["sidebar_
 // Generate a new sideBar.
 export const generateSidebar = (data: ISidebarLinks[]) => {
   const sidebar = createElement("div", { class: ["sidebar", "open"] });
+
   data.forEach(({ title, name, img, subLinks }) => {
     if (title) {
       const sidebarlinkTitle = generateTitle(title);

src/components/toast.ts

@@ -25,10 +25,11 @@ export const generateToast = (msg: string, success: boolean) => {
 
   const container = $("toast-container")!;
   container.insertBefore(toast, container.firstChild);
-  console.log("toast generated");
 
+  // Fade-in Animation.
   toast.classList.add("fadeInUpBig");
 
+  // Fade-out animation
   setTimeout(() => {
     toast?.classList.add("fadeOutDownBig");
     Promise.all(toast.getAnimations().map((animation) => animation.finished)).then(() => toast?.remove());

src/components/tracker-entry/generateCard.ts

@@ -6,8 +6,8 @@ import {
   createElement,
   groupByDate,
   groupByWeek,
-  findFirstDayOfWeek,
-  findLastDayOfWeek,
+  findMonday,
+  findSunday,
   saveToLocalStorage,
 } from "@utils";
 
@@ -30,71 +30,81 @@ export const renderEntries = () => {
   // console.table(Store.entries);
   // console.log("=============SORTED================");
 
-  const data = groupByDate(Store.entries); //o(n)
+  const entriesByDate = groupByDate(Store.entries); //o(n)
   // console.table(data);
   // console.log("==============GROUP BY DATE==================");
 
-  const test = groupByWeek(data); //o(n)
-  console.table(test);
+  const entriesByWeek = groupByWeek(entriesByDate); //o(n)
+  // console.table(test);
   // console.log("===============GROUP BY WEEK=============");
 
-  console.time("Loop");
+  // just for perf calculation sake
   let totalLoop = 0;
-  for (const [weekDate, weekEntry] of Object.entries(test)) {
-    //o()n3
+  console.time("Loop");
+
+  for (const [weekDate, weekEntry] of Object.entries(entriesByWeek)) {
+    //o(n^3)
     totalLoop++;
     const [weekCard, totalWeekTime] = generateWeekCard(weekDate);
-    const superAdd = [];
+    const totalTimeConsumed__WEEK = [];
 
     //  @ts-ignore
     for (const [cardDate, cardEntry] of weekEntry) {
       totalLoop++;
       const [entryCard, totalDayTime] = generateCard(cardDate);
 
-      const add: string[][] = [];
+      const totalTimeConsumed__DAY: number[][] = [];
+
       for (const iterator of cardEntry) {
         totalLoop++;
-        const [asdf, stopwatch] = generateTrackerEntry(iterator);
-        entryCard.append(asdf);
+
+        const [entry, stopwatch, _effort] = generateTrackerEntry(iterator);
+        entryCard.append(entry);
         const stopWatchTextContent = (stopwatch as HTMLInputElement)!.value!.split(":");
-        // console.log(stopWatchTextContent);
+        console.log(stopWatchTextContent);
 
-        add.push(stopWatchTextContent);
+        totalTimeConsumed__DAY.push(_effort);
       }
       // FIX: Converting string to number, instead we can use actualEffort returned from the entry.
-      const convertedArray = add.map((arr) => arr.map(Number));
+      const convertedArray = totalTimeConsumed__DAY.map((arr) => arr.map(Number));
 
       // Total time for all the entries on a particular date.
-      const a = convertedArray.reduce((prev, curr) => {
+      const totalHours__1DAY = convertedArray.reduce((prev, curr) => {
         prev[0] += curr[0];
         prev[1] += curr[1];
         prev[2] += curr[2];
         return prev;
       });
 
-      roundOffTime(a);
+      roundOffTime(totalHours__1DAY);
 
-      totalDayTime.textContent = a.map((e) => e.toString().padStart(2, "0")).join(":");
-      superAdd.push(a);
+      const totalHours__1DAY__2String = totalHours__1DAY.map((e) => e.toString().padStart(2, "0"));
+
+      totalDayTime.textContent = totalHours__1DAY__2String.join(":");
+      totalTimeConsumed__WEEK.push(totalHours__1DAY);
 
       weekCard.append(entryCard);
     }
 
-    const b = superAdd.reduce((prev, curr) => {
+    const totalHours__7DAYS = totalTimeConsumed__WEEK.reduce((prev, curr) => {
       prev[0] += curr[0];
       prev[1] += curr[1];
       prev[2] += curr[2];
       return prev;
     });
 
-    roundOffTime(b);
+    roundOffTime(totalHours__7DAYS);
+
+    const totalHours__7DAYS__2String = totalHours__7DAYS.map((e) => e.toString().padStart(2, "0"));
 
-    totalWeekTime.textContent = b.map((e) => e.toString().padStart(2, "0")).join(":");
+    totalWeekTime.textContent = totalHours__7DAYS__2String.join(":");
 
     $("main").append(weekCard);
   }
+
   console.log(`Total Loop:${totalLoop}`);
   console.timeEnd("Loop");
+
   saveToLocalStorage();
 };
 
@@ -130,8 +140,8 @@ function generateWeekCard(date: string) {
   const currentYear = new Date().getFullYear();
   const entryYear = new Date(date).getFullYear();
 
-  const firstDate = findFirstDayOfWeek(date).toDateString().slice(4, 10);
-  const lastDate = findLastDayOfWeek(date).toDateString().slice(4, 10);
+  const firstDate = findMonday(date).toDateString().slice(4, 10);
+  const lastDate = findSunday(date).toDateString().slice(4, 10);
 
   let weekString = `${firstDate} - ${lastDate}, ${entryYear}`;
 

src/components/tracker-entry/generators.ts

@@ -3,17 +3,17 @@ import calendarGray from "@assets/calendar-gray.svg";
 import playButton from "@assets/play.svg";
 import menuDots from "@assets/menu-dots-vertical.svg";
 
-import { createElement } from "@utils";
+import { createElement, generateLine } from "@utils";
 
-export const generateInput = (description: string) => {
+export const generateInput = (description: string):[HTMLDivElement, HTMLInputElement] => {
   const div = createElement("div", { class: ["input-wrapper"] });
 
   const inputLabel = createElement("label", { class: ["tracker-entry__input-sizer"] });
   const input = createElement("input", {
     class: ["tracker-entry__input"],
     contenteditable: true,
     placeholder: "Add Description",
-  }) as HTMLInputElement;
+  });
 
   inputLabel.append(input);
 
@@ -144,4 +144,3 @@ export const generateStopwatch = (time: number[]) => {
   return stopwatch;
 };
 
-export const generateLine = () => createElement("div", { class: ["line"] });

src/components/tracker-entry/handlers.ts

@@ -135,6 +135,7 @@ export const updateEntryTimeStart = (
 
   _stopwatch.textContent = totalTime;
   entry.actualEffort = [hours, minutes, seconds];
+  // FIX: Quick hack, ideally you don't want to re-render everything. On a side note, it seems impossible to avoid re-rendering the entire entries. Reason: Need to sort and group entries.
   renderEntries();
 };
 
@@ -172,6 +173,7 @@ export const updateEntryTimeEnd = (
 
   _stopwatch.textContent = totalTime;
   entry.actualEffort = [hours, minutes, seconds];
+  // FIX: Quick hack, ideally you don't want to re-render everything. On a side note, it seems impossible to avoid re-rendering the entire entries. Reason: Need to sort and group entries.
   renderEntries();
 };
 
@@ -186,6 +188,6 @@ export const handleDateChange = (e: Event, id: number) => {
   let entryDate2String_modifer = value;
   if (value.slice(12) === currentYear) entryDate2String_modifer = value.slice(0, 12);
 
-  // FIX: Quick hack, ideally you don't want to re-render everything. On a side note, it seems impossible to avoid re-rendering the entire entries. Reason: Need to sort and group entries.s
+  // FIX: Quick hack, ideally you don't want to re-render everything. On a side note, it seems impossible to avoid re-rendering the entire entries. Reason: Need to sort and group entries.
   renderEntries();
 };

src/components/tracker-entry/helpers_OTHERS.ts

@@ -141,7 +141,6 @@ export function removeModal() {
   document.removeEventListener("keydown", focusModal);
 }
 
-// TODO: Add more logic... Actual deletion requires ID to be passed along.
 const deleteEntry = (id: number) => {
   removeModal();
 

src/components/tracker-entry/index.ts

@@ -2,8 +2,8 @@ import { Store, subscribe } from "@store";
 import { generateTrackerEntry } from "./trackerEntry";
 import { renderEntries } from "./generateCard";
 
-// subscribe(Store.entries, () => {
-//   renderEntries();
-// });
+subscribe(Store.entries, () => {
+  renderEntries();
+});
 
 export { generateTrackerEntry, renderEntries };