status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added keys for bolding and linking for markup.js 

If you were to mix-and-match or use multiple markdown elements in one
string, this would cause a React key error. This fixes it by key-ing all
the things!
This commit is contained in:
Daniel Kaspo 2017-05-31 20:46:03 -04:00
parent 9d557785e3
commit 608f50ae1c
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
common/translations/markup.js
View File

@ -19,10 +19,12 @@ function linkify(mdString: string) {
return decodeHTMLEntities(parts[0]); return decodeHTMLEntities(parts[0]);
} }
const result = []; const result = [];
let key = 0;
let i = 0; let i = 0;
while (i + 1 < parts.length) { while (i + 1 < parts.length) {
result.push(decodeHTMLEntities(parts[i])); result.push(decodeHTMLEntities(parts[i]));
result.push(<a key={'linkify-' + i} href={parts[i + 2]} target="_blank">{parts[i + 1]}</a>); result.push(<a key={'linkify-' + key} href={parts[i + 2]} target="_blank">{parts[i + 1]}</a>);
key++;
i += 3; i += 3;
} }
result.push(decodeHTMLEntities(parts[parts.length - 1])); result.push(decodeHTMLEntities(parts[parts.length - 1]));
@ -35,10 +37,12 @@ export function markupToReact(mdString: string) {
return linkify(parts[0]); return linkify(parts[0]);
} }
let result = []; let result = [];
let key = 0;
let i = 0; let i = 0;
while (i + 1 < parts.length) { while (i + 1 < parts.length) {
result = result.concat(linkify(parts[i])); result = result.concat(linkify(parts[i]));
result.push(<b>{parts[i + 2]}</b>); result.push(<b key={'boldify-' + key}>{parts[i + 2]}</b>);
key++;
i += 3; i += 3;
} }
result = result.concat(linkify(parts.pop())); result = result.concat(linkify(parts.pop()));

26
spec/translations/markup.spec.js
View File

@ -10,47 +10,47 @@ describe('markupToReact', () => {
it('transforms bold syntax', () => { it('transforms bold syntax', () => {
let value = '**foo**'; let value = '**foo**';
let expected = [<b>foo</b>]; let expected = [<b key="boldify-0">foo</b>];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = '**foo** bar'; value = '**foo** bar';
expected = [<b>foo</b>, ' bar']; expected = [<b key="boldify-0">foo</b>, ' bar'];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = 'bar **foo**'; value = 'bar **foo**';
expected = ['bar ', <b>foo</b>]; expected = ['bar ', <b key="boldify-0">foo</b>];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = 'bar **foo** baz'; value = 'bar **foo** baz';
expected = ['bar ', <b>foo</b>, ' baz']; expected = ['bar ', <b key="boldify-0">foo</b>, ' baz'];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = '**foo****bar**'; value = '**foo****bar**';
expected = [<b>foo</b>, <b>bar</b>]; expected = [<b key="boldify-0">foo</b>, <b key="boldify-1">bar</b>];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
}); });
it('transforms link syntax', () => { it('transforms link syntax', () => {
let value = '[foo](http://google.com)'; let value = '[foo](http://google.com)';
let expected = [<a href="http://google.com" target="_blank">foo</a>]; let expected = [<a key="linkify-0" href="http://google.com" target="_blank">foo</a>];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = '[foo](http://google.com) bar'; value = '[foo](http://google.com) bar';
expected = [<a href="http://google.com" target="_blank">foo</a>, ' bar']; expected = [<a key="linkify-0" href="http://google.com" target="_blank">foo</a>, ' bar'];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = 'bar [foo](http://google.com)'; value = 'bar [foo](http://google.com)';
expected = ['bar ', <a href="http://google.com" target="_blank">foo</a>]; expected = ['bar ', <a key="linkify-0" href="http://google.com" target="_blank">foo</a>];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = 'bar [foo](http://google.com) baz'; value = 'bar [foo](http://google.com) baz';
expected = ['bar ', <a href="http://google.com" target="_blank">foo</a>, ' baz']; expected = ['bar ', <a key="linkify-0" href="http://google.com" target="_blank">foo</a>, ' baz'];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
value = '[foo](http://google.com)[bar](http://google.ca)'; value = '[foo](http://google.com)[bar](http://google.ca)';
expected = [ expected = [
<a href="http://google.com" target="_blank">foo</a>, <a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
<a href="http://google.ca" target="_blank">bar</a> <a key="linkify-1" href="http://google.ca" target="_blank">bar</a>
]; ];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);
}); });
@ -59,9 +59,9 @@ describe('markupToReact', () => {
let value = 'Bold **foo** link [foo](http://google.com) text'; let value = 'Bold **foo** link [foo](http://google.com) text';
let expected = [ let expected = [
'Bold ', 'Bold ',
<b>foo</b>, <b key="boldify-0">foo</b>,
' link ', ' link ',
<a href="http://google.com" target="_blank">foo</a>, <a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
' text' ' text'
]; ];
expect(markupToReact(value)).toEqual(expected); expect(markupToReact(value)).toEqual(expected);