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>;
}),
};
-export default Detail;
+export default withTranslation()(Detail);