From 1ed9d6de782a5c5a96f73d3d27748ecf9efa12d6 Mon Sep 17 00:00:00 2001
From: Airyzz <36567925+Airyzz@users.noreply.github.com>
Date: Wed, 15 Jun 2022 11:31:39 +0930
Subject: [PATCH] Added translation to Tabs

Implemented the change to SpaceSettings as an example.
---
 public/locales/en/translation.json                 | 7 +++++++
 public/locales/jp/translation.json                 | 7 +++++++
 src/app/atoms/tabs/Tabs.jsx                        | 7 ++++++-
 src/app/organisms/space-settings/SpaceSettings.jsx | 9 ++++++---
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 11cdca01..d2ee9a50 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -30,5 +30,12 @@
         "uncategorize_subspaces": "Uncategorize subspaces",
         "pin_sidebar": "Pin to sidebar",
         "unpin_sidebar": "Unpin from sidebar"
+    },
+    "settings":{
+        "tabs": {
+            "general": "General",
+            "members": "Members",
+            "permission": "Permissions"
+        }
     }
 }
\ No newline at end of file
diff --git a/public/locales/jp/translation.json b/public/locales/jp/translation.json
index 6191885d..cbbfac1b 100644
--- a/public/locales/jp/translation.json
+++ b/public/locales/jp/translation.json
@@ -5,5 +5,12 @@
     },
     "welcome":{
         "heading": "いらっしゃいませ"
+    },
+    "settings":{
+        "tabs": {
+            "general": "一般",
+            "members": "ユーザー",
+            "permission": "許可"
+        }
     }
 }
\ No newline at end of file
diff --git a/src/app/atoms/tabs/Tabs.jsx b/src/app/atoms/tabs/Tabs.jsx
index 39800ce3..2c87cebe 100644
--- a/src/app/atoms/tabs/Tabs.jsx
+++ b/src/app/atoms/tabs/Tabs.jsx
@@ -5,6 +5,9 @@ import './Tabs.scss';
 import Button from '../button/Button';
 import ScrollView from '../scroll/ScrollView';
 
+import '../../i18n.jsx'
+import { useTranslation } from 'react-i18next';
+
 function TabItem({
   selected, iconSrc,
   onClick, children, disabled,
@@ -41,6 +44,8 @@ TabItem.propTypes = {
 function Tabs({ items, defaultSelected, onSelect }) {
   const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
 
+  const { t } = useTranslation();
+
   const handleTabSelection = (item, index) => {
     if (selectedItem === item) return;
     setSelectedItem(item);
@@ -59,7 +64,7 @@ function Tabs({ items, defaultSelected, onSelect }) {
               disabled={item.disabled}
               onClick={() => handleTabSelection(item, index)}
             >
-              {item.text}
+              {(item.translate != undefined && item.translate) ? t(item.text) : item.text}
             </TabItem>
           ))}
         </div>
diff --git a/src/app/organisms/space-settings/SpaceSettings.jsx b/src/app/organisms/space-settings/SpaceSettings.jsx
index 8ac561ee..bcc01ee1 100644
--- a/src/app/organisms/space-settings/SpaceSettings.jsx
+++ b/src/app/organisms/space-settings/SpaceSettings.jsx
@@ -44,23 +44,26 @@ import '../../i18n.jsx'
 import { useTranslation } from 'react-i18next';
 
 const tabText = {
-  GENERAL: 'General',
-  MEMBERS: 'Members',
-  PERMISSIONS: 'Permissions',
+  GENERAL: 'settings.tabs.general',
+  MEMBERS: 'settings.tabs.members',
+  PERMISSIONS: 'settings.tabs.permission',
 };
 
 const tabItems = [{
   iconSrc: SettingsIC,
   text: tabText.GENERAL,
+  translate: true,
   disabled: false,
 }, {
   iconSrc: UserIC,
   text: tabText.MEMBERS,
+  translate: true,
   disabled: false,
 }, {
   iconSrc: ShieldUserIC,
   text: tabText.PERMISSIONS,
   disabled: false,
+  translate: true
 }];
 
 function GeneralSettings({ roomId }) {