feat(ENTRY): Group entries and render them

Not performant, replacing children every render is expensive.❌
Bonitoflakes · May 5, 2023 · 87b8921 · 87b8921
1 parent a7059c4
commit 87b8921
Show file tree

Hide file tree

Showing 11 changed files with 296 additions and 134 deletions.
diff --git a/src/components/recorder/helper_OTHERS.ts b/src/components/recorder/helper_OTHERS.ts
@@ -51,7 +51,7 @@ export const saveEntry = () => {
   // console.log(startTime);
   // console.log(endTime);
 
-  const date = convertDateToString(new Date());
+  const date = new Date().toISOString().slice(0, 10);
 
   // If all looks good, save the entry.
   Store.entries.push({

diff --git a/src/components/recorder/helper_STOPWATCH.ts b/src/components/recorder/helper_STOPWATCH.ts
@@ -2,6 +2,7 @@ import { Store } from "@store";
 import { $, createElement } from "@utils";
 import { discardEntry, resetStartButton, saveEntry } from "./helper_OTHERS";
 import { generateToast } from "@components";
+import { renderEntries } from "../../main";
 
 let timerID: NodeJS.Timeout;
 
@@ -89,5 +90,7 @@ export const handleStopwatch = () => {
     X.removeEventListener("click", wrapper);
     clearTimeout(timerID);
     saveEntry();
+    renderEntries();
+
   }
 };
diff --git a/src/components/tracker-entry/helpers.ts b/src/components/tracker-entry/helpers.ts
@@ -103,7 +103,12 @@ export const generateDate = (date: string, startDate: number, endDate: number) =
     type: "date",
     class: ["native-date-picker"],
   }) as HTMLInputElement;
-  dateInput.value = date;
+
+  const a = new Date(date).toISOString().slice(0, 10);
+  console.log(a);
+
+  dateInput.value = a;
+
   const dateButton = createElement("button", { class: ["timetracker-recorder__date-button"] });
   dateButton.append(dateImg, dateInput);
 

diff --git a/src/components/tracker-entry/helpers_OTHERS.ts b/src/components/tracker-entry/helpers_OTHERS.ts
@@ -2,6 +2,7 @@ import { generateToast } from "@components";
 import { Store } from "@store";
 import { $, createElement } from "@utils";
 import closeWhite from "@assets/close-white.svg";
+import { renderEntries } from "../../main";
 
 export const handleTimeArrowKeys = (e: KeyboardEvent) => {
   const input = e.currentTarget as HTMLInputElement;
@@ -156,6 +157,7 @@ const deleteEntry = (id: number) => {
     Store.entries.findIndex((entry) => entry.id === id),
     1
   );
+  renderEntries()
 
   generateToast("Entry deleted successfully.", true);
 };
diff --git a/src/components/tracker-entry/index.ts b/src/components/tracker-entry/index.ts
@@ -1,17 +1,9 @@
 import { Store, subscribe } from "@store";
 import { generateTrackerEntry } from "./trackerEntry";
+import { renderEntries } from "../../main";
 
-subscribe(Store.entries, () => {
-  const compareDate = (a: IEntry, b: IEntry) => {
-    const aa = Date.parse(a.date);
-    const bb = Date.parse(b.date);
-
-    return bb - aa;
-  };
-
-  Store.entries.sort(compareDate);
-
-  generateTrackerEntry();
-});
+// subscribe(Store.entries, () => {
+//   renderEntries();
+// });
 
 export { generateTrackerEntry };
diff --git a/src/components/tracker-entry/trackerEntry.ts b/src/components/tracker-entry/trackerEntry.ts
@@ -1,6 +1,5 @@
-import { Store, subscribe } from "@store";
+import { Store } from "@store";
 import { $, $$, createCircle, createElement } from "@utils";
