tech ruleset classification

[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 d955397399668d86d2d030f01c9cb2de8fb6d3b0..665392365b40120b0c9834fa01eeb5d7d145b7d2 100644 (file)
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -3,16 +3,27 @@ import React from 'react';
 import { Container } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
+import List from './List';
 import Outline from './Outline';
-import { getTranslation } from '../../helpers/Technique';
+import Rulesets from './Rulesets';
+import RawHTML from '../common/RawHTML';
+import {
+       getRelations,
+       getTranslation,
+       hasRelations,
+       sorted,
+} from '../../helpers/Technique';
 import i18n from '../../i18n';
 
 const Detail = ({ technique }) => <Container as="article">
-       <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
+       <div className="d-flex align-items-center justify-content-between">
+               <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
+               {technique && technique.rulesets ?
+                       <Rulesets technique={technique} />
+               : null}
+       </div>
        <Outline technique={technique} />
-       <div dangerouslySetInnerHTML={{
-               __html: getTranslation(technique, 'description', i18n.language),
-       }} />
+       <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 ?
@@ -22,11 +33,13 @@ const Detail = ({ technique }) => <Container as="article">
                                        getTranslation(chapter, 'title', i18n.language),
                                )
                        : null}
-                       <div dangerouslySetInnerHTML={{
-                               __html: getTranslation(chapter, 'description', i18n.language),
-                       }} />
+                       <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}
 </Container>;
 
 Detail.propTypes = {
@@ -34,6 +47,8 @@ Detail.propTypes = {
                chapters: PropTypes.arrayOf(PropTypes.shape({
                })),
                description: PropTypes.string,
+               rulesets: PropTypes.shape({
+               }),
                title: PropTypes.string,
        }),
 };