From 65d9046ba286e5c9a114115c8117d119b09a7411 Mon Sep 17 00:00:00 2001
From: jgresham <johnsgresham@gmail.com>
Date: Wed, 2 Nov 2022 12:02:04 -0500
Subject: [PATCH] chore: add language select to storybook wrapper component

---
 .../Generics/redesign/RedesignContainer.tsx   | 24 ++++++++-----
 .../StorybookLanguageSelect.tsx               | 35 +++++++++++++++++++
 2 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 src/renderer/Presentational/StorybookLanguageSelect.tsx

diff --git a/src/renderer/Generics/redesign/RedesignContainer.tsx b/src/renderer/Generics/redesign/RedesignContainer.tsx
index 62a8b9be8..a86c481bd 100644
--- a/src/renderer/Generics/redesign/RedesignContainer.tsx
+++ b/src/renderer/Generics/redesign/RedesignContainer.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import StorybookLanguageSelect from '../../Presentational/StorybookLanguageSelect';
 import { darkTheme, lightTheme } from './theme.css';
 
 const RedesignContainerStoryBook: React.FC = ({ children }) => {
@@ -6,14 +7,21 @@ const RedesignContainerStoryBook: React.FC = ({ children }) => {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '90vh' }}>
-      <p>Toggle dark mode</p>
-      <button
-        style={{ width: 150 }}
-        type="button"
-        onClick={() => setIsDarkTheme((currentValue: boolean) => !currentValue)}
-      >
-        Switch to {isDarkTheme ? 'light' : 'dark'} theme
-      </button>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <div>
+          <p>Toggle dark mode</p>
+          <button
+            style={{ width: 150 }}
+            type="button"
+            onClick={() =>
+              setIsDarkTheme((currentValue: boolean) => !currentValue)
+            }
+          >
+            Switch to {isDarkTheme ? 'light' : 'dark'} theme
+          </button>
+        </div>
+        <StorybookLanguageSelect />
+      </div>
       <div
         id="onBoarding"
         className={isDarkTheme ? darkTheme : lightTheme}
diff --git a/src/renderer/Presentational/StorybookLanguageSelect.tsx b/src/renderer/Presentational/StorybookLanguageSelect.tsx
new file mode 100644
index 000000000..ba985210d
--- /dev/null
+++ b/src/renderer/Presentational/StorybookLanguageSelect.tsx
@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import Select from '../DynamicControls/Select';
+
+const StorybookLanguageSelect = () => {
+  const { i18n } = useTranslation();
+  const [sLang, setLang] = useState<string>('en');
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onChangeLanguage = async (newLang: any) => {
+    console.log('language selected: ', newLang);
+    setLang(newLang);
+    i18n.changeLanguage(newLang);
+  };
+
+  return (
+    <Select
+      isDisabled={false}
+      value={sLang}
+      isMulti={false}
+      options={[
+        { label: 'English', value: 'en' },
+        { label: 'Chinese', value: 'cn' },
+        { label: 'Español', value: 'es' },
+        { label: 'French', value: 'fr' },
+        { label: 'German', value: 'de' },
+        { label: 'Japanese', value: 'ja' },
+        { label: 'Vietnamese', value: 'vi' },
+      ]}
+      onChange={onChangeLanguage}
+      menuPlacement="top"
+    />
+  );
+};
+export default StorybookLanguageSelect;