feat(web-console): add localisation support for timestamps (#207)

packages/web-console/src/scenes/Notifications/Notification/Timestamp/index.tsx

@@ -22,10 +22,11 @@
  *
  ******************************************************************************/
 
-import React from "react"
+import React, { useMemo } from "react"
 import styled from "styled-components"
 import { Text } from "../../../../components"
-import { format } from "date-fns/fp"
+import { format } from "date-fns"
+import { fetchUserLocale, getLocaleFromLanguage } from "../../../../utils"
 
 type Props = {
   createdAt: Date
@@ -36,6 +37,14 @@ const TimestampText = styled(Text)`
   margin-right: 0.5rem;
 `
 
-export const Timestamp = ({ createdAt }: Props) => (
-  <TimestampText color="gray2">[{format("HH:mm:ss", createdAt)}]</TimestampText>
-)
+export const Timestamp = ({ createdAt }: Props) => {
+  const userLocale = useMemo(fetchUserLocale, [])
+
+  return (
+    <TimestampText color="gray2">
+      [
+      {format(createdAt, "pppp", { locale: getLocaleFromLanguage(userLocale) })}
+      ]
+    </TimestampText>
+  )
+}

packages/web-console/src/utils/fetchUserLocale.ts

@@ -0,0 +1,9 @@
+/**
+ * Function to determine the user's preferred language or locale using the `navigator` object.
+ * @returns {string} The user's preferred language or locale.
+ */
+export const fetchUserLocale = () => {
+  return navigator.languages && navigator.languages.length
+    ? navigator.languages[0]
+    : navigator.language
+}

packages/web-console/src/utils/getLocaleFromLanguage.ts

@@ -0,0 +1,28 @@
+import { Locale } from "date-fns"
+import { enUS, fr, es, de, ja, ko, zhCN } from "date-fns/locale"
+
+/**
+ * Function to retrieve a date-fns Locale object based on a specified language code.
+ *
+ * This function takes a language code as input and returns the corresponding date-fns Locale object.
+ * It uses a predefined mapping of language codes to Locale objects. If the input language code is not found
+ * in the mapping, it defaults to the English (United States) Locale.
+ *
+ * @param {string} language - The language code (e.g., "en-US", "fr-FR", "es-ES") for which to retrieve the Locale.
+ * @returns {Locale} The date-fns Locale object corresponding to the input language code, or the English (United States) Locale as the default.
+ */
+export const getLocaleFromLanguage = (language: string) => {
+  const localeMap: { [key: string]: Locale } = {
+    "en-US": enUS, // English (United States)
+    "fr-FR": fr, // French (France)
+    "es-ES": es, // Spanish (Spain)
+    "de-DE": de, // German (Germany)
+    "ja-JP": ja, // Japanese (Japan)
+    "ko-KR": ko, // Korean (South Korea),
+    "zh-CN": zhCN, // Chinese (Simplified, China)
+    // add more language support here
+  }
+
+  // If the language is not found in the map, default to English (United States)
+  return localeMap[language] || enUS
+}

packages/web-console/src/utils/index.ts

@@ -32,3 +32,5 @@ export * from "./styled"
 export * from "./formatSql"
 export * from "./platform"
 export * from "./pick"
+export * from "./fetchUserLocale"
+export * from "./getLocaleFromLanguage"