feat: update date-fns, use @date-fns/tz (#354)

Author: karrui

package-lock.json

@@ -63,8 +63,6 @@
     "@trpc/server": "10.45.0",
     "@types/lodash": "^4.14.202",
     "@types/validator": "^13.11.7",
-    "date-fns": "^3.6.0",
-    "date-fns-tz": "^3.1.3",
     "iron-session": "^8.0.1",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.6",
@@ -89,6 +87,7 @@
     "@babel/preset-env": "^7.23.8",
     "@babel/preset-typescript": "^7.23.3",
     "@chakra-ui/cli": "^2.4.1",
+    "@date-fns/tz": "^1.2.0",
     "@electric-sql/pglite": "^0.2.12",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
     "@playwright/test": "^1.40.1",
@@ -108,6 +107,7 @@
     "@typescript-eslint/parser": "^8.14.0",
     "@vitest/coverage-istanbul": "^2.1.1",
     "clean-webpack-plugin": "^4.0.0",
+    "date-fns": "^4.1.0",
     "dotenv-cli": "^7.3.0",
     "eslint": "^8.57.1",
     "eslint-config-next": "15.0.3",

package.json

@@ -1,5 +1,6 @@
+import { TZDate } from '@date-fns/tz'
 import { TRPCError } from '@trpc/server'
-import { formatInTimeZone } from 'date-fns-tz'
+import { format } from 'date-fns/format'
 
 import { getBaseUrl } from '~/utils/getBaseUrl'
 import { normaliseEmail } from '~/utils/zod'
@@ -23,7 +24,10 @@ export const emailSessionRouter = router({
     .mutation(async ({ ctx, input: { email } }) => {
       // TODO: instead of storing expires, store issuedAt to calculate when the next otp can be re-issued
       // TODO: rate limit this endpoint also
-      const expires = new Date(Date.now() + env.OTP_EXPIRY * 1000)
+      const expires = new TZDate(
+        Date.now() + env.OTP_EXPIRY * 1000,
+        'Asia/Singapore',
+      )
       const token = createVfnToken()
       const otpPrefix = createVfnPrefix()
       const hashedToken = createTokenHash(token, email)
@@ -50,10 +54,9 @@ export const emailSessionRouter = router({
         }),
         sendMail({
           subject: `Sign in to ${url.host}`,
-          body: `Your OTP is ${otpPrefix}-<b>${token}</b>. It will expire on ${formatInTimeZone(
+          body: `Your OTP is ${otpPrefix}-<b>${token}</b>. It will expire on ${format(
             expires,
-            'Asia/Singapore',
-            'dd MMM yyyy, hh:mmaaa',
+            'dd MMM yyyy, h:mmaaa',
           )}.
       Please use this to login to your account.
       <p>If your OTP does not work, please request for a new one.</p>`,