-import bulkEdit from "@assets/bulk-edit.svg";
 
 import {
   generateBill,
@@ -25,88 +24,111 @@ import {
 } from "./helpers_OTHERS";
 import { generateToast } from "../toast";
 import { convertDateToString } from "../recorder/helper_OTHERS";
+import { renderEntries } from "../../main";
+
+export const generateTrackerEntry = ({
+  id,
+  description,
+  actualEffort,
+  billable,
+  projectName,
+  tags,
+  startTime: st,
+  endTime: et,
+  date,
+}: IEntry) => {
+  const projectEntry = createElement("div", { class: ["tracker-entry"] });
+
+  const line1 = generateLine();
+  const line2 = generateLine();
+  const line3 = generateLine();
+  const line4 = generateLine();
+  const line5 = generateLine();
+
+  const _input = generateInput(description);
+
+  const [_projects, _projectText] = generateProjectPicker(projectName, id);
+
+  _projects.dataset.id = `project-picker-button-${id}`; // each projectPicker has a unique parent.
+
+  const _tags = generateTags(tags);
+  const [_bill, billableBtn] = generateBill(id, billable);
+  const _stopwatch = generateStopwatch(actualEffort);
+  // FIX:
+  const [_date, startTime, endTime, dateButton, dateInput] = generateDate(date, st, et);
+  const _play = generatePlayButton();
+  const _menu = generateMenuDots();
+
+  const div1 = createElement("div", { class: ["div1"] });
+  const div2 = createElement("div", { class: ["div2"] });
+
+  div1.append(_input, _projects);
+  div2.append(_tags, line1, _bill, line2, _date, line3, _stopwatch, line4, _play, line5, _menu);
+
+  projectEntry.append(div1, div2);
+
+  // Event Listeners
+  _projects.addEventListener("click", (e) => handlePPClick(e, _projectText, id));
+  _projects.addEventListener("blur", handlePPBlur);
+
+  _tags.addEventListener("click", (e) => handleTPClick(e, id));
+
+  billableBtn.addEventListener("click", () => {
+    const entry = findEntry(id);
+    entry.billable = !entry.billable;
+  });
 
-export const generateTrackerEntry = () => {
-  $("main").replaceChildren();
-
-  Store.entries.map(
-    ({ id, description, actualEffort, billable, projectName, tags, startTime: st, endTime: et, date }) => {
-      const projectEntry = createElement("div", { class: ["tracker-entry"] });
-
-      const line1 = generateLine();
-      const line2 = generateLine();
-      const line3 = generateLine();
-      const line4 = generateLine();
-      const line5 = generateLine();
-
-      const _input = generateInput(description);
-
-      const [_projects, _projectText] = generateProjectPicker(projectName, id);
-
-      _projects.dataset.id = `project-picker-button-${id}`; // each projectPicker has a unique parent.
+  startTime.addEventListener("keydown", handleTimeArrowKeys);
+  endTime.addEventListener("keydown", handleTimeArrowKeys);
 
-      const _tags = generateTags(tags);
-      const [_bill, billableBtn] = generateBill(id, billable);
-      const _stopwatch = generateStopwatch(actualEffort);
-      // FIX:
-      const [_date, startTime, endTime, dateButton, dateInput] = generateDate(date, st, et);
-      const _play = generatePlayButton();
-      const _menu = generateMenuDots();
+  dateButton.addEventListener("click", () => (dateInput as HTMLInputElement).showPicker());
 
-      const div1 = createElement("div", { class: ["div1"] });
-      const div2 = createElement("div", { class: ["div2"] });
+  dateInput.addEventListener("change", (e) => {
+    const entry = findEntry(id);
+    const value = new Date((e.currentTarget as HTMLInputElement).value).toISOString().slice(0, 10);
 
-      div1.append(_input, _projects);
-      div2.append(_tags, line1, _bill, line2, _date, line3, _stopwatch, line4, _play, line5, _menu);
+    entry.date = value;
 
-      projectEntry.append(div1, div2);
 
-      console.log(date);
+    const currentYear = new Date().getFullYear().toString();
 
-      const [card, cardDate] = generateCard(date);
-      const week = generateWeekCard();
-      card.append(projectEntry);
-      week.append(card);
+    let entryDate2String_modifer = value;
+    if (value.slice(12) === currentYear) entryDate2String_modifer = value.slice(0, 12);
 
-      $("main")!.append(week);
+    // FIX: Quick hack, ideally you don't want to re-render everything.
+    renderEntries();
 
-      // Event Listeners
-      _projects.addEventListener("click", (e) => handlePPClick(e, _projectText, id));
-      _projects.addEventListener("blur", handlePPBlur);
+    // weeklyDateRange.textContent = entryDate2String_modifer;
 
-      _tags.addEventListener("click", (e) => handleTPClick(e, id));
+    // const entry = findEntry(id);
+    // const value = convertDateToString(new Date((e.currentTarget as HTMLInputElement).value));
+    // entry.date = value;
 
-      billableBtn.addEventListener("click", () => {
-        const entry = findEntry(id);
-        entry.billable = !entry.billable;
-      });
+    // const currentYear = new Date().getFullYear().toString();
+    // const entryYear = new Date(date).getFullYear().toString();
 
-      startTime.addEventListener("keydown", handleTimeArrowKeys);
-      endTime.addEventListener("keydown", handleTimeArrowKeys);
+    // const firstDate = findFirstDayOfWeek(entry.date).toDateString().slice(4, 10);
+    // const lastDate = findLastDayOfWeek(entry.date).toDateString().slice(4, 10);
 
-      dateButton.addEventListener("click", () => (dateInput as HTMLInputElement).showPicker());
+    // let weekString = `${firstDate} - ${lastDate}, ${entryYear}`;
 
-      dateInput.addEventListener("change", (e) => {
-        const entry = findEntry(id);
-        const value = convertDateToString(new Date((e.currentTarget as HTMLInputElement).value));
-        entry.date = value;
+    // if (currentYear === entryYear) {
+    //   weekString = `${firstDate} - ${lastDate}`;
+    // }
 
-        const currentYear = new Date().getFullYear().toString();
+    // let entryDate2String_modifer = value;
+    // if (value.slice(12) === currentYear) entryDate2String_modifer = value.slice(0, 12);
 
-        let entryDate2String_modifer = value;
-        console.log(value.slice(12));
-        if (value.slice(12) === currentYear) entryDate2String_modifer = value.slice(0,12);
+    // weeklyDateRange.textContent = weekString;
+  });
 
-        cardDate.textContent = entryDate2String_modifer;
-      });
+  _play.addEventListener("click", () => handlePlayClick(description, projectName, tags, billable));
 
-      _play.addEventListener("click", () => handlePlayClick(description, projectName, tags, billable));
+  _menu.addEventListener("click", (e) => handleMenuClick(e, id));
 
-      _menu.addEventListener("click", (e) => handleMenuClick(e, id));
+  _menu.addEventListener("blur", handleMenuBlur);
 
-      _menu.addEventListener("blur", handleMenuBlur);
-    }
-  );
+  return projectEntry;
 };
 
 const handleMenuBlur = (e: FocusEvent) => {
@@ -161,8 +183,6 @@ const handlePlayClick = (description: string, projectName: string, tags: string[
   console.clear();
   console.log("play button clicked!!");
 
-  // return;
-
   if (Store.isTimerStarted) return generateToast("A Project is already been tracked!", false);
 
   Store.activeProject = projectName;
@@ -200,49 +220,3 @@ const handlePlayClick = (description: string, projectName: string, tags: string[
   const startBtn = $("timetracker-recorder__start-button");
   startBtn.click();
 };
-
-// To Refactor:
-const generateCard = (entryDate: string) => {
-  const card = createElement("div", { class: ["card"] });
-  const header = createElement("div", { class: ["card-header"] });
-
-  const entryDate2String = convertDateToString(new Date(entryDate));
-  const currentYear = new Date().getFullYear().toString();
-  console.log(entryDate.slice(0, 4));
-
-  let entryDate2String_modifer = entryDate2String;
-
-  if (entryDate.slice(0, 4) === currentYear) entryDate2String_modifer = entryDate2String.slice(0, 11);
-
-  const date = createElement("p", { class: ["card-header__date"] }, entryDate2String_modifer);
-
-  const totalWrapper = createElement("div", { class: ["card-header__total"] });
-
-  const totalText = createElement("p", { class: ["card-header__text--total"] }, "total:");
-  const totalTime = createElement("div", { class: ["card-header__text--time"] }, "00:00:04");
-  const editButton = createElement("button", { class: ["card-header__button--edit"] });
-  const editIcon = createElement("img", { class: ["card-header__button-img--edit"], src: bulkEdit });
-
-  editButton.append(editIcon);
-  totalWrapper.append(totalText, totalTime, editButton);
-  header.append(date, totalWrapper);
-  card.append(header);
-
-  return [card, date];
-};
-
-const generateWeekCard = () => {
-  const weekWrapper = createElement("div", { class: ["week"] });
-  const weekHeader = createElement("div", { class: ["week-header"] });
-  const week = createElement("p", { class: ["week-header__date"] }, "Apr 10 - Apr 16");
-
-  const weektotalWrapper = createElement("div", { class: ["card-header__total"] });
-  const weektotalText = createElement("p", { class: ["card-header__text--total"] }, "week total:");
-  const weektotalTime = createElement("div", { class: ["card-header__text--time"] }, "00:10:04");
-
-  weektotalWrapper.append(weektotalText, weektotalTime);
-  weekHeader.append(week, weektotalWrapper);
-  weekWrapper.append(weekHeader);
-
-  return weekWrapper;
-};
diff --git a/src/globalStore.ts b/src/globalStore.ts
@@ -32,6 +32,17 @@ const Store: IStore = createProxy({
       endTime: 1234567890,
       date: "2023-02-18",
     },
+    {
+      id: 8,
+      description: "Hey Lord 2,",
+      actualEffort: [1, 5, 58],
+      billable: true,
+      projectName: "Apple",
+      tags: ["asdf", "monkey"],
+      startTime: 1234567890,
+      endTime: 1234567890,
+      date: "2023-02-17",
+    },
     {
       id: 2,
       description: "you know I'm tired",
@@ -63,7 +74,40 @@ const Store: IStore = createProxy({
       tags: [],
       startTime: 1234567890,
       endTime: 1234567890,
-      date: "2002-02-18",
+      date: "2002-12-18",
+    },
+    {
+      id: 5,
+      description: "FIVE",
+      actualEffort: [108, 55, 58],
+      billable: true,
+      projectName: "Meow",
+      tags: [],
+      startTime: 1234567890,
+      endTime: 1234567890,
+      date: "2002-12-18",
+    },
+    {
+      id: 6,
+      description: "SIX",
+      actualEffort: [10, 0, 8],
+      billable: true,
+      projectName: "Donkey",
+      tags: [],
+      startTime: 1234567890,
+      endTime: 1234567890,
+      date: "2002-12-18",
+    },
+    {
+      id: 7,
+      description: "Now the tide is",
+      actualEffort: [10, 55, 0],
+      billable: true,
+      projectName: "Meow",
+      tags: [],
+      startTime: 1234567890,
+      endTime: 1234567890,
+      date: "1970-02-18",
     },
   ],
 });