From 08dca129d976bdef0ab400d4a970cbeb7873e5c1 Mon Sep 17 00:00:00 2001
From: Shoaib Asgar <shoaib.mca19.du@gmail.com>
Date: Wed, 18 Oct 2023 03:13:54 +0530
Subject: [PATCH] feat(web-console): add localisation support for timestamps
 (#207)

---
 .../Notification/Timestamp/index.tsx          | 19 +++++++++----
 .../web-console/src/utils/fetchUserLocale.ts  |  9 ++++++
 .../src/utils/getLocaleFromLanguage.ts        | 28 +++++++++++++++++++
 packages/web-console/src/utils/index.ts       |  2 ++
 4 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 packages/web-console/src/utils/fetchUserLocale.ts
 create mode 100644 packages/web-console/src/utils/getLocaleFromLanguage.ts

diff --git a/packages/web-console/src/scenes/Notifications/Notification/Timestamp/index.tsx b/packages/web-console/src/scenes/Notifications/Notification/Timestamp/index.tsx
index 3360f99c7..1f29e02db 100644
--- a/packages/web-console/src/scenes/Notifications/Notification/Timestamp/index.tsx
+++ b/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>
+  )
+}
diff --git a/packages/web-console/src/utils/fetchUserLocale.ts b/packages/web-console/src/utils/fetchUserLocale.ts
new file mode 100644
index 000000000..3e3e9f798
--- /dev/null
+++ b/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
+}
diff --git a/packages/web-console/src/utils/getLocaleFromLanguage.ts b/packages/web-console/src/utils/getLocaleFromLanguage.ts
new file mode 100644
index 000000000..a21a157a1
--- /dev/null
+++ b/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
+}
diff --git a/packages/web-console/src/utils/index.ts b/packages/web-console/src/utils/index.ts
index 84f0c8a6d..fc63be437 100644
--- a/packages/web-console/src/utils/index.ts
+++ b/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"