feat: finished date filters

Author: KL13NT

src/background/store.js

@@ -24,32 +24,36 @@ export class Store {
   }
 
   async init() {
-    if (process.env.NODE_ENV === "development") {
-      logger.info("STORE_0000");
+    try {
+      if (process.env.NODE_ENV === "development") {
+        logger.info("STORE_0000");
+
+        await browser.storage.local.set({
+          data: require("../../test/dummy-store.json"),
+        });
+      }
+
+      const { data } = await browser.storage.local.get("data");
+
+      // Fix for change in data format This piece of code runs only once after
+      // installation, populates the firstVisit key, and that's it We can then use
+      // firstVisit and lastVisit to filter based on date durations
+      Object.keys(data).forEach((origin) => {
+        console.log(origin, !data[origin].firstVisit);
+
+        if (!data[origin].firstVisit)
+          data[origin] = {
+            ...data[origin],
+            firstVisit: getFirstVisit(data[origin]),
+          };
+      });
 
       await browser.storage.local.set({
-        data: require("../../test/dummy-store.json"),
+        data,
       });
+    } catch (error) {
+      this.logError(error);
     }
-
-    const { data } = await browser.storage.local.get("data");
-
-    // Fix for change in data format This piece of code runs only once after
-    // installation, populates the firstVisit key, and that's it We can then use
-    // firstVisit and lastVisit to filter based on date durations
-    Object.keys(data).forEach((origin) => {
-      console.log(origin, !data[origin].firstVisit);
-
-      if (!data[origin].firstVisit)
-        data[origin] = {
-          ...data[origin],
-          firstVisit: getFirstVisit(data[origin]),
-        };
-    });
-
-    await browser.storage.local.set({
-      data,
-    });
   }
 
   /**

src/options/App.vue

@@ -42,6 +42,17 @@
             >
               Origin
             </th>
+            <th
+              class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer"
+              data-sortby="firstVisit"
+              v-on:click="sort"
+              v-on:keyup.enter="sort"
+              v-on:keyup.space="sort"
+              tabindex="0"
+              aria-label="sort by first visit"
+            >
+              First Visit
+            </th>
             <th
               class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider cursor-pointer"
               data-sortby="lastVisit"
@@ -75,6 +86,11 @@
                 </p>
               </div>
             </td>
+            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+              <p class="text-gray-900 whitespace-no-wrap">
+                {{ entry.firstVisit }}
+              </p>
+            </td>
             <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
               <p class="text-gray-900 whitespace-no-wrap">
                 {{ entry.lastVisit }}
@@ -100,7 +116,12 @@
 </template>
 
 <script>
-import { getFirstVisit, compare, humanizeEntry } from "../utils.js";
+import {
+  getFirstVisit,
+  compare,
+  humanizeEntry,
+  calcTotalTimeInRange,
+} from "../utils.js";
 
 export default {
   name: "app",
@@ -133,41 +154,33 @@ export default {
     dateFrom: () => this.date.dateFrom.toLocaleDateString("en-CA"),
     dateTo: () => this.date.dateTo.toLocaleDateString("en-CA"),
     sortedHistory: function () {
-      const dateFrom = new Date(this.date.dateFrom);
-      const dateTo = new Date(this.date.dateTo);
+      // handling for cleared inputs
+      const dateFrom = this.date.dateFrom
+        ? new Date(this.date.dateFrom)
+        : new Date(0);
+      const dateTo = this.date.dateTo ? new Date(this.date.dateTo) : new Date();
 
       return Array.from(this.history)
-        .sort((a, b) => {
-          const keyA = a[this.sortby];
-          const keyB = b[this.sortby];
-
-          return compare(keyA, keyB, this.sortby, this.ascending);
-        })
-        .map(humanizeEntry)
         .filter(
           (entry) =>
-            new Date(entry.firstVisit) >= dateFrom &&
-            new Date(entry.lastVisit) <= dateTo,
+            new Date(entry.lastVisit).getTime() >= dateFrom.getTime() &&
+            new Date(entry.firstVisit).getTime() <= dateTo.getTime(),
         )
         .filter(
           (entry) =>
             (this.search && entry.origin.includes(this.search)) || !this.search,
-        );
-      // .filter((entry) =>
-      //   Object.keys(entry)
-      //     .some((key) => Number(key) >= from.year)
-      //     .some((year) =>
-      //       Object.keys(entry[year])
-      //         .some((key) => Number(key) >= from.month)
-      //         .some((month) =>
-      //           Object.keys(entry[year][month]).some(
-      //             (key) => Number(key) >= from.day,
-      //           ),
-      //         ),
-      //     ),
-      // );
-      // entry?.[from.year]?.[from.month]?.[from.day] ||
-      // entry?.[to.year]?.[to.month]?.[to.day],
+        )
+        .map((entry) => ({
+          ...entry,
+          totalTime: calcTotalTimeInRange(entry, dateFrom, dateTo),
+        }))
+        .sort((a, b) => {
+          const keyA = a[this.sortby];
+          const keyB = b[this.sortby];
+
+          return compare(keyA, keyB, this.sortby, this.ascending);
+        })
+        .map(humanizeEntry);
     },
   },
   methods: {

src/utils.js

@@ -26,6 +26,32 @@ export const getFirstVisit = (entry) => {
   return new Date(years[0], months[0], days[0]);
 };
 
+/**
+ * Returns the total time a website's been visited in a given date range. This
+ * handles entries that are not populated with data from all included dates.
+ * @param {import('./background/store').Entry} entry
+ * @param {Date} from
+ * @param {Date} to
+ */
+export const calcTotalTimeInRange = (entry, from, to) => {
+  const dateFrom = new Date(from);
+  const dateTo = new Date(to);
+  let totalTime = 0;
+
+  while (dateFrom <= dateTo) {
+    const year = dateFrom.getFullYear();
+    const month = dateFrom.getMonth();
+    const day = dateFrom.getDate();
+
+    if (typeof entry?.[year]?.[month]?.[day] === "number")
+      totalTime += entry[year][month][day];
+
+    dateFrom.setDate(day + 1);
+  }
+
+  return totalTime;
+};
+
 export const compare = (valA, valB, filter, ascending) => {
   if (ascending)
     if (filter === "lastVisit" && isValidDate(valA) && isValidDate(valB))
@@ -44,6 +70,7 @@ export const humanizeDate = (date) =>
 export const humanizeEntry = (entry) => ({
   ...entry,
   lastVisit: new Date(entry.lastVisit).toLocaleString([], dateLocaleOptions),
+  firstVisit: new Date(entry.firstVisit).toLocaleString([], dateLocaleOptions),
   totalTime: humanizeDuration(entry.totalTime * 1000, { largest: 2 }),
 });