From 234dba3ff89070ba4e4c5d303426cdc391f2048f Mon Sep 17 00:00:00 2001 From: shahmeerzaidi Date: Sat, 6 Jul 2024 00:17:31 +0500 Subject: [PATCH 1/2] feat: implement localization to broadcast locale changes to child apps --- src/App.jsx | 60 +++++++++++++++++++++++--------- src/components/LocalSwitcher.jsx | 42 ++++++++++++++++++++++ src/flowbite.theme.js | 6 ++-- 3 files changed, 88 insertions(+), 20 deletions(-) create mode 100644 src/components/LocalSwitcher.jsx diff --git a/src/App.jsx b/src/App.jsx index 7629292..b1528ec 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,6 +6,7 @@ import { ExplorerLogo } from "./components/ExplorerLogo"; import { TokenizationLogo } from "./components/TokenizationLogo"; import { Flowbite, Button, Modal } from "flowbite-react"; import flowbiteThemeSettings from "./flowbite.theme"; +import { LocaleSwitcher } from "./components/LocalSwitcher"; const appLinks = { cadt: { @@ -37,9 +38,36 @@ const App = () => { }, [flowbiteThemeSettings]); const ActiveLogo = activeApp.logo; - const TokenizationLogo = appLinks["climateTokenization"].logo; - const ExplorerLogo = appLinks["climateExplorer"].logo; - const CadtLogo = appLinks["cadt"].logo; + + function getIframeOrigin(iframe) { + try { + const url = new URL(iframe.src); + return url.origin; + } catch (error) { + console.error("Invalid iframe URL", error); + return null; + } + } + + function sendMessageToIframe(iframe, message) { + const targetOrigin = getIframeOrigin(iframe); + if (targetOrigin && iframe.contentWindow) { + iframe.contentWindow.postMessage(message, targetOrigin); + } else { + console.error( + "Failed to determine target origin or iframe is not available" + ); + } + } + + const handleLocaleChange = (event) => { + const message = { changeLocale: event }; + [cadtRef, climateExplorerRef, climateTokenizationRef].forEach((ref) => { + if (ref.current) { + sendMessageToIframe(ref.current, message); + } + }); + }; const handleSubmit = (e) => { e.preventDefault(); @@ -48,12 +76,9 @@ const App = () => { const formData = new FormData(form); const data = Object.fromEntries(formData.entries()); - // Validation function for host const isValidHost = (host) => /^https?:\/\/.+(:\d{1,5})?$/.test(host); - // Validation function for API key (adjust as needed) const isValidApiKey = (key) => key.trim() !== ""; - // Array containing the field names, corresponding error element IDs, and validation functions const fields = [ { name: "cadtRegistryHost", @@ -180,17 +205,18 @@ const App = () => { ) : (
)} - - {validateLocalStorage() ? ( - - ) : ( - - )} - +
+ + {validateLocalStorage() ? ( + + ) : ( + + )} +
{showConnect && ( setShowConnect(false)}> Connect to Core Registry diff --git a/src/components/LocalSwitcher.jsx b/src/components/LocalSwitcher.jsx new file mode 100644 index 0000000..ecd7889 --- /dev/null +++ b/src/components/LocalSwitcher.jsx @@ -0,0 +1,42 @@ +import React, { useState } from "react"; +import styled, { withTheme } from "styled-components"; +import { Dropdown } from "flowbite-react"; + +const LANGUAGE_CODES = Object.freeze({ + ENGLISH: "en-US", + SPANISH: "es-ES", + FRENCH: "fr-FR", + GERMAN: "de-DE", + CHINESE: "cn", +}); + +const LocaleSwitcher = ({ handleLocaleChange }) => { + const [currentLanguage, setCurrentLanguage] = useState( + LANGUAGE_CODES["ENGLISH"] + ); + + const handleChange = (value) => { + setCurrentLanguage(value); + handleLocaleChange(value); + }; + return ( + { + console.log(v); + }} + > + {Object.keys(LANGUAGE_CODES).map((key) => ( + handleChange(LANGUAGE_CODES[key])} + value={LANGUAGE_CODES[key]} + > + {key} + + ))} + + ); +}; + +export { LocaleSwitcher }; diff --git a/src/flowbite.theme.js b/src/flowbite.theme.js index b09de3b..58cd748 100644 --- a/src/flowbite.theme.js +++ b/src/flowbite.theme.js @@ -1,8 +1,8 @@ export default () => ({ theme: { dropdown: { - arrowIcon: "ml-2 h-11 w-4 items-center justify-center", - content: "py-1 focus:outline-none", + arrowIcon: "ml-2 w-4 self-center justify-center", + content: "items-center py-1 focus:outline-none", floating: { animation: "transition-opacity", arrow: { @@ -23,7 +23,7 @@ export default () => ({ hidden: "invisible opacity-0", item: { container: "focus:outline-none", - base: "focus:outline-none flex items-center justify-start py-2 px-4 text-sm text-gray-700 cursor-pointer w-full hover:bg-gray-900 focus:outline-none dark:text-gray-200 dark:hover:bg-gray-900 focus:outline-none dark:hover:text-white dark:focus:bg-gray-600 dark:focus:text-white", + base: "focus:outline-none flex items-center justify-start py-2 px-4 text-sm text-white cursor-pointer w-full hover:bg-gray-900 focus:outline-none dark:text-gray-200 dark:hover:bg-gray-900 focus:outline-none dark:hover:text-white dark:focus:bg-gray-600 dark:focus:text-white", icon: "mr-2 h-4 w-4 focus:outline-none", }, style: { From f5f17d673ae226faeaab768e24d02a4af944e124 Mon Sep 17 00:00:00 2001 From: shahmeerzaidi Date: Thu, 25 Jul 2024 11:23:48 +0500 Subject: [PATCH 2/2] fix: removed console log from LocalSwitcher --- src/components/LocalSwitcher.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/LocalSwitcher.jsx b/src/components/LocalSwitcher.jsx index ecd7889..290d85c 100644 --- a/src/components/LocalSwitcher.jsx +++ b/src/components/LocalSwitcher.jsx @@ -22,9 +22,6 @@ const LocaleSwitcher = ({ handleLocaleChange }) => { return ( { - console.log(v); - }} > {Object.keys(LANGUAGE_CODES).map((key) => (