fix(i18n): add support for separator in <Text /> [#40]

.commitlintrc.js

@@ -15,6 +15,7 @@ module.exports = {
  'tools',
  'diary',
  'utils',
+ 'i18n',
  ],
  ],
  'scope-empty': [2, 'never'],

components/common/Text.js

@@ -6,23 +6,28 @@ import LocaleContext from 'components/common/LocaleContext';
 import { DEFAULT_LOCALE } from 'constants';
 import dict from 'data/i18n.json';
 
+const SEPARATOR = '||';
+
 const defaultRender = text => <>{text}</>;
 
 export const localize = (id, lang) =>
  get(dict, `${id}.${lang}`) || get(dict, `${id}.${DEFAULT_LOCALE}`) || '';
 
 const Text = ({ id, children, render = children }) => (
- <LocaleContext.Consumer>{lang => render(localize(id, lang))}</LocaleContext.Consumer>
+ <LocaleContext.Consumer>
+ {lang => render(...localize(id, lang).split(SEPARATOR))}
+ </LocaleContext.Consumer>
 );
 
 Text.propTypes = {
+ /** translation key in our i18n dict */
  id: PropTypes.string.isRequired,
+ // eslint-disable-next-line react/require-default-props
  render: PropTypes.func,
  children: PropTypes.func,
 };
 
 Text.defaultProps = {
- render: defaultRender,
  children: defaultRender,
 };
 

lint-staged.config.js

@@ -1,3 +1,4 @@
 module.exports = {
  '**/*.js': ['npm run prettier', 'eslint --fix', 'git add'],
+ '**/*.md': ['npm run prettier', 'git add'],
 };

pages/about.js

@@ -101,46 +101,48 @@ class AboutPage extends Component {
  // eslint-disable-next-line react/no-array-index-key
  <TeamRow key={index} data={data} />
  ))}
- <div className="thanks">
- <Text id="about.thanks-beginning" />{' '}
- <b>
- <Text id="about.thanks-hanna" />{' '}
- </b>
- <Text id="about.thanks-logo-and" />{' '}
- <b>
- <Text id="about.thanks-daniil" />{' '}
- </b>
- <Text id="about.thanks-soundtrack" />
- </div>
+ <Text id="about.thanks">
+ {(thanks, hanna, forLogo, daniil, forSoundtrack) => (
+  <div className="thanks">
+  {thanks}
+  <b>{hanna}</b>
+  {forLogo}
+  <b>{daniil}</b>
+  {forSoundtrack}
+  </div>
+ )}
+ </Text>
  </div>
  <hr />
  </>
  )}
- <div className="contact">
- <Text id="about.find-us" />
- <br />
- <Text id="about.mail-to-us" />
- <br />
- <Text id="about.mail-to-dev" /> <MailLink />
- <br />
- <Text id="about.mail-to-help" /> <MailLink to="help" />
- <div className="talaka">
- <span className="talaka-text">
- <Text id="about.we-on" />
- </span>{' '}
- <a className="talaka" href="https://www.talaka.org/projects/2495/overview">
- <img
- className="talaka-text"
- alt="Talaka"
- src="/static/images/references/talaka_logo.png"
- width="30"
- />{' '}
- <span className="talaka-text">
- <Text id="about.talaka" />
- </span>
- </a>
- </div>
- </div>
+ <Text id="about.contact">
+ {(findUs, mailToUs, mailToDev, mailToHelp, weOn, talaka) => (
+ <div className="contact">
+ {findUs}
+ <br />
+ {mailToUs}
+ <br />
+ {mailToDev}
+ <MailLink />
+ <br />
+ {mailToHelp}
+ <MailLink to="help" />
+ <div className="talaka">
+ <span className="talaka-text">{weOn}</span>{' '}
+ <a className="talaka" href="https://www.talaka.org/projects/2495/overview">
+ <img
+ className="talaka-text"
+ alt="Talaka"
+ src="/static/images/references/talaka_logo.png"
+ width="30"
+ />{' '}
+ <span className="talaka-text">{talaka}</span>
+ </a>
+ </div>
+ </div>
+ )}
+ </Text>
  </PageLayout>
  );
  }