resources/js/components/techniques/Detail.js

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