Merge pull request #42 from ruchernchong/41-clean-up-date-format

Clean up date formats

package.json

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

src/App.tsx

@@ -123,11 +123,7 @@ const App = () => {
             </p>
           )}
           <p className="text-2xl">
-            Estimating contributions from{" "}
-            {formatDate(currentYearIncomeCeiling, {
-              inputFormat: "MM-yyyy",
-              outputFormat: "dd MMMM yyyy",
-            })}
+            Estimating contributions from {formatDate(currentYearIncomeCeiling)}
           </p>
         </div>
         <div className="gap-x-4 md:flex">

src/components/UserInput.tsx

@@ -47,10 +47,7 @@ export const UserInput = ({
         {cpfIncomeCeilings.map(({ effectiveDate }) => {
           return (
             <option key={effectiveDate} value={effectiveDate}>
-              {formatDate(effectiveDate, {
-                inputFormat: "MM-yyyy",
-                outputFormat: "dd MMMM yyyy",
-              })}
+              {formatDate(effectiveDate)}
             </option>
           );
         })}

src/config/index.ts

@@ -1,12 +1,16 @@
+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-2023": 6000,
-  "09-2023": 6300,
-  "01-2024": 6800,
-  "01-2025": 7400,
-  "01-2026": 8000,
+  "01-01-2023": 6000,
+  "09-01-2023": 6300,
+  "01-01-2024": 6800,
+  "01-01-2025": 7400,
+  "01-01-2026": 8000,
 };
 export const CPF_ADDITIONAL_WAGE_CEILING: number = 102000;
 

src/data/index.ts

@@ -76,23 +76,23 @@ export const ageGroups: AgeGroup[] = [
 
 export const cpfIncomeCeilings: CPFIncomeCeiling[] = [
   {
-    effectiveDate: "01-2023",
+    effectiveDate: "01-01-2023",
     ceiling: 6000,
   },
   {
-    effectiveDate: "09-2023",
+    effectiveDate: "09-01-2023",
     ceiling: 6300,
   },
   {
-    effectiveDate: "01-2024",
+    effectiveDate: "01-01-2024",
     ceiling: 6800,
   },
   {
-    effectiveDate: "01-2025",
+    effectiveDate: "01-01-2025",
     ceiling: 7400,
   },
   {
-    effectiveDate: "01-2026",
+    effectiveDate: "01-01-2026",
     ceiling: 8000,
   },
 ];

src/lib/calculateCpfContribution.test.ts

@@ -14,7 +14,7 @@ type TestCase = {
 
 const testCases: TestCase[] = [
   {
-    effectiveDate: "01-2023",
+    effectiveDate: "01-01-2023",
     income: 4000,
     expected: {
       contribution: {
@@ -31,7 +31,7 @@ const testCases: TestCase[] = [
     },
   },
   {
-    effectiveDate: "01-2023",
+    effectiveDate: "01-01-2023",
     income: 6000,
     expected: {
       contribution: {
@@ -48,7 +48,7 @@ const testCases: TestCase[] = [
     },
   },
   {
-    effectiveDate: "01-2023",
+    effectiveDate: "01-01-2023",
     income: 8000,
     expected: {
       contribution: {
@@ -65,7 +65,7 @@ const testCases: TestCase[] = [
     },
   },
   {
-    effectiveDate: "01-2026",
+    effectiveDate: "01-01-2026",
     income: 4000,
     expected: {
       contribution: {
@@ -82,7 +82,7 @@ const testCases: TestCase[] = [
     },
   },
   {
-    effectiveDate: "01-2026",
+    effectiveDate: "01-01-2026",
     income: 6000,
     expected: {
       contribution: {
@@ -99,7 +99,7 @@ const testCases: TestCase[] = [
     },
   },
   {
-    effectiveDate: "01-2026",
+    effectiveDate: "01-01-2026",
     income: 8000,
     expected: {
       contribution: {
@@ -116,7 +116,7 @@ const testCases: TestCase[] = [
     },
   },
   {
-    effectiveDate: "01-2026",
+    effectiveDate: "01-01-2026",
     income: 10000,
     expected: {
       contribution: {
@@ -159,7 +159,7 @@ describe("calculateCpfContribution", () => {
 
   it("should return the income after CPF contribution before the ceiling changes", () => {
     expect(
-      calculateCpfContribution(6000, "01-2023", {
+      calculateCpfContribution(6000, "01-01-2023", {
         useCeilingBeforeSep2023: true,
       })
     ).toEqual({
@@ -168,7 +168,7 @@ describe("calculateCpfContribution", () => {
       afterCpfContribution: 4800,
     });
     expect(
-      calculateCpfContribution(8000, "01-2023", {
+      calculateCpfContribution(8000, "01-01-2023", {
         useCeilingBeforeSep2023: true,
       })
     ).toEqual({
@@ -180,7 +180,7 @@ describe("calculateCpfContribution", () => {
 
   it("should return the result correctly for a certain age group", () => {
     expect(
-      calculateCpfContribution(6000, "01-2023", {
+      calculateCpfContribution(6000, "01-01-2023", {
         ageGroup: {
           description: "Above 70",
           min: 70,

src/lib/convertBirthDateToAge.ts

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

src/lib/findLatestIncomeCeilingDate.ts

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

src/lib/format.test.ts

@@ -9,23 +9,13 @@ describe("formatCurrency", () => {
 });
 
 describe("formatDate", () => {
-  it("should return a formatted date of MM-yyyy by default", () => {
-    expect(formatDate("09-2023", { inputFormat: "MM-yyyy" })).toBe("09-2023");
+  it("should return a formatted date of DD MMMM YYYY by default", () => {
+    expect(formatDate("09-01-2023")).toBe("01 September 2023");
   });
 
   it("should return a nicely formatted date", () => {
-    expect(
-      formatDate("09-2023", {
-        inputFormat: "MM-yyyy",
-        outputFormat: "dd MMMM yyyy",
-      })
-    ).toBe("01 September 2023");
-    expect(
-      formatDate("01-2024", {
-        inputFormat: "MM-yyyy",
-        outputFormat: "dd MMMM yyyy",
-      })
-    ).toBe("01 January 2024");
+    expect(formatDate("09-01-2023")).toBe("01 September 2023");
+    expect(formatDate("01-01-2024", "DD-MM-YYYY")).toBe("01-01-2024");
   });
 });
 

src/lib/format.ts

@@ -1,14 +1,9 @@
-import { format, parse } from "date-fns";
+import moment, { Moment } from "moment";
 
 type PercentageFormatOptions = {
   decimalPlaces?: number;
 };
 
-type DateOptions = {
-  inputFormat: string;
-  outputFormat?: string;
-};
-
 export const formatCurrency = (value: number | string): string => {
   if (typeof value === "string") {
     value = Number(value);
@@ -20,29 +15,10 @@ export const formatCurrency = (value: number | string): string => {
   }).format(value);
 };
 
-/**
- * TODO: Clean up this function
- *
- * @param date
- * @param options
- */
-export const formatDate = (date: Date | string, options?: DateOptions) => {
-  let inputFormat = "MM-yyyy";
-  let outputFormat = "MM-yyyy";
-
-  if (options?.outputFormat) {
-    inputFormat = options.inputFormat;
-  }
-  if (options?.outputFormat) {
-    outputFormat = options.outputFormat;
-  }
-
-  if (typeof date === "string") {
-    date = parse(date, inputFormat, new Date());
-  }
-
-  return format(date, outputFormat);
-};
+export const formatDate = (
+  date: Moment | string,
+  format: string = "DD MMMM YYYY"
+) => moment(date, "MM-DD-YYYY").format(format);
 
 export const formatPercentage = (
   value: number | string,