From 1602e192145a6fff3f360750042e6f9492f3377a Mon Sep 17 00:00:00 2001
From: crptm <crptm@users.noreply.github.com>
Date: Fri, 26 May 2017 02:05:11 +0400
Subject: [PATCH] support translations markup

---
 common/translations/index.js     |  6 ++-
 common/translations/markup.js    | 37 +++++++++++++++++
 jest_config/jest.config.json     |  3 +-
 spec/translations/markup.spec.js | 69 ++++++++++++++++++++++++++++++++
 4 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 common/translations/markup.js
 create mode 100644 spec/translations/markup.spec.js

diff --git a/common/translations/index.js b/common/translations/index.js
index 1ff99c42..50533981 100644
--- a/common/translations/index.js
+++ b/common/translations/index.js
@@ -1,5 +1,5 @@
 // @flow
-
+import { markupToReact } from './markup';
 let activeLanguage = 'en';
 let fallbackLanguage = 'en';
 let repository = {};
@@ -36,5 +36,7 @@ export function setLanguage(code: string) {
 }
 
 export default function translate(key: string) {
-    return repository[activeLanguage][key] || repository[fallbackLanguage][key] || key;
+    return markupToReact(
+        repository[activeLanguage][key] || repository[fallbackLanguage][key] || key
+    );
 }
diff --git a/common/translations/markup.js b/common/translations/markup.js
new file mode 100644
index 00000000..f48ca4d6
--- /dev/null
+++ b/common/translations/markup.js
@@ -0,0 +1,37 @@
+// ad-hoc parser for translation strings
+import React from 'react';
+
+const BOLD_REGEXP = /(\*\*)(.*?)\1/;
+const LINK_REGEXP = /\[([^\[]+)\]\(([^\)]+)\)/;
+
+function linkify(mdString: string) {
+    const parts = mdString.split(LINK_REGEXP);
+    if (parts.length === 1) {
+        return parts[0];
+    }
+    const result = [];
+    let i = 0;
+    while (i + 1 < parts.length) {
+        result.push(parts[i]);
+        result.push(<a href={parts[i + 2]} target="_blank">{parts[i + 1]}</a>);
+        i += 3;
+    }
+    result.push(parts[parts.length - 1]);
+    return result.filter(Boolean);
+}
+
+export function markupToReact(mdString: string) {
+    const parts = mdString.split(BOLD_REGEXP);
+    if (parts.length === 1) {
+        return linkify(parts[0]);
+    }
+    let result = [];
+    let i = 0;
+    while (i + 1 < parts.length) {
+        result = result.concat(linkify(parts[i]));
+        result.push(<b>{parts[i + 2]}</b>);
+        i += 3;
+    }
+    result = result.concat(linkify(parts.pop()));
+    return result.filter(Boolean);
+}
diff --git a/jest_config/jest.config.json b/jest_config/jest.config.json
index 7965fbb8..3c8b3e2d 100644
--- a/jest_config/jest.config.json
+++ b/jest_config/jest.config.json
@@ -10,7 +10,6 @@
         "^routing": "<rootDir>/common/routing",
         "^components$": "<rootDir>/common/components",
         "^containers$": "<rootDir>/common/containers",
-        "^config$": "<rootDir>/common/config/test.js",
-        "^translations$": "<rootDir>/common/translations"
+        "^translations(.*)": "<rootDir>/common/translations$1"
     }
 }
diff --git a/spec/translations/markup.spec.js b/spec/translations/markup.spec.js
new file mode 100644
index 00000000..9c4427ac
--- /dev/null
+++ b/spec/translations/markup.spec.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import { markupToReact } from 'translations/markup';
+
+describe('markupToReact', () => {
+    it('passes plain string as is', () => {
+        const value = 'string';
+        const expected = 'string';
+        expect(markupToReact(value)).toEqual(expected);
+    });
+
+    it('transforms bold syntax', () => {
+        let value = '**foo**';
+        let expected = [<b>foo</b>];
+        expect(markupToReact(value)).toEqual(expected);
+
+        value = '**foo** bar';
+        expected = [<b>foo</b>, ' bar'];
+        expect(markupToReact(value)).toEqual(expected);
+
+        value = 'bar **foo**';
+        expected = ['bar ', <b>foo</b>];
+        expect(markupToReact(value)).toEqual(expected);
+
+        value = 'bar **foo** baz';
+        expected = ['bar ', <b>foo</b>, ' baz'];
+        expect(markupToReact(value)).toEqual(expected);
+
+        value = '**foo****bar**';
+        expected = [<b>foo</b>, <b>bar</b>];
+        expect(markupToReact(value)).toEqual(expected);
+    });
+
+    it('transforms link syntax', () => {
+        let value = '[foo](http://google.com)';
+        let expected = [<a href="http://google.com" target="_blank">foo</a>];
+        expect(markupToReact(value)).toEqual(expected);
+
+        value = '[foo](http://google.com) bar';
+        expected = [<a href="http://google.com" target="_blank">foo</a>, ' bar'];
+        expect(markupToReact(value)).toEqual(expected);
+
+        value = 'bar [foo](http://google.com)';
+        expected = ['bar ', <a href="http://google.com" target="_blank">foo</a>];
+        expect(markupToReact(value)).toEqual(expected);
+
+        value = 'bar [foo](http://google.com) baz';
+        expected = ['bar ', <a href="http://google.com" target="_blank">foo</a>, ' baz'];
+        expect(markupToReact(value)).toEqual(expected);
+
+        value = '[foo](http://google.com)[bar](http://google.ca)';
+        expected = [
+            <a href="http://google.com" target="_blank">foo</a>,
+            <a href="http://google.ca" target="_blank">bar</a>
+        ];
+        expect(markupToReact(value)).toEqual(expected);
+    });
+
+    it('converts mixed syntax', () => {
+        let value = 'Bold **foo** link [foo](http://google.com) text';
+        let expected = [
+            'Bold ',
+            <b>foo</b>,
+            ' link ',
+            <a href="http://google.com" target="_blank">foo</a>,
+            ' text'
+        ];
+        expect(markupToReact(value)).toEqual(expected);
+    });
+});