From af3ec283d01302fd227788dc364e7208c48dbc0d Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Mon, 30 Mar 2020 11:32:32 +0530 Subject: [PATCH] extract strings from actions tab --- src/components/RightSidebar/RightSidebar.js | 12 +++-- src/components/RightSidebar/tabs/Actions.js | 49 ++++++++----------- .../resources/en/rightSidebar/actions.json | 33 +++++++++++++ src/i18n/resources/en/rightSidebar/index.js | 2 + 4 files changed, 64 insertions(+), 32 deletions(-) create mode 100644 src/i18n/resources/en/rightSidebar/actions.json diff --git a/src/components/RightSidebar/RightSidebar.js b/src/components/RightSidebar/RightSidebar.js index 3ab0f0b6..7ecb8575 100644 --- a/src/components/RightSidebar/RightSidebar.js +++ b/src/components/RightSidebar/RightSidebar.js @@ -16,8 +16,14 @@ const RightSidebar = () => { const { state, dispatch } = context; const { data, theme } = state; - const tabs = [t('templates.title'), t('colors.title'), t('fonts.title'), 'Actions', 'About']; - const [currentTab, setCurrentTab] = useState(t('fonts.title')); + const tabs = [ + t('templates.title'), + t('colors.title'), + t('fonts.title'), + t('actions.title'), + 'About', + ]; + const [currentTab, setCurrentTab] = useState(t('actions.title')); const onChange = (key, value) => { dispatch({ type: 'on_input', @@ -38,7 +44,7 @@ const RightSidebar = () => { return ; case t('fonts.title'): return ; - case 'Actions': + case t('actions.title'): return ; case 'About': return ; diff --git a/src/components/RightSidebar/tabs/Actions.js b/src/components/RightSidebar/tabs/Actions.js index f5175b9c..afaa0a3f 100644 --- a/src/components/RightSidebar/tabs/Actions.js +++ b/src/components/RightSidebar/tabs/Actions.js @@ -1,8 +1,10 @@ /* eslint-disable jsx-a11y/anchor-has-content */ /* eslint-disable jsx-a11y/anchor-is-valid */ import React, { useRef } from 'react'; +import { useTranslation, Trans } from 'react-i18next'; const ActionsTab = ({ data, theme, dispatch }) => { + const { t } = useTranslation('rightSidebar'); const fileInputRef = useRef(null); const importJson = event => { @@ -36,20 +38,14 @@ const ActionsTab = ({ data, theme, dispatch }) => { return (
-
- Changes you make to your resume are saved automatically to your browser's local - storage. No data gets out, hence your information is completely secure. -
+
{t('actions.disclaimer')}
-
Import/Export
+
{t('actions.importExport.heading')}
-

- You can import or export your data in JSON format. With this, you can edit and print your - resume from any device. Save this file for later use. -

+

{t('actions.importExport.body')}

@@ -62,7 +58,7 @@ const ActionsTab = ({ data, theme, dispatch }) => { >
publish - Import + {t('actions.importExport.buttons.import')}
@@ -73,7 +69,7 @@ const ActionsTab = ({ data, theme, dispatch }) => { >
get_app - Export + {t('actions.importExport.buttons.export')}
@@ -82,12 +78,14 @@ const ActionsTab = ({ data, theme, dispatch }) => {
-
Print Your Resume
+
{t('actions.printResume.heading')}
- You can simply press 
Cmd/Ctrl + P
at any time - while you're in the app to print your resume, but here's a fancy button to do - the same thing, just 'cause. + + You can simply press 
Cmd/Ctrl + P
at any time + while you're in the app to print your resume, but here's a fancy button to do + the same thing, just 'cause. +
@@ -105,12 +103,9 @@ const ActionsTab = ({ data, theme, dispatch }) => {
-
Load Dummy Data
+
{t('actions.loadDummyData.heading')}
-
- Unclear on what to do with a fresh blank page? Load some dummy data with pre-populated - values to see how a resume should look and you can start editing from there. -
+
{t('actions.loadDummyData.body')}
@@ -127,13 +122,9 @@ const ActionsTab = ({ data, theme, dispatch }) => {
-
Reset Everything!
+
{t('actions.reset.heading')}
-
- This action will reset all your data and remove backups made to your browser's local - storage as well, so please make sure you have exported your information before you reset - everything. -
+
{t('actions.reset.body')}
diff --git a/src/i18n/resources/en/rightSidebar/actions.json b/src/i18n/resources/en/rightSidebar/actions.json new file mode 100644 index 00000000..7e5b39ff --- /dev/null +++ b/src/i18n/resources/en/rightSidebar/actions.json @@ -0,0 +1,33 @@ +{ + "title": "Actions", + "disclaimer": "Changes you make to your resume are saved automatically to your browser's local storage. No data gets out, hence your information is completely secure.", + "importExport": { + "heading": "Import/Export", + "body": "You can import or export your data in JSON format. With this, you can edit and print your resume from any device. Save this file for later use.", + "buttons": { + "import": "Import", + "export": "Export" + } + }, + "printResume": { + "heading": "Print Your Resume", + "body": "You can simply press <1>Cmd/Ctrl + P at any time while you're in the app to print your resume, but here's a fancy button to do the same thing, just 'cause.", + "buttons": { + "print": "Print" + } + }, + "loadDummyData": { + "heading": "Load Dummy Data", + "body": "Unclear on what to do with a fresh blank page? Load some dummy data with pre-populated values to see how a resume should look and you can start editing from there.", + "buttons": { + "loadData": "Populate Data" + } + }, + "reset": { + "heading": "Reset Everything!", + "body": "This action will reset all your data and remove backups made to your browser's local storage as well, so please make sure you have exported your information before you reset everything.", + "buttons": { + "reset": "Reset" + } + } +} diff --git a/src/i18n/resources/en/rightSidebar/index.js b/src/i18n/resources/en/rightSidebar/index.js index 3d59d772..275bd62a 100644 --- a/src/i18n/resources/en/rightSidebar/index.js +++ b/src/i18n/resources/en/rightSidebar/index.js @@ -1,9 +1,11 @@ import templates from './templates.json'; import colors from './colors.json'; import fonts from './fonts.json'; +import actions from './actions.json'; export default { templates, colors, fonts, + actions, };