Skip to content

Commit 88de114

Browse files
pettinarippettinarip
authored
Merge pull request #12209 from ethereum/rm-luxon
refactor: remove luxon package, replace with JS Intl library
2 parents dd0f529 + df0a954 commit 88de114

File tree

10 files changed

+90
-111
lines changed

10 files changed

+90
-111
lines changed

‎package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
"i18next": "^23.6.0",
3838
"lodash.merge": "^4.6.2",
3939
"lodash.shuffle": "^4.2.0",
40-
"luxon": "^3.4.3",
4140
"next": "13.4.8",
4241
"next-i18next": "^14.0.3",
4342
"next-mdx-remote": "^3.0.8",
@@ -67,7 +66,6 @@
6766
"@storybook/testing-library": "0.2.2",
6867
"@svgr/webpack": "^8.1.0",
6968
"@types/hast": "^3.0.0",
70-
"@types/luxon": "^3.3.2",
7169
"@types/node": "^20.4.2",
7270
"@types/react": "^18.2.15",
7371
"@types/react-dom": "^18.2.7",

‎src/components/CommunityEvents/index.tsx

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { DateTime, DateTimeFormatOptions } from "luxon"
21
import { useRouter } from "next/router"
32
import { useTranslation } from "next-i18next"
43
import { FaDiscord } from "react-icons/fa"
@@ -12,6 +11,7 @@ import {
1211
Icon,
1312
} from "@chakra-ui/react"
1413

14+
import type { Lang } from "@/lib/types"
1515
import type { CommunityEvent } from "@/lib/interfaces"
1616

1717
import { ButtonLink } from "@/components/Buttons"
@@ -21,6 +21,7 @@ import Text from "@/components/OldText"
2121
import Translation from "@/components/Translation"
2222

2323
import { trackCustomEvent } from "@/lib/utils/matomo"
24+
import { getLocaleTimestamp } from "@/lib/utils/time"
2425

