fix: seperate language data from providers

deriv-com · Dec 1, 2023 · 591ad52 · 591ad52
1 parent e099051
commit 591ad52
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 135 deletions.
diff --git a/apps/deriv-hk/pages/_app.tsx b/apps/deriv-hk/pages/_app.tsx
@@ -5,11 +5,11 @@ import {
   SharedLinkProvider,
   SharedLink,
   LanguageProvider,
-  langItemsHK,
 } from '@deriv-com/providers';
 import Link from 'next/link';
 import { BreakpointProvider, ThemeProvider } from '@deriv/quill-design';
 import Head from 'next/head';
+import { langItemsHK } from './data';
 
 const NextSharedLink: SharedLink = ({ href, ...rest }) => {
   return <Link href={href ?? '/'} {...rest} />;

diff --git a/apps/deriv-hk/pages/data.ts b/apps/deriv-hk/pages/data.ts
@@ -0,0 +1,23 @@
+import { LangItems } from '@deriv-com/providers';
+
+export const langItemsHK: LangItems = {
+  en: {
+    isDefault: true,
+    path: 'en',
+    displayName: 'English',
+    shortName: 'EN',
+    affiliateLang: 0,
+  },
+  zhcn: {
+    path: 'zh-cn',
+    displayName: '简体中文',
+    shortName: '简体',
+    affiliateLang: 10,
+  },
+  zhtw: {
+    path: 'zh-tw',
+    displayName: '繁體中文',
+    shortName: '繁體',
+    affiliateLang: 11,
+  },
+};
diff --git a/libs/features/src/lib/navigation/main/main-navigation.stories.tsx b/libs/features/src/lib/navigation/main/main-navigation.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MainNavigation from '.';
-import { LanguageProvider, langItemsHK } from '@deriv-com/providers';
+import { LangItems, LanguageProvider } from '@deriv-com/providers';
 
 const meta = {
   title: 'Features/Navigation/Main HK',
@@ -32,3 +32,25 @@ export const Default = {
   ...Template,
   args: {},
 };
+
+const langItemsHK: LangItems = {
+  en: {
+    isDefault: true,
+    path: 'en',
+    displayName: 'English',
+    shortName: 'EN',
+    affiliateLang: 0,
+  },
+  zhcn: {
+    path: 'zh-cn',
+    displayName: '简体中文',
+    shortName: '简体',
+    affiliateLang: 10,
+  },
+  zhtw: {
+    path: 'zh-tw',
+    displayName: '繁體中文',
+    shortName: '繁體',
+    affiliateLang: 11,
+  },
+};
diff --git a/libs/features/src/lib/navigation/main/main.row-navigation.stories.tsx b/libs/features/src/lib/navigation/main/main.row-navigation.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import MainRowNavigation from './man-navigation.row';
-import { LanguageProvider, langItemsROW } from '@deriv-com/providers';
+import { LangItems, LanguageProvider } from '@deriv-com/providers';
 
 const meta = {
   title: 'Features/Navigation/Main Row',
@@ -32,3 +32,108 @@ export const Default = {
   ...Template,
   args: {},
 };
+
+const langItemsROW: LangItems = {
+  en: {
+    isDefault: true,
+    path: 'en',
+    displayName: 'English',
+    shortName: 'EN',
+    affiliateLang: 0,
+  },
+  es: {
+    path: 'es',
+    displayName: 'Español',
+    shortName: 'ES',
+    affiliateLang: 8,
+  },
+  fr: {
+    path: 'fr',
+    displayName: 'Français',
+    shortName: 'FR',
+    affiliateLang: 2,
+  },
+  it: {
+    path: 'it',
+    displayName: 'Italiano',
+    shortName: 'IT',
+    affiliateLang: 3,
+  },
+  pl: {
+    path: 'pl',
+    displayName: 'Polski',
+    shortName: 'PL',
+    affiliateLang: 5,
+  },
+  pt: {
+    path: 'pt',
+    displayName: 'Português',
+    shortName: 'PT',
+    affiliateLang: 9,
+  },
+  ru: {
+    path: 'ru',
+    displayName: 'Русский',
+    shortName: 'RU',
+    affiliateLang: 1,
+  },
+  th: {
+    path: 'th',
+    displayName: 'Thai',
+    shortName: 'TH',
+    affiliateLang: 12,
+  },
+  vi: {
+    path: 'vi',
+    displayName: 'Tiếng Việt',
+    shortName: 'VI',
+    affiliateLang: 6,
+  },
+  tr: {
+    path: 'tr',
+    displayName: 'Türkçe',
+    shortName: 'TR',
+    affiliateLang: 14,
+  },
+  zhcn: {
+    path: 'zh-cn',
+    displayName: '简体中文',
+    shortName: '简体',
+    affiliateLang: 10,
+  },
+  zhtw: {
+    path: 'zh-tw',
+    displayName: '繁體中文',
+    shortName: '繁體',
+    affiliateLang: 11,
+  },
+  bn: {
+    path: 'bn',
+    displayName: 'বাংলা',
+    shortName: 'BN',
+    affiliateLang: 15,
+  },
+  ar: {
+    path: 'ar',
+    displayName: 'العربية',
+    shortName: 'AR',
+  },
+  ko: {
+    path: 'ko',
+    displayName: '한국어',
+    shortName: 'KO',
+    affiliateLang: 16,
+  },
+  de: {
+    path: 'de',
+    displayName: 'Deutsch',
+    shortName: 'DE',
+    affiliateLang: 16,
+  },
+  si: {
+    path: 'si',
+    displayName: 'සිංහල',
+    shortName: 'SI',
+    affiliateLang: 17,
+  },
+};
diff --git a/libs/providers/src/lib/language-swithcer/data.ts b/libs/providers/src/lib/language-swithcer/data.ts
diff --git a/libs/providers/src/lib/language-swithcer/index.ts b/libs/providers/src/lib/language-swithcer/index.ts
@@ -1,4 +1,3 @@
 export * from './types';
 export * from './language.context';
 export * from './language.provider';
-export * from './data';
diff --git a/libs/providers/src/lib/language-swithcer/language.context.ts b/libs/providers/src/lib/language-swithcer/language.context.ts
@@ -2,8 +2,8 @@ import { createContext } from 'react';
 import { LangItem, LangItems } from './types';
 
 export interface LanguageContextType {
-  onLanguageHover?: VoidFunction;
   langItems: LangItems;
+  onLanguageHover?: VoidFunction;
   activeLanguage?: LangItem;
   onBlurHoverLang?: VoidFunction;
   showLangContent: boolean;

diff --git a/libs/providers/src/lib/language-swithcer/language.provider.tsx b/libs/providers/src/lib/language-swithcer/language.provider.tsx
@@ -5,10 +5,12 @@ import { LanguageContext } from './language.context';
 export interface LanguageProviderProps {
   children: React.ReactNode;
   langItems: LangItems;
+  onLangSelect?: (lang: LangItem) => void;
 }
 export const LanguageProvider: React.FC<LanguageProviderProps> = ({
   children,
   langItems,
+  onLangSelect,
 }) => {
   const [activeLanguage, setActiveLanguage] = useState(langItems.en);
   const [showLangContent, setShowLangContent] = useState(false);
@@ -25,13 +27,14 @@ export const LanguageProvider: React.FC<LanguageProviderProps> = ({
   const selectLanguage = (item: LangItem) => {
     setActiveLanguage(item);
     setShowLangContent(false);
+    onLangSelect?.(item);
   };
 
   return (
     <LanguageContext.Provider
       value={{
-        onLanguageHover,
         langItems,
+        onLanguageHover,
         activeLanguage,
         showLangContent,
         setShowLangContent,