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