2526
const matomoEvent = (buttonType: string) => {
2627
trackCustomEvent({
@@ -30,30 +31,15 @@ const matomoEvent = (buttonType: string) => {
3031
})
3132
}
3233

33-
const renderEventDateTime = (
34-
date: string,
35-
language: string,
36-
params: DateTimeFormatOptions = {
37-
year: "numeric",
38-
month: "long",
39-
day: "numeric",
40-
hour12: false,
41-
hour: "numeric",
42-
minute: "numeric",
43-
}
44-
) => {
45-
return DateTime.fromISO(date).setLocale(language).toLocaleString(params)
46-
}
47-
48-
interface EventProps {
34+
type EventProps = {
4935
event: CommunityEvent
50-
language: string
5136
type: "upcoming" | "past"
5237
}
5338

54-
const Event = ({ event, language, type }: EventProps) => {
39+
const Event = ({ event, type }: EventProps) => {
40+
const { locale } = useRouter()
5541
const { date, title, calendarLink } = event
56-
const params: DateTimeFormatOptions = {
42+
const options: Intl.DateTimeFormatOptions = {
5743
year: "numeric",
5844
month: "short",
5945
day: "numeric",
@@ -63,7 +49,7 @@ const Event = ({ event, language, type }: EventProps) => {
6349
<Grid gap={6} templateColumns="auto 1fr" mb={4}>
6450
<GridItem>
6551
<Text color="body.medium" m={0}>
66-
{renderEventDateTime(date, language, params)}
52+
{getLocaleTimestamp(locale! as Lang, date, options)}
6753
</Text>
6854
</GridItem>
6955
<GridItem>
@@ -130,9 +116,17 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
130116
{reversedUpcomingEventData[0].title}
131117
</Text>
132118
<Text m={0} fontSize="xl">
133-
{renderEventDateTime(
119+
{getLocaleTimestamp(
120+
locale! as Lang,
134121
reversedUpcomingEventData[0].date,
135-
locale!
122+
{
123+
year: "numeric",
124+
month: "long",
125+
day: "numeric",
126+
hour12: false,
127+
hour: "numeric",
128+
minute: "numeric",
129+
}
136130
)}
137131
</Text>
138132
<Text color="body.medium" fontSize="md">
@@ -177,14 +171,7 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
177171
<Divider mb={4} />
178172
{reversedUpcomingEventData.slice(1).length ? (
179173
reversedUpcomingEventData.slice(1).map((item, idx) => {
180-
return (
181-
<Event
182-
key={idx}
183-
event={item}
184-
language={locale!}
185-
type="upcoming"
186-
/>
187-
)
174+
return <Event key={idx} event={item} type="upcoming" />
188175
})
189176
) : (
190177
<Text mx="auto">
@@ -197,9 +184,7 @@ const CommunityEvents = ({ events }: CommunityEventsProps) => {
197184
<Divider mb={4} />
198185
{reversedPastEventData.length ? (
199186
reversedPastEventData.map((item, idx) => {
200-
return (
201-
<Event key={idx} event={item} language={locale!} type="past" />
202-
)
187+
return <Event key={idx} event={item} type="past" />
203188
})
204189
) : (
205190
<Text mx="auto">

‎src/components/Footer.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -338,10 +338,12 @@ const Footer = ({ lastDeployDate }: FooterProps) => {
338338
alignItems="center"
339339
flexWrap="wrap"
340340
>
341-
<Box color="text200">
342-
<Translation id="website-last-updated" />:{" "}
343-
{getLocaleTimestamp(locale as Lang, lastDeployDate!)}
344-
</Box>
341+
{lastDeployDate && (
342+
<Box color="text200">
343+
<Translation id="website-last-updated" />:{" "}
344+
{getLocaleTimestamp(locale as Lang, lastDeployDate)}
345+
</Box>
346+
)}
345347
<Box my={4}>
346348
{socialLinks.map(({ to, ariaLabel, icon, color }) => (
347349
<BaseLink

‎src/layouts/Docs.tsx

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -206,18 +206,18 @@ export const docsComponents = {
206206
YouTube,
207207
}
208208

209-
interface DocsLayoutProps
210-
extends Pick<
211-
MdPageContent,
212-
| "slug"
213-
| "tocItems"
214-
| "lastUpdatedDate"
215-
| "crowdinContributors"
216-
| "contentNotTranslated"
217-
>,
218-
ChildOnlyProp {
219-
frontmatter: DocsFrontmatter
220-
}
209+
type DocsLayoutProps = Pick<
210+
MdPageContent,
211+
| "slug"
212+
| "tocItems"
213+
| "lastUpdatedDate"
214+
| "crowdinContributors"
215+
| "contentNotTranslated"
216+
> &
217+
Required<Pick<MdPageContent, "lastUpdatedDate">> &
218+
ChildOnlyProp & {
219+
frontmatter: DocsFrontmatter
220+
}
221221

222222
export const DocsLayout = ({
223223
children,
@@ -233,7 +233,8 @@ export const DocsLayout = ({
233233
const absoluteEditPath = getEditPath(relativePath)
234234

235235
const gitHubLastEdit = useClientSideGitHubLastEdit(relativePath)
236-
const intlLastEdit = "data" in gitHubLastEdit ? gitHubLastEdit.data! : ""
236+
const intlLastEdit =
237+
"data" in gitHubLastEdit ? gitHubLastEdit.data : lastUpdatedDate
237238
const useGitHubContributors =
238239
frontmatter.lang === DEFAULT_LOCALE || crowdinContributors.length === 0
239240

@@ -252,7 +253,7 @@ export const DocsLayout = ({
252253
{useGitHubContributors ? (
253254
<GitHubContributors
254255
relativePath={relativePath}
255-
lastUpdatedDate={lastUpdatedDate!}
256+
lastUpdatedDate={lastUpdatedDate}
256257
/>
257258
) : (
258259
<CrowdinContributors

‎src/layouts/Static.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,15 @@ export const StaticLayout = ({
118118
) : (
119119
<>
120120
<Breadcrumbs slug={slug} mb="8" />
121-
<Text
122-
color="text200"
123-
dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
124-
>
125-
<Translation id="page-last-updated" />:{" "}
126-
{getLocaleTimestamp(locale as Lang, lastUpdatedDate!)}
127-
</Text>
121+
{lastUpdatedDate && (
122+
<Text
123+
color="text200"
124+
dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
125+
>
126+
<Translation id="page-last-updated" />:{" "}
127+
{getLocaleTimestamp(locale as Lang, lastUpdatedDate)}
128+
</Text>
129+
)}
128130
</>
129131
)}
130132

‎src/layouts/Tutorial.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -165,18 +165,15 @@ export const tutorialsComponents = {
165165
StyledDivider,
166166
YouTube,
167167
}
168-
interface TutorialLayoutProps
169-
extends ChildOnlyProp,
170-
Pick<
171-
MdPageContent,
172-
| "tocItems"
173-
| "lastUpdatedDate"
174-
| "crowdinContributors"
175-
| "contentNotTranslated"
176-
> {
177-
frontmatter: TutorialFrontmatter
178-
timeToRead: number
179-
}
168+
type TutorialLayoutProps = ChildOnlyProp &
169+
Pick<
170+
MdPageContent,
171+
"tocItems" | "crowdinContributors" | "contentNotTranslated"
172+
> &
173+
Required<Pick<MdPageContent, "lastUpdatedDate">> & {
174+
frontmatter: TutorialFrontmatter
175+
timeToRead: number
176+
}
180177

181178
export const TutorialLayout = ({
182179
children,
@@ -194,7 +191,8 @@ export const TutorialLayout = ({
194191
const postMergeBannerTranslationString =
195192
frontmatter.postMergeBannerTranslation as TranslationKey | null
196193
const gitHubLastEdit = useClientSideGitHubLastEdit(relativePath)
197-
const intlLastEdit = "data" in gitHubLastEdit ? gitHubLastEdit.data! : ""
194+
const intlLastEdit =
195+
"data" in gitHubLastEdit ? gitHubLastEdit.data! : lastUpdatedDate
198196
const useGitHubContributors =
199197
frontmatter.lang === DEFAULT_LOCALE || crowdinContributors.length === 0
200198

@@ -226,7 +224,7 @@ export const TutorialLayout = ({
226224
{useGitHubContributors ? (
227225
<GitHubContributors
228226
relativePath={relativePath}
229-
lastUpdatedDate={lastUpdatedDate!}
227+
lastUpdatedDate={lastUpdatedDate}
230228
/>
231229
) : (
232230
<CrowdinContributors

‎src/layouts/Upgrade.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
Icon,
1010
List,
1111
ListItem,
12+
Skeleton,
1213
Text,
1314
useToken,
1415
} from "@chakra-ui/react"
@@ -193,10 +194,12 @@ export const UpgradeLayout = ({
193194
))}
194195
</List>
195196
</Box>
196-
<LastUpdated>
197-
{t("common:page-last-updated")}:{" "}
198-
{getLocaleTimestamp(locale as Lang, lastUpdatedDate!)}
199-
</LastUpdated>
197+
{lastUpdatedDate && (
198+
<LastUpdated>
199+
{t("common:page-last-updated")}:{" "}
200+
{getLocaleTimestamp(locale as Lang, lastUpdatedDate)}
201+
</LastUpdated>
202+
)}
200203
</TitleCard>
201204
{frontmatter.image && (
202205
<Image

‎src/lib/utils/time.ts

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
1-
// TODO: we are using `luxon` package just for this util, should consider rewrite using native JS Date API
2-
import { DateTime } from "luxon"
3-
41
import { Lang } from "../types"
52

6-
export const INVALID_DATETIME = "Invalid DateTime"
7-
8-
export const getLocaleTimestamp = (locale: Lang, timestamp: string) => {
9-
let localeTimestamp = DateTime.fromSQL(timestamp)
10-
.setLocale(locale)
11-
.toLocaleString(DateTime.DATE_FULL)
12-
13-
// Fallback to ISO
14-
if (localeTimestamp === INVALID_DATETIME) {
15-
localeTimestamp = DateTime.fromISO(timestamp)
16-
.setLocale(locale)
17-
.toLocaleString(DateTime.DATE_FULL)
18-
}
19-
return localeTimestamp
3+
export const getLocaleTimestamp = (
4+
locale: Lang,
5+
timestamp: string,
6+
options?: Intl.DateTimeFormatOptions
7+
) => {
8+
const opts =
9+
options ||
10+
({
11+
year: "numeric",
12+
month: "long",
13+
day: "numeric",
14+
} as Intl.DateTimeFormatOptions)
15+
const date = new Date(timestamp)
16+
return new Intl.DateTimeFormat(locale, opts).format(date)
2017
}

‎src/pages/developers/tutorials.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { existsNamespace } from "@/lib/utils/existsNamespace"
3333
import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
3434
import { trackCustomEvent } from "@/lib/utils/matomo"
3535
import { getTutorialsData } from "@/lib/utils/md"
36-
import { getLocaleTimestamp, INVALID_DATETIME } from "@/lib/utils/time"
36+
import { getLocaleTimestamp } from "@/lib/utils/time"
3737
import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
3838
import {
3939
filterTutorialsByLang,
@@ -126,9 +126,10 @@ export interface ITutorial {
126126

127127
const published = (locale: string, published: string) => {
128128
const localeTimestamp = getLocaleTimestamp(locale as Lang, published)
129-
return localeTimestamp !== INVALID_DATETIME ? (
129+
return localeTimestamp !== "Invalid Date" ? (
130130
<span>
131-
<Emoji text=":calendar:" fontSize="sm" ms={2} me={2} /> {localeTimestamp}
131+
<Emoji text=":calendar:" fontSize="sm" ms={2} me={2} />
132+
{localeTimestamp}
132133
</span>
133134
) : null
134135
}
@@ -473,8 +474,10 @@ const TutorialPage = ({
473474
</Flex>
474475
<Text color="text200" fontSize="sm" textTransform="uppercase">
475476
<Emoji text=":writing_hand:" fontSize="sm" me={2} />
476-
{tutorial.author} •
477-
{published(locale!, tutorial.published ?? "")}
477+
{tutorial.author}
478+
{tutorial.published ? (
479+
<> •{published(locale!, tutorial.published!)}</>
480+
) : null}
478481
{tutorial.timeToRead && (
479482
<>
480483
{" "}

‎yarn.lock

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4610,11 +4610,6 @@
46104610
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
46114611
integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
46124612

4613-
"@types/luxon@^3.3.2":
4614-
version "3.4.2"
4615-
resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7"
4616-
integrity sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==
4617-
46184613
"@types/mdast@^3.0.0":
46194614
version "3.0.15"
46204615
resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
@@ -9466,11 +9461,6 @@ lru-cache@^6.0.0:
94669461
dependencies:
94679462
yallist "^4.0.0"
94689463

9469-
luxon@^3.4.3:
9470-
version "3.4.4"
9471-
resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
9472-
integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
9473-
94749464
lz-string@^1.5.0:
94759465
version "1.5.0"
94769466
resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"

0 commit comments

Comments
 (0)