extracted templates, extracted strings for templates

src/components/App/App.js

@@ -1,15 +1,10 @@
-/* eslint-disable no-unused-vars */
 import React, { useEffect, useContext, Suspense } from 'react';
 
+import AppContext from '../../context/AppContext';
 import LeftSidebar from '../LeftSidebar/LeftSidebar';
 import RightSidebar from '../RightSidebar/RightSidebar';
-import AppContext from '../../context/AppContext';
 
-// Resume Templates
+import templates from '../../templates';
-import Onyx from '../../templates/onyx';
-import Pikachu from '../../templates/pikachu';
-import Gengar from '../../templates/gengar';
-import Castform from '../../templates/castform';
 
 const App = () => {
   const context = useContext(AppContext);
@@ -21,21 +16,6 @@ const App = () => {
     dispatch({ type: 'import_data', payload: storedState });
   }, [dispatch]);
 
-  const renderTemplate = () => {
-    switch (theme.layout) {
-      case 'Onyx':
-        return <Onyx />;
-      case 'Pikachu':
-        return <Pikachu />;
-      case 'Gengar':
-        return <Gengar />;
-      case 'Castform':
-        return <Castform />;
-      default:
-        return null;
-    }
-  };
-
   return (
     <Suspense fallback="Loading...">
       <div className="h-screen overflow-hidden grid grid-cols-5 items-center">
@@ -47,7 +27,7 @@ const App = () => {
             className="animated fadeIn my-auto shadow-2xl"
             style={{ animationDelay: '500ms' }}
           >
-            {renderTemplate()}
+            {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
           </div>
         </div>
 

src/components/LeftSidebar/LeftSidebar.js

@@ -13,25 +13,24 @@ import ExtrasTab from './tabs/Extras';
 import LanguagesTab from './tabs/Languages';
 import ReferencesTab from './tabs/References';
 
-const tabs = [
-  'Profile',
-  'Objective',
-  'Work Experience',
-  'Education',
-  'Awards',
-  'Certifications',
-  'Skills',
-  'Languages',
-  'References',
-  'Extras',
-];
-
 const LeftSidebar = () => {
   const context = useContext(AppContext);
   const { state, dispatch } = context;
   const { data } = state;
 
-  const [currentTab, setCurrentTab] = useState('Extras');
+  const tabs = [
+    'Profile',
+    'Objective',
+    'Work Experience',
+    'Education',
+    'Awards',
+    'Certifications',
+    'Skills',
+    'Languages',
+    'References',
+    'Extras',
+  ];
+  const [currentTab, setCurrentTab] = useState('Profile');
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',

src/components/RightSidebar/RightSidebar.js

@@ -1,4 +1,5 @@
 import React, { useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import AppContext from '../../context/AppContext';
 import TabBar from '../../shared/TabBar';
@@ -8,14 +9,15 @@ import FontsTab from './tabs/Fonts';
 import ActionsTab from './tabs/Actions';
 import AboutTab from './tabs/About';
 
-const tabs = ['Templates', 'Colors', 'Fonts', 'Actions', 'About'];
-
 const RightSidebar = () => {
+  const { t } = useTranslation('rightSidebar');
+
   const context = useContext(AppContext);
   const { state, dispatch } = context;
   const { data, theme } = state;
 
-  const [currentTab, setCurrentTab] = useState('Templates');
+  const tabs = [t('templates.title'), 'Colors', 'Fonts', 'Actions', 'About'];
+  const [currentTab, setCurrentTab] = useState(t('templates.title'));
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -30,7 +32,7 @@ const RightSidebar = () => {
 
   const renderTabs = () => {
     switch (currentTab) {
-      case 'Templates':
+      case t('templates.title'):
         return <TemplatesTab theme={theme} onChange={onChange} />;
       case 'Colors':
         return <ColorsTab theme={theme} onChange={onChange} />;

src/components/RightSidebar/tabs/Templates.js

@@ -1,47 +1,25 @@
 import React from 'react';
-import Onyx, { Image as OnyxPreview } from '../../../templates/onyx';
+import { useTranslation } from 'react-i18next';
-import Pikachu, { Image as PikachuPreview } from '../../../templates/pikachu';
-import Gengar, { Image as GengarPreview } from '../../../templates/gengar';
-import Castform, { Image as CastformPreview } from '../../../templates/castform';
 
-const templates = [
+import templates from '../../../templates';
-  {
-    name: 'Onyx',
-    component: Onyx,
-    preview: OnyxPreview,
-  },
-  {
-    name: 'Pikachu',
-    component: Pikachu,
-    preview: PikachuPreview,
-  },
-  {
-    name: 'Gengar',
-    component: Gengar,
-    preview: GengarPreview,
-  },
-  {
-    name: 'Castform',
-    component: Castform,
-    preview: CastformPreview,
-  },
-];
 
 const TemplatesTab = ({ theme, onChange }) => {
+  const { t } = useTranslation('rightSidebar');
+
   return (
     <div className="grid grid-cols-2 gap-6">
       {templates.map(x => (
-        <div key={x.name} className="text-center" onClick={() => onChange('theme.layout', x.name)}>
+        <div key={x.key} className="text-center" onClick={() => onChange('theme.layout', x.key)}>
           <img
             className={`rounded cursor-pointer object-cover border shadow hover:shadow-md ${
-              theme.layout === x.name
+              theme.layout.toLowerCase() === x.key
                 ? 'border-gray-600 hover:border-gray-600'
                 : 'border-transparent '
             } hover:border-gray-500 cursor-pointer`}
             src={x.preview}
-            alt={x.name}
+            alt={t(`templates.templates.${x.key}`)}
           />
-          <p className="mt-1 text-sm font-medium">{x.name}</p>
+          <p className="mt-1 text-sm font-medium">{t(`templates.templates.${x.key}`)}</p>
         </div>
       ))}
     </div>

src/i18n/index.js

@@ -8,7 +8,7 @@ i18n.use(initReactI18next).init({
   fallbackLng: 'en',
   resources,
   debug: true,
-  ns: ['app', 'leftSidebar'],
+  ns: ['app', 'leftSidebar', 'rightSidebar'],
   defaultNS: 'app',
 });
 

src/i18n/resources/en/index.js

@@ -1,7 +1,9 @@
 import app from './app';
 import leftSidebar from './leftSidebar';
+import rightSidebar from './rightSidebar';
 
 export default {
   app,
   leftSidebar,
+  rightSidebar,
 };

src/i18n/resources/en/rightSidebar/index.js

@@ -0,0 +1,5 @@
+import templates from './templates.json';
+
+export default {
+  templates,
+};

src/i18n/resources/en/rightSidebar/templates.json

@@ -0,0 +1,9 @@
+{
+  "title": "Templates",
+  "templates": {
+    "onyx": "Onyx",
+    "pikachu": "Pikaaachu",
+    "gengar": "Gengar",
+    "castform": "Castform"
+  }
+}

src/templates/castform/Castform.js

@@ -234,10 +234,10 @@ const Castform = () => {
       </div>
     );
 
-  const ExtraItem = ({ key, value }) => (
+  const ExtraItem = x => (
-    <div className="px-5 my-2">
+    <div key={x.id} className="px-5 my-2">
-      <h6 className="text-xs font-bold">{key}</h6>
+      <h6 className="text-xs font-bold">{x.key}</h6>
-      <div className="text-sm">{value}</div>
+      <div className="text-sm">{x.value}</div>
     </div>
   );
 

src/templates/gengar/Gengar.js

@@ -215,7 +215,7 @@ const Gengar = () => {
     );
 
   const ExtraItem = x => (
-    <div key={x.key} className="text-sm my-1">
+    <div key={x.id} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <h6>{x.value}</h6>
     </div>

src/templates/index.js

@@ -0,0 +1,27 @@
+import Onyx, { Image as OnyxPreview } from './onyx';
+import Pikachu, { Image as PikachuPreview } from './pikachu';
+import Gengar, { Image as GengarPreview } from './gengar';
+import Castform, { Image as CastformPreview } from './castform';
+
+export default [
+  {
+    key: 'onyx',
+    component: Onyx,
+    preview: OnyxPreview,
+  },
+  {
+    key: 'pikachu',
+    component: Pikachu,
+    preview: PikachuPreview,
+  },
+  {
+    key: 'gengar',
+    component: Gengar,
+    preview: GengarPreview,
+  },
+  {
+    key: 'castform',
+    component: Castform,
+    preview: CastformPreview,
+  },
+];

src/templates/onyx/Onyx.js

@@ -211,7 +211,7 @@ const Onyx = () => {
     );
 
   const ExtraItem = x => (
-    <tr key={x.key}>
+    <tr key={x.id}>
       <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
       <td className="border px-4 py-2 text-sm">{x.value}</td>
     </tr>

src/templates/pikachu/Pikachu.js

@@ -120,7 +120,7 @@ const Pikachu = () => {
     );
 
   const ExtraItem = x => (
-    <div key={x.key} className="text-sm my-1">
+    <div key={x.id} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <h6 className="">{x.value}</h6>
     </div>