import PropTypes from 'prop-types';
import React from 'react';
-import { Container } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
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 {
getRelations,
} from '../../helpers/Technique';
import i18n from '../../i18n';
-const Detail = ({ technique }) => <Container as="article">
- <h1>{getTranslation(technique, 'title', i18n.language)}</h1>
- <Outline 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),
- )
+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}
- <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>;
+ </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">
+ <RawHTML html={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,
}),
};
-export default withTranslation()(Detail);
+export default Detail;