random comments on profile page

[alttp.git] / resources / js / components / techniques / Detail.js

diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js
index 88ce5943b62c02447fc3c3c856fb0742377ed740..d955397399668d86d2d030f01c9cb2de8fb6d3b0 100644 (file)
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -1,17 +1,41 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Container } from 'react-bootstrap';
+import { withTranslation } from 'react-i18next';
 
-const Detail = ({ technique }) => <Container>
-       <h1>{technique.title}</h1>
-       <div dangerouslySetInnerHTML={{ __html: technique.description }} />
+import Outline from './Outline';
+import { getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
+
+const Detail = ({ technique }) => <Container as="article">
+       <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
+       <Outline technique={technique} />
+       <div dangerouslySetInnerHTML={{
+               __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}`,
+                                       {},
+                                       getTranslation(chapter, 'title', i18n.language),
+                               )
+                       : null}
+                       <div dangerouslySetInnerHTML={{
+                               __html: getTranslation(chapter, 'description', i18n.language),
+                       }} />
+               </section>
+       ) : null}
 </Container>;
 
 Detail.propTypes = {
        technique: PropTypes.shape({
+               chapters: PropTypes.arrayOf(PropTypes.shape({
+               })),
                description: PropTypes.string,
                title: PropTypes.string,
        }),
 };
 
-export default Detail;
+export default withTranslation()(Detail);