From 0631bc0e8696809438fbf8a5af8b6fd93af60541 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 31 Oct 2023 21:32:26 +0100
Subject: [PATCH] add logic to switch lang

---
 .../src/lib/components/homeTablangOptions.tsx | 23 ++++++++++++-------
 .../home-tab/src/lib/remix-ui-home-tab.tsx    |  2 +-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx
index bf2ac1e15c..8a1dc53d05 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx
@@ -1,18 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown, DropdownButton } from 'react-bootstrap'
 import DropdownItem from "react-bootstrap/DropdownItem";
 
-export function LanguageOptions() {
-  const langOptions = ['EN', 'ES', 'FR', 'ZH'] //get languages from locale
-  const changeLanguage = (e: any) => {
-    //change language
+export function LanguageOptions({ plugin }: { plugin: any }) {
+  const [langOptions, setLangOptions] = useState<string>('') //get languages from locale
+  const changeLanguage = async (lang: string) => {
+    await plugin.call('locale', 'switchLocale', lang)
   }
   return (
     <>
       <div className="d-flex align-items-center justify-content-end mx-1">
-        <DropdownButton title="EN" id="langdropdown" size="sm">
-          {langOptions.map(lang => (
-            <DropdownItem as={'span'} onClick={changeLanguage}>{lang}</DropdownItem>
+        <DropdownButton title={langOptions} id="langdropdown" size="sm">
+          {['EN', 'ES', 'FR', 'ZH'].map(lang => (
+            <DropdownItem as={'span'} onClick={() =>
+            {
+              changeLanguage(lang.toLowerCase())
+              setLangOptions(lang)
+            }}
+            >
+              {lang}
+            </DropdownItem>
           ))}
         </DropdownButton>
       </div>
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
index 9d8c2636a2..ef636136e2 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@@ -61,7 +61,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             <HomeTabLearn plugin={plugin} />
           </div>
           <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: '65%'}} id="remixUIHTRight">
-            <LanguageOptions />
+            <LanguageOptions plugin={plugin}/>
             <HomeTabFeatured></HomeTabFeatured>
             <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
             <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>