resources/js/components/techniques/Outline.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { ListGroup } from 'react-bootstrap';
   4 import { withTranslation } from 'react-i18next';
   5
   6 import { getTranslation } from '../../helpers/Technique';
   7 import i18n from '../../i18n';
   8
   9 const Outline = ({ technique }) => technique.chapters && technique.chapters.length ?
  10         <aside className="tech-outline mb-3 ms-3">
  11                 <ListGroup>
  12                         {technique.chapters.map(chapter => chapter.pivot.level ?
  13                                 <ListGroup.Item
  14                                         action
  15                                         href={`#c${chapter.id}`}
  16                                         key={`c${chapter.id}`}
  17                                         title={getTranslation(chapter, 'short', i18n.language) || null}
  18                                 >
  19                                         {getTranslation(chapter, 'title', i18n.language)}
  20                                 </ListGroup.Item>
  21                         : null)}
  22                 </ListGroup>
  23         </aside>
  24 : null;
  25
  26 Outline.propTypes = {
  27         technique: PropTypes.shape({
  28                 chapters: PropTypes.arrayOf(PropTypes.shape({
  29                 })),
  30         }),
  31 };
  32
  33 export default withTranslation()(Outline);