Addition of Hindi Language

src/components/App/App.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useContext, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import AppContext from '../../context/AppContext';
 import LeftSidebar from '../LeftSidebar/LeftSidebar';
@@ -7,14 +8,16 @@ import RightSidebar from '../RightSidebar/RightSidebar';
 import templates from '../../templates';
 
 const App = () => {
+  const { i18n } = useTranslation();
   const context = useContext(AppContext);
   const { state, dispatch } = context;
-  const { theme } = state;
+  const { theme, settings } = state;
 
   useEffect(() => {
+    i18n.changeLanguage(settings.language);
     const storedState = JSON.parse(localStorage.getItem('state'));
     dispatch({ type: 'import_data', payload: storedState });
-  }, [dispatch]);
+  }, [dispatch, i18n, settings.language]);
 
   return (
     <Suspense fallback="Loading...">

src/components/LeftSidebar/LeftSidebar.js

@@ -19,18 +19,18 @@ const LeftSidebar = () => {
   const { data } = state;
 
   const tabs = [
-    'Profile',
-    'Objective',
-    'Work Experience',
-    'Education',
-    'Awards',
-    'Certifications',
-    'Skills',
-    'Languages',
-    'References',
-    'Extras',
+    { key: 'profile', name: data.profile.heading },
+    { key: 'objective', name: data.objective.heading },
+    { key: 'work', name: data.work.heading },
+    { key: 'education', name: data.education.heading },
+    { key: 'awards', name: data.awards.heading },
+    { key: 'certifications', name: data.certifications.heading },
+    { key: 'skills', name: data.skills.heading },
+    { key: 'languages', name: data.languages.heading },
+    { key: 'references', name: data.references.heading },
+    { key: 'extras', name: data.extras.heading },
   ];
-  const [currentTab, setCurrentTab] = useState('Profile');
+  const [currentTab, setCurrentTab] = useState(tabs[0].key);
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -45,25 +45,25 @@ const LeftSidebar = () => {
 
   const renderTabs = () => {
     switch (currentTab) {
-      case 'Profile':
+      case tabs[0].key:
         return <ProfileTab data={data} onChange={onChange} />;
-      case 'Objective':
+      case tabs[1].key:
         return <ObjectiveTab data={data} onChange={onChange} />;
-      case 'Work Experience':
+      case tabs[2].key:
         return <WorkTab data={data} onChange={onChange} />;
-      case 'Education':
+      case tabs[3].key:
         return <EducationTab data={data} onChange={onChange} />;
-      case 'Awards':
+      case tabs[4].key:
         return <AwardsTab data={data} onChange={onChange} />;
-      case 'Certifications':
+      case tabs[5].key:
         return <CertificationsTab data={data} onChange={onChange} />;
-      case 'Skills':
+      case tabs[6].key:
         return <SkillsTab data={data} onChange={onChange} />;
-      case 'Languages':
+      case tabs[7].key:
         return <LanguagesTab data={data} onChange={onChange} />;
-      case 'References':
+      case tabs[8].key:
         return <ReferencesTab data={data} onChange={onChange} />;
-      case 'Extras':
+      case tabs[9].key:
         return <ExtrasTab data={data} onChange={onChange} />;
       default:
         return null;

src/components/RightSidebar/RightSidebar.js

@@ -18,14 +18,32 @@ const RightSidebar = () => {
   const { data, theme, settings } = state;
 
   const tabs = [
-    t('templates.title'),
-    t('colors.title'),
-    t('fonts.title'),
-    t('actions.title'),
-    t('settings.title'),
-    t('about.title'),
+    {
+      key: 'templates',
+      name: t('templates.title'),
+    },
+    {
+      key: 'colors',
+      name: t('colors.title'),
+    },
+    {
+      key: 'fonts',
+      name: t('fonts.title'),
+    },
+    {
+      key: 'actions',
+      name: t('actions.title'),
+    },
+    {
+      key: 'settings',
+      name: t('settings.title'),
+    },
+    {
+      key: 'about',
+      name: t('about.title'),
+    },
   ];
-  const [currentTab, setCurrentTab] = useState(t('settings.title'));
+  const [currentTab, setCurrentTab] = useState(tabs[0].key);
 
   const onChange = (key, value) => {
     dispatch({
@@ -41,17 +59,17 @@ const RightSidebar = () => {
 
   const renderTabs = () => {
     switch (currentTab) {
-      case t('templates.title'):
+      case tabs[0].key:
         return <TemplatesTab theme={theme} onChange={onChange} />;
-      case t('colors.title'):
+      case tabs[1].key:
         return <ColorsTab theme={theme} onChange={onChange} />;
-      case t('fonts.title'):
+      case tabs[2].key:
         return <FontsTab theme={theme} onChange={onChange} />;
-      case t('actions.title'):
+      case tabs[3].key:
         return <ActionsTab data={data} theme={theme} dispatch={dispatch} />;
-      case t('settings.title'):
+      case tabs[4].key:
         return <SettingsTab settings={settings} onChange={onChange} />;
-      case t('about.title'):
+      case tabs[5].key:
         return <AboutTab />;
       default:
         return null;

src/components/RightSidebar/tabs/Settings.js

@@ -5,19 +5,14 @@ import { languages } from '../../../i18n';
 import Dropdown from '../../../shared/Dropdown';
 
 const SettingsTab = ({ settings, onChange }) => {
-  const { t, i18n } = useTranslation('rightSidebar');
-
-  const onChangeLanguage = code => {
-    i18n.changeLanguage(code);
-    onChange('settings.language', code);
-  };
+  const { t } = useTranslation('rightSidebar');
 
   return (
     <div>
       <Dropdown
         label={t('settings.language.label')}
         value={settings.language}
-        onChange={onChangeLanguage}
+        onChange={x => onChange('settings.language', x)}
         options={languages}
         optionItem={x => (
           <option key={x.code} value={x.code}>

src/i18n/index.js

@@ -8,6 +8,10 @@ const languages = [
     code: 'en',
     name: 'English',
   },
+  {
+    code: 'hi',
+    name: 'Hindi',
+  },
 ];
 
 i18n.use(initReactI18next).init({

src/shared/TabBar.js

@@ -4,15 +4,15 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
   const tabsRef = useRef(null);
 
   const scrollBy = x => {
-    const index = tabs.indexOf(currentTab);
+    const index = tabs.find(tab => tab.key === currentTab);
     tabsRef.current.scrollLeft += x;
 
     if (x < 0 && index > 0) {
-      setCurrentTab(tabs[index - 1]);
+      setCurrentTab(tabs[index - 1].key);
     }
 
     if (x > 0 && index < tabs.length - 1) {
-      setCurrentTab(tabs[index + 1]);
+      setCurrentTab(tabs[index + 1].key);
     }
   };
 
@@ -27,19 +27,19 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
 
       <ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
         {tabs.map(tab =>
-          currentTab === tab ? (
-            <li key={tab} className="mx-1 list-none">
+          currentTab === tab.key ? (
+            <li key={tab.key} className="mx-1 list-none">
               <div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
-                {tab}
+                {tab.name || 'Tab'}
               </div>
             </li>
           ) : (
-            <li key={tab} className="mx-1 list-none">
+            <li key={tab.key} className="mx-1 list-none">
               <div
                 className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
-                onClick={() => setCurrentTab(tab)}
+                onClick={() => setCurrentTab(tab.key)}
               >
-                {tab}
+                {tab.name || 'Tab'}
               </div>
             </li>
           ),