]> git.localhorst.tv Git - alttp.git/blobdiff - resources/js/components/techniques/Detail.js
short circuit tech links
[alttp.git] / resources / js / components / techniques / Detail.js
index d586a9a159375e544d8b4f4bb0b04d8b3eb2299b..303921c4c919245ed5c66da8e1a7f4357d976705 100644 (file)
@@ -1,19 +1,27 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Container } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
 
 import Outline from './Outline';
+import RawHTML from '../common/RawHTML';
+import { getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
 
 const Detail = ({ technique }) => <Container as="article">
-       <h1>{technique.title}</h1>
+       <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
        <Outline technique={technique} />
-       <div dangerouslySetInnerHTML={{ __html: technique.description }} />
+       <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
        {technique.chapters ? technique.chapters.map(chapter =>
                <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
                        {chapter.pivot.level ?
-                               React.createElement(`h${chapter.pivot.level}`, {}, chapter.title)
+                               React.createElement(
+                                       `h${chapter.pivot.level}`,
+                                       {},
+                                       getTranslation(chapter, 'title', i18n.language),
+                               )
                        : null}
-                       <div dangerouslySetInnerHTML={{ __html: chapter.description }} />
+                       <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
                </section>
        ) : null}
 </Container>;
@@ -27,4 +35,4 @@ Detail.propTypes = {
        }),
 };
 
-export default Detail;
+export default withTranslation()(Detail);