basic content editing

[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 9d9534ed31f2d6831f883fa2ce043975e90958e7..8d5136dfc523c09e05efacfb99114b0912df2b07 100644 (file)
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, 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,
@@ -16,40 +17,71 @@ import {
 } from '../../helpers/Technique';
 import i18n from '../../i18n';
 
-const Detail = ({ technique }) => <Container as="article">
-       <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} />
-       <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),
-                               )
+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}
-       {getTranslation(technique, 'attribution', i18n.language) ?
-               <Alert variant="dark">
-                       <RawHTML html={getTranslation(technique, 'attribution', i18n.language)} />
-               </Alert>
-       : 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({
                })),
@@ -60,4 +92,4 @@ Detail.propTypes = {
        }),
 };
 
-export default withTranslation()(Detail);
+export default Detail;