resources/js/components/techniques/Detail.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Container } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import List from './List';
   7 import Outline from './Outline';
   8 import RawHTML from '../common/RawHTML';
   9 import {
  10         getRelations,
  11         getTranslation,
  12         hasRelations,
  13         sorted,
  14 } from '../../helpers/Technique';
  15 import i18n from '../../i18n';
  16
  17 const Detail = ({ technique }) => <Container as="article">
  18         <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
  19         <Outline technique={technique} />
  20         <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
  21         {technique.chapters ? technique.chapters.map(chapter =>
  22                 <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
  23                         {chapter.pivot.level ?
  24                                 React.createElement(
  25                                         `h${chapter.pivot.level}`,
  26                                         {},
  27                                         getTranslation(chapter, 'title', i18n.language),
  28                                 )
  29                         : null}
  30                         <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
  31                 </section>
  32         ) : null}
  33         {hasRelations(technique, 'related') ? <>
  34                 <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
  35                 <List techniques={sorted(getRelations(technique, 'related'))} />
  36         </> : null}
  37 </Container>;
  38
  39 Detail.propTypes = {
  40         technique: PropTypes.shape({
  41                 chapters: PropTypes.arrayOf(PropTypes.shape({
  42                 })),
  43                 description: PropTypes.string,
  44                 title: PropTypes.string,
  45         }),
  46 };
  47
  48 export default withTranslation()(Detail);