linebreaks in tech attribution

[alttp.git] / resources / js / components / techniques / Detail.js

diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js
index 88ce5943b62c02447fc3c3c856fb0742377ed740..376a391698d108addcae83a51bed98b7aac77488 100644 (file)
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -1,15 +1,94 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
-const Detail = ({ technique }) => <Container>
-       <h1>{technique.title}</h1>
-       <div dangerouslySetInnerHTML={{ __html: technique.description }} />
-</Container>;
+import List from './List';
+import Outline from './Outline';
+import Requirements from './Requirements';
+import Rulesets from './Rulesets';
+import Icon from '../common/Icon';
+import RawHTML from '../common/RawHTML';
+import nl2br from '../../helpers/nl2br';
+import {
+       getRelations,
+       getTranslation,
+       hasRelations,
+       sorted,
+} from '../../helpers/Technique';
+import i18n from '../../i18n';
+
+const Detail = ({ actions, technique }) => {
+       const { t } = useTranslation();
+
+       return <Container as="article">
+               <div className="d-flex align-items-center justify-content-between">
+                       <h1>
+                               {getTranslation(technique, 'title', i18n.language)}
+                               {actions.editContent ?
+                                       <Button
+                                               className="ms-3"
+                                               onClick={() => actions.editContent(technique)}
+                                               size="sm"
+                                               title={t('button.edit')}
+                                               variant="outline-secondary"
+                                       >
+                                               <Icon.EDIT title="" />
+                                       </Button>
+                               : null}
+                       </h1>
+                       {technique && technique.rulesets ?
+                               <Rulesets technique={technique} />
+                       : null}
+               </div>
+               <Outline technique={technique} />
+               <Requirements technique={technique} />
+               <RawHTML html={getTranslation(technique, 'description', i18n.language)} />
+               {technique.chapters ? technique.chapters.map(chapter =>
+                       <section id={`c${chapter.id}`} key={`c${chapter.id}`}>
+                               {chapter.pivot.level ?
+                                       React.createElement(
+                                               `h${chapter.pivot.level}`,
+                                               {},
+                                               getTranslation(chapter, 'title', i18n.language),
+                                               actions.editContent ?
+                                                       <Button
+                                                               className="ms-3"
+                                                               onClick={() => actions.editContent(chapter)}
+                                                               size="sm"
+                                                               title={t('button.edit')}
+                                                               variant="outline-secondary"
+                                                       >
+                                                               <Icon.EDIT title="" />
+                                                       </Button>
+                                               : null,
+                                       )
+                               : null}
+                               <RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
+                       </section>
+               ) : null}
+               {hasRelations(technique, 'related') ? <>
+                       <h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
+                       <List techniques={sorted(getRelations(technique, 'related'))} />
+               </> : null}
+               {getTranslation(technique, 'attribution', i18n.language) ?
+                       <Alert variant="dark">
+                               {nl2br(getTranslation(technique, 'attribution', i18n.language))}
+                       </Alert>
+               : null}
+       </Container>;
+};
 
 Detail.propTypes = {
+       actions: PropTypes.shape({
+               editContent: PropTypes.func,
+       }),
        technique: PropTypes.shape({
+               chapters: PropTypes.arrayOf(PropTypes.shape({
+               })),
                description: PropTypes.string,
+               rulesets: PropTypes.shape({
+               }),
                title: PropTypes.string,
        }),
 };