feat: migrate to dayjs from luxon and improve calc duration (#23)

murtuzaalisurti · Sep 13, 2024 · eac11da · eac11da
1 parent 1f2ea4f
commit eac11da
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
     "astro": "^4.15.1",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.5",
+    "dayjs": "^1.11.13",
     "googleapis": "^143.0.0",
-    "luxon": "^3.5.0",
     "nanoid": "^5.0.7",
     "open-graph-scraper": "^6.8.1",
     "rss-parser": "^3.13.0",

diff --git a/src/lib/utils/calcDuration.ts b/src/lib/utils/calcDuration.ts
@@ -1,6 +1,28 @@
-import { DateTime } from "luxon";
+import dayjs from "dayjs";
 import { getDurationString } from "./common";
 
+/**
+ * Takes a date string in the format "MM/YY" and converts it to an array
+ * of strings in the format ["MM", "YYYY"]. If `present` is true, the year
+ * is not prepended with "20".
+ *
+ * @param {string} dateString - The date string to convert.
+ * @param {boolean} [present=false] - Whether the year should not be prepended with
+ * "20". Defaults to false.
+ * @return {string[]} An array of strings in the format ["MM", "YYYY"].
+ */
+const getMonthAndYearArray = (dateString: string, present: boolean = false) => {
+    return dateString.split("/")
+        .filter((i) => i !== " ")
+        .map((e) => e.trim().padStart(2, "0"))
+        .map((k, i, arr) => {
+            if (!present) {
+                if (i === arr.length - 1) return `20${k}`;
+            }
+            return k;
+        });
+}
+
 /**
  * Calculates the duration between two dates and returns an object with the
  * difference in years and months, as well as a formatted HTML string.
@@ -11,38 +33,24 @@ import { getDurationString } from "./common";
  * formatted HTML string.
  */
 export const calcDuration = (startDate: string, endDate: string) => {
-    const ArrayStartDate = startDate
-        .split(",")
-        .filter((i) => i !== " ")
-        .map((e) => e.trim());
+    const ArrayStartDate = getMonthAndYearArray(startDate);
 
     const ArrayEndDate =
         endDate === "Present"
-            ? `${new Date().toLocaleString("default", {
-                month: "short",
-            })}, ${new Date().getFullYear()}`
-                .split(",")
-                .filter((i) => i !== " ")
-                .map((e) => e.trim())
-            : endDate
-                .split(",")
-                .filter((i) => i !== " ")
-                .map((e) => e.trim());
-
-    ArrayStartDate.unshift("1");
-    ArrayEndDate.unshift("1");
+            ? getMonthAndYearArray(`${new Date().getMonth() + 1}/${new Date().getFullYear()}`, true)
+            : getMonthAndYearArray(endDate);
 
-    const EndDate = (DateTime.fromJSDate(new Date(ArrayEndDate.join(" "))));
-    const StartDate = (DateTime.fromJSDate(new Date(ArrayStartDate.join(" "))));
+    // new Date() accepts YYYY-MM format
+    const EndDate = (dayjs(new Date(ArrayEndDate.reverse().join("-"))));
+    const StartDate = (dayjs(new Date(ArrayStartDate.reverse().join("-"))));
 
-    const diffObject = EndDate.diff(StartDate, ["years", "months"]);
-    const diffYears = diffObject.years;
-    const diffMonths = diffObject.months;
+    const diffYears = EndDate.diff(StartDate, 'years');
+    const diffMonths = EndDate.diff(StartDate, 'months') - (diffYears * 12);
 
     return {
         diffYears,
         diffMonths,
-        html: `${startDate} - ${endDate} • 
+        html: `${StartDate.format("MMM, YYYY")} - ${endDate === "Present" ? "Present" : EndDate.format("MMM, YYYY")} • 
         ${getDurationString(diffYears, diffMonths)}`
     };
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -122,7 +122,7 @@ items.sort((a, b) => {
                             ],
                             company: "imriel",
                             link: "https://imriel.com",
-                            startDate: "May, 2023",
+                            startDate: "05/23",
                             endDate: "Present",
                         },
                         {
@@ -133,8 +133,8 @@ items.sort((a, b) => {
                             ],
                             company: "imriel",
                             link: "https://imriel.com",
-                            startDate: "Jan, 2023",
-                            endDate: "May, 2023",
+                            startDate: "01/23",
+                            endDate: "05/23",
                         },
                         {
                             id: nanoid(),
@@ -145,7 +145,7 @@ items.sort((a, b) => {
                             ],
                             company: "syntackle",
                             link: "https://syntackle.com",
-                            startDate: "Feb, 2022",
+                            startDate: "02/22",
                             endDate: "Present",
                             showcase: [
                                 {
@@ -174,8 +174,8 @@ items.sort((a, b) => {
                             ],
                             company: "aviyel",
                             link: "https://aviyel.com/@murtuzaalisurti",
-                            startDate: "Oct, 2021",
-                            endDate: "Jan, 2023",
+                            startDate: "10/21",
+                            endDate: "01/23",
                             showcase: [
                                 {
                                     id: nanoid(),
@@ -191,8 +191,8 @@ items.sort((a, b) => {
                             ],
                             company: "css tricks",
                             link: "https://css-tricks.com/author/murtuzaalisurti/",
-                            startDate: "Jul, 2021",
-                            endDate: "Jun, 2023",
+                            startDate: "07/21",
+                            endDate: "06/23",
                             showcase: [
                                 {
                                     id: nanoid(),
@@ -210,8 +210,8 @@ items.sort((a, b) => {
                             role: ["Freelance Content Writer."],
                             company: "draft",
                             link: "https://draft.dev",
-                            startDate: "Sep, 2021",
-                            endDate: "Jun, 2022",
+                            startDate: "09/21",
+                            endDate: "06/22",
                             showcase: [
                                 {
                                     id: nanoid(),