]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/techniques/Detail.js
clean up manual tracking
[alttp.git] / 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;