1 import axios from 'axios';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { withTranslation } from 'react-i18next';
6 import NotFound from './NotFound';
7 import ErrorBoundary from '../common/ErrorBoundary';
8 import ErrorMessage from '../common/ErrorMessage';
9 import Loading from '../common/Loading';
10 import Overview from '../techniques/Overview';
11 import { compareTranslation } from '../../helpers/Technique';
12 import i18n from '../../i18n';
14 const Techniques = ({ namespace, type }) => {
15 const [error, setError] = React.useState(null);
16 const [loading, setLoading] = React.useState(true);
17 const [techniques, setTechniques] = React.useState([]);
19 React.useEffect(() => {
20 const ctrl = new AbortController();
22 window.document.title = i18n.t(`${namespace}.heading`);
24 .get(`/api/content`, {
33 setTechniques(response.data.sort(compareTranslation('title', i18n.language)));
43 }, [namespace, type]);
45 React.useEffect(() => {
46 window.document.title = i18n.t(`${namespace}.heading`);
47 setTechniques(t => [...t].sort(compareTranslation('title', i18n.language)));
48 }, [namespace, i18n.language]);
55 return <ErrorMessage error={error} />;
58 if (!techniques || !techniques.length) {
62 return <ErrorBoundary>
63 <Overview namespace={namespace} techniques={techniques} />
67 Techniques.propTypes = {
68 namespace: PropTypes.string,
69 type: PropTypes.string,
72 export default withTranslation()(Techniques);