resources/js/components/techniques/Detail.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Alert, Button, Container } from 'react-bootstrap';
   4 import { useTranslation } 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 Icon from '../common/Icon';
  11 import RawHTML from '../common/RawHTML';
  12 import nl2br from '../../helpers/nl2br';
  13 import {
  14         getRelations,
  15         getTranslation,
  16         hasRelations,
  17         sorted,
  18 } from '../../helpers/Technique';
  19 import i18n from '../../i18n';
  20
  21 const Detail = ({ actions, technique }) => {
  22         const { t } = useTranslation();
  23
  24         return <Container as="article">
  25                 <div className="d-flex align-items-center justify-content-between">
  26                         <h1>
  27                                 {getTranslation(technique, 'title', i18n.language)}
  28                                 {actions.editContent ?
  29                                         <Button
  30                                                 className="ms-3"
  31                                                 onClick={() => actions.editContent(technique)}
  32                                                 size="sm"
  33                                                 title={t('button.edit')}
  34                                                 variant="outline-secondary"
  35                                         >
  36                                                 <Icon.EDIT title="" />
  37                                         </Button>
  38                                 : null}
  39                         </h1>
  40                         {technique && technique.rulesets ?
  41                                 <Rulesets technique={technique} />
  42                         : null}
  43                 </div>
  44                 <Outline technique={technique} />
  45                 <Requirements technique={technique} />
  46                 <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
  47                 {technique.chapters ? technique.chapters.map(chapter =>
  48                         <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
  49                                 {chapter.pivot.level ?
  50                                         React.createElement(
  51                                                 `h${chapter.pivot.level}`,
  52                                                 {},
  53                                                 getTranslation(chapter, 'title', i18n.language),
  54                                                 actions.editContent ?
  55                                                         <Button
  56                                                                 className="ms-3"
  57                                                                 onClick={() => actions.editContent(chapter)}
  58                                                                 size="sm"
  59                                                                 title={t('button.edit')}
  60                                                                 variant="outline-secondary"
  61                                                         >
  62                                                                 <Icon.EDIT title="" />
  63                                                         </Button>
  64                                                 : null,
  65                                         )
  66                                 : null}
  67                                 <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
  68                         </section>
  69                 ) : null}
  70                 {hasRelations(technique, 'related') ? <>
  71                         <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
  72                         <List techniques={sorted(getRelations(technique, 'related'))} />
  73                 </> : null}
  74                 {getTranslation(technique, 'attribution', i18n.language) ?
  75                         <Alert variant="dark">
  76                                 {nl2br(getTranslation(technique, 'attribution', i18n.language))}
  77                         </Alert>
  78                 : null}
  79         </Container>;
  80 };
  81
  82 Detail.propTypes = {
  83         actions: PropTypes.shape({
  84                 editContent: PropTypes.func,
  85         }),
  86         technique: PropTypes.shape({
  87                 chapters: PropTypes.arrayOf(PropTypes.shape({
  88                 })),
  89                 description: PropTypes.string,
  90                 rulesets: PropTypes.shape({
  91                 }),
  92                 title: PropTypes.string,
  93         }),
  94 };
  95
  96 export default Detail;