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 Rulesets from './Rulesets';
   9 import RawHTML from '../common/RawHTML';
  10 import {
  11         getRelations,
  12         getTranslation,
  13         hasRelations,
  14         sorted,
  15 } from '../../helpers/Technique';
  16 import i18n from '../../i18n';
  17
  18 const Detail = ({ technique }) => <Container as="article">
  19         <div className="d-flex align-items-center justify-content-between">
  20                 <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
  21                 {technique && technique.rulesets ?
  22                         <Rulesets technique={technique} />
  23                 : null}
  24         </div>
  25         <Outline technique={technique} />
  26         <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
  27         {technique.chapters ? technique.chapters.map(chapter =>
  28                 <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
  29                         {chapter.pivot.level ?
  30                                 React.createElement(
  31                                         `h${chapter.pivot.level}`,
  32                                         {},
  33                                         getTranslation(chapter, 'title', i18n.language),
  34                                 )
  35                         : null}
  36                         <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
  37                 </section>
  38         ) : null}
  39         {hasRelations(technique, 'related') ? <>
  40                 <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
  41                 <List techniques={sorted(getRelations(technique, 'related'))} />
  42         </> : null}
  43 </Container>;
  44
  45 Detail.propTypes = {
  46         technique: PropTypes.shape({
  47                 chapters: PropTypes.arrayOf(PropTypes.shape({
  48                 })),
  49                 description: PropTypes.string,
  50                 rulesets: PropTypes.shape({
  51                 }),
  52                 title: PropTypes.string,
  53         }),
  54 };
  55
  56 export default withTranslation()(Detail);