Merge pull request #44 from ruchernchong/43-refactor-moment-to-date-fns

Refactor moment to date-fns

package.json

@@ -14,8 +14,7 @@
   "dependencies": {
     "@heroicons/react": "^2.0.16",
     "classnames": "^2.3.2",
-    "moment": "^2.29.4",
-    "moment-timezone": "^0.5.43",
+    "date-fns": "^2.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.1"

src/config/index.ts

@@ -1,9 +1,5 @@
-import moment from "moment-timezone";
 import type { FAQ } from "../types";
 
-const defaultTimezone = "Asia/Singapore";
-moment.tz.setDefault(defaultTimezone);
-
 export const CPF_INCOME_CEILING_BEFORE_SEPT_2023: number = 6000;
 export const CPF_INCOME_CEILING: Record<number | string, number> = {
   "01-01-2023": 6000,

src/lib/convertBirthDateToAge.ts

@@ -1,8 +1,8 @@
-import moment from "moment";
+import { differenceInYears, parse } from "date-fns";
 
 export const convertBirthDateToAge = (birthDate: string) => {
-  const parsedDate = moment(birthDate, "MM/YYYY");
-  const currentDate = moment();
+  const parsedDate = parse(birthDate, "MM/yyyy", new Date());
+  const currentDate = new Date();
 
-  return currentDate.diff(parsedDate, "years");
+  return differenceInYears(currentDate, parsedDate);
 };

src/lib/findLatestIncomeCeilingDate.ts

@@ -1,29 +1,29 @@
-import moment from "moment";
+import { closestTo, max, parse } from "date-fns";
 import { formatDate } from "./format";
 import { CPFIncomeCeiling } from "../types";
 
 export const findLatestIncomeCeilingDate = (
   dates: CPFIncomeCeiling[]
 ): string => {
-  const currentDate = moment();
+  const currentDate = new Date();
 
   const pastDates = dates
     .map(({ effectiveDate, ceiling }) => ({
-      effectiveDate: moment(effectiveDate, "MM-DD-YYYY"),
+      effectiveDate: parse(effectiveDate, "MM-dd-yyyy", new Date()),
       ceiling,
     }))
-    .filter(({ effectiveDate }) => effectiveDate.isBefore(currentDate));
+    .filter(({ effectiveDate }) => effectiveDate < currentDate);
 
-  const closestPastDate = moment.max(
+  const closestPastDate = closestTo(
+    currentDate,
     pastDates.map(({ effectiveDate }) => effectiveDate)
   );
 
   if (closestPastDate) {
-    return formatDate(closestPastDate, "MM-DD-YYYY");
+    return formatDate(closestPastDate, "MM-dd-yyyy");
   }
 
-  return formatDate(
-    pastDates.reverse().map(({ effectiveDate }) => effectiveDate)[0],
-    "MM-DD-YYYY"
-  );
+  const latestDate = max(pastDates.map(({ effectiveDate }) => effectiveDate));
+
+  return formatDate(latestDate, "MM-dd-yyyy");
 };

src/lib/format.test.ts

@@ -13,9 +13,13 @@ describe("formatDate", () => {
     expect(formatDate("09-01-2023")).toBe("01 September 2023");
   });
 
-  it("should return a nicely formatted date", () => {
+  it("should return the date formatted to the expected output", () => {
     expect(formatDate("09-01-2023")).toBe("01 September 2023");
-    expect(formatDate("01-01-2024", "DD-MM-YYYY")).toBe("01-01-2024");
+    expect(formatDate("01-01-2024", "dd-MM-yyyy")).toBe("01-01-2024");
+  });
+
+  it("should return the date formatted to the expected output for a instanceof Date provided", () => {
+    expect(formatDate(new Date("01-01-2023"))).toBe("01 January 2023");
   });
 });
 

src/lib/format.ts

@@ -1,4 +1,4 @@
-import moment, { Moment } from "moment";
+import { format, parse, toDate } from "date-fns";
 
 type PercentageFormatOptions = {
   decimalPlaces?: number;
@@ -16,9 +16,15 @@ export const formatCurrency = (value: number | string): string => {
 };
 
 export const formatDate = (
-  date: Moment | string,
-  format: string = "DD MMMM YYYY"
-) => moment(date, "MM-DD-YYYY").format(format);
+  date: Date | string,
+  dateFormat: string = "dd MMMM yyyy"
+) => {
+  if (date instanceof Date) {
+    return format(date, dateFormat);
+  }
+
+  return format(parse(date, "MM-dd-yyyy", new Date()), dateFormat);
+};
 
 export const formatPercentage = (
   value: number | string,