1 import axios from 'axios';
2 import React from 'react';
3 import { withTranslation } from 'react-i18next';
5 import NotFound from './NotFound';
6 import ErrorBoundary from '../common/ErrorBoundary';
7 import ErrorMessage from '../common/ErrorMessage';
8 import Loading from '../common/Loading';
9 import Overview from '../techniques/Overview';
10 import { compareTranslation } from '../../helpers/Technique';
11 import i18n from '../../i18n';
13 const Techniques = () => {
14 const [error, setError] = React.useState(null);
15 const [loading, setLoading] = React.useState(true);
16 const [techniques, setTechniques] = React.useState([]);
18 React.useEffect(() => {
19 const ctrl = new AbortController();
21 window.document.title = i18n.t('techniques.heading');
32 setTechniques(response.data.sort(compareTranslation('title', i18n.language)));
44 React.useEffect(() => {
45 window.document.title = i18n.t('techniques.heading');
46 setTechniques(t => [...t].sort(compareTranslation('title', i18n.language)));
54 return <ErrorMessage error={error} />;
57 if (!techniques || !techniques.length) {
61 return <ErrorBoundary>
62 <Overview techniques={techniques} />
66 export default withTranslation()(Techniques);