refactor: remove luxon use, use Intl

Author: wackerow

package.json

@@ -36,7 +36,6 @@
     "i18next": "^23.6.0",
     "lodash.merge": "^4.6.2",
     "lodash.shuffle": "^4.2.0",
-    "luxon": "^3.4.3",
     "next": "13.4.8",
     "next-i18next": "^14.0.3",
     "next-mdx-remote": "^3.0.8",

src/components/CommunityEvents/index.tsx

@@ -1,4 +1,3 @@
-import { DateTime, DateTimeFormatOptions } from "luxon"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { FaDiscord } from "react-icons/fa"
@@ -12,6 +11,7 @@ import {
   Icon,
 } from "@chakra-ui/react"
 
+import type { Lang } from "@/lib/types"
 import type { CommunityEvent } from "@/lib/interfaces"
 
 import { ButtonLink } from "@/components/Buttons"
@@ -21,6 +21,7 @@ import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
+import { getLocaleTimestamp } from "@/lib/utils/time"
 
 const matomoEvent = (buttonType: string) => {
   trackCustomEvent({
@@ -30,30 +31,15 @@ const matomoEvent = (buttonType: string) => {
   })
 }
 
-const renderEventDateTime = (
-  date: string,
-  language: string,
-  params: DateTimeFormatOptions = {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    hour12: false,
-    hour: "numeric",
-    minute: "numeric",
-  }
-) => {
-  return DateTime.fromISO(date).setLocale(language).toLocaleString(params)
-}
-
-interface EventProps {
+type EventProps = {
   event: CommunityEvent
-  language: string
   type: "upcoming" | "past"
 }
 
-const Event = ({ event, language, type }: EventProps) => {
+const Event = ({ event, type }: EventProps) => {
+  const { locale } = useRouter()
   const { date, title, calendarLink } = event
-  const params: DateTimeFormatOptions = {
+  const options: Intl.DateTimeFormatOptions = {
     year: "numeric",
     month: "short",
     day: "numeric",
@@ -63,7 +49,7 @@ const Event = ({ event, language, type }: EventProps) => {
     <Grid gap={6} templateColumns="auto 1fr" mb={4}>
       <GridItem>
         <Text color="body.medium" m={0}>
-          {renderEventDateTime(date, language, params)}
+          {getLocaleTimestamp(locale! as Lang, date, options)}
         </Text>
       </GridItem>
       <GridItem>
@@ -130,9 +116,17 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
                   {reversedUpcomingEventData[0].title}
                 </Text>
                 <Text m={0} fontSize="xl">
-                  {renderEventDateTime(
+                  {getLocaleTimestamp(
+                    locale! as Lang,
                     reversedUpcomingEventData[0].date,
-                    locale!
+                    {
+                      year: "numeric",
+                      month: "long",
+                      day: "numeric",
+                      hour12: false,
+                      hour: "numeric",
+                      minute: "numeric",
+                    }
                   )}
                 </Text>
                 <Text color="body.medium" fontSize="md">
@@ -177,14 +171,7 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
           <Divider mb={4} />
           {reversedUpcomingEventData.slice(1).length ? (
             reversedUpcomingEventData.slice(1).map((item, idx) => {
-              return (
-                <Event
-                  key={idx}
-                  event={item}
-                  language={locale!}
-                  type="upcoming"
-                />
-              )
+              return <Event key={idx} event={item} type="upcoming" />
             })
           ) : (
             <Text mx="auto">
@@ -197,9 +184,7 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
           <Divider mb={4} />
           {reversedPastEventData.length ? (
             reversedPastEventData.map((item, idx) => {
-              return (
-                <Event key={idx} event={item} language={locale!} type="past" />
-              )
+              return <Event key={idx} event={item} type="past" />
             })
           ) : (
             <Text mx="auto">

src/lib/utils/time.ts

@@ -1,20 +1,17 @@
-// TODO: we are using `luxon` package just for this util, should consider rewrite using native JS Date API
-import { DateTime } from "luxon"
-
 import { Lang } from "../types"
 
-export const INVALID_DATETIME = "Invalid DateTime"
-
-export const getLocaleTimestamp = (locale: Lang, timestamp: string) => {
-  let localeTimestamp = DateTime.fromSQL(timestamp)
-    .setLocale(locale)
-    .toLocaleString(DateTime.DATE_FULL)
-
-  // Fallback to ISO
-  if (localeTimestamp === INVALID_DATETIME) {
-    localeTimestamp = DateTime.fromISO(timestamp)
-      .setLocale(locale)
-      .toLocaleString(DateTime.DATE_FULL)
-  }
-  return localeTimestamp
+export const getLocaleTimestamp = (
+  locale: Lang,
+  timestamp: string,
+  options?: Intl.DateTimeFormatOptions
+) => {
+  const opts =
+    options ||
+    ({
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    } as Intl.DateTimeFormatOptions)
+  const date = new Date(timestamp)
+  return new Intl.DateTimeFormat(locale, opts).format(date)
 }

src/pages/developers/tutorials.tsx

@@ -33,7 +33,7 @@ import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getTutorialsData } from "@/lib/utils/md"
-import { getLocaleTimestamp, INVALID_DATETIME } from "@/lib/utils/time"
+import { getLocaleTimestamp } from "@/lib/utils/time"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 import {
   filterTutorialsByLang,
@@ -126,9 +126,10 @@ export interface ITutorial {
 
 const published = (locale: string, published: string) => {
   const localeTimestamp = getLocaleTimestamp(locale as Lang, published)
-  return localeTimestamp !== INVALID_DATETIME ? (
+  return localeTimestamp !== "Invalid Date" ? (
     <span>
-      <Emoji text=":calendar:" fontSize="sm" ms={2} me={2} /> {localeTimestamp}
+      <Emoji text=":calendar:" fontSize="sm" ms={2} me={2} />
+      {localeTimestamp}
     </span>
   ) : null
 }

yarn.lock

@@ -9561,11 +9561,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-luxon@^3.4.3:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
-  integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
-
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"